Skip to content

Instantly share code, notes, and snippets.

Jonathan Moore jonathanmoore

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
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: ***
@jonathanmoore
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. https://help.shopify.com/en/themes/customization/navigation/open-external-links-in-new-browser
View external-links-in-new-tab.js
@jonathanmoore
jonathanmoore / Stylefile.yml
Created Aug 1, 2018
Customizations for www.shopify.com via StyleURL.
View Stylefile.yml
---
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 Aug 1, 2018
Customizations for www.shopify.com via StyleURL.
View Stylefile.yml
---
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 Aug 1, 2018
Customizations for district-theme-demo.myshopify.com via StyleURL.
View Stylefile.yml
---
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
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 = data.data[i].images,
// Thumbnail
thumbnail = images.thumbnail.url,
thumbnailWidth = images.thumbnail.width,
@jonathanmoore
jonathanmoore / product-tags-snippet.liquid
Last active Nov 10, 2018
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
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>
<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 Sep 26, 2019 — 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)
View gist:c0e0e503aa732bf1c05b7a7be4230c61
<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 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) {
You can’t perform that action at this time.