The design module's whole purpose is to give you full control over the cart's front-facing experience.
This includes an option to inherit fonts from your theme directly, whether or not we should be showing strikethrough prices, along with plenty of color options.
See more about these below!
Theme Settings
Inherit Fonts from Theme
This setting allows you to tell UpCart whether or not it should use the theme's current fonts.
You can find out what fonts your theme is using by accessing your Shopify Theme Editor, and then viewing your theme's typography settings.
🚧 Cart Preview 🚧
The fonts that will be inherited will not display in UpCart's preview window. They will however display correctly on the storefront.
UpCart's preview window is not designed to be a 100% accurate representation of the cart.
Show Strikethrough Prices
This setting determines whether the Strikethrough Price (also known as the Compare At Price) of a product is displayed in the cart drawer or not.
These numbers display as a crossed out price next to the item, similar to what you'd see on a Product page on your storefront.
Colors
🚧 Cart Preview 🚧
While the colors may look great on the preview window, keep in mind that the editor is not 100% accurate.
Your theme may contain some CSS code that would change the size and color of certain elements, always refer to the storefront.
Background Color
The background color setting affects the background color of everything on the cart other than the cart's footer and the upsells cards.
Cart Accent Color
The Cart Accent color setting will allow you to change the background color of the cart footer, and the upsell item cards.
Button Color
This setting allows you to choose what background color all of the buttons on the cart will have.
This applies to buttons like the:
Checkout Button
Upsells Add to Cart Button
Discount Code Apply Button
Subscription Upgrade Button
Button Text Color
This is the text color for all buttons in the cart drawer.
Button Text Hover Color
Similar to the Button Text Color setting. This allows you to choose what color the text should be when the customer has their mouse over the button.
For example, if my Button Text Hover Color setting was set to red, then the cart's button would look like this when I put my mouse over them:
Cart Text Color
This is the color of all the other text on your cart that aren't on buttons.
So things like the cart header, product titles, prices, etc:
❓ What About the (Save $___) Text Color? ❓
While there currently isn't a setting for this, you can change the color by adding the following code to the Custom CSS section in the Settings tab!
.upcart-product-savings
{
color: red !important;
}
Just change the word "red" to any color name (or HEX code) you want!