Hide variant images based on main variant image positions - Shopify Dawn Theme 9.0

Store Design

Topic summary

A developer shares a custom solution for hiding variant images in Shopify’s Dawn Theme 9.0 that improves upon existing tutorials.

The Problem:

  • Current methods use ALT image attributes as identifiers, which conflicts with proper accessibility practices and breaks when ALT tags are missing or inconsistent.

Proposed Solution:

  • Uses image position detection instead of ALT tags to identify and hide variant images.
  • Works by detecting the selected variant, finding its first image URL from admin settings, then hiding images between consecutive variant image positions.

Implementation Requirements:

  • Set Desktop layout to “Thumbnail carousel” and Mobile layout to “Show thumbnails” (code alerts users if not configured).
  • Organize product images by variant order and assign main variant images as described in Shopify’s documentation.
  • Add provided code to bottom of main-product.liquid file after the final {% endschema %} tag.
  • Tested on unmodified Dawn 9.0.0 (results may vary on customized themes).

Note: The original post contains corrupted/reversed text in several sections, making complete technical details difficult to verify. A follow-up response begins providing installation steps but is also partially corrupted.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi All,

I have been looking for a better solution to hide variant images when selecting variants on the Shopify Dawn Theme. I have seen some tutorials out there using the ALT image attribute as a place holder to identify variant images but this does not help those who actually use use alt image attributes. Having the same description over and over is not very descriptive. Also in some cases if the alt tag values are missing it messes up the variants.

I came up with the below code to hide the variant images base on image positions. Basically it works by detecting the current variant selected by the user and finding the first variant image url set inside the admin panel. (Ref: https://help.shopify.com/en/manual/products/product-media/add-images-variants). Then it finds the next variants image url and anything in between these images will be the variants images.

Note: This was tested on non-modified version of DAWN 9.0.0. YMMV depending on your theme modifications.

Firstly, setup your variant images by editing your product and add all the variant images under media. Organize the images in order by variant then set the main variant image as described in the ref link above.

Add the below code to the bottom of main-product.liquid after the last {% endschema %} tag.

IMPORTANT! Make sure to set “Desktop layout” to “Thumbnail carousel” and “Mobile layout” to “Show Thumbnails”. If these below settings are not made the code will alert the user on the front end.

Enjoy!

Disclaimer - Use this code at your own risk. I am not responsible for any loss or damages caused by altering your code and using the below code.

Screenshot 2023-05-24 at 3.58.55 PM.png
Screenshot 2023-05-24 at 3.58.55 PM.png354×954 43.5 KB
2
  1. From the dropdown menu, select “Edit Code.” This will open the theme editor.
  2. In the theme editor, locate the “main-product.liquid” file and click to open it.
  3. Scroll to the bottom of the file and add the provided code after the last {% endschema %} tag.