Customizing Your Store with Custom CSS

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.

Steps to Add Custom CSS

Step 1. Go to settings

When in Bundles & Upsell, 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.

Custom CSS classes

Amplify General class names for Widgets

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; }

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

Scenario Specific Classes

/* 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 {}

Common questions about Custom CSS

Conclusion

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.