Skip to content

Instantly share code, notes, and snippets.

@mirceapiturca
mirceapiturca / Shopify Simple Theme - product-grid-item
Last active October 9, 2023 09:52
Shopify Simple Theme - product-grid-item.liquid modified to support alternative images
{% 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 %}
@mirceapiturca
mirceapiturca / Shopify Simple Theme - collection-template.liquid
Created January 21, 2019 16:11
Shopify Simple Theme - collection-template.liquid modified to support alternative images
<!-- /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 %}
<!-- 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(https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff2) format('woff2'),
url(https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff) format('woff');
@mirceapiturca
mirceapiturca / Shopify breadcrumb.liquid rich snippets
Created January 30, 2015 10:36
Rich snippets implementation for Shopify breadcrumb.liquid
<!-- /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 / json-theme-check.js
Created March 17, 2022 16:54
Shopify detect 2.0 theme support
import Shopify from "@shopify/shopify-api";
export const themeCheck = async(ctx, shop, accessToken) => {
const client = new Shopify.Clients.Rest(shop, accessToken);
// Get all themes
const { body: { themes } } = await client.get({
path: 'themes',
tries: 3
});
<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">
@mirceapiturca
mirceapiturca / delightful-hamburger
Created November 14, 2014 11:31
Material Design 'delightful' animated hamburger menu, done in SVG/SMIL
<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">
// 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(){
// 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;