How to Customize your Cart

What are Design and Templates?

The Design settings let you control the overall visual appearance of your cart drawer. You can choose from pre-built templates, pick preset color schemes, auto-match your store's theme, or fully customize every color from the header background to the discount text.

Why customize your design?

• Brand consistency — Match the cart drawer's look to your store's branding so it feels like a seamless part of the shopping experience.

• Professional appearance — Pre-built templates and presets give you a polished design in seconds.

• Pixel-perfect control — Customize individual colors for the header, body, footer, buttons, text, prices, and discounts.

Requirements before using

• You must have the AOV.ai Cart Drawer app installed and active.

• The Cart Editor should be open so you can access the Design section.

How to Set Up?

Step 1: Choose a Template

1. Go to AOV.ai Cart Drawer > Cart Editor.

2. Click Design in the left menu under Settings.

3. Under Template, click Choose template to browse available designs:

   • Classic — A simple, calming design with soft colors, perfect for highlighting timeless and effortless styles across domains. Best for: Fashion, Fitness, Beauty.

   • Minimal — A clean, distraction-free layout that puts your products in the spotlight for a modern shopping experience. Best for: Home & Garden.

4. Select a template and confirm. If you have unsaved changes, you will be prompted to Save settings or Discard settings before switching.

Choose template

Step 2: Select a Preset Color Scheme

1. Under Preset, browse the available color presets.

2. Click any preset to instantly apply its color scheme to your cart drawer.

3. (Optional) Click Auto-match theme to pull colors directly from your Shopify theme. Click repeatedly to preview different color schemes from your theme.

Tip: Auto-match theme is a great starting point. You can always fine-tune individual colors afterward.

Preset color schemes

Step 3: Customize Background Colors

1. Under Background, set colors for each section of the cart drawer:

   • Header background — The color behind the cart title and logo.

   • Body background — The color behind the product list area.

   • Footer background — The color behind the subtotal and checkout button.

Background colors

Step 4: Customize Button, Text, and Price Colors

1. Under Button, configure:

   • Background color — The button's fill color.

   • Button text color — The text color on buttons.

   • (Optional) Toggle Enable gradient background and set Gradient start color and Gradient end color for a gradient button.

2. Under General, set:

   • Text color — The main text color throughout the drawer.

   • Icon color — The color of icons.

   • Divider & delete icon color — The color of section dividers and the product remove icon.

3. Under Price & discount, set:

   • Price color — The color of product prices.

   • Compare price color — The color of the original strikethrough price.

   • Saving color — The color of savings text.

   • Discount background — The background color of discount badges.

   • Discount text & icon color — The text and icon color inside discount badges.

Button, text, and price colors

Step 5: Add Custom CSS and Save

1. (Optional) Scroll to Custom CSS and enter your own CSS rules to further customize the cart drawer's appearance. The placeholder reads: "Beauty your cart drawer with custom CSS."

2. Review the live preview on the right to confirm your design changes.

3. Click Save to apply all design settings.

Custom CSS and save

Your cart drawer design is now customized. A well-branded cart creates trust and keeps customers engaged all the way to checkout! 🚀