Overview
The Custom CSS section allows you to write your own CSS code to adjust the styling of elements in your cart drawer.
First, make sure you are familiar with Custom HTML and CSS; we have a great help doc called Getting Started with UpCart Customizations to ensure you are ready.
To locate the Custom CSS section in UpCart, navigate to the Cart Editor> go to Settings, and scroll down past the Custom HTML section until you reach the Custom CSS section, as shown below.:
Please note: You can change the styling of pre-existing elements, along with any elements you create in the Custom HTML section as well.
CSS Selectors
UpCart has a very large amount of selectors to ensure you can make as many changes as you want! You can see the full list of them by clicking the "Show list" button.
We provide an auto-complete popup to help you write code more efficiently. As you type, the list of available selectors narrows down.
Choosing a selector from the popup will automatically complete it for you, allowing you to quickly add brackets and styling as needed.
Important:
The Custom CSS section can also affect styling on your site if you use a broad selector.
So we recommend avoiding using selectors that can target parts of the editor or your site, like body, h3, div, etc., as they could affect these elements on your site as well.
If you need to use one of these, make sure to put .upcart-cart at the beginning of the selector so that it only affects elements within UpCart.
If you notice a missing selector, let us know by reaching out to UpCart Support via the live chat in the bottom right corner of the app.
Creating Custom CSS code:
Suppose you want to add a thank-you message below the checkout button to express appreciation to your customers for shopping with you.
To achieve this, we need to add some HTML below the checkout button:
Without any CSS, the message appears plain and unnoticeable—it’s small, lacks color, and isn’t centered. This happens because no styling has been applied yet.
By adding CSS to make it green, centered, bold, 16px in size, and with 5px of spacing above, the message becomes much more visually appealing:
And there you have it—a personalized thank-you message using Custom HTML and CSS!
🚧 Support for Customizations
UpCart's support team cannot assist with implementing custom CSS or HTML solutions in your cart.
If you need help designing or styling something custom, we recommend consulting a Shopify Expert: https://www.shopify.com/partners/directory.