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


Note: if you are using Shopify Store 2.0 theme then you need to follow the guide available 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 along with the existing Add to Cart button


If you are unsure you may simply contact us at support@connectr.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 or 3-dots 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"

                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}

                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"

                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"

                  {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}

                  data-add-to-cart>

                  <span data-add-to-cart-text>

                    {% unless current_variant.available %}

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

                    {% else %}

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

                    {% endunless %}

                  </span>

                  <span class="hide" data-loader>

                    {% include 'icon-spinner' %}

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


The code will look as -   



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


Go to sections/product-template.liquid file.


Add the below code to display the Connectr button along with the existing add to Cart button for Connectr products.


// <button> code

<button type="submit" name="add"

                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}

                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"

                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"

                  {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}

                  data-add-to-cart>

                  <span data-add-to-cart-text>

                    {% unless current_variant.available %}

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

                    {% else %}

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

                    {% endunless %}

                  </span>

                  <span class="hide" data-loader>

                    {% include 'icon-spinner' %}

                  </span>

                </button>


{% include 'connectr-custom' %}

{% if enable_connectr == true %}

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

{% endif %}


The code will look as -   



This will add the Connectr 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.


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.