The Connectr app can easily be integrated with themes compatible with Online Store 2.0. This guide will walk you through the process of how to add the integration code to the Dawn Theme


For integrating with older themes refer to the integration guide here.


On the product pages, you have 2 options:


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


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

 

Steps:


1. Open your Shopify admin.

2. Click Online Store > Themes > Actions or three dots for your published theme.

3. Click Edit code. 



4. Click the file main-product.liquid which appears under Sections or buy-buttons.liquid under Snippets.



7. The main-product.liquid or buy-buttons.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" 

class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}" {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}

>

{%- if product.selected_or_first_available_variant.available -%}

{{ 'products.product.add_to_cart' | t }}

{%- else -%}

{{ 'products.product.sold_out' | t }}

{%- endif -%}

</button>


The trick is to find a <button> tag that includes something like 'products.product.add_to_cart'.


(If you are having problems please contact support@connectr.freshdesk.com or raise a support ticket here and we will do the integration for you.)


8. Above the button code line, add the following code.


{% render 'connectr-custom-render', product:product, c_showConnectr:1, c_hideCart:1 , c_classes: 'btn product-form__submit button button--full-width', c_imgbtn: 0, c_btn: connectr_btn, c_style: '' %}


<div class="c_original_{{ product.id }}">


// <button> code



</div>


It will look as shown in the image below. The boxes in blue represent the Connectr integration code. The box in red is the existing <button> code.

The Add to Cart button on the product pages should now be replaced with the View on Amazon button for Connectr products.


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


Go to sections/main-product.liquid or snippets/buy-buttons.liquid file.  


Add the code below to display the Connectr button and the existing add-to-cart button for Connectr products. 


//<button> code


{% render 'connectr-custom-render', product:product, c_showConnectr:1, c_hideCart:0, c_classes: 'btn product-form__submit button button--full-width', c_imgbtn: 0, c_btn: connectr_btn, c_style: '' %}


The code will look as -


This will add a Connectr button along with the existing add tocart button on the Product page.


Note: The code may vary from theme to theme.


Preview:




Similarly, the Connectr button code can be placed for the Featured Product Card on the Home 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.)