Image to show only on Colour variant and not size

Store Design
, , ,
1

Hi,

i’m using the the latest dawn theme (version 12). on my products page, i have two variants, Size and Colour. for Size i want to display ‘S, M, L, XL’ and for the colour i want to show the actual images. now i have followed some online videos and currently in a position where i have the images showing on both the colour and size. i want to show the right colours on the hoody in colour section and remove the image from size so it reverts back to text i need. Can someone please help? my website url is imanfit.co.uk

2

Hi @IMANLTD

  • You can do this easily with the app BSS : Product Variants Options: Link app
  • Or you can do it the following way:

Please note that this process involves editing your theme’s code, and it’s important to back up your theme and be comfortable with basic coding concepts before making any changes.

Access Theme Customization:

Log in to your Shopify admin panel and navigate to “Online Store” > “Themes.” Find the “Dawn” theme and click on “Customize” to access the theme editor.

Edit Product Template:

In the theme editor, look for the option to edit the product template. This is where you’ll make changes related to variant images and thumbnail carousels.

Modify Variant Images:

To show only selected variant images, you’ll need to modify the product template code to display the appropriate images based on the selected variant. Look for the code that handles variant images. You might find something like this:

{% for image in product.images %}
  <img src="{{ image.src }}" alt="{{ image.alt }}" class="variant-image">
{% endfor %}

You’ll need to modify this code to display only the images associated with the selected variant. Here’s a simplified example:

{% for variant in product.variants %}
  {% if variant.id == selected_variant_id %}
    <img src="{{ variant.image.src }}" alt="{{ variant.image.alt }}" class="variant-image">
  {% endif %}
{% endfor %}

In this example, selected_variant_id should be replaced with the actual code that retrieves the selected variant’s ID.

Correct Color Pictures in Thumbnail Carousel:

To correct color pictures in the thumbnail carousel, you’ll need to ensure that each variant’s image is associated with the correct color option. This involves assigning appropriate image URLs and alt text to each variant.

Save and Test:

After making these code changes, make sure to save your changes and test the product page to ensure that the variant images and color pictures in the thumbnail carousel are displaying correctly.

Hope it helps @IMANLTD !

3

Hi @IMANLTD , looks like you have found a solution to this. Can you please help me with the way that worked for you?