The Design module allows you to customize the appearance of your cart, including layout, brand colours, and button styles.
General
Inherit Fonts from Theme
This setting allows UpCart to use the fonts defined in your Shopify theme settings. To view your current font choices, open the Shopify Theme Editor and navigate to the Typography section.
🚧 Cart Preview 🚧
Fonts inherited from your theme will not appear in the UpCart preview window, but they will display correctly on your live storefront.
Show Strikethrough Prices
Enable this setting to show a strikethrough (also known as the Compare At Price) price beside each item in the cart. This reflects discounted pricing, similar to your product pages.
Colors
Background Color
Sets the main background color of the cart, excluding the footer and upsell cards.
Cart Accent Color
Controls the background color of the cart footer and upsell item cards.
Cart Text Color
Defines the color for all cart text, except for button text and savings text, which are controlled separately.
Savings Text Color
Sets the color of the savings text shown beneath the product price.
🚧 Cart Preview 🚧
The preview editor may not reflect final styling precisely. Your store's theme may include custom CSS that affects text size or color. Always verify changes on your live storefront.
Button Settings
Corner Radius
Adjusts the roundness of button corners. For example:
0 pixels creates square buttons
Higher values create more rounded or pill-shaped buttons
Button Color
Sets the background color for all buttons in the cart, including:
Checkout button
Upsell "Add to Cart" button
Discount "Apply" button
Subscription upgrade button
Button Text Color
Specifies the text color used in all cart buttons.
Button Text Hover Color
Controls the color of button text when a customer hovers over it with their mouse. For example, if set to green, the text will turn green on hover.
