How to add product color swatches to the Shopify product page?

Shopify Discussion
1

Whenever I add two Product Pictures garments to my website, such as red and white, and view them after updating, the clothes below display correctly based on the selected color, either red or white. But when I switch from red to white, the white color displays correctly on top, but the product pictures below become a mix of red and white. I want the product picture to display only in the selected color. How can I achieve this?

Website URL:- https://www.exude.in/

1 Like
2

Hi @riyaahuja

Follow instructions as showing in video

https://www.youtube.com/watch?v=ARpSIscriYA

3

Didn’t Work please suggest me another way to resolve this issue.

4

@riyaahuja

Here alternate solution (Use the alt text to associate the additional images)

https://gist.github.com/carolineschnapp/d3c1af82b915e9cae82929e6486f22fe

Demo: https://group-variant-images.myshopify.com/collections/frontpage/products/anson-chair?variant=971529381

5

Already used but didn’t work.

https://www.exude.in/products/dummy-product?variant=44777284403520

6

@riyaahuja Most of the theme support logic of assigning variant option value like color name to alt text of the images. for example you have 4 images of white color then all white text to all for images
and 2 black color images assign black alt text to images.

Product images SS (Alt text)

Alok_Kasgar1_0-1680779379457.png
Alok_Kasgar1_0-1680779379457.png1104Ă—485 89.2 KB

7

Already Added.

8

riyaahuja_0-1680779626757.png
riyaahuja_0-1680779626757.png928Ă—526 89.1 KB

9

Hello @riyaahuja ,

I am Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot. I am here to support you.

You can follow these steps to ensure that the product pictures on your Shopify website display only in the selected color.

  1. In your Shopify admin panel, go to the product page of the garment you want to edit.
  2. Click on the “Variants” tab.
  3. Select the variant you want to edit (in this case, either “red” or “white”).
  4. Scroll down to the “Images” section and click on “Edit”.
  5. In the pop-up window that appears, select the product picture that corresponds to the selected variant (in this case, either the red or white garment picture).
  6. Click “Save” to apply the changes.

Repeat these steps for each variant of the garment you want to edit.

By assigning the appropriate product picture to each variant, your Shopify website will display the correct product picture for the selected color and prevent the pictures from mixing together.

Gina

10

Already did nothings work.

11

Hi @riyaahuja

Last option, you can use third party app or tell your developer to write a custom logic for this functionalities.

What is name of your theme?

1 Like