Customizing Your Cart with Custom CSS
This guide will help you customize elements of your Shopify store by adding custom CSS within the Amplify | Power Slide Cart settings. Follow the steps below to apply your unique style.
Steps to Add Custom CSS
Step 1. Go to settings
When in Amplify | Power Slide Cart, 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
Conclusion
Customizing the Amplify | Power Slide Cart 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.
Last updated
Was this helpful?