Candy Rack's slide cart comes with a clean default design that works out of the box. If you want to take it further and match your store's look exactly, you can target any element using CSS.
Below you'll find the full list of available class selectors, practical examples to get you started, and a few tips to make sure your styles apply reliably.
To add your CSS, go to Slide cart > Design in the Candy Rack app menu, find the Custom CSS section, and paste your code there.
List of selectors
These are the stable class selectors you can use to style the slide cart. They follow a consistent candyrack-slider-cart-* naming pattern, so they won't break when the app updates.
Element | Class selector |
Cart wrapper |
|
Cart title ("Cart (1)") |
|
Close (×) button |
|
Reward bar (free shipping progress) |
|
Cart item container |
|
Item product name |
|
Item current price |
|
Item original (crossed-out) price |
|
Discount code badge on item |
|
Remove item button |
|
Quantity minus button |
|
Quantity plus button |
|
Upsell offers section title |
|
Upsell offer card |
|
Offer product name |
|
Offer badge ("SAVE 20%", "RECOMMENDED") |
|
Offer price |
|
Offer "Add" button |
|
Subtotal label |
|
Subtotal amount |
|
Checkout button |
|
Customization examples
Here are some examples using CSS to enhance your slide cart and align it with your store's branding.
Checkout button
Change the background color, text color, and border radius of the checkout button to match your store's CTA style. You can also set a hover state:
.candyrack-slider-cart-footer-checkout-button {
background-color: #1a1a1a !important; /* button background */
color: #ffffff !important; /* button text color */
border-radius: 4px !important; /* corner radius */
font-size: 16px !important;
}
.candyrack-slider-cart-footer-checkout-button:hover {
background-color: #333333 !important;
}
Offer "Add" button
Style the upsell offer add buttons independently from the checkout button:
.candyrack-slider-cart-offer-item-add-button {
background-color: #ff5024 !important;
color: #ffffff !important;
border-radius: 6px !important;
}
.candyrack-slider-cart-offer-item-add-button:hover {
background-color: #cc4020 !important;
}Offer badges
Customize the "SAVE X%" and "RECOMMENDED" badges to fit your brand:
.candyrack-slider-cart-offer-item-badge {
background-color: #000000 !important; /* badge background */
color: #ffffff !important; /* badge text color */
border-radius: 3px !important;
}Offers section title
Change the font size or weight of the "Add frequently bought together items" heading:
.candyrack-slider-cart-offers-title {
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}Reward bar
Adjust the progress bar fill, background, and text color to match your brand accent. The reward bar uses CSS custom properties, so no !important needed:
.candyrack-slider-cart-reward-bar {
--cr-slider-cart-reward-bar-progress-fill-color: #000000;
--cr-slider-cart-reward-bar-bg-color: #f9f9f9;
--cr-slider-cart-reward-bar-text-color: #1a1a1a;
}Custom font
Import a custom Font and apply it to the entire slide cart:
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
#candyrack-slider-cart {
font-family: 'Inter', sans-serif !important;
}Things to know
The slide cart renders directly in your storefront page, unlike the pop-up, it's not inside an iframe. This means your theme's global CSS variables and fonts may already carry over automatically. Check this in your browser's developer tools before adding duplicate styles.
Most custom rules will need !important to override the slide cart's built-in styles.
Need help with this? Reach out via in-app chat, we're happy to take a look.