Use Variant Image as Color Swatch Focal Theme

Store Design
, , ,
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