Integrating with the Narrative Theme

Spreadr supports integrating with the Narrative Theme.  This guide will walk you through the process of how to add the integration code to your store.

Steps

1. Open your Shopify admin.

2. Click Online Store.

3. Click Themes.

4. Click Actions for your published theme.

5. Click Edit code.

6. Click the file product-form.liquid which appears under Snippets.

7. The product-template.liquid file will open in the online code editor. In the online code editor window, locate the HTML for your add-to-cart button (you can do this by searching with CTRL-f or COMMAND-f). The HTML for your add to cart button will look something like this:

  <button class="btn btn--to-secondary btn--full product__add-to-cart-button{% if section.settings.enable_payment_button and current_variant.available %} shopify-payment-btn btn--secondary{% endif %}"    data-cart-submit    type="submit" name="add"
    {% unless current_variant.available %} disabled="true"{% endunless %}    aria-label="{{ button_text }}">
    <span class="primary-text" aria-hidden="false" data-cart-primary-submit-text>
      {{ button_text }}
    </span>
    <span class="secondary-text" aria-hidden=true data-cart-secondary-submit-text>{{ 'products.product.view_cart' | t }}</span>
  </button>

The trick is to find an <input> or <button> tag that includes something like 'Add to Cart', 'AddToCart' 'add-to-cart', etc or the code will be present above the {% endform %} tag.

(If you are having problems please contact support@spreadr.freshdesk.com. We will do the integration for you.)

8. On the very next line, add the following code.

<!--spreadr file--->
{% include 'spreadr' %}

9. Hit Save.

(If you are having problems please contact support@spreadr.freshdesk.com. We will do the integration for you.)