Skip to content

Instantly share code, notes, and snippets.

Building for Shopify

Jonathan Moore jonathanmoore

Building for Shopify
View GitHub Profile
jonathanmoore / make-image-change-javascript.js
Last active May 29, 2018 — forked from drabbytux/make-image-change-javascript.js
Make Image Change javascript (for theme.js file)
View make-image-change-javascript.js
$(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 / 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 / collection-sidebar.liquid
Created Jun 14, 2016
Custom Shopify sidebar navigation for the District theme to group collections of tags into individual menus.
View collection-sidebar.liquid
<!-- /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
jonathanmoore / size-chart.liquid
Last active Apr 6, 2016 — forked from carolineschnapp/size-chart.liquid
size-chart.liquid snippet
View size-chart.liquid
{% 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 / District.scss.liquid
Created Jul 24, 2015
Replace the file in assets/district.scss.liquid
View 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 -
jonathanmoore / gulp-build-branch.js
Created Jun 13, 2014
Gulp Task for building to a new branch
View gulp-build-branch.js
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"'
jonathanmoore / custom.css
Created Apr 28, 2014
Cadence Center Images
View custom.css
Cadence Center Images Added to the Caption/Body of Posts
Paste the following into Customize > Advanced > Custom CSS
article section img {
display: block;
margin: 0 auto;

Steps to break one large repo into multiple repos based off of DIRNAME

git filter-branch --prune-empty --subdirectory-filter DIRNAME master

rm -rf .git/refs/original/ && git reflog expire --all &&  git gc --aggressive --prune=now

git clean -fdx

git reflog expire --all --expire-unreachable=0

Steps to Combine Git Repos w/ Perserving History

# Add a remote for and fetch the old repo
git remote add -f theme_name <theme_name repo URL>

# Merge the files from theme_name/master into new/master
git merge theme_name/master

# Move the old_a repo files and folders into a subdirectory so they don't collide with the other repo coming later
View everlapse_to_tumblr.html
<script src=""></script>
<!-- Containers -->
<p id="tumbr_video_share"></p>
<p id="tumbr_text_share"></p>
<!-- Everlapse Vars -->
<script type="text/javascript">
var everlapse_title = 'Walk With Me';