Interactions

  • Updated

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.

Product and Cart 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.

Clear Cart

This interaction clears all items out of the cart.

"Clear Cart" is really useful for things like bundle builders and free gifts, when you want to make sure that the cart has exactly certain items. You can ensure that the cart includes only certain products by adding a "Clear Cart" action directly before the "Add Product To Cart" actions.

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.

When creating an Update Current Product interaction, you can also specify which variant to set as selected for the new product, which will be used to show Dynamic Data for the product box you're editing. If no variant is selected, Replo will use the first one in the product's listing.

General Interactions

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.

Component-specific Interactions

Activate Tab

This interaction activates a specific tab inside a Tabs Block component. For more information about tabs, see Tabs.

Note that the number of the tab to activate is indexed from 0 - that is, to activate the first tab in the list, you put 0 in the number field.

Go To Next Slide

This interaction activates the next slide in a Carousel component.

Go To Previous Slide

This interaction activates the previous slide in a Carousel component.

Go To Slide

This interaction activates a specific slide inside a Carousel component.

The number of the slide to activate starts at 1 - for example, to activate the second slide in the carousel, you put 2 in the number field.

Close Popup

This interactions closes the currently open Popup component. The "Close Popup" action is usually used on things like "X" Icons, in order to remove the currently open popup and go back to the normal page.

Was this article helpful?