Custom CSS
When the settings don't quite cover it, a few lines of CSS can change almost anything about the side cart's look.
ShapedCart's settings cover the side cart's colors, sizes and icons. For anything beyond that, like the overlay color, a different font or hiding one part on phones, you can add your own CSS. This page lists the CSS custom properties and class names ShapedCart uses, with examples you can copy.
Try the settings first
Colors, widths, the corner radius and icons are all settings. See Layout & Colors, Floating Cart → Style and Menu Cart → Style. Settings survive theme changes and show in the live preview. Custom CSS doesn't.
Where to add CSS
Add your CSS in one of these places. All of them load after ShapedCart's own styles, so your rules take effect:
- Classic themes: Appearance → Customize → Additional CSS.
- Block themes: Appearance → Editor → Styles, then open the ⋮ menu and choose Additional CSS.
- A child theme's
style.css, if you already use one.
After saving, clear any caching plugin's cache, then reload your store to see the change.
Target the right element
ShapedCart's styles are written so your theme doesn't accidentally override them, so a rule that only uses a class name may not be strong enough. Start your selectors with the ID of the part you're styling:
| Part | Start selectors with |
|---|---|
| The side cart | #shaped-cart |
| The floating cart | #shaped-cart-bubble |
| The menu cart | a.shaped-cart-menu-trigger |
For example, write #shaped-cart .shaped-cart__note, not just .shaped-cart__note.
CSS custom properties
ShapedCart turns your style settings into CSS custom properties, also called CSS variables, on :root. Its stylesheet then reads them. You can use them in your own CSS to stay consistent with your settings, for example color: var(--shaped-cart-accent);.
| Custom property | Set by |
|---|---|
--shaped-cart-width | Side cart → Cart Width (desktop) |
--shaped-cart-width-tablet | Side cart → Cart Width (tablet) |
--shaped-cart-width-mobile | Side cart → Cart Width (mobile) |
--shaped-cart-radius | Side cart → Corner radius |
--shaped-cart-bg | Side cart → Background |
--shaped-cart-text | Side cart → Primary text |
--shaped-cart-text-muted | Side cart → Secondary text |
--shaped-cart-border | Side cart → Borders & dividers |
--shaped-cart-field-border | Side cart → Borders & dividers (used for the Continue shopping and View cart button borders) |
--shaped-cart-accent | Side cart → Accent |
--shaped-cart-accent-text | Side cart → Accent text |
--shaped-cart-regular-color | Side cart → Regular price |
--shaped-cart-save-color | Side cart → Savings text |
--shaped-cart-bubble-x | Floating Cart → Offset (first value) |
--shaped-cart-bubble-y | Floating Cart → Offset (second value) |
--shaped-cart-bubble-size | Floating Cart → Size |
--shaped-cart-bubble-radius | Floating Cart → Radius |
--shaped-cart-bubble-bg | Floating Cart → Background |
--shaped-cart-bubble-icon | Floating Cart → Icon Color |
--shaped-cart-bubble-badge | Floating Cart → Count Badge Background |
--shaped-cart-bubble-count | Floating Cart → Count Color |
--shaped-cart-menu-icon | Menu Cart → Icon Color (also the total's color) |
--shaped-cart-menu-icon-size | Menu Cart → Icon Size |
--shaped-cart-menu-badge | Menu Cart → Count Badge Background |
--shaped-cart-menu-count | Menu Cart → Count Color |
Setting a property in CSS overrides its setting
If you write :root { --shaped-cart-accent: #4f46e5; } in your CSS, the Accent setting stops having any effect, because your rule loads later. That can be confusing months from now. Change these values in the settings instead, and use the properties in CSS only to read them.
Class names
These are the classes and IDs in ShapedCart's markup. They start with shaped-cart, and the side cart's inner parts use the shaped-cart__part pattern.
Side cart
| Selector | What it is |
|---|---|
#shaped-cart, .shaped-cart | The whole cart, including the overlay. Fixed over the page. |
.shaped-cart--right, .shaped-cart--left, .shaped-cart--modal | Which Opening is chosen |
.shaped-cart.is-open | Added while the cart is open |
.shaped-cart__overlay | The dimmed layer behind the panel. Clicking it closes the cart. |
.shaped-cart__panel | The cart panel itself |
.shaped-cart__header, .shaped-cart__heading, .shaped-cart__heading-icon, .shaped-cart__count, .shaped-cart__close | The header: heading, its icon, the item count and the close button |
.shaped-cart__body--items, .shaped-cart__body--empty | The scrolling item list, and the empty-cart area. The one not in use has the hidden attribute. |
.shaped-cart__items, .shaped-cart__item | The item list and each item |
.shaped-cart__item-media, .shaped-cart__item-remove | The product image, and the remove × on it |
.shaped-cart__item-title | The product name link |
.shaped-cart__item-meta | The variation line, like Color: Black / Size: M |
.shaped-cart__item-data, .shaped-cart__item-data-row, .shaped-cart__item-data-key, .shaped-cart__item-data-value | Custom details from add-on plugins |
.shaped-cart__item-stock | The low-stock badge |
.shaped-cart__qty, .shaped-cart__qty-btn, .shaped-cart__qty-input | The quantity stepper, its − and + buttons, and its number box |
.shaped-cart__item-price, .shaped-cart__item-price-regular, .shaped-cart__item-price-current, .shaped-cart__item-savings | The price column: crossed-out price, current price and savings badge |
.shaped-cart__empty, .shaped-cart__empty-icon, .shaped-cart__empty-button | The empty-cart message, icon and button |
.shaped-cart__footer | Everything under the items: coupon, summary and buttons |
.shaped-cart__coupon, .shaped-cart__coupon.is-expanded | The coupon field, and its open state |
.shaped-cart__coupon-toggle, .shaped-cart__coupon-input, .shaped-cart__coupon-apply, .shaped-cart__coupon-error | The coupon heading link, code box, Apply button and error message |
.shaped-cart__row--subtotal, .shaped-cart__row--discount, .shaped-cart__row--shipping, .shaped-cart__row--total | The summary rows. All of them also have .shaped-cart__row. |
.shaped-cart__coupon-chip, .shaped-cart__discount-amount | An applied coupon's code and its discount amount |
.shaped-cart__note | The shipping note |
.shaped-cart__checkout-btn, .shaped-cart__continue, .shaped-cart__view-cart | The checkout, Continue shopping and View cart buttons |
Floating cart and menu cart
| Selector | What it is |
|---|---|
#shaped-cart-bubble, .shaped-cart-bubble | The floating cart |
.shaped-cart-bubble--br, --bl, --mr, --ml | Its Position: bottom right, bottom left, middle right, middle left |
.shaped-cart-bubble__icon, .shaped-cart-bubble__count | Its icon and count badge |
li.shaped-cart-menu-item | The menu item ShapedCart adds with Add to Menu |
a.shaped-cart-menu-trigger | The menu cart link, from the menu or the shortcode |
.shaped-cart-menu-trigger__icon, .shaped-cart-menu-trigger__count, .shaped-cart-menu-trigger__total | Its icon, count badge and total |
Page states
| Selector | When it applies |
|---|---|
body.shaped-cart-locked | While the cart is open. It stops the page scrolling and hides the floating cart. |
.shaped-cart-hide-desktop, .shaped-cart-hide-tablet, .shaped-cart-hide-mobile | Added to the floating cart for each device unticked in Device Visibility |
Upgraded from RenoCart?
Class names and custom properties used to start with reno-cart. Custom CSS written for the old names needs updating. See RenoCart is now ShapedCart.
Breakpoints
ShapedCart uses the same three screen sizes everywhere, for Cart Width and Device Visibility:
| Device | Screen width | Media query |
|---|---|---|
| Desktop | Wider than 1024px | @media (min-width: 1025px) |
| Tablet | 601px to 1024px | @media (min-width: 601px) and (max-width: 1024px) |
| Mobile | 600px or narrower | @media (max-width: 600px) |
Use the same queries in your CSS, so your changes switch at the same points as ShapedCart's.
Examples
Copy any of these into your Additional CSS and adjust the values.
Make the overlay darker, or lighter:
#shaped-cart .shaped-cart__overlay {
background: rgba(20, 22, 24, 0.7);
}Use a different font in the cart. Use a font your theme already loads:
#shaped-cart {
font-family: Georgia, serif;
}Hide the coupon field on phones:
@media (max-width: 600px) {
#shaped-cart .shaped-cart__coupon {
display: none;
}
}Show a clear focus outline on the menu cart for keyboard users:
a.shaped-cart-menu-trigger:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
border-radius: 4px;
}Make the Continue shopping and View cart buttons outlined instead of grey:
#shaped-cart .shaped-cart__continue,
#shaped-cart .shaped-cart__view-cart {
background: transparent;
}Change the color of coupon discounts, which is green by default and isn't a setting:
#shaped-cart .shaped-cart__discount-amount {
color: #23793f;
}Make the checkout button bigger:
#shaped-cart .shaped-cart__checkout-btn {
height: 54px;
font-size: 17px;
}Hide the menu cart total on phones, to save space in a crowded header:
@media (max-width: 600px) {
a.shaped-cart-menu-trigger .shaped-cart-menu-trigger__total {
display: none;
}
}Let a chat widget sit on top of the floating cart. The floating cart sits very high in the page's stacking order, at z-index: 99999. The side cart is higher again, at 100000, so it always covers the page. Lower the floating cart if another widget needs to be above it:
#shaped-cart-bubble {
z-index: 999;
}Related
- Layout & Colors: the built-in style settings
- Developer Reference: shortcodes, a custom open button, events and stored data
- Accessibility: keep custom colors readable