This guide will walk you through the simple process of integrating the Spreadr App into your Shopify site.


Notes:

 - if you are using Online Store 2.0 themes (Dawn Theme) then follow the integration guide available here.

 - if you are using a free theme from Shopify you may check our theme-specific integration guides available here.


Spreadr Amazon links can be added to Product pages as well as pages with repeating product blocks (for example Collection pages). The guide below is for integration with Product pages. For Collection pages follow the guide here.


On the product pages, you have 2 options: 


1. Replace the Add to Cart button with the Spreadr button

2. Add the Spreadr button along with the Add to Cart button


If you are unsure you may simply contact us at support@spreadr.freshdesk.com. We will assist you in the integration.


1. Replace the Add to Cart button with the Spreadr button

 

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-template.liquid which appears under Sections.



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 type="submit" name="add" id="AddToCart" class="btn">

   <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>

 </button>

 

The actual code may appear slightly different between themes. The trick is to find an <input> or <button> tag that includes something like 'Add to Cart', 'AddToCart' or 'add-to-cart' etc.


NOTE: If the above code is not found in the product-template.liquid file, it could be found in any one of the following files (it is theme-dependent):

  • Templates / product.liquid
  • Snippets / product-form.liquid
  • Sections / product.liquid
  • Snippets/product-options.liquid


(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' %}



2. Add the Spreadr button along with the Add to Cart button


Go to sections/product-template.liquid file.


Add the below code to display the Spreadr button along with the add to cart button for Spreadr products.


// <button> code

<button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">

   <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>

</button>


{% include 'spreadr-custom' %}

{% if enable_spreadr == true %}

   <a  id="{{ spreadr_link_id }}"  data-productid="{{product.id}}"  name="SpreadrLink" onclick="SpreadrButtonClick{{product.id}}()" href="{{ spreadr_url }}" target="_blank" class="btn btn--wide" rel="nofollow" style="margin-top: 10px;">{{ spreadr_button_text }}</a>

{% endif %}


The code will look as -  



This will add the Speadr button with the existing Add to Cart button.


Note: The code may vary from theme to theme.


Preview:





Similarly, the Spreadr button code can be placed for the Featured Product Card on the Home page, and also on the product grid on the Search page.


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