Custom Image Swatches for Prints/Patterns on Dawn Theme (Product & Collection Pages)

[HeleneClarkson]

Subject: Custom Image Swatches for Prints/Patterns on Dawn Theme (Product & Collection Pages)

Hi everyone,

I am using the latest version of the Dawn theme and I want to display custom image swatches for my product variants on both the product page and the collection page grids.

Instead of solid colors or a standard text dropdown, I need the variant selector to display a small circular thumbnail showing the actual custom print or pattern image uploaded for that variant. When clicked, it should update the main product image to match the selected variant.

Any help or code snippets for Dawn would be greatly appreciated. Thank you!

---

[tim_tairli]

Technically, Dawn supports “category metafield” based swatches for optoin values for proper categories – https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields

And when you add custom color entries you can use image rather than solid color:

This may work if your swatches are custom, but unified, like fabric patterns.

However, default swatches in Dawn are not, complex images may not look great.

It would be helpful if you can share an screenshot or a link to an example page of how you’d like this to look.

[Checkory_45]

Dawn can handle image-based swatches, but the best approach depends on the exact look you’re aiming for. Easier to a solution that updates variant images smoothly across both product and collection pages.

[HeleneClarkson]

Thank you! I am trying to figure out how to have swatches on collection pages for products in dawn shopify theme

[HeleneClarkson]

@Checkory_45

Dawn can handle image-based swatches, but the best approach depends on the exact look you’re aiming for. Easier to a solution that updates variant images smoothly across both product and collection pages.

We are looking to ONLY have the swatches underneath our products on the COLLECTION page.

[tim_tairli]

For the collection grid swatches you’d need to edit theme code.
Basic solution may be like this:

1. Open theme code editor and find this line:
   Check the context, depending on the theme version or modifications line number may vary :

snippets/card-product.liquid

2. Paste the following code right after this line.

{% for option in card_product.options_with_values %}
  {% assign is_swatch = option.values | map: "swatch" | uniq %}

  {% if is_swatch.size > 1 %}
    <div class="card-product-swatch">
      {% render 'product-variant-options',
        product: card_product,
        option: option,
        picker_type: "swatch"
      %}
    </div>
    {% break %}
  {% endif %}
{% endfor%}

So that it looks like this:

3. Open assets/base.css and paste the following code at the very bottom of the file:

/* product card swatches */
.card__content {
  grid-template-columns: 100%;
  --swatch-input--size: 3rem; /* swatch size */
}

.card-product-swatch {
  display: flex;
  gap: 0.5rem;
  overflow: hidden;
  justify-content: center;
  padding: 0.5rem 0 0;
}

.card-product-swatch label {
  outline: none !important;
}

.card-product-swatch input {
  display: none !important;
}

4. The result will look like this:

The code outputs swatches only for the first option for which swatches are defined.
The code limits them to a single line – if swatches do not fit, they will be cut like this:

If you need something else, or different functionality, code can be amended…

Also – there are some drawbacks (like duplicate ids), but for the sake of keeping the code short I’ve ignored them as they break nothing

---

if my post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it

[SectionKit]

hi @HeleneClarkson .
Doing well, I hope.

Actually, dawn dose not support image swatches natively.

Use an app like Swatchify or Variant Image Automator, which costs around 5$ to 10$ per month, works on both products and collection pages, and no coding is needed.

[Easify-Ariel]

Hi there

If you’d like to display custom image swatches for each print or pattern instead of using the default text dropdown or color swatches in the Dawn theme, you might want to check out Easify Custom Product Options

I’ve created a similar setup to help illustrate how it works.

• This is the result:

• This is the app setup:

With Easify, you can simply create an option using the Image Swatches type and upload an image representing each print or pattern. These images will be displayed as visual swatches, allowing customers to easily identify and select their preferred design without relying on text-based dropdowns.

When a customer selects a swatch, you can also link each option to its corresponding product image so that the main product image automatically updates to match the selected pattern.

In addition, if you’d like the Image Swatches to appear on both the Product Page and Collection Page, you can go to Settings → Advanced Settings → scroll down to the Other pages section. Then simply enable Show options on → Collection page. Once enabled, the swatches will be displayed directly on your Collection Pages, allowing customers to browse and select patterns or prints without having to open each individual product page.

The app is very easy to set up, and if you need any assistance during the process, our 24/7 support team is always happy to help