Stolen from the wonderful @jake-olney
Go to product.liquid
and:
- Find this section of code:
- Replace it with this:
<div class="product-single__photos" id="mobile-gallery">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% comment %}
Display current variant image, or default first
{% endcomment %}
<div class="product-single__photo-wrapper" id="main-product-image">
<img id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
</div>
{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}
<div class="product-single__photo-wrapper">
<img src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</div>
{% endunless %}
{% endfor %}
</div>
<div class="product-single__photos" id="gallery">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<div class="product-single__photo-wrapper" id="main-product-image">
<img id="ProductPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
{% for image in product.images %}
{% if forloop.first %}
{% continue %}
{% else %}
<img class="product-single__photo" id="hidden-image" src="{{ image.src | img_url: 'large' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
{% endif %}
{% endfor %}
{% for image in product.images limit: 1 %}
<img class="product-single__photo" id="hidden-image" src="{{ image.src | img_url: 'large' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
{% endfor %}
</div>
{% for image in product.images %}
<div class="product-single__photo-wrapper" id="thumbnails">
<a href="{{ image | product_img_url: 'large' }}" title="{{ product.title }}">
<img src="{{ image.src | img_url: 'small' }}" alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</a>
</div>
{% endfor %}
</div>
- Add this to the bottom of the file:
<script type="text/javascript" >
$('#thumbnails a').click(function() {
var newImage = $(this).attr('href');
$( 'div#main-product-image img' ).attr({ src: newImage });
return false;
});
</script>
<style>
#mobile-gallery {
display: none;
}
#thumbnails {
width: 100px;
height: 100px;
display: inline-block;
margin-bottom: 15px;
}
#main-product-image {
position: relative;
}
#hidden-image {
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
@media (max-width: 590px) {
#mobile-gallery {
display: block;
}
#gallery {
display: none;
}
}
</style>
Go to the theme.js.liquid
file and:
- Find the section of the
timber.productPage
function that changes the product image when a variant is selected:
- Replace it with this:
// Update variant image, if one is set
if (variant.featured_image) {
var newImg = variant.featured_image.src;
$( 'div#main-product-image img' ).attr({ src: newImg });
}
Hello,
Everything mentioned in this don't quite match my version of Brooklyn. I downloaded it yesterday and have been looking for a way to apply this exact thing but my theme is sectioned and the product-template.liquid doesnt have the exact same initial code as displayed above.
For example, the section of code you first highlight, looks like this for me:
I also don't have the timber.productPage section anywhere in the theme.js.liquid
Needless to say, the code you have provided as replacement (step 2) won't save as it results in error.
Any suggestions please?
Many thanks