Hey all, using Prestige theme, and would like to change the main product image to the selected variant’s image when selected.
Currently have it showing the main product image on page load (changed from initially defaulting to variant image), and this code is in product-gallery.liquid.
{% liquid
assign product_form_id = 'product-form-' | append: product.id | append: '-' | append: section.id
# pepsi_max2k changed to only product.featured_media, to avoid defaulting to variant images on product page
# assign default_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
**assign default_media = product.featured_media | default: product.featured_media**
assign product_gallery_carousel_id = 'product-gallery-carousel-' | append: product.id | append: '-' | append: section.id
assign filtered_indexes = null | sort
Meanwhile, theme.js has javascript to auto-scroll to the variant image when variant is selected, on mobile. I turned the scrolling-down-the-page off on desktop cos it’s annoying.
onVariantChange_fn = function(event) {
const filteredIndexes = __privateMethod(this, _getFilteredMediaIndexes, getFilteredMediaIndexes_fn).call(this, event.detail.product, event.detail.variant);
this.carousel.filter(filteredIndexes);
if (event.detail.variant["featured_media"] && event.detail.previousVariant["featured_media"]?.["id"] !== event.detail.variant["featured_media"]["id"]) {
const position = event.detail.variant["featured_media"]["position"] - 1, filteredIndexBelowPosition = filteredIndexes.filter((filteredIndex) => filteredIndex < position);
if (this.carousel.isScrollable) {
this.carousel.select(position - filteredIndexBelowPosition.length, { instant: true });
} else {
/* pepsi_max2k stop scrolling to image on selection of variant on desktop */
<strong>/* this.querySelector(`[data-media-id="${event.detail.variant["featured_media"]["id"]}"]`)?.scrollIntoView({ block: "start", behavior: "smooth" }); */
</strong> }
}
};
However, would be nice to change the main image (“default_media” in the liquid) to the variant image on selection of variant, when on desktop. No scrolling, just replace the main top image. See example below and [email removed] https://beijaflor.com.au/products/small-pot-plant-bundle
Any ideas how to do this? I’m just guessing I need to somehow change default_media to product.selected_or_first_available_variant.featured_media in the onVariantChange_fn but one’s js, one’s liquid… bleuughhhh 
