Replo is a page builder that makes it easy to build new pages quickly. However, if you're planning to use UpCart alongside it, a few additional steps are needed to ensure UpCart functions correctly.
The Issue
You may have noticed that when clicking an Add to Cart button on a Replo-built page, UpCart doesn't open as expected.
Replo offers several options for what happens after a product is added to the cart. These include:
Redirect to the Shopify Cart Page
Redirect to the Checkout Page
Stay on the same page
By default, Replo redirects to the Shopify Cart Page, which isn’t ideal when you're using UpCart. Instead, you can configure it to open the UpCart drawer.
The Solution
To get Replo to open the UpCart drawer after an item is added, you’ll need to use UpCart’s public API. Here’s how to do it:
Open Add to Cart Settings
Enter the page editor for the product page you're working on. Then, click on the Add to Cart button in the preview area.
On the right-hand side, locate and click on the "Interactions" tab.
Add an Extra Interaction
In the "Interactions" tab, the button should already be set to "Add Product to Cart"—this is correct and doesn't need to be changed.
Next, click the "+" icon to add another interaction. Choose "Run JavaScript", then click "Launch Code Editor" to specify the script to run.
Insert JavaScript Code
In the code editor, enter the following:javascriptCopyEditwindow.upcartRegisterAddToCart();
Save your changes.
Disable Redirect and Publish
Now, ensure that Replo does not redirect to the Shopify Cart Page after the product is added. This step is essential, as it allows UpCart to properly detect the cart update.
To do this, select the "Add Product" interaction and disable the "Go to cart after?" toggle.
Finally, publish your changes to the page.
Notes
Replo should now stop redirecting to the Shopify Cart Page and instead notify UpCart when an item is added to the cart.
Please note: you'll need to complete this process for each product page you design in Replo Landing Page Designer.