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

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 or have no effect at all; 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

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