Customize & Preview
This document explains all configuration fields and customization options available inside the Customize & Preview tab of the CartLift app.
Note: In the screenshot above, only the Customize & Preview tab is active. Other tabs are blurred to focus on this configuration section.
1. Overview
The Customize & Preview tab allows merchants to fully control the visual design of the cart drawer, progress bar, announcement bar, buttons, and typography.
It includes a real-time cart drawer preview so merchants can instantly see design changes before saving.
2. Add Rule / Customization Controls
Base Size (px)
Controls the base font size used across the cart drawer.
Controls the base font size used across the cart drawer.
Heading Scale
Adjusts heading size proportion relative to base font size.
Adjusts heading size proportion relative to base font size.
Button Radius
Defines corner roundness of buttons (0 = sharp corners).
Defines corner roundness of buttons (0 = sharp corners).
Text Color
Sets global text color inside the cart drawer.
Sets global text color inside the cart drawer.
Background Color
Sets main cart drawer background color.
Sets main cart drawer background color.
Progress Bar Color
Defines color of reward progress bar.
Defines color of reward progress bar.
Announcement Bar Background Color
Sets background color for top announcement/reward bar.
Sets background color for top announcement/reward bar.
Announcement Bar Text Color
Sets text color inside announcement bar.
Sets text color inside announcement bar.
Button Color
Sets primary button background color (Checkout / Add to cart).
Sets primary button background color (Checkout / Add to cart).
Button Label Color
Controls button text color.
Controls button text color.
Border Color
Defines border styling color for cart sections.
Defines border styling color for cart sections.
Icon Color
Sets color for icons inside cart drawer.
Sets color for icons inside cart drawer.
Checkout Button Label
Customize checkout button text (e.g., 'Checkout').
Customize checkout button text (e.g., 'Checkout').
Cart Drawer Background Type
Choose background style:
Choose background style:
- Solid Color
- Other supported styles (if available)
Heading Color
Customize color of cart headings.
Customize color of cart headings.
Show Discount Code Apply Checkbox
Toggle to enable or disable discount code input section in cart drawer.
Toggle to enable or disable discount code input section in cart drawer.
Save Customizations
Click 'Save Customizations' to apply and publish design changes.
Click 'Save Customizations' to apply and publish design changes.
3. Content Settings (Visual Messaging)
Content settings control how reward messages, announcement bars, and promotional text appear inside the cart drawer.
These settings work together with:
- Free Shipping
- Reduced Shipping
- Automatic Discounts
- Free Product Rewards
- Buy X Get Y (BXGY)
4. Preview Panel Explanation
The Cart Drawer Preview section on the right displays a live simulation of the cart.
Preview includes:
Preview includes:
- Reward progress bar
- Product listing layout
- Upsell products section
- Discount code input
- Checkout button styling
All design changes update instantly inside this preview before saving.
5. Best Practices
- Use high contrast colors for buttons.
- Keep progress bar visually noticeable.
- Match cart drawer colors with store branding.
- Test preview before saving changes.