Skip to content

Instantly share code, notes, and snippets.

Avatar
🚀
Building for Shopify

Jonathan Moore jonathanmoore

🚀
Building for Shopify
View GitHub Profile
@jonathanmoore
jonathanmoore / gist:03b0ce72748423ac30f9d4582f318af9
Created Mar 30, 2022
District OS 2.0 Custom Cart Attribute - Birthday
View gist:03b0ce72748423ac30f9d4582f318af9
<div class="cart-block__attributes flex items-center space-x-2 justify-center md:justify-end">
<input id="Cart-Attribute-Birthday" form="cart" type="date" name="attributes[Birthday]" value="">
<label for="Cart-Attribute-Birthday" class="text-primary-text p-0 text-sm font-body font-weight-body normal-case tracking-normal">Birthday</label>
</div>
View product-details-sku.liquid
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
@jonathanmoore
jonathanmoore / district-cart-attributes.liquid
Created Mar 4, 2022
Cart Liquid Block Custom Attributes
View district-cart-attributes.liquid
<div class="cart-block__attributes flex items-center space-x-2 justify-center md:justify-end">
<input form="cart" type="hidden" name="attributes[Gift]" value="No">
<input id="Cart-Attribute-Gift" form="cart" type="checkbox" name="attributes[Gift]" value="Yes"{% if cart.attributes["Gift"] == "Yes" %} checked{% endif %}>
<label for="Cart-Attribute-Gift" class="text-primary-text p-0 text-sm font-body font-weight-body normal-case tracking-normal">Is this a gift?</label>
</div>
@jonathanmoore
jonathanmoore / snippet.css
Created Sep 11, 2020
Change grouped tags into a checkbox style
View snippet.css
.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;
@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,