Skip to content

Instantly share code, notes, and snippets.

@mirceapiturca
mirceapiturca / Shopify Simple Theme - collection-template.liquid
Created Jan 21, 2019
Shopify Simple Theme - collection-template.liquid modified to support alternative images
View Shopify Simple Theme - collection-template.liquid
<!-- /templates/collection.liquid -->
{% paginate collection.products by 12 %}
<div data-section-id="{{ section.id }}" data-section-type="collection-template" data-sort-enabled="{{ section.settings.collection_sort_enable }}" data-tags-enabled="{{ section.settings.collection_tag_enable }}">
<header class="grid">
<h1 class="grid__item small--text-center {% if section.settings.collection_sort_enable or section.settings.collection_tag_enable %}medium-up--one-third{% endif %}">{% if current_tags.size > 0 %}{{ current_tags.first }}{% else %}{{ collection.title }}{% endif %}</h1>
{% if section.settings.collection_sort_enable or section.settings.collection_tag_enable %}
<div class="collection-sorting grid__item medium-up--two-thirds medium-up--text-right small--text-center">
{% if section.settings.collection_tag_enable and collection.all_tags.size > 0 %}
@mirceapiturca
mirceapiturca / Shopify Simple Theme - product-grid-item
Last active Apr 3, 2019
Shopify Simple Theme - product-grid-item.liquid modified to support alternative images
View Shopify Simple Theme - product-grid-item
{% unless grid_item_width %}
{% assign grid_item_width = 'medium-up--one-third small--one-half' %}
{% endunless %}
{% unless current_collection == blank %}
{% assign current_collection = collection %}
{% endunless %}
{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
View Shopify self hosted fonts prefetch
<link rel="dns-prefetch" href="https://cdn.shopify.com">
<link rel="preload" href="https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff2" as="font" type="font/woff2" crossorigin="anonymous">
View css-fonts.liquid
<!-- snippets/css-fonts.liquid -->
<style>
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Roboto'), local('Roboto-Regular'),
url(//cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff2) format('woff2'),
url(//cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff) format('woff');
@mirceapiturca
mirceapiturca / Shopify breadcrumb.liquid rich snippets
Created Jan 30, 2015
Rich snippets implementation for Shopify breadcrumb.liquid
View Shopify breadcrumb.liquid rich snippets
<!-- /snippets/breadcrumb.liquid -->
{% comment %}
Documentation - http://docs.shopify.com/support/your-website/navigation/creating-a-breadcrumb-navigation
Rich snippets - Breadcrumbs - https://support.google.com/webmasters/answer/185417?hl=en
{% endcomment %}
{% unless template == 'index' or template == 'cart' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{ shop.url }}" itemprop="url">
<span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span>
@mirceapiturca
mirceapiturca / delightful-hamburger
Created Nov 14, 2014
Material Design 'delightful' animated hamburger menu, done in SVG/SMIL
View delightful-hamburger
<svg xmlns="http://www.w3.org/2000/svg" width="214" height="214" viewBox="0 0 24 24">
<path d="M0 0h24v24h-24z" fill="none" />
<rect style="fill:#000;" width="18" height="2" x="3" y="11">
<animateTransform attributeName="transform" begin="0s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="rotate" from="0 12 12" to="180 12 12" repeatCount="1" fill="freeze" />
<animateTransform attributeName="transform" begin="3s" dur="2s" calcMode="spline" keySplines="0.4, 0, 0.2, 1" type="rotate" from="180 12 12" to="360 12 12" repeatCount="1" fill="freeze" />
</rect>
<rect style="fill:#ff0000;" width="18" height="2" x="3" y="6">
View image.ready() promise
// Adding a custom .ready() metod on an image to avoid nasty on load callbacks
// One time custom element initialization.
// Create the 'mega-img' proto, extend the HTMLImageElement.prototype
var proto = Object.create(HTMLImageElement.prototype);
proto.ready = function() {
var deferred = Promise.defer();
this.addEventListener('load', function(){
View Normalize CSS Selectors
// Unfortunately there is no native way to 'normalize a selector'
// This little trick makes the browser to do the job instead of implementing your tokenizer and parser
function normalizeSelectors(aSelector) {
var parser = new DOMParser(),
string = '<style>' + aSelector + '{}</style>',
doc = parser.parseFromString(string, "text/html"),
cssRules = doc.querySelector('style').sheet.cssRules;