Skip to content

Instantly share code, notes, and snippets.

Building for Shopify

Jonathan Moore jonathanmoore

Building for Shopify
Block or report user

Report or block jonathanmoore

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
jonathanmoore / page.list-collections.liquid
Last active Feb 4, 2020 — 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';

Make it real

Ideas are cheap. Make a prototype, sketch a CLI session, draw a wireframe. Discussions around concrete examples, not handy-waving abstractions. Don't say you did something, provide a URL that proves it.

Ship it

Nothing is real until it's being used by a real user. This doesn't mean you make a prototype in the morning and blog about it in the evening. It means you find one person you believe your product will help and try to get them to use it.

Do it with style

You can’t perform that action at this time.