Customizing Your Cart with Custom CSS

This guide will help you customize elements of your Shopify store by adding custom CSS within the Slide Cart Drawer settings. Follow the steps below to apply your unique style.

Steps to Add Custom CSS

Step 1. Go to settings

When in Slide Cart Drawer, navigate to Settings and then click on Custom CSS.

Step 2. Add Your Custom CSS

Paste or write your CSS code in the Custom CSS box. (Screenshot with example)

Step 3. Publish Your Changes

Click on Publish on the top right, to Save your changes.

---

Amplify class names for Widgets

Root component class for all classes

.picky-widget

Add global picky-widget class before each CSS rule, for example:

/* Set red color for cart title */
.picky-widget .picky-cart__title { color: red; }
/* Set 1.5rem font-size for cart line-item */
.picky-widget .picky-cart-item__title { font-size: 1.5rem; }

---

Global components

Product title: .picky-title

Buttons: .picky-button

Error message: .picky-error-message

Powered by PickyStory: .picky-powered-by

Header: .picky-header .picky-header__title .picky-header__discount .picky-header__description

---

Product card

All product card components: .picky-product-cart

Price wrapper: .picky-product-card__prices-wrapper

Product image: .picky-product-card__image

Product title: .picky-product-card__title

Price wrapper: .picky-product-card__prices-wrapper

Final(discounted) product price: .picky-product-card__price

Original(compare-at) product price: .picky-product-card__compare-at-price

Quantity input: .picky-quantity

Quantity value: .picky-quantity__counter

Decrease quantity button: .picky-quantity__decrease-button

Increase quantity button: .picky-quantity__increase-button

ATC button: .picky-product-card__button

---

Cart Specific Classes

Cart

Main widget component: .picky-cart

Content (has background, borders, shadow): .picky-cart__content

Scrolled wrapper of line items in the cart: .picky-cart__scrolled-wrapper

Header wrapper with title, counter, share and close buttons: .picky-cart__header

Title: .picky-cart__title

Counter: .picky-cart__counter

“Share” button: .picky-cart__share-button

“Close cart” button: .picky-cart__close

Footer wrapper with buttons, totals and discounts: .picky-cart__footer

“Enter discount code” button: .picky-add-discount-field__button

“Enter discount code” label: .picky-add-discount-field__label

“Add note” button: .picky-add-note-field__button

“Add note” label: .picky-add-note-field__label

Wrapper for all cart discounts in the footer: .picky-discount__wrapper

Discount item: .picky-cart__discount

Discount code: .picky-discount__code

Cart total wrapper: .picky-totals__prices-wrapper

Cart total title: .picky-totals__title

Cart total final(discounted) price: .picky-totals__price

Cart total original(compare-at) price: .picky-totals__compare-at-price

Checkout button: .picky-cart__button

---

Cart item

Main cart-item component: .picky-cart-item

Discount item: .picky-cart-item__discount

Discount code: .picky-discount__code

Remove item button: .picky-cart-item__remove-button

Item title: .picky-cart-item__title

Item selected variant title: .picky-cart-item__selected-variant

Cart item child title: .picky-child-item__title

Cart item child selected variant: .picky-child-item__selected-variant

---

SXGY

Main component: .picky-sxgy

Content wrapper: .picky-sxgy__content

Component title: .picky-sxgy__title

Progress bar: .picky-progress-bar

Colored line in progress bar: .picky-progress-bar__line

Goal item: .picky-sxgy-item

Icon for goal item: .picky-sxgy-item__icon

Label for goal item: .picky-sxgy-item__label

Price for goal item: .picky-sxgy-item__price

---

Select your “Free” gift

Main component: .picky-free-gift-selector

Content wrapper: .picky-free-gift-selector__content

Component title: .picky-free-gift-selector__title

---

Recommendations

Main component: .picky-recommendations

Content wrapper: .picky-recommendations__content

Recommendation title: .picky-recommendations__title

Recommendation product: .picky-recommended-card

ATC Recommendation button: .picky-recommended-card__button

---

Common questions about Custom CSS

What type of changes can I make using custom CSS?

You can modify colors, fonts, sizes, margins, padding, and other styling elements.

Can I revert to the default styling?

Yes, removing your custom CSS will revert the styling back to its default.

How do I preview the changes made by custom CSS?

When you open the Custom CSS tab, a preview screen appears on the right side. After inserting CSS styles, you can see their effects in the preview.

To perform a more thorough check, we recommend publishing the changes and reviewing the display on the live storefront.

What happens if I add incorrect CSS?

Incorrect CSS might break some styles; however, removing or correcting the code should restore the original appearance.

Is there a limit to how much CSS I can add?

There’s generally no strict limit, but overly complex or large CSS files may slow down your store’s performance.

Conclusion

Customizing the Slide Cart Drawer with CSS allows you to refine how your cart looks and functions, making it a seamless part of your store's design. Whether you want to change colors, adjust layouts, or personalize the overall style, custom CSS gives you full control. Implementing these changes helps improve the user experience, making your cart a more engaging and branded part of your online store. For more complex design needs, our support team is ready to assist you in tailoring your cart drawer to perfection. Click here for information on How to Contact Support.

---

Get Cart & Checkout

Try free