The Connectr app can easily be integrated with the 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.
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 main-product.liquid which appears under Sections.
7. The main-product.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.
9. Hit Save.
10. The Add to Cart button on the product pages should now be replaced with the View on Amazon button for Connectr products.