Shopify themes, liquid, logos, and UX
Hello,
We have chosen the Dawn-Theme and we would like to have Multiple Variant Images.
Therefore I followed the steps on this website: https://websensepro.com/blog/how-to-show-only-selected-variant-images-shopify-dawn-theme/
So it works, but there is one problem left. The Variant-Images just get dispayed if I click on the button to change the size. But it doesn't works if i just refresh the product-page, because then unfortunately all images get displayed, but I just want to show there also just the filtered variant images.
I think that I have something to change in the global.js
Because there I added the Code "this.filterMedia();" as on the website "websensepro.com" shown to the function "onVariantChange()".
So I think the Code "this.filterMedia();" should be added to any other area, where it get triggered on webpageRefresh. But because I'm not a developer I'm not sure, if this is the solution.
I hope anyone could help me. I've really tried everything.
Thanks for all your help in advance.
Hi @MS7,
I also created a code for this but yes at first load, it will show all the product images, since the function only triggers when there is a change of the variant options. You have to provide an initial function for this
This is the code I used if it helps.
filterMedia() {
// scroll thumbnail slider to the beggining
document.querySelector("#m-slider").scrollTo(0, 0);
if (
this.currentVariant.featured_image != null &&
this.currentVariant.featured_media.alt != null
) {
// hide all thumbnails
document
.querySelectorAll("[data-thumbnail-color]")
.forEach(function (element) {
element.style.display = "none";
});
//show thumbnails for selected variant
var selected_variant = this.currentVariant.featured_media.alt;
document
.querySelectorAll(`[data-thumbnail-color*="${selected_variant}"]`)
.forEach(function (element) {
element.style.display = "";
});
document
.querySelectorAll('[data-thumbnail-color="all"]')
.forEach(function (element) {
element.style.display = "";
});
} else {
// show all thumbnails
document
.querySelectorAll("[data-thumbnail-color]")
.forEach(function (element) {
element.style.display = "";
});
}
}
Many thanks for the code, but unfortunately it doesn't work. As I mentioned before I used this code: https://websensepro.com/blog/how-to-show-only-selected-variant-images-shopify-dawn-theme/
So I replaced just the old function filterMedia() in the global.js file (which I had from the website "websensepro.com") with your new function filterMedia()
Are there any other steps which I can do? Or should I delete all of the original code and just copy&paste your code on the right position?
I hope you can help me.
Thank you in advance
You can try this method to solve it:
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024