Replo is a page builder, making it really easy to build out new pages in no time at all. However, if you're planning on using UpCart alongside it, a few more steps need to be taken to ensure UpCart functions correctly!

You may have noticed that when clicking on an Add to Cart button on a Replo page, UpCart won't open!

Replo has many options on what to do after an Add to Cart happens, these include

The default behaviour is to go to the Shopify Cart Page, which isn't really helpful when you have UpCart on your store. Let's get it to open UpCart instead!

You're going to need to make use of UpCart's Public API to get Replo to open the cart drawer after adding an item to the cart. Here's how!

Enter the page editor for the product page you're experiencing issues with. Then click on your Add to Cart button within the editor's preview.

On the right side, you'll be able to find a tab called "Interactions", click on that next!

After opening the "Interactions" tab, you'll see that the button is set to "Add Product to Cart", this is fine and you don't want to change this!

However, you do want to add an extra interaction after the add to cart happens. To do this, click the + icon. You'll then want to select Run Javascript, then click "Launch Code Editor" to tell it what Javascript to run!

Now that the JavaScript editor is now open, you just need to add the following code to the editor.

Then save the changes.

Next you'll want to make sure that Replo does not redirect to the Shopify Cart Page after adding an item to the cart, otherwise UpCart will never get a chance to register it.

To do this, select the "Add Product" interaction and turn off the "Go to cart after?" toggle. Afterwards, publish your changes to the page and you're all good to go!

Now Replo should no longer redirecting to the Shopify Cart Page, and should also tell UpCart that it added an item! Great job!

This will need to be done for every product page that you design in Replo, so keep that in mind!