Skip to content

Instantly share code, notes, and snippets.

@kyleaparker
kyleaparker / gist:560a3847860bace1d680
Last active Jul 16, 2020
[Shopify] Show multiple images per variant
View gist:560a3847860bace1d680
<script>
jQuery(document).ready(function($){
var images = [];
{% for image in product.images %}
images.push({url: "{{ image | product_img_url: 'medium' }}", alt: "{{ image.alt }}"});
{% endfor %}
var thumbnails = $(".thumbs");
@kyleaparker
kyleaparker / 0_reuse_code.js
Last active Aug 29, 2015
Here are some things you can do with Gists in GistBox.
View 0_reuse_code.js
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@kyleaparker
kyleaparker / gist:6c956128048bd1a69821
Created Sep 23, 2014
[Shopify] Three level collection navigation using tags
View gist:6c956128048bd1a69821
<ul>
{% comment %}A linklist should be created called "Collections" containing each of the "top" level collections{% endcomment %}
{% for link in linklists.collections.links %}
{% assign col = link.object %}
<li class="{% if col.handle == collection.handle %}active{% endif %}">
<a href="{{ link.url }}"><span>{{ link.title }}</span></a>
{% if col.all_tags.size > 0 %}
<ul>
{% assign tag_index = 0 %}
{% assign current_tag = "" %}
@kyleaparker
kyleaparker / gist:b9fd3e4f7532f9f19658
Last active Feb 28, 2016
[Shopify] Display articles alphabetically
View gist:b9fd3e4f7532f9f19658
{% assign articles = blogs.news.articles | sort: 'title' %}
{% for article in articles %}
{{ article.title }}<br>
{% endfor %}
@kyleaparker
kyleaparker / gist:1a18794a075dbbc0c3e4
Created Jul 9, 2014
[Shopify] Recently viewed, show image based on image name
View gist:1a18794a075dbbc0c3e4
{% raw %}
<script id="recently-viewed-product-template" type="text/x-jquery-tmpl">
{{each(prop, val) images}}
{{if val.toLowerCase().indexOf(".imagename") >= 0 }}
<div id="product-${handle}" class="product">
<div class="image">
<a href="${url}" class="cy">
<img src="${Shopify.Products.resizeImage(val, "medium")}" />
</a>
</div>
@kyleaparker
kyleaparker / gist:928c5925dc07ffe487ba
Created Jun 11, 2014
[Shopify] Show option as plain text if there is only one option in the dropdown
View gist:928c5925dc07ffe487ba
$('.single-option-selector').each(function() {
var numOptions = $(this).children().length;
if(numOptions == 1) {
$(this).hide();
$(this).before( "<p>" + $(this).val() + "</p>");
}
});
@kyleaparker
kyleaparker / gist:9691004
Created Mar 21, 2014
Shopify: Show number of colors available
View gist:9691004
{% for option in product.options %}
{% if option contains "Color" %}
{% assign optionName = "option" | append: forloop.index %}
{% assign colors = product.variants | map: optionName %}
{% assign colorsFiltered = '' %}
{% for colorOption in colors %}
{% unless colorsFiltered contains colorOption %}
{% assign colorsFiltered = colorsFiltered | append: ', ' | append: colorOption %}
{% endunless %}
{% endfor %}
@kyleaparker
kyleaparker / gist:9665660
Created Mar 20, 2014
Shopify: Show number of variants still available
View gist:9665660
{% assign total = product.variants | map: 'available' | join: ", " | remove: 'false, ' %}
{% assign available = total | split: ',' %}
{{ available.size }} of {{ product.variants.size }} left
@kyleaparker
kyleaparker / gist:9665395
Created Mar 20, 2014
Shopify: Remove sold out options from variant drop down
View gist:9665395
{% if product.options.size == 1 %}
{% for variant in product.variants %}
{% unless variant.available %}
jQuery('.single-option-selector option:contains(' + {{ variant.title | json }} +')').remove();
{% endunless %}
{% endfor %}
jQuery('.single-option-selector').trigger('change');
{% endif %}
@kyleaparker
kyleaparker / gist:8851659
Created Feb 6, 2014
Shopify: Map all collection tags (avoid 50 product limit)
View gist:8851659
{% assign collection_tags = collection | map: 'tags' %}
{% for tag in collection_tags %}
<a href="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}" title="{{ tag | escape }}">{{ tag }}</a>
{% endfor %}