Mr Parker theme - hide product variants help

[Fede313]

Hello,

I've been looking in the community and tried different things to change the code but i haven't been able. I have Mr Parker theme, and i have products with up to 60 variants, so i'd like to hide them and show only the selected variants.

Any help would be really appreciated!

[StoreMedics]

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;
}

[Fede313]

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;
}

---

[StoreMedics]

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>

[Fede313]

Thnak you again, 

but it doesn't seem to work, I'm not sure what i'm doing wrong...

[Fede313]

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 %}