Skip to content

Instantly share code, notes, and snippets.

View shopifypartners's full-sized avatar

Shopify Partners shopifypartners

487 followers · 0 following
View GitHub Profile
@shopifypartners
shopifypartners / four-smart-reasons-to-embed-shopify-store-AddVarianttoCart.js
Created March 17, 2017 19:17 — forked from sarachisholm/four-smart-reasons-to-embed-shopify-store-AddVarianttoCart.js
AddVarianttoCart JavaScript for Shopify Buy Button - https://www.shopify.com/partners/blog/four-smart-reasons-to-embed-a-shopify-store-in-your-client-websites
var $cartLineItems = checkout.lineItems.map(function (lineItem, index) {
var $lineItemTemplate = $(lineItemEmptyTemplate);
var itemImage = lineItemImages[lineItem.variant_id];
$lineItemTemplate.find('.cart-item__img').css('background-image', 'url(' + itemImage + ')');
$lineItemTemplate.find('.cart-item__title').text(lineItem.title);
$lineItemTemplate.find('.cart-item__variant-title').text(lineItem.variant_title);
$lineItemTemplate.find('.cart-item__price').text(formatAsMoney(lineItem.line_price));
$lineItemTemplate.find('.cart-item__quantity').attr('value', lineItem.quantity);
$lineItemTemplate.find('.quantity-decrement').attr('data-variant-id', lineItem.variant_id);
$lineItemTemplate.find('.quantity-increment').attr('data-variant-id', lineItem.variant_id);
@shopifypartners
shopifypartners / four-smart-reasons-to-embed-shopify-store-toggle-cart.js
Created March 17, 2017 19:18 — forked from sarachisholm/four-smart-reasons-to-embed-shopify-store-toggle-cart.js
Toggle cart JavaScript for Shopify Buy Button - https://www.shopify.com/partners/blog/four-smart-reasons-to-embed-a-shopify-store-in-your-client-websites
function openCart() {
$('.cart').addClass('js-active');
}
function closeCart() {
$('.cart .btn--close').click(function () {
$('.cart').removeClass('js-active');
});
}
@shopifypartners
shopifypartners / dirty-css-hacks-for-responsive-email-content-stacking.html
Last active March 17, 2017 19:24 — forked from sarachisholm/content-stacking.html
Content stacking HTML for responsive emails - https://www.shopify.com/partners/blog/dirty-css-hacks-for-responsive-emails
<table> <!--“Desktop” width: 600px - 300*2-->
<tr>
<td class=”col” width=”300”>...</td>
<td class=”col” width=”300”>...</td>
</tr>
</table>
@shopifypartners
shopifypartners / dirty-css-hacks-for-responsive-email-content-stacking-content-stacking.css
Last active March 17, 2017 19:28 — forked from sarachisholm/content-stacking.css
Content stacking CSS for responsive emails - https://www.shopify.com/partners/blog/dirty-css-hacks-for-responsive-emails
@media only screen and (max-width: 600px) {
table, tr, td {
display: block; /* table-cell -> block */
width: 100%;
}
}
@shopifypartners
shopifypartners / dirty-css-hacks-for-responsive-email-content-switching.html
Last active March 17, 2017 19:30 — forked from sarachisholm/content-switching.html
Content switching HTML for responsive emails - https://www.shopify.com/partners/blog/dirty-css-hacks-for-responsive-emails
<table> <!--“Desktop” width — 600px - 300*2-->
<tr>
<td class=”sub-col” width=”300”>...</td>
<td class=”main-col” width=”300”>...</td>
</tr>
</table>
@shopifypartners
shopifypartners / dirty-css-hacks-for-responsive-email-content-switching.css
Last active March 17, 2017 19:32 — forked from sarachisholm/content-switching.css
Content switching CSS for responsive emails - https://www.shopify.com/partners/blog/dirty-css-hacks-for-responsive-emails
@media only screen and (max-width: 500px) {
table, tr, td {
display: block; /* table-cell -> block */
width: 100%;
}
.main-col {
display: table-header-group;
}
@shopifypartners
shopifypartners / four-advanced-shopify-theming-techniques-liquid-filters.liquid
Last active March 17, 2017 19:37 — forked from levinmejia/liquid-filters.liquid
How liquid filters work - http://shopify.com/partners/blog/93657286-4-advanced-shopify-theming-techniques-to-add-to-your-workflow
{{ 'logo.png' | asset_url }}
{{ product.vendor | url_for_vendor }}
{{ "Shop winter boots" | link_to_tag: 'Boots' }}
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/logo.png?34423/collections/vendors?q=Burton
<a title="Show products matching tag Boots" href="/collections/frontpage/boots">Shop winter boots</a>
@shopifypartners
shopifypartners / dirty-css-hacks-for-responsive-order-and-reorder-content.html
Created March 17, 2017 19:33 — forked from sarachisholm/order-and-reorder-content.html
Order and reorder content HTML for responsive emails - https://www.shopify.com/partners/blog/dirty-css-hacks-for-responsive-emails
<td class="wrapper"><!--Nested tables...-->
<table class="header">Header</table>
<table class="nav">Navigation</table>
<table class="content">Content</table>
<table class="footer">Footer</table>
</table>
@shopifypartners
shopifypartners / dirty-css-hacks-for-responsive-email-order-and-reorder-content.css
Last active March 17, 2017 19:38 — forked from sarachisholm/order-and-reorder-content.css
Order and reorder content CSS for responsive emails - https://www.shopify.com/partners/blog/dirty-css-hacks-for-responsive-emails
@media only screen and (max-width: 500px) {
.wrapper {
display: table;
}
.header {
display: table-caption;
}
.nav {
@shopifypartners
shopifypartners / four-advanced-shopify-theming-techniques-liquid-output.liquid
Last active March 17, 2017 19:39 — forked from levinmejia/liquid-output.liquid
How Liquid output tags work - http://shopify.com/partners/blog/93657286-4-advanced-shopify-theming-techniques-to-add-to-your-workflow
// Liquid
<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
// HTML returned
<h1>Snowboard Product Title</h1>
<p>The snowboard product description.</p>