The design module gives you full control over the cart’s appearance, including its overall layout, selected branding colors, and Checkout button display settings.
General
Inherit Fonts from Theme
This setting enables UpCart to use the fonts defined in your store’s theme settings, as displayed on your storefront. To check which fonts your theme is using, open the Shopify Theme Editor and navigate to the Typography settings.
🚧 Cart Preview 🚧
Inherited fonts from your theme will not be visible in UpCart’s preview window but will render correctly on the live storefront. Please note that the preview is not a fully accurate representation of the final cart experience.
Show Strikethrough Prices
This setting controls whether the Strikethrough Price (also known as the Compare At Price) appears in the cart drawer.
It shows as a crossed-out price next to the item, similar to how it's displayed on your product pages.
Colors
Background Color
The background color setting changes the background of the cart, excluding the footer and upsell cards.
Cart Accent Color
The Cart Accent Color setting lets you customize the background color of the cart footer and upsell item cards.
Cart Text Color
This sets the color of all text in your cart, excluding text defined by the button color or savings color settings.
Savings Text Color
Sets the color of the savings text shown beneath the product price.
🚧 Cart Preview 🚧
Please note that the editor doesn't always reflect the final result precisely.
Your theme may include CSS that affects the size and color of certain elements, so be sure to check the live storefront for the most accurate representation.
Button Settings
Corner Radius
This toggle lets you adjust the corner radius of the Checkout button, allowing you to style it as a square, pill shape, or anything in between:
Button Color
This setting lets you choose the background color for all buttons in the cart.
It applies to buttons such as:
Checkout Button
Upsell "Add to Cart" Button
Discount Code "Apply" Button
Subscription Upgrade Button
Button Text Color
Sets the text color for all buttons within the cart drawer.
Button Text Hover Color
Similar to the Button Text Color setting, this option lets you choose the color of button text when a customer hovers their mouse over it.
For example, if you set the Button Text Hover Color to red, the button text will appear red when hovered over:
