Skip to content

Instantly share code, notes, and snippets.

@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-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 %}
@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 / 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
}
@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 / supply-footer-middle
Created Jun 13, 2014
Middle column of the Shopify Supply theme
View supply-footer-middle
@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 / 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;