shopifypartners

$spacing-key: (
  "top": "top",
  "right": "right",
  "left": "left",
  "btm": "bottom",
  "all": null,
  "vert": null,
  "horiz": null
);

shopifypartners

$spacing-limit: 4;

shopifypartners

products = ShopifyAPI::Product.find(:all, params: { order: 'inventory_total desc', limit: 250 })
process_products(products)
3.times do 
  break unless products.next_page?
  products = products.fetch_next_page
  process_products(products)
end

shopifypartners

{
  "products": [
    {
      "id": 11111,
      "title": "Paprika"
    },
    {
      "id": 12345,
      "title": "Chili Powder"
    },

shopifypartners

{%- if section.settings.show_product_recommendations -%}
  <div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="4">
    {%- if recommendations.products_count > 0 -%}
      <h2>{{ section.settings.heading }}</h2>
      <ul>
        {%- for product in recommendations.products -%}
        <li class="product">
          <a href="{{ product.url }}">
            <img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
            <p class="product__title">{{ product.title }}</p>

shopifypartners

{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "You might also like"
}

shopifypartners

{
  "type": "checkbox",
  "id": "show_product_recommendations",
  "label": "Turn on product recommendations",
  "default": false
}

shopifypartners

{% javascript %}
var loadProductRecommendationsIntoSection = function() {
  // Look for an element with class 'product-recommendations'
  var productRecommendationsSection = document.querySelector(".product-recommendations");
  if (productRecommendationsSection === null) { return; }
  // Read product id from data attribute
  var productId = productRecommendationsSection.dataset.productId;
  // Read limit from data attribute
  var limit = productRecommendationsSection.dataset.limit;
  // Build request URL

shopifypartners

<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="4">
  {%- if recommendations.products_count > 0 -%}
    <h2>You may also like</h2>
    <ul>
      {%- for product in recommendations.products -%}
      <li class="product">
        <a href="{{ product.url }}">
          <img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
          <p class="product__title">{{ product.title }}</p>
          <p class="product__price">{{ product.price | money}}</p>

shopifypartners

{% form 'customer_login' %}

  <div>
    <label for="customerEmail">Email Address</label>
    <input type="email"
      name="customer[email]"
      id="customerEmail"
      autocorrect="off"
      autocapitalize="off"
      autocomplete="email">