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 / 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 / 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 / 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 / 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;
@jonathanmoore
jonathanmoore / page.list-collections.liquid
Last active June 7, 2021 14:51 — 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 https://help.shopify.com/themes/customization/collections/featuring-collections-using-link-lists
<!-- /templates/page.liquid -->
<section class="page page-top">
<div class="wrapper">
<header class="content-util">
{% include 'breadcrumb' %}
{% include 'social-icons' %}
</header>
<header class="page-header">
<h1>{{ page.title }}</h1>
</header>
@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 / district-cart-attributes.liquid
Created March 4, 2022 22:51
Cart Liquid Block Custom Attributes
<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>
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
@jonathanmoore
jonathanmoore / gist:03b0ce72748423ac30f9d4582f318af9
Created March 30, 2022 14:21
District OS 2.0 Custom Cart Attribute - Birthday
<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>