shopifypartners

#page>div.logo+ul#navigation>li*5>a{Item $}

shopifypartners

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

shopifypartners

$(function() {
  var client = ShopifyBuy.buildClient({
    apiKey: 'your-api-key',
    domain: 'your-shop-subdomain.myshopify.com',
    appId: '6'
  });
});

shopifypartners

<script>
  fetchType: '’Collection’ or ‘Product’',
  fetchId: 'collection or product ID',
</script>

shopifypartners

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $(".add-to-cart").sticky({topSpacing:50});
  });
</script>

shopifypartners

.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

var selectedVariant = product.selectedVariant;
var selectedVariantImage = product.selectedVariantImage;
var currentOptions = product.options;

shopifypartners

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

function attachOnVariantSelectListeners(product) {
  $('.variant-selectors').on('change', 'select', function(event) {
    var $element = $(event.target);
    var name = $element.attr('name');
    var value = $element.val();
    product.options.filter(function(option) {
      return option.name === name;
    })[0].selected = value;

    var selectedVariant = product.selectedVariant;