Skip to content

Instantly share code, notes, and snippets.

mirceapiturca

Block or report user

Report or block mirceapiturca

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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;
You can’t perform that action at this time.