6 Steps in How To Show Only Selected Variant Images

6 Steps in How To Show Only Selected Variant Images

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible with Dawn version higher than 2.5, and other new Shopify 2.0 FREE themes.

If you have Dawn below 2.5 version, 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. 

Check DEMO store here 💻. Password: made4uo 

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:

  • An option to show only connected images when variant is selected
  • On first load, all images will appear
  • Well written code with NO external library being use

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

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. Go to Online store > Themes > Actions > Edit code. 

2. Open the main-product.liquid under the section folder. Find all the <slider-component> and change it to "show-variant".

3. We have to add a dataset for all the <li> tag under the slider-component. 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.

data-media-alt="{{featured_media.alt}}"
data-media-alt="{{media.alt}}"

 

4. Before the <section> tag, let's add a style. I fix the position of the mobile view slider to make it center and only show one image per slide. 

<style>
.hideVariant {
width: 0 !important;
max-width: 0 !important;
display: none !important;
}

@media screen and (max-width: 749px) {
show-variant ul {
width: 100%;
}

.product__media-list [data-media-alt] {
padding-left: 0 !important;
width: 100% !important;
margin-left: 10px !important;
}
}
</style>

 

5. 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

const variantKeys = this.currentVariant.title.split(' / ');
const mediaGalleryComponent = document.getElementById(`MediaGallery-${this.dataset.section}`);
this.firstSlider = mediaGalleryComponent.querySelector('[id^="GalleryViewer"]');
this.secondSlider = mediaGalleryComponent.querySelector('[id^="GalleryThumbnails"]');

this.firstSlider.querySelectorAll(`[data-media-alt]`).forEach(media => media.classList.add('hideVariant'));
variantKeys.map( key => {
const media = this.firstSlider.querySelectorAll(`[data-media-alt="${key}"]`);
this.firstSlider.querySelectorAll(`[data-media-alt="${key}"]`).forEach(media => {
media.classList.remove('hideVariant');
})
})

if(!this.secondSlider) return;
this.secondSlider.querySelectorAll(`[data-media-alt]`).forEach(media => media.classList.add('hideVariant'));
variantKeys.map( key => {
const media = this.secondSlider.querySelectorAll(`[data-media-alt="${key}"]`);
this.secondSlider.querySelectorAll(`[data-media-alt="${key}"]`).forEach(media => {
media.classList.remove('hideVariant');
})
})

this.slider = mediaGalleryComponent.querySelectorAll('show-variant');
this.slider.forEach(slider => {
this.variantsToShow = slider.querySelectorAll('li:not(.hideVariant');
slider.variantsToShow = this.variantsToShow;
slider.initPages();
this.ulWidth = mediaGalleryComponent.querySelector('[id^="Slider-Thumbnails"]').clientWidth;
this.liWidth = this.variantsToShow[0].clientWidth;
this.overflow = Math.floor(this.ulWidth / this.liWidth );
})
if(this.secondSlider) {
if(this.variantsToShow.length <= this.overflow) {
this.secondSlider.querySelectorAll('.slider-button').forEach(btn => btn.classList.add('hidden'));
} else {
this.secondSlider.querySelectorAll('.slider-button').forEach(btn => {
btn.classList.remove('hidden');
})
}
}

 5. To make the slider work with the change of variant, we have to add this code at the very bottom of global.js. 

class ShowVariant extends SliderComponent {
constructor() {
super();
this.step;
}

initPages() {
this.variantsToShow = this.querySelectorAll('li:not(.hideVariant)');
this.lastVariant = this.variantsToShow[this.variantsToShow.length - 1];
if (this.variantsToShow.length === 0) return;
this.slidesPerPage = Math.floor(this.slider.clientWidth / this.variantsToShow[0].clientWidth);
this.totalPages = this.variantsToShow.length - this.slidesPerPage;
this.update();
}

update() {
const previousPage = this.currentPage;
this.currentPage = Math.round(this.slider.scrollLeft / this.lastVariant.clientWidth) + 1 || 1;
this.variantsToShow = this.querySelectorAll('li:not(.hideVariant)');
this.lastVariant = this.variantsToShow[this.variantsToShow.length - 1];


this.lastPage = Math.floor(this.variantsToShow.length - (this.step * 1)) || this.variantsToShow.length - 1;

if (this.currentPageElement && this.pageTotalElement) {
this.currentPageElement.textContent = this.currentPage;
this.pageTotalElement.textContent = this.totalPages;
}

if(!this.variantsToShow[0]) return;
if (this.currentPage == 1) {
this.prevButton.setAttribute('disabled', 'disabled');
} else {
this.prevButton.removeAttribute('disabled');
}

if (this.isSlideVisible(this.lastVariant) || this.currentPage == this.variantsToShow.length) {
this.nextButton.setAttribute('disabled', 'disabled');
} else {
this.nextButton.removeAttribute('disabled');
}
}

onButtonClick(event) {
event.preventDefault();
this.step = event.currentTarget.dataset.step || 1;
this.slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + (this.step * this.lastVariant.clientWidth) : this.slider.scrollLeft - (this.step * this.lastVariant.clientWidth);
this.slider.scrollTo({
left: this.slideScrollPosition
});
}
}

customElements.define('show-variant', ShowVariant);

 

Note: In the Theme Editor, when you click "Customize theme", make sure you unclick the "Hide other variants’ media after selecting a variant" so no variant images will be hidden when called.

That's it. Hopefully that was not too much for you (",)

Copied!
Back to blog

2 comments

Hi Arif,

Please message me in “Chat with us” and provide me your website. Thank you

Made4Uo

I tried 6 steps for selected variants but only first option is working when i choose another option no image appears

arif khan

Leave a comment