Every Replo component can be interactive - when you create a page in Replo, you can specify what happens when the user clicks on a component or hovers over it with their mouse.

Adding an interaction

To add an interaction to a component:

1. Find the component you want to make interactive and click to select it
2. On the right side of the editor, find the "Interactions" tab at the top.
3. Determine what type of interaction you want to add:
   1. On Click interactions happen when the user clicks the component
   2. On Hover interactions happen when the user hovers over the component with their mouse
4. Click the "+" button next to the interaction type you want to add.
5. Select what you want to happen for the interaction. Depending on the type, you may have to configure more fields (for example, if the interaction is to add a product to the cart, you'll have to specify which product to add).
6. Click "Save" to save the interaction.

Types of interactions

Add Product to Cart

Adds a Shopify product to the cart. You can specify whether you'd like to automatically direct the user to the cart page or to the checkout directly after adding the product to the cart. You can also select a specific variant or subscription selling plan to add.

You can also add the currently selected variant of a Product component using Dynamic Data.

Adding Multiple Products to Cart

To add multiple products to the cart, just add two interactions - make sure that only the last Add Product To Cart interaction has a redirection to the cart or checkout page.

Redirect

This interaction turns the component into a link, which opens a different page in the user's browser.

Redirect to Product Page

This interaction turns the component into a link to the product description page of a specific Shopify product.

Apply Discount Code

This interaction applies a Shopify Discount Code to the user's session. This discount code will always be applied at checkout.

Activate State

This interaction activates a specific State of a Replo component on the page.

Scroll to a URL hashmark

This interaction will scroll the viewport to a hashmarked section (see Hashmarks).

Run Javascript

This interaction execute custom Javascript code (recommended only for those with experience programming in Javascript). This action can be used to interact with other custom parts of your store's theme, for example to open a slide-out cart.

Update Current Product

This interaction updates a Product Component to point at a different Product than the one originally set. Generally this is used to leverage multiple products within one product component. As such, it is crticial in working around Shopify's 100 variant-per-product limit.