How to use dynamic variables

Dynamic variables are placeholders inside your template that get swapped for real values every time you generate an image. Instead of building one template per product, you build a single template and let variables fill in the details — product name, price, photo, QR code, and anything else that changes between outputs.

The result: one template can produce hundreds or thousands of unique images, each tailored to a specific product, promotion, or marketplace.

Why dynamic variables matter

Without variables, every visual variation requires its own template. A catalog of 500 products would need 500 templates — each one created, updated, and maintained by hand.

With variables, that same catalog needs one template. You pass different values at generation time, and PixelFiddler produces a unique image for each product. When your brand guidelines change, you update the single template and regenerate everything.

Tip

Dynamic variables are ideal for any workflow where the layout stays the same but the content changes — product cards, sale banners, social media posts, pricing displays, and more.

Types of variables

PixelFiddler supports two variable types. Each one corresponds to a different kind of content you can swap at generation time.

Text variable (STRING)

A text variable replaces a piece of text in your template. Use it for anything that is written content:

• Product names
• Prices and discount percentages
• Descriptions and taglines
• Call-to-action labels
• Date ranges for promotions

When you define a text layer in the editor, the text content you enter acts as the default value. At generation time, you pass a new string value and the layer updates automatically.

Image variable (MEDIA_SOURCE_PATH)

An image variable swaps the visual content of an image layer. Instead of showing the same photo every time, the layer pulls a different image from your storage:

• Product photos
• Category hero images
• Brand partner logos
• Lifestyle shots per campaign

Each image variable references a storage ID and a file path within your connected storage. When you generate the image, you point the variable to a different file and the layer renders that file instead.

Note

Image variables work with any connected storage — Hosted storage, AWS S3, Google Cloud Storage, Azure Blob Storage, or HTTP sources. The file must exist in the referenced storage at generation time.

QR code and barcode content

If your template includes a Barcode layer (currently QR code only), the encoded content can also be driven by a variable. This means you can generate product-specific QR codes that link to individual product pages, unique discount URLs, or tracking links — all from the same template.

Setting up variables in the editor

Variables are created as part of your normal template design workflow. There is no separate “variable setup” step — you simply mark certain layer properties as variable when you build your template.

Making text content variable

1. Open your template in the Template editor
2. Add or select a Text layer
3. Enter a default text value (this is what appears in the preview)
4. Give the layer a descriptive name — for example, product-name or sale-price

The layer name is what you reference when passing variable values at generation time. Choose names that clearly describe what the content represents.

Making an image layer variable

1. Add or select an Image layer
2. Set a default image — this is the image that displays in the preview and serves as the fallback
3. Give the layer a clear name — for example, product-photo or hero-image

At generation time, you override the default image by passing a new storage ID and file path through a MEDIA_SOURCE_PATH variable.

Making QR code content variable

1. Add or select a Barcode layer (for example, a QR code)
2. Enter default content — such as a placeholder URL
3. Give the layer a descriptive name — for example, product-qr

When generating, pass a STRING variable targeting that layer name with the actual URL or data you want encoded.

Example workflow: sale banner for multiple products

Suppose your e-commerce store runs a seasonal sale and needs a unique banner for every product. Here is how you would approach it with dynamic variables.

Step 1: Design the template

Create a template called sale-banner with the following layers:

Layer name	Layer type	Variable?	Purpose
background	Image	No	Fixed promotional background
brand-logo	Image	No	Your company logo, always the same
product-photo	Image	Yes	Swapped per product
product-name	Text	Yes	Product title, changes per item
sale-price	Text	Yes	The discounted price
product-qr	Barcode (QR)	Yes	Link to the product page

The background, logo, and overall layout remain constant. Only the four variable layers change between outputs.

Step 2: Generate for Product A

Pass the following variable values when generating:

• product-photo — points to products/running-shoes.jpg in your storage
• product-name — “Running Shoes”
• sale-price — “$79.99”
• product-qr — “https://yourstore.com/running-shoes”

PixelFiddler renders the template, substitutes every variable, and saves the finished image to your chosen output path.

Step 3: Generate for Product B

Use the exact same template with different values:

• product-photo — points to products/leather-bag.jpg
• product-name — “Leather Bag”
• sale-price — “$149.99”
• product-qr — “https://yourstore.com/leather-bag”

Same layout, same branding, completely different product image.

Tip

Name your generated output files based on the product — for example, banners/running-shoes-sale.png — so you can easily find and manage them in your storage.

Passing variables at generation time

When you are ready to generate an image, you send a request to PixelFiddler that includes three things:

1. The template — either by referencing a saved template name or by providing an inline template definition
2. The output file path — where the generated image should be saved in your storage
3. The variable list — each variable specifies a layer name, a variable type, and the value to substitute

For each variable, you tell PixelFiddler:

• Which layer to target (using the layer name you defined in the editor)
• What type of variable it is (STRING for text content, MEDIA_SOURCE_PATH for images)
• What value to inject (the replacement text or the path to the replacement image)

PixelFiddler matches each variable to its corresponding layer, applies the substitution, composites all layers together, and saves the result.

Caution

Variable names must match the layer names in your template exactly. If a variable name does not match any layer, it is silently skipped. Double-check your layer names if a substitution does not appear in the output.

Common use cases

Dynamic variables unlock a wide range of automated image workflows. Here are the most popular ones.

Seasonal sale banners for your entire catalog

Design one sale banner template with variable product image, name, and price layers. Loop through your product catalog and generate a unique banner for each item. When the sale ends, swap the background and regenerate — no need to redesign anything.

Marketplace-specific product cards

Different marketplaces have different image requirements — dimensions, text placement, branding rules. Create a template per marketplace format, use the same set of product variables, and generate platform-ready images for Amazon, eBay, Shopify, and others in one batch.

Social media posts per product

Build a branded social post template with space for the product image and a headline. Generate a unique post image for every product launch, restocking event, or price drop. The brand stays consistent while the content stays fresh.

Dynamic pricing displays

For businesses with fluctuating prices — airlines, hotels, event tickets — variables let you generate up-to-date pricing images on demand. Pass the current price as a text variable and produce a fresh image every time the price changes.

Personalized promotional images

Combine customer data with your template to create personalized visuals. Pass a customer’s name, loyalty tier, or recommended product into the template to generate one-of-a-kind promotional images at scale.

Best practices

Use descriptive layer names. Names like product-name and hero-image make your templates easy to work with, especially when passing variables through automation. Avoid generic names like text-1 or layer-3.

Set meaningful defaults. The default text and default image are what you see in the template preview. Choose representative defaults so the preview looks realistic and your team can evaluate the design before generating at scale.

Keep fixed elements fixed. Not every layer needs to be variable. Logos, backgrounds, decorative shapes, and brand elements should typically stay constant so your outputs remain consistent.

Organize your storage. When using image variables, keep your product images in a structured folder hierarchy — for example, products/shoes/, products/bags/. This makes it straightforward to build file paths when generating in bulk.

Next steps

Now that you understand how dynamic variables work, explore these related guides:

Image Templates overview

Generate images from templates

Templates reference