How to build a Klaviyo dynamic image template

Klaviyo profiles are unusually rich. Every viewed product, every order, the city from the last checkout, custom properties synced from Shopify. Most of that data never makes it into the creative, because the hero image is the same file for everyone.

A Klaviyo dynamic image template fixes that. You build a personalized image once, wrap it in a reusable block, and use it across campaigns and flows. Here's how to set it up with Alterable, including the Klaviyo quirks that cause most failed attempts.

How dynamic images work in Klaviyo

A dynamic image is an image address with parameters in it. In Klaviyo, you fill those parameters with Klaviyo's template tags, so each profile's values are written into their own copy of the email. When the email is opened, Alterable draws the image with those values.

Klaviyo's job is the data. Alterable's job is the artwork.

Step 1: Build the image in Alterable

  1. Open Alterable's dynamic image builder and upload your artwork.
  2. Add text layers for each personal value, like first name, city, or points, and set each as a variable.
  3. Set a fallback for each variable, for profiles missing that data.
  4. Add rules if the image should change by location, device, language, time of day, or weather.
  5. Copy the embed. It's a link around an image, with a placeholder where each Klaviyo tag goes.

Step 2: Swap in Klaviyo template tags

Replace each placeholder with the matching Klaviyo tag. This is where two quirks matter.

First, first_name and last_name are special. Write them directly, as {{ first_name }}. Every other profile property goes through person, as in {{ person.city }} or {{ person.loyalty_points }}.

Second, tags are case sensitive and must match the property name exactly. A property saved as "City" won't answer to "city." There's no error. The value just arrives empty and the image falls back to its default.

Always add a default filter too: {{ first_name|default:'there' }}. Klaviyo also has a urlencode filter for values that might contain spaces or special characters, which keeps the image address valid.

In flows, event data is available as well. In an abandoned checkout flow, a tag like {{ event.extra.line_items.0.product.title }} puts the product someone left behind into the artwork.

Step 3: Add it to a Klaviyo HTML block

  1. Open the campaign or flow email in Klaviyo's editor.
  2. Drag an HTML block from the basic blocks into the layout.
  3. Paste your embed, with the Klaviyo tags in place.
  4. Save.

Use the HTML block rather than the image block. The HTML block is what lets tags render inside the image address. If you've been pasting code through the source view of text blocks, move it to an HTML block, since Klaviyo is retiring source-code editing in text-type blocks.

Step 4: Turn it into a reusable template

Once the block works, save it so your team can reuse it. Klaviyo's universal content lets you save a block and drop it into any email, and editing the universal block updates it everywhere it's used. That's ideal for things like a personalized loyalty header you want in every campaign.

You can also save a full email template with the dynamic image already in place, for flows and campaigns that share a layout.

And remember that the artwork itself lives in Alterable. Change the design there, like a seasonal color update, and every email using that image updates on the next open, without touching Klaviyo at all.

Step 5: Preview against real profiles

Klaviyo's preview is excellent for this, as long as you point it at someone. In Preview & test, pick a real profile, and for a flow email pick one of their recent events. The tags resolve and the image draws with that profile's data.

Then pick a profile that's missing each property and confirm your defaults look right. That profile is on every list you'll ever send to.

Template ideas that suit Klaviyo

A loyalty header showing each profile's points and tier works well for brands syncing a rewards program. A welcome banner with the subscriber's name sets the tone for a welcome flow. An abandoned checkout image with the product left behind makes cart reminders specific. A location banner using the profile's city can change the offer by region or weather. And a birthday image with the subscriber's name suits Klaviyo's date-triggered flows.

Why Alterable for Klaviyo

Alterable has a dedicated Klaviyo setup guide and works with Klaviyo's tags exactly as shown here. The same account covers countdown timers, dynamic product blocks, store maps, surveys, and scratch cards, all using the same HTML block approach. The free plan includes 10,000 impressions a month with no watermark. Pro, at $49 a month, adds A/B testing, unlimited rule-based versions, and API access for larger programs.

Start with one reusable module, like a loyalty header, and put it in every campaign for a month. It's the fastest way to find out how much your Klaviyo data has been waiting to show up in the creative.

Our online store requires the use of Cookies. Please enable Cookies on your browser and refresh the page. For instructions to enable Cookies on major browsers, please click here.
Select Language:  English English  | Currency: