Shopify Product Collection Component

Replo can automatically integrate with your Shopify store's products and dynamically add multiple products at a time to any Replo page or section.

Add a product collection 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 Collection".
3. Drag the product collection into the page.

Selecting Shopify products:

1. Select the Product Collection you want to configure in the editor.
2. On the right side of the editor, click the "Config" button.
3. Click any product in the list to change the product. You can also click the plus button to add a new product or rearrange existing products.
4. After changing a product, the collection component will update with new product information.

Dynamic Data for Products in the Collection

Product Collections always contain one Product component, and they use Dynamic Data to dynamically pull in product information, like price and images. See Shopify Products for more information.

Product Collection Examples

Changing the Product Image on Hover

To change images which are displayed in the product containers when visitors to your store hover over each product, you can use a Hover State. To do this:

1. Select the Product container inside the Product Collection component
2. On the right, add a Hover State
3. Select the image you want to change, and on the right-hand side of the editor under "Image Source", click to select Dynamic Data
4. Select which image you want to show on hover - for example, to show the product's second image, select "Current Product" > "Images" and choose the second image.