sarachisholm

.box {
	display: inline-block;
	min-width: 50%; 
	max-width: 100%;
	width: calc((480px - 100%) * 480);
}

sarachisholm

.block {
	display: inline-block;
	min-width: 50%; /* 300px */ 
	max-width: 100%; /* 600px */ 
	width: calc((480px - 100%) * 480); /* or [calc((480px - 600px) * 480);], which equals -57,600px */
}

sarachisholm

.block {
	display: inline-block;
	min-width: 50%; /* 150px */ 
	max-width: 100%; /* 300px */ 
	width: calc((480px - 100%) * 480); /* or [calc((480px - 300px) * 480);], which equals 86,400px */
}

sarachisholm

<!--HTML-->
<input type="radio" id="itemA-1" />
<input type="radio" id="itemA-2" />
<input type="radio" id="itemA-3" /> 
<label for="itemA-1" />Carousel</label> 
<label for=“itemD-11" />div</label>

sarachisholm

/*CSS*/
}
#itemA-3:checked ~ 
#itemB-6:checked ~ 
#itemC-2:checked ~ 
#itemD-11:checked ~ 
#itemE-5:not:checked ~ 
#itemF-2:checked ~ 
#itemG-5:checked ~ * .div1 {
display: block;

sarachisholm

Body {
	counter-reset: amount;
}
#itemA-3:checked ~
#itemE-5:not:checked {
	counter-increment: amount;
}
.price {
	content: ‘$’ + counter(amount);
}

sarachisholm

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

sarachisholm

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

sarachisholm

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);

sarachisholm

.product {
  max-width: 400px;
  box-shadow: 0 0 15px 5px #eee;
  padding: 30px;
}

.product__buy {
  background: #7ab55c;
  padding: 0.5625em 1.875em;
  color: white;