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	`#candyrack-slider-cart`
Cart title ("Cart (1)")	`.candyrack-slider-cart-header-title`
Close (×) button	`.candyrack-slider-cart-close-button`
Reward bar (free shipping progress)	`.candyrack-slider-cart-reward-bar`
Cart item container	`.candyrack-slider-cart-item-container`
Item product name	`.candyrack-slider-cart-item-product-details-title`
Item current price	`.candyrack-slider-cart-item-product-details-price`
Item original (crossed-out) price	`.candyrack-slider-cart-item-product-details-discounted-price`
Discount code badge on item	`.candyrack-slider-cart-item-product-details-discount`
Remove item button	`.candyrack-slider-cart-item-product-details-remove-button`
Quantity minus button	`.candyrack-slider-cart-item-product-details-quantity-button-minus`
Quantity plus button	`.candyrack-slider-cart-item-product-details-quantity-button-plus`
Upsell offers section title	`.candyrack-slider-cart-offers-title`
Upsell offer card	`.candyrack-slider-cart-offer-item-wrapper`
Offer product name	`.candyrack-slider-cart-offer-item-header`
Offer badge ("SAVE 20%", "RECOMMENDED")	`.candyrack-slider-cart-offer-item-badge`
Offer price	`.candyrack-slider-cart-offer-price`
Offer "Add" button	`.candyrack-slider-cart-offer-item-add-button`
Subtotal label	`.candyrack-slider-cart-footer-subtotal-label`
Subtotal amount	`.candyrack-slider-cart-footer-subtotal-price`
Checkout button	`.candyrack-slider-cart-footer-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;
}

Horizontal offers carousel

By default, upsell offers are displayed as a vertical list. The snippet below turns them into a horizontal scrollable carousel, showing around 3 cards at once on desktop and 2 on mobile, with smooth snap scrolling between cards.

To adjust how many cards are visible at once, edit the divisor values in the flex and width lines:

Desktop: change 3.15 in calc((100% - 24px) / 3.15) — a value of 3.15 shows ~3 cards, 2.15 shows ~2, 4.15 shows ~4.
Mobile: change 2.25 in calc((100% - 10px) / 2.25) — a value of 2.25 shows ~2 cards, 1.25 shows ~1, 3.25 shows ~3.

The decimal (e.g. .15, .25) is intentional. It leaves part of the next card peeking in at the edge, signalling to shoppers that there are more offers to scroll through.

.candyrack-slider-cart-offers-wrapper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.candyrack-slider-cart-offers-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100%;
  min-width: 0;
  padding: 2px 2px 14px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.candyrack-slider-cart-offers-list::-webkit-scrollbar {
  height: 5px;
}

.candyrack-slider-cart-offers-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 999px;
}

.candyrack-slider-cart-offer-item-wrapper {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex: 0 0 calc((100% - 24px) / 3.15) !important;
  width: calc((100% - 24px) / 3.15) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #fff;
  scroll-snap-align: start;
}

.candyrack-slider-cart-offer-item-image-container {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
}

.candyrack-slider-cart-offer-item-image-container > a {
  display: block;
  width: 100%;
  height: 100%;
}

.candyrack-slider-cart-offer-item-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

.candyrack-slider-cart-offer-item-title-wrapper {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 9px 8px !important;
  box-sizing: border-box;
}

.candyrack-slider-cart-offer-item-header-wrapper {
  margin: 0 0 6px !important;
}

.candyrack-slider-cart-offer-item-header {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.candyrack-slider-cart-offer-item-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  max-width: calc(100% - 14px);
  padding: 4px 7px !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 999px;
  font-size: 9px !important;
  line-height: 1.1 !important;
}

.candyrack-slider-cart-offer-price-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  margin-top: auto;
  font-size: 12px !important;
  line-height: 1.25;
}

.candyrack-slider-cart-offer-price,
.candyrack-slider-cart-offer-price-discounted {
  font-size: 12px !important;
}

.candyrack-slider-cart-offer-item-variant-select {
  width: 100% !important;
  min-width: 0;
  margin-top: 8px;
}

.candyrack-slider-cart-offer-item-variant-select > div,
.candyrack-slider-cart-offer-item-variant-select select {
  width: 100% !important;
  min-width: 0;
}

.candyrack-slider-cart-offer-item-add-button-wrapper {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: auto;
  padding: 0 9px 10px !important;
  box-sizing: border-box;
}

.candyrack-slider-cart-offer-item-add-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px;
  height: auto !important;
  padding: 8px 6px !important;
  border-radius: 6px;
  font-size: 11px !important;
  line-height: 1.2;
}

.candyrack-slider-cart-offer-item-add-button span,
.candyrack-slider-cart-offer-item-title-wrapper span,
.candyrack-slider-cart-offer-item-title-wrapper a {
  max-width: 100%;
}

@media screen and (max-width: 480px) {
  .candyrack-slider-cart-offers-list {
    gap: 10px !important;
    padding-bottom: 12px;
  }
  .candyrack-slider-cart-offer-item-wrapper {
    flex-basis: calc((100% - 10px) / 2.25) !important;
    width: calc((100% - 10px) / 2.25) !important;
  }
  .candyrack-slider-cart-offer-item-title-wrapper { padding: 9px 8px 7px !important; }
  .candyrack-slider-cart-offer-item-add-button-wrapper { padding: 0 8px 9px !important; }
  .candyrack-slider-cart-offer-item-header,
  .candyrack-slider-cart-offer-price,
  .candyrack-slider-cart-offer-item-price-discounted { font-size: 11px !important; }
}

@media screen and (max-width: 360px) {
  .candyrack-slider-cart-offer-item-wrapper {
    flex-basis: calc((100% - 10px) / 2.1) !important;
    width: calc((100% - 10px) / 2.1) !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.

Slide cart CSS customization