Customizing Your Store with Custom CSS
Last updated
Was this helpful?
Last updated
Was this helpful?
This guide will help you customize elements of your Shopify store by adding custom CSS within the Bundles & Upsell settings. Follow the steps below to apply your unique style.
When in Bundles & Upsell, navigate to Settings and then click on Custom CSS.
Paste or write your CSS code in the Custom CSS box. (Screenshot with example)
Click on Publish on the top right, to Save your changes.
Root component class for all widgets
.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; }
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
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
/* Bundle As Product */
.picky-bnd-pdp {}
.picky-bnd-pdp__content {}
.picky-product-card {}
.picky-product-card__title {}
.picky-option__wrapper {}
.picky-bnd-pdp__footer {}
.picky-bnd-pdp__button {}
/* Build Your Own Bundle */
.picky-byob-bundle {}
.picky-byob-inline {}
.picky-byob-pdp {}
.picky-bundle__content {}
.picky-byob-bundle__item {}
.picky-byob-item {}
.picky-byob-item__selected-variant {}
.picky-byob-item__title {}
.picky-byob-item__price {}
.picky-byob-item__remove-button {}
.picky-summary {}
.picky-summary__header {}
.picky-summary__title {}
.picky-summary__content {}
.picky-summary__footer {}
.picky-byob-inline__button {}
/* Quantity Breaks */
.picky-qb-bundle {}
.picky-qb-bundle__content {}
.picky-qb-bundle__title {}
.picky-qb-bundle__footer {}
.picky-qb-bundle__qb-offer-item {}
.picky-qb-offer-item__title {}
.picky-qb-offer-item__prices-wrapper {}
.picky-qb-offer-item__price {}
.picky-qb-offer-item__compare-at-price {}
/* Frequently Bought Together */
.picky-fbt-inline {}
.picky-fbt-inline__content {}
.picky-fbt-inline__item {}
.picky-fbt-inline__footer {}
.picky-fbt-inline__button {}
/* Upsell Popup */
.picky-upsell-bundle {}
.picky-upsell-bundle__content {}
.picky-reacted-product {}
.picky-reacted-product__title {}
.picky-reacted-product__selected-variant {}
.picky-product-card__prices-wrapper {}
.picky-upsell-bundle__item {}
.picky-upsell-bundle__footer {}
.picky-upsell-bundle__button {}
By adding custom CSS in the Bundles & Upsell app, you can easily enhance the appearance of your bundle offers, ensuring they align with your store’s branding. Whether it's changing button styles or adjusting text formatting, these simple tweaks can make a big difference in customer engagement. For more complex design needs, our support team is ready to assist you in tailoring your bundles to perfection. Click here for information on How to Contact Support.
Get Bundles & Upsell
Try free