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-initializing-buildclient-with-javascript-buybutton.js
Last active March 17, 2017 19:09 — forked from sarachisholm/four-smart-reasons-to-embed-shopify-store-setup.js
Initializing buildClient with JavaScript BuyButton - https://www.shopify.com/partners/blog/four-smart-reasons-to-embed-a-shopify-store-in-your-client-websites
$(function() {
var client = ShopifyBuy.buildClient({
apiKey: 'your-api-key',
domain: 'your-shop-subdomain.myshopify.com',
appId: '6'
});
});
@shopifypartners
shopifypartners / four-smart-reasons-to-embed-shopify-store-html-container-element.js
Last active March 17, 2017 19:10 — forked from sarachisholm/four-smart-reasons-to-embed-shopify-store-html-container-element.js
HTML container element for Buy Button - https://www.shopify.com/partners/blog/four-smart-reasons-to-embed-a-shopify-store-in-your-client-websites
client.fetchProduct('your-product-id').then(function(product) {
var html =
"<img class='product__image' src='" + product.selectedVariantImage.src + "' >" +
"<h2 class='product__title'>" + product.title + "</h2>" +
"<a class='product__buy' href='" +
product.selectedVariant.checkoutUrl(1) +
"'>Buy Now!</a>";
$('#product-1').html(html);
@shopifypartners
shopifypartners / four-smart-reasons-to-embed-shopify-store-configure-cms-shopify-store.html
Last active March 17, 2017 19:11 — forked from sarachisholm/four-smart-reasons-to-embed-shopify-store-CMS-config.js
Configure CMS for Buy Button - https://www.shopify.com/partners/blog/four-smart-reasons-to-embed-a-shopify-store-in-your-client-websites
<script>
fetchType: '’Collection’ or ‘Product’',
fetchId: 'collection or product ID',
</script>
@shopifypartners
shopifypartners / four-smart-reasons-to-embed-shopify-store-html-container-element.css
Last active March 17, 2017 19:13 — forked from sarachisholm/four-smart-reasons-to-embed-shopify-store-html-container-element.css
HTML container element CSS for Shopify Buy Button - https://www.shopify.com/partners/blog/four-smart-reasons-to-embed-a-shopify-store-in-your-client-websites
.product {
max-width: 400px;
box-shadow: 0 0 15px 5px #eee;
padding: 30px;
}
.product__buy {
background: #7ab55c;
padding: 0.5625em 1.875em;
color: white;
@shopifypartners
shopifypartners / four-smart-reasons-to-embed-shopify-store-variant-objects.js
Last active March 17, 2017 19:14 — forked from sarachisholm/four-smart-reasons-to-embed-shopify-store-variant-objects.js
Varient objects for Shopify Buy Button - https://www.shopify.com/partners/blog/four-smart-reasons-to-embed-a-shopify-store-in-your-client-websites
var selectedVariant = product.selectedVariant;
var selectedVariantImage = product.selectedVariantImage;
var currentOptions = product.options;
@shopifypartners
shopifypartners / four-smart-reasons-to-embed-shopify-store-updates.js
Last active March 17, 2017 19:15 — forked from sarachisholm/four-smart-reasons-to-embed-shopify-store-updates.js
Store updates JavaScript for Shopify Buy Button - https://www.shopify.com/partners/blog/four-smart-reasons-to-embed-a-shopify-store-in-your-client-websites
var variantSelectors = generateSelectors(product);
$('.variant-selectors').html(variantSelectors);
function generateSelectors(product) {
var elements = product.options.map(function(option) {
return '<select name="' + option.name + '">' + option.values.map(function(value) {
return '<option value="' + value + '">' + value + '</option>';
}) + '</select>';
});
@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 / 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>