Skip to content

Instantly share code, notes, and snippets.

@cshold
cshold / collection-sorting.liquid
Created May 15, 2014 13:43
Shopify Collection Sorting
<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 13:57
Shopify settings page structure
<!--
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 -->
@cshold
cshold / timber-cart-search-styles
Created June 9, 2014 15:49
Timber Tutorial | Cart and 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 August 29, 2015 14:02
Timber Tutorial | Responsive Navigation
// ==============================================================================
// #Site Nav and Dropdowns
// ==============================================================================
.nav-bar {
background-color: $colorNav;
a {
color: $colorNavText;
&:hover,
@cshold
cshold / timber-js-final
Created June 9, 2014 16:06
Timber Tutorial | Final JS File
/* 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-social-sharing-js
Created June 11, 2014 19:03
The JS required to setup social sharing on a Shopify theme
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-footer-middle
Created June 13, 2014 15:58
Middle column of the Shopify Supply theme
@cshold
cshold / shop.js
Last active August 29, 2015 14:12
React's raw zoom JS
window.timber = window.timber || {};
timber.cacheSelectors = function () {
timber.cache = {
// Product Page
$productImageWrap: $('#productPhoto'),
$productImage: $('#productPhotoImg'),
$thumbImages: $('#productThumbs').find('a.product-photo-thumb')
}
};
@cshold
cshold / shop.js
Created August 15, 2014 19:58
Shopify Ajax Cart Callback
// Create a global function that handles all cart-related JS
initCart = function (obj) {
// Do all cart things here
// If running as the ajax cart callback, an object is returned
if (obj.is_visible) {
// the cart is shown
} else {
// the cart was hidden
}