How to Replace the Shopify Cart With the circuly Cart and Checkout

Add a code snippet to every button that submits the cart in order to display the circuly cart and checkout instead of the default Shopify cart and checkout.

‍

Circuly first takes action when your customer clicks on the “Add to cart” button. If you’ve added the code to every button on your website that submits the cart, the circuly checkout is loaded in place of the default Shopify checkout.

‍

Here are the steps to add the code.

‍

1. After installing the private app > Go to Themes in your Shopify backend > Go to Actions > Edit code > Add the following onclick="event.preventDefault(); submitCart();" id="checkout" to all buttons that submits the cart

‍

‍

Note: Usually you can find the general checkout ID under Snippets > product-card.liquid. And for mini-cart checkout under header.liquid. Alternatively it can be under Sections > cart.notification.liquid

‍

‍

Please note that the button needs an ID of checkout, some themes have this by default.

‍

2. Also remove the fast checkout button (example button: Buy now)

Now every time your customer clicks on “Add to cart” the circuly checkout will load in place of the Shopify default cart.

‍