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

Screenshot of the shopify backend

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

Screenshot of the shopify backend

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

  1. 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.

missing the answer to your question?

Fields marked with an asterisk (*) are required.
Thank you! Your submission has been received!

We are now hitting the keys to produce the content you are looking for. We will inform you once we are finished.  
Oops! Something went wrong while submitting the form.