How to Add Dynamic Images in Klaviyo

Klaviyo profiles are unusually rich. Every viewed product, every placed order, the city from the last checkout, the properties your Shopify sync pushes across. Most of it never reaches the creative, because the hero image is the same file for everyone. A dynamic image fixes that with a single image URL that resolves per subscriber at the moment they open.

Klaviyo dynamic images use the same mechanism as a countdown timer, plus one step: the image URL carries parameters, and you fill each one with a Klaviyo tag. Klaviyo’s tag syntax has two quirks that cause most failed attempts, and both are in Step 2.

Step 1: Build the image in Alterable

1. Open the dynamic image tool, design the artwork, and add a variable wherever a subscriber’s own value should appear.

2. Add rules if the image should change by condition: location, device, language, time of day or weather.

3. Copy the embed. It’s a link around the image, with one parameter per variable and MERGE_TAG left where each value goes:

   <a href="https://next.alterable.com/dynamic-images/click/YOUR-IMAGE-ID">
       <img src="https://next.alterable.com/dynamic-images/YOUR-IMAGE-ID.png?firstname=MERGE_TAG" />
   </a>

Step 2: Swap the values for Klaviyo tags

Replace each MERGE_TAG with the matching Klaviyo tag:

<a href="https://next.alterable.com/dynamic-images/click/YOUR-IMAGE-ID">
    <img src="https://next.alterable.com/dynamic-images/YOUR-IMAGE-ID.png?firstname={{ first_name|default:'there' }}" />
</a>

The two quirks:

• first_name and last_name are special. Write them directly. Every other profile property goes through person, as in person.city or person.favorite_color.
• Tags are case sensitive and must match the property name exactly. A property saved as City will not answer to city, and the failure is silent: the parameter arrives empty and the image renders with a gap.

Always add a default filter. A subscriber with no first name should still get a sensible image rather than one built from nothing. In a flow, event data is available too: {{ event.extra.line_items.0.product.title }} in an abandoned-checkout flow puts the product they left behind into the artwork.

Step 3: Add it to your Klaviyo email

1. Open the campaign or flow email in the editor.

2. From the sidebar’s Basic blocks, drag an HTML block into the layout.

3. Paste your image tag into the block. It has to be the HTML block rather than the image block, because that’s what lets tags render inside the URL.

4. Save.

If you’ve been pasting code through the source view of a text block, move it here. Klaviyo is retiring source-code editing in text, table and split blocks and migrating existing templates to the HTML block.

Checking it against a real profile

Klaviyo’s preview is the best in this set, provided you point it at someone. In Preview & test, pick a real profile, and for a flow email pick one of the recent events too. The tags resolve and the image draws with that subscriber’s data. Then pick a profile that’s missing the property and confirm your default is what shows up, because that subscriber is on every list you’ll ever send to.

Leave the preview on a generic profile and you’ll see a broken image, since there’s nothing to fill first_name with. That isn’t a setup failure. It’s the preview asking which person to render for.

The image is rendered when it’s requested, not when the email is sent, so a subscriber who opens twice gets it drawn twice against whatever is true at that moment. That’s the property that makes weather, stock and countdown conditions worth building into the artwork, and it’s the same across campaigns and every email in a flow.