DEV Community: Pedro Barros

Klaviyo Campaigns vs. Flows: Explained Simply

Pedro Barros — Sun, 06 Sep 2026 15:47:04 +0000

If you're using Klaviyo with Shopify, you'll likely work with 2 important features: Campaigns and Flows.

They both let you send marketing messages to customers, but they work in different ways.

First, What Is Klaviyo?

Klaviyo is a customer data and marketing automation platform commonly used by e-commerce businesses, especially Shopify stores.

It helps businesses collect customer data, create customer segments, and send personalized email and SMS messages.

For example, you can use Klaviyo to send welcome emails, abandoned cart reminders, post-purchase messages, and promotional emails.

Two of the main ways to send these messages are Campaigns and Flows.

Campaigns vs. Flows

The simplest way to understand the difference is:

Campaign = a one-time message sent to an audience.

Flow = an automated message or sequence triggered by customer behavior.

Let's break down each one.

Campaigns

A Campaign is a one-time email or SMS message that you send to a specific audience.

You decide:

Who receives it
What the message says
When it is sent

For example, you might send a campaign for:

A Black Friday sale
A new product launch
A weekly newsletter
A holiday promotion
A new collection

Example

You want to announce a summer sale.

You create an email:

Summer Sale — 30% Off Everything

Then you select your audience and schedule the campaign for Friday at 9 AM.

The email is sent once to the selected audience.

Create Campaign
      ↓
Select Audience
      ↓
Create Email
      ↓
Schedule / Send
      ↓
Customers Receive Email

Flows

A Flow is an automated sequence that starts when a customer performs an action or meets a specific condition.

You create the flow once, and Klaviyo automatically sends the messages based on the flow's timing and conditions.

Common examples include:

Welcome emails
Abandoned cart reminders
Post-purchase follow-ups
Browse abandonment reminders
Win-back emails
Review requests

Example: Welcome Flow

Someone subscribes to your email list.

That action can trigger a Welcome Flow:

Customer subscribes
     ↓
Immediately
Welcome Email
     ↓
3 days later
Brand Story Email
     ↓
7 days later
Discount Offer

Klaviyo automatically sends each message based on the timing you set.

Example: Post-Purchase Flow

A customer completes an order.

You can automatically send:

Customer places order
     ↓
Thank You Email
     ↓
Product Education Email
     ↓
Review Request
     ↓
Cross-Sell Recommendation

The messages can be customized based on your customer's actions and data.

Quick Comparison

	Campaign	Flow
Type	One-time	Automated
Trigger	Manual send	Customer action or event
Timing	You choose	Based on the flow
Audience	List or segment	Customers who enter the flow
Automation	No	Yes
Example	Black Friday Sale	Welcome Flow

Conclusion

Campaigns and Flows serve different purposes in Klaviyo:

Campaigns are for one-time messages.

Flows are for automated customer journeys.

If you're managing Klaviyo for a Shopify store, understanding this distinction is important because the two features work together rather than replacing each other.

Use Flows to automate repetitive marketing tasks and Campaigns when you want to communicate with your audience about something specific at a particular time.

3 Ways to Add Custom Color and Image Swatches to Shopify

Pedro Barros — Wed, 02 Sep 2026 08:15:57 +0000

I've implemented Shopify swatches in different ways before, but I noticed that some clients weren't familiar with color swatches or how to set them up properly. So, in this article, I'll explain 3 different ways to implement custom color and image swatches in Shopify stores.

What Are Shopify Color Swatches?

Color swatches are a visual way to display product options, such as colors, patterns, materials, or finishes.

Instead of showing product options as a traditional dropdown or text list:

A store can display visual options:

Depending on the implementation, a swatch can be a simple CSS color, a custom image, or a product image.

Swatches can be useful on:

Product pages
Collection pages
Search results
Quick-view components

They allow customers to understand product variants more quickly and can make the shopping experience much more visual. There are several ways to implement this on Shopify. The right approach depends on the theme, the store's requirements, and how much customization is needed.

In this article, I'll cover 3 common approaches:

Shopify Native Color Swatches - Using Category Metafields
Filename-Based Swatches - Using Shopify Files in Older Themes
Third-Party Shopify Apps

Each approach has its own advantages and limitations, so the right choice depends on the store's existing setup and requirements.

Approach 1: Shopify Native Color Swatches - Using Category Metafields

For modern Shopify stores, the native swatch functionality should generally be the first approach to consider.

Shopify's Standard Product Taxonomy provides category metafields for product attributes such as color. These category metafields can be connected to product variant options, allowing compatible themes to use the associated color or image information to display swatches.
When a product is assigned to a category that supports a color category metafield, you can add or customize color entries and connect that category metafield to the product's Color variant option.
Shopify-compatible themes can then use those values to display color swatches.

How it works

First, assign an appropriate product category to the product. This can unlock a Color category metafield.

You can then add or edit the color entries that you want to use.

For example:

Color
├── Black 
├── Navy 
├── Forest Green 
└── White

Each color entry can contain the information Shopify needs to represent the swatch, including a color value or an image.

Next, connect the Color category metafield to the product's Color variant option.

For example:

Color variant option 
├── Black 
├── Navy 
├── Forest Green 
└── White

The option values are now associated with the corresponding color entries.

If the theme supports Shopify's native swatches, the theme can render these values automatically as swatches. In themes such as Dawn, the variant picker can use the swatch information supplied by Shopify.

Theme customization

One of the biggest advantages of the native approach is that the swatch data is already exposed to the theme through Liquid.

Shopify provides a swatch object with properties such as:

{{ value.swatch.color }}
{{ value.swatch.image }}

A simplified example could look like:

{% for value in product_option.values %}
  {% if value.swatch %}
    {% if value.swatch.image %}
      <img src="{{ value.swatch.image | image_url: width: 48 }}" alt="{{ value }}">
    {% elsif value.swatch.color %}
      <span style="background-color: {{ value.swatch.color }}"></span>
    {% endif %}
  {% endif %}
{% endfor %}

This is a simplified example. A production variant picker also needs to handle accessibility, selected states, unavailable variants, variant URLs, and JavaScript interactions.

The exact implementation depends on the theme, but the important point is that Shopify provides the swatch data directly, so you don't need to build your own filename-matching system.

Shopify's official swatch implementation also allows themes to control how swatches look and behave, including their shape, styling, and variant-selection behavior.

Advantages

Native Shopify functionality
No third-party app required
Structured and reusable color data
Supports both color and image swatches
Color entries can be reused across products
Works well with modern Shopify themes
Less custom swatch-mapping code compared with older approaches

Considerations

Your theme needs to support Shopify's native swatches. Shopify notes that compatible themes can display the swatches automatically, while older or unsupported themes may require theme code customization.

For a new Shopify store, this is usually the approach I'd check first.

Approach 2: Filename-Based Swatches - Using Shopify Files in Older Themes

Before Shopify's native swatch functionality became available, a common approach was to upload swatch images to Shopify Admin → Content → Files and use the product option value to determine which image should be displayed.

For example, you could upload:

black.png
white.png
navy.png
forest-green.png

Custom theme code can convert the option value into a filename and use that filename to locate the corresponding swatch image.

For example:

Black → black.png 
Navy → navy.png 
Forest Green → forest-green.png 
White → white.png

A simplified example of the kind of Liquid logic used in older themes might look like this:

{% for value in product_option.values %} 
  <span
    class="swatch"
    style=" background-image: url( {{ value | handle | append: '.png' | file_img_url: '48x48' }} ); " 
  ></span> 
{% endfor %}

The theme's Liquid/JavaScript logic can map the product option value to the corresponding file.

forest-green

and the theme looks for:

forest-green.png

Why this approach was popular

It was relatively simple and didn't require an app or additional structured data.

It also gave merchants the ability to use custom images for colors, patterns, materials, or finishes.

However, it relies heavily on a specific naming convention.

If the product option is:

Forest Green

but the uploaded file is:

forest-green-swatch.png

the theme code needs to account for that difference.

This approach can therefore become difficult to maintain as the number of products and colors grows.

When does this approach still make sense?

I'd mainly consider this approach when working with an older Shopify theme or an existing store that already uses filename-based swatches.

If you're building a new implementation today, I'd first check whether Shopify's native swatch functionality can meet the requirements.

Approach 3: Third-Party Shopify Apps

The third option is to use a Shopify app that provides color and image swatch functionality.

This can be useful when the merchant needs features beyond what the theme's native swatch implementation provides, or when they don't want to make theme-level changes.

Depending on the app, features can include:

Color swatches
Image swatches
Pattern swatches
Swatches on product detail pages
Swatches on collection pages
Hover effects
Variant selection
Custom swatch layouts
Advanced swatch management

The main advantage is convenience. Instead of building and maintaining the functionality yourself, the app provides the functionality and configuration interface.

The trade-offs are that apps can introduce additional costs, dependencies, and potentially extra frontend code.

I'd consider an app when the requirements are relatively advanced or when the merchant wants a solution that can be configured without custom theme development.

Conclusion

For a new Shopify implementation, I'd start with Shopify's native color swatches.

They provide a structured way to associate color data with variant options, and compatible themes can consume the swatch information directly.

If you're working on an older theme that already uses filename-based swatches, there's usually no reason to rebuild everything immediately. The existing implementation may continue to work perfectly well.

Finally, if the merchant needs functionality that isn't conveniently supported by the native theme implementation, a third-party app may be the better choice.

The important thing is to understand the store's existing setup before choosing an implementation. Sometimes the best Shopify development work isn't writing more code - it's choosing the simplest solution that already fits the requirements

References

https://gokickflip.com/blog/shopify-color-swatches
https://www.shopify.com/ca/partners/blog/swatches
https://help.switchthemes.co/baseline/guides/color-swatches.html
https://shopify.dev/docs/api/liquid/objects/swatch