Shopify Product Component

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

To add Variants and Options to a Product Component

  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


To Add a Placeholder Product to a Product Component:

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