A very common component to use on Replo pages in your Shopify store is a box which displays information about a product. Replo can automatically integrate 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 box into the page.

Selecting a Shopify product:

1. Select the Product Box you want to configure in the editor.
2. On the right side of the editor, click the "Config" button.
3. Click "Select Product" to select a product - you can choose from any product in your Shopify store's catalog.
4. After selecting the product, the box will update with new product information.

Dynamic Data for Price, Description, and More

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

To Add an Add To Cart Button to 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 button (the four dots 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) in the Config panel

Voila!

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

Dynamic Variants with Subscription Selling Plans in Tabs components

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

Using Placeholder Products

Placeholder products are a great way to test the layout and design of a product component if you do not have products in your store, or you want to build a template to use with products across different pages in your project or across projects.

Replo placeholder products are available automatically across all Replo projects. Note that user interactions like "Add to Cart" actions will not work on Replo placeholder products because they're just placeholders.

1. Select the Config tab in the right bar when you select a product component
2. Click the products selector, and click "Placeholder"
3. Select a placeholder product