A common component to use on Replo pages in your Shopify store is a buy box which displays information about a product and includes an ATC (or Add to Cart) button.

Replo automatically integrates with your Shopify store's product listing in order to display product information anywhere in any Replo page.

Add a product component:

  1. Navigate to the page you want to add an Product component to in the editor.

  2. On the left side of the editor, click the "Components" toggle, then search for "Product".

  3. Drag the product buy box into the page.

Selecting a Shopify product:

Product Boxes can use dynamic data to display product prices, descriptions, titles, add-to-cart buttons, and more. For more information, see Dynamic Data.

Add to cart button on a product component:

  1. Select the Product box you want to add to.

  2. On the left side of the editor, click the "Components" toggle, then search for "Button", and drag in the button.

  3. Select the button, then under "Interactions" on the left, click the "+" button next to "On Click", then select "Add Product to Cart."

  4. Click the Dynamic Data icon, then click "Selected Variant."

  5. Click "Add Dynamic Data" then "Save" to save the Interaction

Allowing variant and option selection

You can use the Variant/Option List/Dropdown components in Replo to allow users on your store to dynamically select which product variant will be added to the cart. To do this:

  1. Drag the variant or options list component from the left Components menu

  2. If you chose an option list, select the option you want (e.g. Size or Color) to display within the right panel.

How to hide specific options:

  1. From the page layers on the left side panel, select the “Option List” component.

  2. Navigate to the right side panel and click on “Config.”

  3. Scroll down to “All Option Values” and select/deselect the options you don’t want to display

Allowing subscription selling plan selection

Replo also allows you to create a dynamic selector for which subscription selling plan will be added to the cart with the Add To Cart Interaction. To set this up:

  1. From the components tab in the left bar, drag out the Selling Plan List or Selling Plan Dropdown components and place them inside the Product box

  2. In the Add to Cart interaction, be sure to select "Selected Selling Plan" using Dynamic Data. Make sure that "Allow third-party embed to select selling plan" is turned off.

  3. Important: If your subscription discounts are not working properly, ensure that "Allow third-party embed to select selling plan" is turned off in your Add to Cart interaction settings. This is a common cause of subscription functionality issues.

With Tabs, it's easy to use the dynamic Variant List or Options List components while selecting a particular subscription selling plan. To do this:

  1. Add the variant or options list component as described above

  2. When configuring an Add Product To Cart Interaction, make sure to select the correct Subscription Selling Plan