How to build a custom cart?
- Aleksandra Khvoynitskaya (Unlicensed)
You can create a custom shopping cart to enhance your store’s shopping cart experience and boost conversion rate. In the app admin, go to Custom cart and select what type of cart you want to create:
Slide drawer
Pop-up
Slide drawer
Slide drawer is a cart type selected by default. To enable it, use the toggle button.
To customize the slide drawer design, go to Design settings and select what exactly you want to edit:
General
Cart footer
Lines
Primary elements
Secondary elements
Buttons
Next, select the color that you want the selected element to be.
Tick the box under Terms and Conditions, if you want shoppers to accept your terms and conditions before proceeding to checkout. You can use the default text or edit it as you wish.
If you have an Installment provider active on Shopify checkout, you can notify your customers about the opportunity to pay in installments - just tick the corresponding box under Installment payment / Buy Now Pay Later.
Set up the number of payments, the installment payment label, and the provider’s logo. On the right, you can always preview what the slide drawer will look like.
Under Translations, edit the text of labels if needed.
The Buttons selections block is minimized if all selectors are set up. If actions are required, the block will be displayed in expanded form and the “Selection required” status will be seen for the “Add to cart’ button selection. Check the box near ‘A click on a theme cart icon opens a custom cart’ and select its position if needed.
Finally, save changes or revert them to default if needed.
Pop-up
If you select a pop-up as a cart type, you’ll see the checkbox ‘Add "Go To Cart" button to the pop-up’. Select it to display the Go to cart button near the Checkout button.
Similar to slide drawer design settings, you can customize the pop-up elements to fit your store’s look and feel. Also, you can edit the popup style with CSS.
Under Translations, edit the text of labels if needed.
The Buttons selections block is minimized if all selectors are set up. If actions are required, the block will be displayed in expanded form and the “Selection required” status will be seen for the “Add to cart’ button selection. Check the box near ‘A click on a theme cart icon opens a custom cart’ if needed.
Preview your custom cart and click Save. You can revert settings to default if needed.