carolineschnapp

{% comment %}
Source: https://gist.github.com/carolineschnapp/9122054
If you are not on a collection page, do define which collection to use in the order form.
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}

{% paginate collection.products by 100 %}

carolineschnapp

{% if settings.show_multiple_currencies %}

{{ "//cdn.shopify.com/s/javascripts/currencies.js" | script_tag }}
{{ "jquery.currencies.min.js" | asset_url | script_tag }}

<script>

Currency.format = '{{ settings.currency_format | default: 'money_with_currency_format' }}';

var shopCurrency = '{{ shop.currency }}';

carolineschnapp

/* Sample JavaScript file added with ScriptTag resource. 
This sample file is meant to teach best practices.
Your app will load jQuery if it's not defined. 
Your app will load jQuery if jQuery is defined but is too old, e.g. < 1.7. 
Your app does not change the definition of $ or jQuery outside the app. 
Example: if a Shopify theme uses jQuery 1.4.2, both of these statements run in the console will still return '1.4.2'
once the app is installed, even if the app uses jQuery 1.9.1:
jQuery.fn.jquery => "1.4.2" 
$.fn.jquery -> "1.4.2"
*/

carolineschnapp

<!-- Solution brought to you by Caroline Schnapp -->
<!-- See this: http://wiki.shopify.com/Related_Products -->

{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}

{% if product.metafields.recommendations.productHandles %}

<h3>{{ heading }}</h3>
<ul class="related-products"></ul>

carolineschnapp

<fieldset>
  <legend>Money options</legend>
  <table>
    <tr>
      <td><label for="show_multiple_currencies">Show currency selector?</label></td>
      <td><input type="checkbox" id="show_multiple_currencies" name="show_multiple_currencies" checked="checked" /></td>
    </tr>
    <tr>
      <td colspan="2"><small>Although you will be able to display prices on your store front in different currencies, Shopify will still process orders in your shop's currency.</small></td>
    </tr>

carolineschnapp

<!-- Solution brought to you by Caroline Schnapp -->
<!-- See this: https://docs.shopify.com/support/your-store/products/can-i-recommend-related-products#finding-a-relevant-collecitons -->

{% comment %}
  Number of related items per row,
  and number of rows.
{% endcomment %}

{% assign number_of_related_products_per_row = 4 %}
{% assign number_of_rows = 1 %}

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

<style>

#collections-listing ul {
list-style-type: none;
list-style-position: outside;
overflow: hidden; 
}

#collections-listing ul li {
float: left;

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.