DPA Frames

1. 1

   Understand what you are holding

   The template is a picture address with gaps in it. The frame is a single hosted picture and the price is not in it. Where the price should go, the address carries a marked word such as price or sale price. Everything else about the address is fixed. Pick the marker style your platform expects before building, and if you are not sure, send the double brace version and ask them which they want.

2. 2

   Send it to whoever manages the feed

   Whoever that is, the ask is the same: add a computed column called image link, built from this template, replacing each marked word with the matching live column from the catalogue. Every feed platform can do this, whether that is Intelligent Reach, Channable, DataFeedWatch, Feedonomics, a Shopify app or a spreadsheet somebody maintains by hand. It is the same job as building a tracking address.

3. 3

   They point the catalogue at that column

   From then on the feed carries a picture address per product that already has the right price written into it. No supplementary feed and no uploading from here. If different clients sit on different platforms, build a template per client with the matching marker style; the frame picture can be shared or separate as you prefer.

4. 4

   What happens when a price changes

   The feed rebuilds on its usual schedule, so the address changes, and the picture is drawn fresh the first time anything asks for it. After that it is cached and served like any other image. Nobody presses a button, including you.

5. 5

   Check one product before it goes live

   Ask them for one finished address, paste it into a browser, and look at it. If the price is in the right place and the right size, the rest will follow. If the text sits wrong, move the layer here, build the template again, and send the new one.

This route and the batch render do the same job by different means. The template suits prices that change often, since it needs no attention. Batch render suits designs the template cannot express, because anything drawn this way has to be plain text in one of the fonts the image library keeps.

1. 1

   Create the account

   Go to cloudinary.com and sign up for the free plan. Use a shared Nest address rather than your own, so the account outlives whoever set it up. The pictures have to stay online for as long as the adverts run, so this account matters.

2. 2

   Find the account name

   On the dashboard you will see a cloud name. Copy it into the Account name box. It is usually something like the company name with a number after it.

3. 3

   Make an upload preset

   Go to Settings, then Upload, then Upload presets, and add a new one. Set the signing mode to unsigned. Name it something you will recognise, for example dpa-frames, and copy that name into the Upload preset box.

4. 4

   Set how the pictures are named

   In the same preset, choose to use the filename of the uploaded file as the public identifier, and turn off Append a unique suffix. You will notice there is no option to allow overwriting. Cloudinary does not permit it on this kind of preset, so the tool gives every run its own name instead. The practical effect is that re-rendering produces new addresses and you upload the new feed file to Meta each time.

5. 5

   Test it

   Come back here and press Test the connection. It sends one tiny picture and tells you whether everything is set up correctly. Do this before a large run.

On the free plan you get a generous monthly allowance, which is plenty for testing and for most single campaigns. Whole catalogues of tens of thousands of products will need a paid plan, so keep an eye on the usage figure on the Cloudinary dashboard before committing a client to this.

1. 1

   Load the products

   Three ways in. Drag any image straight onto the canvas to preview against. Paste product page addresses and the tool pulls the pictures, prices and titles in. Or drop a catalogue feed file, in XML or CSV, which is the one to use if you plan to render the whole catalogue, because only a real feed carries the catalogue's own product codes.

   Where a product page offers several photographs you can choose which one to use across the whole feed, and a layout with two windows takes a different view in each. Position, zoom and rotation carry across every product, so you place the picture once.

2. 2

   Pick a frame, then make it yours

   Start from a preset. Each one lands as fully editable layers, so the colour, thickness, caption depth and edge treatment are all yours to change, and the lettering on the film and polaroid presets can be rewritten and set in any font. Add more layers for a different treatment on each side.

   Drop the brand's own font file into Brand fonts and it appears in every font list in the tool, including the preset lettering. It stays in your browser and is baked into whatever you export.

3. 3

   Add text, stickers and the logo

   Drag anything on the canvas to position it. Every text layer gets its own box beside the artwork, where you set where the line breaks, the size, tilt, font and colour, and Keep inside the frame shrinks a long title rather than letting it run past the edge.

   Text marked as dynamic pulls live values from the catalogue. A single transparent PNG cannot carry a value that changes per product, so those lines are left out of it and drawn with the real value when you render the feed instead. Was and Now hide themselves on a product that is not actually reduced.

4. 4

   Export, or render the whole catalogue

   Download PNG gives you the transparent frame on its own, to upload as an overlay in Ads Manager. Quick, but you are limited to what Meta's overlay can draw.

   Batch render draws the design onto every product in the feed and hands you a zip of finished pictures plus a feed file that swaps the pictures on the catalogue and nothing else. Set it to render the first few for a test before committing to thousands. Pictures can upload themselves to your image library as they render, so there is no folder to move by hand, and every batch is kept so you can download the zip again without re-rendering.

Prices are drawn into the picture, so a batch render is a snapshot. Two ways to keep it current: Check the feed and re-render what changed compares today's feed against what each product was priced at and redraws only the movers, or the live price template hosts the frame once and lets your feed platform write the price into the picture address, so prices update with no button press at all.