How to Set Up Your Cart
What is the Cart Editor?
The Cart Editor is the central hub where you build and customize every section of your slide-out cart drawer. From the header and product cards to the subtotal area and checkout button, you control exactly how your cart looks and behaves.
Why use the Cart Editor?
Full control over your cart layout — Customize the header, product cards, subtotal, and checkout button to match your brand and shopping experience.
Boost conversions with smart defaults — Features like compare-at prices, stock-left indicators, and savings labels encourage customers to complete their purchase.
Seamless shopping experience — Configure behaviors like auto-opening the drawer when items are added, so customers never lose track of their cart.
Requirements before using
You must have the AOV.ai Cart Drawer app installed and active.
Your store should have products added in Shopify so the cart drawer can display them.
How to Set Up?
Step 1: Open the Cart Editor
Go to AOV.ai Cart Drawer > Cart Editor.
You will see the editor with a live preview on the right and a settings menu on the left.
The left menu is organized into three sections: Settings, Body, and Footer.
Step 2: Configure the Header
Click Header in the left menu under Settings.
Set the Cart title — this is the heading customers see at the top of the drawer.
Choose the Text alignment — Left, Center, or Right.
Adjust the Height of the header area.
(Optional) Toggle Show store logo to display your store's logo above the cart title.
If no logo appears, click Refetch logo or Set up logo in Shopify to configure it.
Step 3: Customize the Product Card
Click Product card in the left menu under Body.
Toggle the options you want to show for each item in the cart:
Show variant options — Display variant names and values below the product title.
Show product reviews — Show review stars on each product.
Show vendor — Display the product vendor name.
Show SKU — Show the SKU code.
Show compare-at price — Display the original price with a strikethrough.
Show discount — Highlight the discount amount.
Show stock left — Show remaining inventory. You can set it to Show only when stock left is less than a specific number of items.
Show savings below product prices — Display how much the customer is saving.
Adjust the Image Width, Image Height, and Image Border Radius to control product thumbnails.
Choose a Delete icon style for the remove button.
Step 4: Set Up the Subtotal and Checkout Button
Click Subtotal in the left menu under Footer.
Toggle Show compare-at price to display the original total before discounts.
Toggle Show savings to highlight how much the customer saves.
Click Checkout and View cart button.
Enter a Checkout button label (e.g., "Checkout" or "Proceed to payment").
Enter a View cart button label (e.g., "View cart").
Choose an Icon to display on the checkout button.
Adjust the Button height.
(Optional) Toggle Redirect to cart page when clicking checkout button if you want the button to go to the cart page instead of checkout.
Step 5: Configure General Settings
Click General settings in the left menu under Settings.
Toggle behaviors:
Open Cart Drawer when an item is added to the cart — The drawer slides out automatically after an add-to-cart action.
Open Cart Drawer when the cart icon is clicked — The drawer opens when a customer clicks the cart icon.
Show "Continue shopping" button — Adds a button that closes the drawer.
Set the Cart width for Desktop to control how wide the drawer appears.
Configure the Empty cart section:
Enter an Empty cart message for when the cart has no items.
Set the Continue shopping label and choose where the button redirects — All collections page or Other page with a custom URL.
Step 6: Preview and Save
Review the Preview on the right panel to see how the cart drawer will look on your store.
Click Preview Cart at the top to open a full preview.
Once satisfied, click Save to apply all your changes.
Your cart drawer is now configured. Start customizing other features like Announcements, Upsell Products, and Rewards Bar to maximize your store's conversion rate! 🚀
Last updated