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-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 / 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-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 / 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-footer-middle
Created Jun 13, 2014
Middle column of the Shopify Supply theme
View supply-footer-middle
@cshold
cshold / shop.js
Last active Aug 29, 2015
React's raw zoom JS
View shop.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 Aug 15, 2014
Shopify Ajax Cart Callback
View shop.js
// 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
}