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 / 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 / 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 / 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 / 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 / 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
@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: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 / 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 / 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 / snippet.css
Created September 11, 2020 18:09
Change grouped tags into a checkbox style
.collection aside nav.tags ul {
max-height: 300px;
overflow: scroll;
}
.collection aside nav.tags li {
display: block;
}
.collection aside nav.tags li a {
background: transparent;
box-shadow: none;