Skip to content

Instantly share code, notes, and snippets.

@cshold
cshold / collection-sorting.liquid
Created May 15, 2014
Shopify Collection Sorting
View collection-sorting.liquid
<div class="form-horizontal">
<label for="sortBy">Sort by</label>
<select name="sortBy" id="sortBy">
<option value="manual">Featured</option>
<option value="best-selling">Best Selling</option>
<option value="title-ascending">Alphabetically, A-Z</option>
<option value="title-descending">Alphabetically, Z-A</option>
<option value="price-ascending">Price, low to high</option>
<option value="price-descending">Price, high to low</option>
<option value="created-descending">Date, new to old</option>
@cshold
cshold / settings.html
Created May 16, 2014
Shopify settings page structure
View settings.html
<!--
If you're using our theme_gem to upload your files, make sure you close your
input and br tags as if it were XHTML.
- eg. <br /> and <input type="text" />
More info on settings:
- http://docs.shopify.com/themes/theme-templates/settings
-->
<!-- Colors -->
View related-products.liquid
@cshold
cshold / timber-cart-search-styles
Created Jun 9, 2014
Timber Tutorial | Cart and Search Styles
View timber-cart-search-styles
.header-cart-btn {
@extend .btn;
position: relative;
font-size: 19px;
line-height: 19px;
padding-top: 12px;
padding-bottom: 10px;
border: 0 none;
margin-left: $gutter/2;
vertical-align: top;
@cshold
cshold / timber-navigation
Last active Aug 29, 2015
Timber Tutorial | Responsive Navigation
View timber-navigation
// ==============================================================================
// #Site Nav and Dropdowns
// ==============================================================================
.nav-bar {
background-color: $colorNav;
a {
color: $colorNavText;
&:hover,
@cshold
cshold / timber-js-final
Created Jun 9, 2014
Timber Tutorial | Final JS File
View timber-js-final
/* Simple jQuery Equal Heights @version 1.5.1. Copyright (c) 2013 Matt Banks. Dual licensed under the MIT and GPL licenses. */
!function(a){a.fn.equalHeights=function(){var b=0,c=a(this);return c.each(function(){var c=a(this).innerHeight();c>b&&(b=c)}),c.css("height",b)},a("[data-equal]").each(function(){var b=a(this),c=b.data("equal");b.find(c).equalHeights()})}(jQuery);
window.timber = window.timber || {};
timber.cache = {
// General
html: $('html'),
body: $('body'),
equalHeight: $('.equal-height'),
@cshold
cshold / supply-theme-product-review-styles
Created Jun 11, 2014
Product review app style overrides for Shopify's Supply theme
View supply-theme-product-review-styles
/*============================================================================
#Product Reviews - Free Shopify App
- https://apps.shopify.com/product-reviews
==============================================================================*/
#shopify-product-reviews {
margin: 0;
.spr-header-title {
@extend h1;
}
@cshold
cshold / supply-social-sharing
Created Jun 11, 2014
A snippet for social sharing buttons in a Shopify theme. Notice the use of theme settings to show/hide each button.
View supply-social-sharing
{% comment %}
This snippet is used to showcase each collection during the loop,
'for product in collection.products' in list-collections.liquid.
{% endcomment %}
{% assign shareCountClass = '' %}
{% if template contains 'article' or template contains 'blog' %}
{% capture permalinkURL %}{{ shop.url }}{{ article.url }}{% endcapture %}
@cshold
cshold / supply-social-sharing-js
Created Jun 11, 2014
The JS required to setup social sharing on a Shopify theme
View supply-social-sharing-js
timber.socialSharing = function () {
var buttons = timber.cache.shareButtons,
permalink = buttons.data('permalink'),
shareButtons = buttons.find('a'),
socialCounts = buttons.find('span.share-count');
{% if settings.social_sharing_products or settings.social_sharing_blog %}
// Get share stats from respective APIs
var fbLink = $('.share-facebook'),
twitLink = $('.share-twitter'),
@cshold
cshold / supply-collection-sidebar
Last active Aug 20, 2021
The sidebar for Shopify's Supply theme, including code to handle an advanced tagging system.
View supply-collection-sidebar
{% comment %}
A customized sidebar for this theme. If advanced tagging is enabled in
theme settings, prepend your tags with "group" names (E.g. BRAND_) and your
collection page will create groups of tags to sort by.
Expansion of https://gist.github.com/darryn/8047749
{% endcomment %}