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:
- Find the component you want to make interactive and click to select it
- On the right side of the editor, find the "Interactions" tab at the top.
- Determine what type of interaction you want to add:
- On Click interactions happen when the user clicks the component
- On Hover interactions happen when the user hovers over the component with their mouse
- Click the "+" button next to the interaction type you want to add.
- 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).
- 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.