Use Variant Image as Color Swatch Focal Theme

Store Design
, , ,
1

Hello everyone,

I bought the Focal theme a few years ago but for some reason I chose to use another theme. Now I am using Focal again and trying to set up everything, however unlike my previous theme I don’t know how to use the variant images as color swatches. I did search their docs, and the community here but nothing that answered my question.

Does anyone know how I can do that?

Thanks so much.

I am using the Focal Theme Version 11.1.0.

2

Hi @sehcnas

Based on the information provided in the search results, here are the steps to display variant images as color swatches in the Shopify Focal theme:

  1. In your Shopify admin, open the product and create a variant option called “Color”. Enter all the color names for the product variants.

  2. Create small PNG images (64x64 pixels recommended) for each color swatch in an image editor. Name each image file using the handleized version of the color name (lowercase with dashes instead of spaces, e.g. “black-metal.png” for “Black Metal” color).

  3. Upload the color swatch images to the “Files” section of your Shopify admin.

  4. Open the theme editor and go to “Theme settings” at the bottom. Select the “Color swatch” sub-section.

  5. In the “Configuration” box, enter the color name as written in the Shopify admin, followed by a colon, then either the hex color code (starting with #) or the filename of the swatch image you uploaded.

Enter one color mapping per line. For example:

Black Metal:#000000
Silver Gray:silver-gray.png

  1. Save the theme settings. The color swatches using your custom images should now appear on the product page when the Color variants are selected.

The key steps are naming the image files to match the handleized color names, uploading them to Shopify, and mapping the colors to either hex codes or image filenames in the theme’s color swatch settings.

If you need further assistance, I can help you.

Hope it helps

3

Hello @Xipirons ,

Thank you for your previous advice, @Xipirons. However, I’m still on the hunt for a specific functionality. In my last theme, I utilized variant images as interactive color swatches on product pages. For instance, if I’m selling a T-shirt that’s available in Black, White, and Grey, each color option was directly linked to its respective image in the product’s gallery. Selecting the Black variant would bring up the Black T-shirt image, and the same for the other colors.

My goal is to replicate this feature with the Focal theme, where the color swatches are effectively synced with the corresponding variant images. So instead of just standard color blocks for swatches, they would showcase the actual product image in that variant’s color. How can I set up the Focal theme to reflect the variant images when a color swatch is selected?

Similar to this theme: https://themes.shopify.com/themes/fashionopolism/styles/haute/preview?surface_inter_position=1&surface_intra_position=6&surface_type=industry

4

Yes I understood your need, and I explained how to do it in my first post, please give it a try, this is the right way to do it with your theme

5

TL:DR
I have 2 different categories [shoes, pants] and I can use Global “black” image of the shows because each black pants would have a smal photo of black shoe.

What can I do, give up and switch back to hex color #000? or there is a way?

Hi, I gave it a try and it worked perfectly.

I have a question, I want to use each “Black” color swatch image to be the black version of each product.

Meaning: when I set it up globally on Theme Settings → Color Swatch each product that has the “Black” variation color I want to be able to Change the small image.