Help with image swatches

[Ecomowner]

Can someone assist me with turning my color variants into swatches

[Manoj_j]

Hi @Ecomowner ,
I hope this message finds you well.
Please share your store url .
and Please share the collaborator code with me via a personal message (it should not be shared publicly).
Thanks
Manoj

[Ecomowner]

My Store

[umidaydemir]

Hi, you can check Rubik Variant Images & Swatch app to show swatches with variant images or colors.

Show variant image swatches on Shopify Horizon theme. Assign multiple images per variant.

[rajweb]

@Ecomowner

Can someone assist me with turning my color variants into swatches

Heya @Ecomowner ,

Welcome to the Shopify Community!

Yes, you can definitely turn your color variants into swatches instead of dropdowns. This usually requires a little bit of custom code depending on your theme. Here’s a simple approach:

Follow these steps:

1. Go to Online Store > Edit Code.

2. Find your product-form.liquid or main-product.liquid file (the file where your product options are rendered).

3. Locate the part that renders the color variant selector (it often shows as a dropdown for options like “Color”).

4. Replace it (or enhance it) with swatch buttons.

Here’s a basic example for color swatches:

{% if option.name == 'Color' %}
  <div class="color-swatches">
    {% for value in option.values %}
      <label class="swatch" style="background-color: {{ value | downcase }};">
        <input type="radio" name="Color" value="{{ value }}">
        <span class="sr-only">{{ value }}</span>
      </label>
    {% endfor %}
  </div>
{% else %}
  {{ option | default_option }}
{% endif %}

CSS for styling:

.color-swatches {
  display: flex;
  gap: 8px;
}
.swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #ccc;
}
.swatch input {
  display: none;
}
.swatch:hover {
  border: 2px solid #000;
}

This will display your color options as round clickable swatches. You can expand it to use image swatches (if you have product images tied to each variant) instead of just background colors.

If you’d like, I can help you implement this in your store and style it perfectly to match your theme. Recently I worked with this, so I’m confident I can set it up smoothly. Please feel free to reach out - and you can also check my past work and contact here: https://www.rajatweb.dev/.

Thanks!

Best Regards,

Rajat

[Ecomowner]

thank you for your help, is there a way to make to color variants smaller

[Manoj_j]

Hi @Ecomowner ,
ok I will make them smaller .

[Easify-Jennifer]

Hi @Ecomowner

Yes, Shopify lets you turn color variants into swatches with its built-in setup. But if you want more flexibility—like customizing how swatches look or mixing different types—you can use an app such as Easify Product Options. It’s really easy to use, no coding needed, and gives you full control over how your options show up on the product page. Here’s how it works:

• This is the result:

• This is the app setting:

You can choose the swatch shape here, or further customize it in the design settings of the Easify app.

You’ll find this app easy to use, so I hope you give it a try. If you need assistance, just let me know or reach out to Easify!