carolineschnapp

{% comment %}
  Do we have a Color option?
  If so, is it the first, second or third option of that product?
  We will need to access values so we need that color index.
{% endcomment %}

{% assign has_color = false %}
{% assign color_option_index = 0 %}
{% for option in product.options %}
  {% assign downcased_option = option | downcase %}

carolineschnapp

What you have

What you want

How to get it

carolineschnapp

What to do

1. Use the alt text to associate the additional images - besides the variant image - to the option value. Example: say you have 3 images that show the Blue variants, then a) associate the first image as variant image to all Blue variants, and b) set the alt text of the 2 additional images to 'Blue'.
2. Copy+paste the code found in the product.liquid snippet below at the bottom of your product.liquid template.

How that works, essentially

Only the images associated to the currently selected variant are shown. Other images are hidden.

What to expect, the specifics

carolineschnapp

What you have

What you want

How to get it

carolineschnapp

What you have

You have a drop-down menu with tons of links. The issue is that Brooklyn applies a max-height of 700px to the expanded drop-down menu in the drawer. That may cut out a lot of links. That max-height is necessary for the drawer animation to be smooth.

What you need

Change the max-height to a value that's high enough, i.e. 2000px, or 3000px.

You may also want to apply a multi-column layout to your drop-down menu in the desktop view, which is another subject...

carolineschnapp

{% comment %}
  Remove sold-out variants.
  Only works for products that have one option.
  It won't work with products that have two or three options, like Size and Color.
  See: https://docs.myshopify.io/themes/customization/products/hide-variants-that-are-sold-out
{% endcomment %}

{% if product.options.size == 1 %}
  <script>
  var $addToCartForm = $('form[action="/cart/add"]');

carolineschnapp

{% comment %}
  Disable sold-out variants.
  Only works for products that have one option.
  It won't work with products that have two or three options, like Size and Color.
  See: https://docs.myshopify.io/themes/customization/products/hide-variants-that-are-sold-out
{% endcomment %}

{% if product.options.size == 1 %}
  <script>
  var $addToCartForm = $('form[action="/cart/add"]');

carolineschnapp

{% comment %}
  See https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs
{% endcomment %}

{% unless product.selected_variant %}
  {% if product.variants.size > 1 %}
    <script>
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {

carolineschnapp

What you have

What you want

How to get it

carolineschnapp

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.