Skip to content

Instantly share code, notes, and snippets.

View jonathanmoore's full-sized avatar
🚀
Building for Shopify

Jonathan Moore jonathanmoore

🚀
Building for Shopify
View GitHub Profile
@jonathanmoore
jonathanmoore / instagram-patch.liquid
Last active April 3, 2019 23:38
Update to fix the Instagram Section for District—premium Shopify theme http://help.stylehatch.com/article/332-update-to-fix-the-instagram-section-for-district
<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 = data.data[i].images,
// Thumbnail
thumbnail = images.thumbnail.url,
thumbnailWidth = images.thumbnail.width,
@jonathanmoore
jonathanmoore / product-tags-snippet.liquid
Last active June 9, 2021 15:24
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.
{% 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
jonathanmoore / district-slate-grid-example.html
Created May 2, 2017 22:03
Example usage of Shopify's Slate grid in District
<div class="grid">
<div class="grid__item one-half medium-down--one-whole">
<p>One Half<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-half medium-down--one-whole">
<p>One Half<br>
One Whole (medium down)</p>
</div>
<div class="grid__item one-quarter large--one-half medium-down--one-whole">
@jonathanmoore
jonathanmoore / gist:c0e0e503aa732bf1c05b7a7be4230c61
Last active January 17, 2024 21:47 — forked from carolineschnapp/gist:1083007
Linked options helper methods for Shopify. See this: http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options - Updated to work with sectioned themes (tested with District)
<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
// Modified by Jonathan Moore (Style Hatch) https://github.com/jonathanmoore
/*
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
jonathanmoore / make-image-change-javascript.js
Last active May 31, 2022 13:47 — forked from drabbytux/make-image-change-javascript.js
Make Image Change javascript (for theme.js file)
$(document).ready(function() {
thumbnails = $('img[src*="/products/"]').not(':first');
if (thumbnails.length) {
thumbnails.bind('click', function() {
var arrImage = $(this).attr('src').split('?')[0].split('.');
var strExtention = arrImage.pop();
var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
if (typeof variantImages[strNewImage] !== 'undefined') {
productOptions.forEach(function (value, i) {
@jonathanmoore
jonathanmoore / page.list-collections.liquid
Last active June 7, 2021 14:51 — 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 https://help.shopify.com/themes/customization/collections/featuring-collections-using-link-lists
<!-- /templates/page.liquid -->
<section class="page page-top">
<div class="wrapper">
<header class="content-util">
{% include 'breadcrumb' %}
{% include 'social-icons' %}
</header>
<header class="page-header">
<h1>{{ page.title }}</h1>
</header>
@jonathanmoore
jonathanmoore / collection-sidebar.liquid
Created June 14, 2016 05:00
Custom Shopify sidebar navigation for the District theme to group collections of tags into individual menus.
<!-- /snippets/collection-sidebar.liquid -->
{% comment %}
District Theme
==============
Custom sidebar navigation to display the three menus set in the Customize
Theme menu and advanced tag filtering.
Adding tags in the "Category_Tag Name" format will automatically generate
menus grouped by categories. All of the product tags need to start with a
Category_
@jonathanmoore
jonathanmoore / size-chart.liquid
Last active April 6, 2016 21:41 — forked from carolineschnapp/size-chart.liquid
size-chart.liquid snippet
{% if template contains 'product' %}
{% assign size_options = 'size,taille' | split: ',' %}
{% assign size_chart_text_link = 'Size chart' %}
{% assign has_size = false %}
{% assign size_index = 0 %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if has_size == false and size_options contains downcased_option %}
{% assign has_size = true %}
{% assign size_index = forloop.index0 %}
@jonathanmoore
jonathanmoore / District.scss.liquid
Created July 24, 2015 19:59
Replace the file in assets/district.scss.liquid
/*============================================================================
District Theme v1.0.0
Copyright 2015 Style Hatch Inc.
Author Jonathan Moore @moore
Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use @imports in this file
* Use grunt or gulp tasks to enable @imports - https://github.com/Shopify/shopify-css-import
@jonathanmoore
jonathanmoore / gulp-build-branch.js
Created June 13, 2014 21:00
Gulp Task for building to a new branch
gulp.task 'deploy', shell.task [
'git checkout master'
'git branch -D dist'
'git stash'
'git checkout -b dist'
'rm .gitignore'
'git add .gitignore --all'
'gulp build',
'git add public'
'git commit -m "build for release"'