This guide will walk you through the simple process of integrating the Connectr button link into your Shopify site.


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@connectr.freshdesk.com or raise a support ticket here and we will do the integration for you.)


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


 <!--Connectr file--->
 {% include 'connectr' %}



9. Hit Save.


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.