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