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 / seo-hacks.liquid
Last active July 19, 2019 06:51 — forked from willbroderick/seo-hacks.liquid
Shopify SEO - attempt to avoid duplicate meta descriptions
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: ***
@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 / 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 / external-links-in-new-tab.js
Created September 7, 2018 23:18
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. https://help.shopify.com/en/themes/customization/navigation/open-external-links-in-new-browser
@jonathanmoore
jonathanmoore / Stylefile.yml
Created August 1, 2018 18:54
Customizations for www.shopify.com via StyleURL.
---
version: 1.0
domains:
- www.shopify.com
url_patterns:
- www.shopify.com/*
timestamp: '2018-08-01T18:54:29Z'
id: vytH
redirect_url: https://www.shopify.com/
shared_via: StyleURL - (https://styleurl.app) import and export CSS changes from Chrome
@jonathanmoore
jonathanmoore / Stylefile.yml
Created August 1, 2018 18:53
Customizations for www.shopify.com via StyleURL.
---
version: 1.0
domains:
- www.shopify.com
url_patterns:
- www.shopify.com/*
timestamp: '2018-08-01T18:53:00Z'
id: q7k_
redirect_url: https://www.shopify.com/
shared_via: StyleURL - (https://styleurl.app) import and export CSS changes from Chrome
@jonathanmoore
jonathanmoore / Stylefile.yml
Created August 1, 2018 18:42
Customizations for district-theme-demo.myshopify.com via StyleURL.
---
version: 1.0
domains:
- district-theme-demo.myshopify.com
url_patterns:
- district-theme-demo.myshopify.com/*
timestamp: '2018-08-01T18:42:49Z'
id: tbc9
redirect_url: https://district-theme-demo.myshopify.com/
shared_via: StyleURL - (https://styleurl.app) import and export CSS changes from Chrome

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

@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 %}