Integrating Connectr App on Collection pages with online store 2.0 themes

This guide walks you through adding the integration code to Dawn and other Online Store 2.0 themes.

On your Collection pages, you have two options:

1. Add a new Connectr button (keeps both buttons).
2. Replace the Add to Cart button with the Connectr button.

Option 1: Add a New Connectr Button
Use this option if you want to display the Connectr button right below the price on your product collection cards (useful if the default Add to Cart HTML structure isn't directly supported).

1. Locate your snippets/card-product file (or the file that handles your theme's product card layout).
2. Insert the following code block right beneath the price information:
   

Code snippet

{% render 'connectr-custom-render', product: card_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 like as

This will add a separate Connectr button directly below the price layout on your Product Cards.

Option 2: Replace the Existing Add to Cart Button
Use this option if you want the Connectr button to completely take over and replace the default Add to Cart button for your synced products.

1. Locate your snippets/card-product file.
2. Wrap your theme's default button code by inserting the snippet directly above it, like this:
   
   

Code snippet

{% render 'connectr-custom-render', product:card_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: '' %}

⚠️ Important Notes

• Theme Variations: Layout structures can vary significantly between themes. The exact file placement or button element styling might look slightly different depending on your setup.
• Additional Pages: You can apply this exact same logic to your Home page (Featured Product Cards) or your Search page product grids.

Need Help? If you are unsure about editing code, simply contact us at [email protected] and our team will handle the integration for you.