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.

Beside the artwork sits a panel of layers — the picture windows, and a box for every piece of wording. A frame with two or more windows names them individually (Polaroid #1 and #2, or Window #1 to #4), and each can be sized, tilted and repositioned on its own, with Reset putting it back. Animate the preview brings the frame to life in whatever way suits it, and anything you have added travels with it unless you untick Move with the frame on that layer. The download is always a still.

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.

Keep the frame picture where it is. Every address depends on it.

Done

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.

Beside the artwork sits a panel of layers — the picture windows, and a box for every piece of wording. A frame with two or more windows names them individually (Polaroid #1 and #2, or Window #1 to #4), and each can be sized, tilted and repositioned on its own, with Reset putting it back. Animate the preview brings the frame to life in whatever way suits it, and anything you have added travels with it unless you untick Move with the frame on that layer. The download is always a still.

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.

The preset name is not a password. It only allows uploads into this one account.

Done

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.

   You can drop a video here too, and it plays behind the frame. Meta serves catalogue video from its own field rather than the image one, so an animated design exports as an MP4 and the feed file writes to video[0].url. It needs a direct link to the file, under 100 MB and 15 to 20 seconds, and Dynamic Media has to be switched on in Commerce Manager and again at ad level, or the catalogue keeps serving the still.

2. 2

   Choose the canvas format

   Three formats, top right of the artwork. 1:1 for the feed, 4:5 for the taller feed placements, and 9:16 for stories and reels. Switch at any time: every frame reflows to the new shape rather than being stretched, and the picture window stays a true 4:5 whichever you pick.

   If a design only works on one shape, tick Design each format separately under those buttons and each format keeps its own frame and wording, saved with the layout. Leave it off and one design serves all three.

3. 3

   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.

4. 4

   Add text, stickers and the logo

   + Add text sits at the foot of the panel beside the artwork and works on any frame. Each piece of wording gets its own box there, with a line-break control, size, tilt, any font including ones you have dropped in yourself, and a colour picker. Press Return in the box for a second line. Drag anything on the canvas to place it, and text marked dynamic pulls live values from the catalogue.

   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.

5. 5

   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.

Beside the artwork sits a panel of layers — the picture windows, and a box for every piece of wording. A frame with two or more windows names them individually (Polaroid #1 and #2, or Window #1 to #4), and each can be sized, tilted and repositioned on its own, with Reset putting it back. Animate the preview brings the frame to life in whatever way suits it, and anything you have added travels with it unless you untick Move with the frame on that layer. The download is always a still.

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.

Turn off Advantage+ creative enhancements on any advert using this, or Meta's own image touch-ups override the design.

Step by step tutorial