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.

carolineschnapp

<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

var Shopify = Shopify || {};

Shopify.optionsMap = {};

Shopify.updateOptionsInSelector = function(selectorIndex) {
    

carolineschnapp

1. Add the compare at price to the product-grid-item.liquid snippet. See gist file product-grid-item.liquid below.

2. Add the compare at price to the product-list-item.liquid snippet. See gist file product-list-item.liquid below.

3. Add the compare at price to the search-result-grid.liquid snippet. See gist file search-result-grid.liquid below.

4. Add the compare at price to the product.liquid template. See gist file product.liquid below.

5. For a more attractive strike-through, you can add some CSS to your stylesheet. See gist below.

carolineschnapp

<div>
  <label for="sort-by">Sort by</label> 
  <select id="sort-by">
    <option value="manual">Featured</option>
    <option value="price-ascending">Price: Low to High</option>
    <option value="price-descending">Price: High to Low</option>
    <option value="title-ascending">A-Z</option>
    <option value="title-descending">Z-A</option>
    <option value="created-ascending">Oldest to Newest</option>
    <option value="created-descending">Newest to Oldest</option>

carolineschnapp

<script>

Shopify.Cart = Shopify.Cart || {};

Shopify.Cart.DeliveryCharge = {};

Shopify.Cart.DeliveryCharge.set = function(data) {
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js', 

carolineschnapp

What you want

You want to go from this:

... to that:

carolineschnapp

What we want

We want to go from this:

... to that:

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

<div class="clearfix" id="product-content" itemscope itemtype="http://schema.org/Product">
  
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}" />

  {% if product.available %}
  <form action="/cart/add" method="post" enctype="multipart/form-data">
  {% endif %}
    
    <ul id="product-details">

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