Compatibility: Compatible with Dawn version lower than 2.5 only
If you have Dawn 2.5 and above follow this steps here.
I am not sure why Shopify 2.0 has not offered this option yet. The Shopify theme only hide the one images when you assign the image to that variant. What if we want to have multiple images assigned to the variant? There are several ways to do it. We can do this with NO APP or EXTERBAL library. But we will use the simplest way, and that is by using the image alt. The code adjust to what ever desktop layout and desktop media size you choose. This works with stacked layout and thumbnail slider layout.
With that being said, please assign image alt that corresponds to the option you want to associate the image to. Make sure the variant text is the same with image alt. See video for more information.
What you are buying:
- Show only images assigned to variant
- Use image alt to assign a variant
- Works with stacked layout and thumbnail slider layout
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
To start.
1. Go to Online store > Themes > Actions > Edit code.
2. Open the main-product.liquid under the section folder. Find the <slider-component>, and look for the <li>. We will add the code below and change it to the corresponding image variable. Make sure there is no spaces. See the video for more information.
3. Next, we need to add the script code. Open the "global.js." under the Asset folder. Find the " updateMedia() {." Before the closing bracket, add the code below. See video for more information on placement
4. In the Theme Editor, when you click "Customize theme", make sure you unclick the "Hide other variants’ media after selecting a variant."
That's it. Hopefully that was not too much for you (",)
Copied!