Custom image swatches for variants - Horizon theme

Shopify Discussion
1

Hi! I am using the Horizon theme and am wanting to use custom uploaded images for some of my variant options vs just pills with text. A few things to add:

  • I know you can do this with meta fields for colors, but I need to be able to do it for other variants besides colors.

  • I don’t necessarily want the images to be thumbnails on the product itself, just image swatches for variants

  • I do NOT want to use any apps. Coding is fine but I don’t know how to write my own code, so just need direction.

Anyone have any insight? I’ve tried looking through the Shopify forums but most everything I’ve found aimed towards the Dawn theme.

I am currently using an app and really want to get rid of it for various reasons. Here is a screenshot of one of my products to show what I’m trying to achieve, just without an app:

IMG_0293
IMG_02931206×1751 287 KB

2

Hello @Momsstitchetti,

Based on your requirements, I would suggest the following approach:

  • Create small swatch images (for example, 64 × 64 px) and name them to match your color variants (e.g., blue-denim.png).

  • Upload these images to Content → Files in your Shopify Admin.

  • Then, customize the theme so it first checks whether a matching image exists in Content → Files. If a matching image is found, it will be used as the color swatch. If not, the theme will automatically fall back to its default swatch/color functionality.

This approach allows you to use custom swatch images where available while keeping the default behavior for all other variants.

Regards
Guleria

3

I installed horizon theme into my Development store. Tried to fix it via some theme edit. Result:

image
image930×773 45.9 KB

Here are the Steps I followed:

  1. Add a metaobject ( Settings → Custom data → Metaobjects → Add definition) with the following fields and names:
    image
    image1540×1092 70.2 KB
  2. Add these entires for this metaobject (your images go here):
    image
    image1053×805 72.1 KB
  3. make these theme edits:
    3a. Add those custom codeblocks b/w the green comments in the file snippets/swatch.liquid (deeplink:
    admin.shopify(dot)com/store/yourstorename/themes/150988128433/?key=snippets/swatch.liquid)
    image
    image1741×977 161 KB

3b. In this file (deep link: admin.shopify(dot)com/store/yourstorename/themes/150988128433/?key=snippets/variant-main-picker.liquid) add two edits given given in between green comment.

image
image1741×977 163 KB

and scroll down a bit and add a label:

image
image1741×977 156 KB

  1. theme’s “Swatches” switch
    a. Customize the theme → open a Product page.
    b. Click the Variant picker block.
    c. Turn the Swatches toggle ON → Save.

Note: if you dont get it, paste this reply in the shopify’s ai in the admin dashboard, it will help you set it up (it can also help revert the changes if you dont like it)

Note: as @tim_tairli says “use proper theme id – the long number – it’s uniq per store”.

4

How do I customize the theme to do this though?

5

When you go in to edit the theme, you can choose to in the options to “edit theme code”.

6

Right but there wasn’t any information on which file to edit, what to edit, where to edit it, etc

7

Will give this a try later today!

8

If you look very closely at the screenshots (right up the top), the codes you need to edit are under “snippets”.

9

yes my original reply was to the first commenter- the person that shared the screenshots is a different person.

10

All good! Hope it all works out for you.

11

just edit these two files i gave you in the screenshots above:

https://admin.shopify.com/store/yourstorename/themes/150988128433/?key=snippets/variant-main-picker.liquid

https://admin.shopify.com/store/yourstorename/themes/150988128433/?key=snippets/swatch.liquid

replace “yourstorename” with your storename (example ajaycodewiz.myshopify.com → yourstorename is “ajaycodewiz”)

after replaciing yourstorename with store name, put them into the browser url

12

Would also need to use proper theme id – the long number – it’s uniq per store (at least)

13

Do i add the green text? or just what is between the green text? Ive tried both it says there are errors with the file

14

sorry i followed the steps, with and without the green text, and it did not work.

15

The green text is a comment. You can put it in, but it’s only for people to read, not for your website to work.

You’ll probably have to show us screenshots of what you did. It could be something as simple as missing a }.