> For the complete documentation index, see [llms.txt](https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/cisecos-features/display-the-color-variant-options-as-image-swatch.md).

# Display the color variant options as image swatch

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

<figure><img src="https://2369203281-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd8ej7PWHlKyrp3Yi6VZq%2Fuploads%2Fym021RoIhIbMIGOr9N0X%2FScreenshot%202024-05-16%20at%2017.35.09.png?alt=media&amp;token=cf3e17a6-91f5-4ea7-99e5-ae47d7cccf5a" alt=""><figcaption><p>Display the color variant options as image swatch</p></figcaption></figure>

* **Environment variables Required:** `PUBLIC_STORE_CDN_STATIC_URL, PUBLIC_IMAGE_FORMAT_FOR_PRODUCT_OPTION`<br>
* **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><br>
* **To deploy, please follow the steps below**:
  1. From your Shopify admin, go to [**Products**](https://admin.shopify.com/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](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads) 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.