On the Collection pages, you have 2 options:


1. Add a new Connectr button

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


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

1. Add a new Connectr button 


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


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


Add the code below the price information.


{% include 'connectr-custom' %}

{% if enable_connectr == true %}

    <a id="{{ connectr_link_id }}" name="ConnectrLink" href="{{ connectr_redirect_url }}" target="_blank" class="btn" rel="nofollow">{{ connectr_button_text }}</a>

{% endif %}


The code will look as -   




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


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


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


Add the below code to replace the add to cart button with a Connectr button for Connectr products.


{% include 'connectr-custom' %}

{% if enable_connectr == true %}

    <a id="{{ connectr_link_id }}" name="ConnectrLink" href="{{ connectr_redirect_url }}" target="_blank" class="btn" rel="nofollow">{{ connectr_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 Connectr button.

Note: The code may vary from theme to theme.  

Similarly, the Connectr 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 have problems with the integration code or want to change the way the button looks, please raise a support ticket. We will take care of it.)