On the Collection pages, you have 3 options:


1. Add a new Spreadr button

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

3. Redirect to the Amazon link when the user clicks the product grid.


If you are unsure of the integration you may contact us here. We will do the integration for you.


1. Add a new Spreadr button 


Let's say you want to add the Spreadr button below the price on the product grid on the Collection page.


Please be sure to look for snippets/product-card-grid.liquid file (or the file that holds the product card info).


Add the code below the price information.


{% 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" rel="nofollow">{{ spreadr_button_text }}</a>

{% endif %}


The code will look as -  



This will add the Spreadr button below the price information on the Product Card.


2. Replace the existing Add to Cart button with the Spreadr button


Go to snippets/product-card-grid.liquid file.


Add the below code to replace the add to cart button with an Amazon button for Spreadr products.


{% 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" rel="nofollow">{{ spreadr_button_text }}</a>

{% else %}

    // <button> code

     <button type="submit" name="add" id="AddToCart" class="btn">

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

     </button>

    {% endif %}


The code will look as - 




This will replace the existing Add to Cart button with the Spreadr button.


3. Redirect to the Amazon link by clicking the product card


If you want the users to be redirected to the external page on clicking the product card then follow the steps below:


Go to snippets/product-card-grid.liquid file.


Locate the HTML for the image container title. You can search for the keyword <a> having href="{{ product.url }}" element.


Add the below code:


{% 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="grid-view-item__link grid-view-item__image-container full-width-link" rel="nofollow"></a>


    {% else %}



// theme image container code...

    {% endif %}

</a>


The code will look as - 



Note: The code may vary from theme to theme.


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 raise a support ticket here. We will do the integration for you.)