Building in Replo

Interactions

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

  • Redirect: Turns the component into a link, which opens a different page in the user's browser
  • Redirect to Product Page: Turns the component into a link to the product description page of a specific Shopify product
  • 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.
  • Apply Discount Code: Applies a Shopify Discount Code to the user's session. This discount code will always be applied at checkout.
  • Activate State: Activate a specific State of a Replo component on the page.
  • Run Javascript: Execute custom Javascript code (recommended only for those with experience programming in Javascript)
Previous
Dynamic Data