Display the color variant options as image swatch

Ciseco now supports displaying the color variants options as image swatchs.

Display the color variant options as image swatch

• Environment variables Required: PUBLIC_STORE_CDN_STATIC_URL, PUBLIC_IMAGE_FORMAT_FOR_PRODUCT_OPTION

• How to Obtain:

  1. This is only useful if your products have Color variations, otherwise, you can skip this step and leave these 2 env variable values blank.

  2. The Ciseco theme will display product color options with images. So, when your products have Color variations with values like: "Black", "Red", "Pink and White", etc. Then you will need to upload image files with the same name as those color values (replace spaces with underscores): Red.png, Pink_and_White.png... However, you can use images in png, jpg, jpeg, svg or webp... as desired. You just need to replace the format for the variable PUBLIC_IMAGE_FORMAT_FOR_PRODUCT_OPTION

  3. You can find this value by going to Content -> Files, then copying the link of any image, you will get a link like this: "https://cdn.shopify.com/s/ files/1/1234/1234/1234/files/image.jpg?v=123456789", remove the name "image.jpg?v=123456789" and keep "https://cdn.shopify.com/s/ files/1/0586/7674/0198/files/", then copy and place into variable PUBLIC_STORE_CDN_STATIC_URL Please note, it should be with https and / at the end of the string.

  4. Add 2 environment variables PUBLIC_STORE_CDN_STATIC_URL and PUBLIC_IMAGE_FORMAT_FOR_PRODUCT_OPTION to your storefront Managing environments - https://shopify.dev/docs/custom-storefronts/hydrogen/environments#managing-environments

• To deploy, please follow the steps below:

  1. From your Shopify admin, go to Products.

  2. Click the product that you want to edit.

  3. In the Variants section, click + Add options Color.

  4. Click Save to save the product.

  5. Add values to the Color option

     1. In the Variants section, click Edit next to the color option.

     2. In the Add another value field, enter another value, e.g. Red, Blue, Red and White, Black, Yellow, Orange,...

     3. Click Done and Save.

  6. Then you will need to upload image files with the same name as those color values (If the image does not exist, and note that you need to replace spaces with underscores) e.g.: Red.png, Pink_and_White.png... However, you can use images in png, jpg, jpeg, svg or webp... as desired. You just need to replace the format for the variable PUBLIC_IMAGE_FORMAT_FOR_PRODUCT_OPTION

  7. That's it.