Skip to content

Instantly share code, notes, and snippets.

View darryn's full-sized avatar

Darryn Soper darryn

View GitHub Profile
@darryn
darryn / Shopify tag filter groups
Last active August 23, 2023 03:51
Create tag filter groups in Shopify. This snippet is designed to group and separate out collection tags. It requires the tags to share a common value prepended to the tag with an underscore. E.g. to create a separate tag filter group for 'brands', each product will need to be tagged with 'brand_Nike' or 'brand_Reebok'. Some of this is probably l…
{% if template contains 'collection' and collection.all_tags.size > 1 %}
<!-- A recursive loop to catch and filter out the different tag categories -->
{% assign c = 0 %}
{% for t in collection.all_tags %}
{% capture cat %}{{ cat }}{% capture temp_cat %}{% if t contains '_' %}{% assign cat_grp = t | split: '_' %}{{ cat_grp.first }}{% endif %}{% endcapture %}{% unless cat contains temp_cat %}{% if t contains '_' %}{% assign new_cat_grp = t | split: '_' %}{{ new_cat_grp.first }}{% endif %}{% unless forloop.last %}+{% endunless %}{% assign c = c | plus: 1 %}{% endunless %}{% endcapture %}
{% endfor %}
<!-- create array of tag categories -->
{% assign cat_array = cat | split: '+' %}
@darryn
darryn / Lucid One - Variant Image Thumbnail
Last active August 29, 2015 14:06
Lucid One - Variant Image Thumbnail
<!-- PRODUCT IMAGES (TABLET & DESKTOP) -->
<div class="span6{% unless settings.show_breadcrumb %} top-m{% endunless %} hidden-phone">
<ul class="thumbnails">
<!-- FEATURED IMAGE -->
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
<li class="span12">
<a class="thumbnail featured-image" data-image-id="{{ featured_image.id }}" href="#" title="{{ product.title }}">
<img src="{{ featured_image | img_url: 'large' }}" alt="{% if featured_image.alt %}{{ featured_image.alt | escape }}{% else %}{{ product.title | escape }}{% endif %}" />
</a>
</li>
@darryn
darryn / Lucid One - Variant Image Selector Script
Created September 18, 2014 21:35
Lucid One - Variant Image Selector Script
{% if product.available %}
<script>
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
if (variant.compare_at_price > variant.price) {
jQuery('#price-field h3').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}") + "&nbsp;<span class='{{ settings.sale_icon }}'>{{ settings.sale_text }}</span>&nbsp;<s><small>" + Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}") + "</small></s>"); // update price field
} else {
jQuery('#price-field h3').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}")); // update price field
}
{% if settings.show_currency_converter %}
@darryn
darryn / Lucid One - Register & Login on same page
Created October 13, 2014 19:58
Lucid One - Register & Login on same page
{% layout settings.customer_layout %}
<div class="{% if settings.show_sidebar %}span9{% else %}span12{% endif %} columns">
<div class="row-fluid">
<div id="template" class="span6">
<div id="customer">
<div class="template_header">
<h1 class="title">{{ settings.tr_account_login }}</h1>
</div>
{% form 'customer_login' %}
@darryn
darryn / Lucid One - localised page_title for customer pages in breadcrumb
Last active August 29, 2015 14:07
Lucid One - localised page_title for customer pages in breadcrumb
{% case template %}
{% when 'customers/login' %}
{% assign page_title = 'New translation for page_title' %}
{% when 'customers/account' %}
{% assign page_title = 'New translation for page_title' %}
{% when 'customers/activate_account' %}
{% assign page_title = 'New translation for page_title' %}
{% when 'customers/addresses' %}
{% assign page_title = 'New translation for page_title' %}
{% when 'customers/order' %}
@darryn
darryn / Shopify - Strip image out of blog article excerpt
Created October 19, 2014 21:09
Shopify - Strip image out of blog article excerpt
{% assign sizes = '_pico.,_icon.,_thumb.,_small.,_compact.,_medium.,_large.,_grande.,_1024x1024.,_2048x2048.,_master' | split: ',' %}
{% assign default_image = 'filename.jpg] %}
{% for a in blog.articles %}
{% assign src = null %}
{% if excerpt contains "<img" %}
{% assign src = excerpt | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' %}
@darryn
darryn / Lucid One - Collapsable Sidebar Menu
Created October 19, 2014 21:35
Lucid One - Collapsable Sidebar Menu
<!-- SIDEBAR LINKLISTS -->
{% for i in (1..3) %}
{% assign t_sidebar_linklist = 'sidebar_linklist_' | append: i %}
{% assign sidebar_linklist = settings[t_sidebar_linklist] %}
{% if linklists[sidebar_linklist].links.size > 0 %}
<h3 class="l-m">{{ linklists[sidebar_linklist].title }}</h3>
<ul class="nav nav-list">
{% for link in linklists[sidebar_linklist].links %}
{% assign submenu = link.handle %}
@darryn
darryn / Lujo video code
Created October 21, 2014 21:34
Lujo video code
<div class="video-container">
<div onclick="play();" id="vidwrap" style="background: black; overflow: hidden; cursor: pointer;">
<img src="//cdn.shopify.com/s/files/1/0252/5831/files/sunlounger-vid.jpg?10837" />
</div>
<script type="text/javascript">// <![CDATA[
function play(){document.getElementById('vidwrap').innerHTML = '<iframe width="940" height="529" src="http://www.youtube.com/embed/nZJ8qavnTeQ?vq=hd720&autoplay=1" frameborder="0"></iframe>';}
// ]]></script>
</div>
@darryn
darryn / Shopify - Deactivate checkout between certain times modal
Last active July 12, 2022 11:13
Shopify - Deactivate checkout between certain times
<!-- Set variables -->
{% assign current_time = 'now' | date: "%H%M" | times: 1 %}
{% assign current_day = 'now' | date: "%a" %}
{% assign operation_days = "Mon:1700-2100,Tue:1700-2100,Wed:1700-2200,Thu:1700-2200,Fri:1700-2300,Sat:1200-2300,Sun:1200-2100" | split: ',' %}
<!-- Check if the store is 'open' -->
{% assign checkout_active = false %}
{% for d in operation_days %}
{% if d contains current_day %}
{% assign open_hours = d | split: ':' | last %}
@darryn
darryn / checkout.scss.liquid
Created November 16, 2014 20:16
Lucid One - Responsive Checkout SCSS
{% if settings.typeface_method == "google_webfonts" %}
{% if settings.heading_font contains "Google" %}
@import url('//fonts.googleapis.com/css?family={{ settings.heading_font | replace: ' ', '+' | remove: 'Google|' }}:300,400,700');
{% endif %}
{% endif %}
/***** GETTING SASSY *****/
$background-color: {{ settings.main_background_color }};
$text-color: {{ settings.text_color }};