Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp

carolineschnapp/hide variant images.md

Created February 18, 2016 20:11
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carolineschnapp/42c2566cedfd85698d6c to your computer and use it in GitHub Desktop.
Save carolineschnapp/42c2566cedfd85698d6c to your computer and use it in GitHub Desktop.
Download ZIP
Hide variant images on the product page, so that a variant image is shown as main image only when its corresponding variant is selected.
Raw
hide variant images.md

The goal

Hide the thumbnails of variant images on the product page.

How to do that

  1. Add a class of 'variant-image' to the wrapper of each thumbnail that is a variant image. See first product.liquid snippet.
  2. Hide all .variant-image elements with CSS in the theme's stylesheet. See second style.scss.liquid snippet.
Raw
product.liquid
<li{% if image.variants.size > 0 %} class="variant-image"{% endif %}>
{% comment %} or {% endcomment %}
<div{% if image.variants.size > 0 %} class="variant-image"{% endif %}>
{% comment %} or {% endcomment %}
<span{% if image.variants.size > 0 %} class="variant-image"{% endif %}>
Raw
style.scss.liquid
.variant-image {
display: none;
}
@patmalin
Copy link

Hi Caroline! I am really struggling with getting my Brooklyn theme ready and customized. I need to hide the images of product which are not related to the variant... I found your guide but seems like I am not smart enough to have it done myself. Do not you mind to give me a hand, please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment