Try the below code. It should hide all the additional images except the selected variant image.
add this to the bottom of your scss or css file:
#shopify-section-product-template .product-main-image:not(.selected) { display: none; }
Thank you for the reply,
I tried to add it to the product-template.liquid code, but nothing changed.
Any other suggestions?
@StoreMedics wrote:Try the below code. It should hide all the additional images except the selected variant image.
add this to the bottom of your scss or css file:
#shopify-section-product-template .product-main-image:not(.selected) { display: none; }
it's css code, so you need to add it to the bottom of a scss or css file.
If you want it on product-template.liquid you need to add this code:
<style> #shopify-section-product-template .product-main-image:not(.selected) { display: none; } </style>
I managed to hide the thumnail from classic-image-gallery.liquid
Previously it says "desktop-2"
Whilet it does hide it on the desktop website, it doesn't do it on mobile, despite being "hide" already"
Any suggestions?
{% if product.images.size > 1 %}
<div id="thumbnail-gallery" class="desktop-hide tablet-hide mobile-hide">
{% if product.images.size > 4 %}<div class="thumbnail-slider">{% endif %}
{% for image in product.images %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div class="product-thumbnail {% if image.id == featured_image.id %}selected{% endif %}" hide="{{ image.id }}">
<img class="lazyload lazyload-fade"
data-src="{{ img_url }}"
data-sizes="auto"
data-image-id="{{ image.id }}"
alt="{{ image.alt | escape }}">
<noscript>
<img class="product-thumbnail" src="{{ image | product_img_url: '100x' }}" alt="{{ image.alt | escape }}" />
</noscript>
</div>
{% endfor %}
{% if product.images.size > 4 %}</div>{% endif %}
</div>
{% endif %}
Subject | Author | Posted |
---|---|---|
4m ago | ||
8m ago | ||
25m ago | ||
51m ago | ||
an hour ago |