Skip to content

Instantly share code, notes, and snippets.

Building for Shopify

Jonathan Moore jonathanmoore

Building for Shopify
View GitHub Profile
jonathanmoore / gist:c0e0e503aa732bf1c05b7a7be4230c61
Last active Jun 18, 2021 — forked from carolineschnapp/gist:1083007
Linked options helper methods for Shopify. See this: - Updated to work with sectioned themes (tested with District)
View gist:c0e0e503aa732bf1c05b7a7be4230c61
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact:
// See
// Modified by Jonathan Moore (Style Hatch)
Updated to work with sectioned themes
- Added required methods from the deprecated options_selection.js
- Triggers an initial variant change
- Hides sold out variants with only one option
jonathanmoore / product-tags-snippet.liquid
Last active Jun 9, 2021
Add the following Liquid snippet to a product template (Sections/product-template.liquid) to show tags on a Shopify product page. The tags will correctly link back to the current product collection with the tag filters applied.
View product-tags-snippet.liquid
{% if product.tags %}
{% if collection.handle %}
{% assign collection_scope = collection.handle %}
{% else %}
{% assign collection_scope = 'all' %}
{% endif %}
<ul class="product-tags">
<li>Tags: </li>
{% for tag in product.tags %}
{% capture url %}/collections/{{ collection_scope }}/{{ tag | handleize }}{% endcapture %}
jonathanmoore / page.list-collections.liquid
Last active Jun 7, 2021 — forked from carolineschnapp/page.list-collections.liquid
Use entire file for the contents of page.list-collections.liquid. This specific version of the file was created to work with the premium Shopify theme District. Follow the guide at
View page.list-collections.liquid
<!-- /templates/page.liquid -->
<section class="page page-top">
<div class="wrapper">
<header class="content-util">
{% include 'breadcrumb' %}
{% include 'social-icons' %}
<header class="page-header">
<h1>{{ page.title }}</h1>
jonathanmoore / gist:2640302
Created May 8, 2012
Get the share counts from various APIs
View gist:2640302

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.


jonathanmoore / snippet.css
Created Sep 11, 2020
Change grouped tags into a checkbox style
View snippet.css
.collection aside nav.tags ul {
max-height: 300px;
overflow: scroll;
.collection aside nav.tags li {
display: block;
.collection aside nav.tags li a {
background: transparent;
box-shadow: none;
jonathanmoore / seo-hacks.liquid
Last active Jul 19, 2019 — forked from willbroderick/seo-hacks.liquid
Shopify SEO - attempt to avoid duplicate meta descriptions
View seo-hacks.liquid
Change to make in theme.liquid
It adds a canonical tag for tag-filtered pages, back to the base collection/blog page.
*** Find this is the standard canonical tag code: ***
<link rel="canonical" href="{{ canonical_url }}" />
*** Completely replace it with this: ***
View instagram-patch.liquid
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
(function ($) {
var $instagramSection = $('.instagram-collection');
var loadImages = function($container, data, imageCount){
for (var i = 0; i < imageCount; i++) {
var images =[i].images,
// Thumbnail
thumbnail = images.thumbnail.url,
thumbnailWidth = images.thumbnail.width,
jonathanmoore / district-slate-grid-example.html
Created May 2, 2017
Example usage of Shopify's Slate grid in District
View district-slate-grid-example.html
<div class="grid">
<div class="grid__item one-half medium-down--one-whole">
<p>One Half<br>
One Whole (medium down)</p>
<div class="grid__item one-half medium-down--one-whole">
<p>One Half<br>
One Whole (medium down)</p>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
jonathanmoore / external-links-in-new-tab.js
Created Sep 7, 2018
You can add this code snippet to your theme that will cause any external links on your online store to open in a new browser tab. This is a variation of the Shopify customization guide that does not require jQuery.
View external-links-in-new-tab.js
jonathanmoore / Stylefile.yml
Created Aug 1, 2018
Customizations for via StyleURL.
View Stylefile.yml
version: 1.0
timestamp: '2018-08-01T18:54:29Z'
id: vytH
shared_via: StyleURL - ( import and export CSS changes from Chrome