# 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.

<figure><img src="https://1518757330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE6PSEvXnU2fXbO4Sq6Ym%2Fuploads%2FWyZVHnU9woOPBqJ7w9ff%2FHow%20to%20Add%20Custom%20CSS%20Bundles%20%26%20Upsell%20-%201.png?alt=media&#x26;token=d2bb2e8d-4ada-4bda-bd4c-50df5951e744" alt=""><figcaption></figcaption></figure>

#### Step 2. Add Your Custom CSS

Paste or write your CSS code in the Custom CSS box. (Screenshot with example)

<figure><img src="https://1518757330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE6PSEvXnU2fXbO4Sq6Ym%2Fuploads%2FyGRrP4gycReabEt1xfmL%2FHow%20to%20Add%20Custom%20CSS%20Bundles%20%26%20Upsell%20-%202%20(1).png?alt=media&#x26;token=ad776a49-77e1-4bc5-8751-891c9a99a4d5" alt=""><figcaption></figcaption></figure>

#### Step 3. Publish Your Changes

Click on Publish on the top right, to Save your changes.

<figure><img src="https://1518757330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE6PSEvXnU2fXbO4Sq6Ym%2Fuploads%2F32r9sKsZBrHrtgH3TW6v%2FHow%20to%20Add%20Custom%20CSS%20Bundles%20%26%20Upsell%20-%203.png?alt=media&#x26;token=797bcb9c-5bab-4544-b8dd-16aed562e13e" alt=""><figcaption></figcaption></figure>

***

## **Custom CSS classes**

### Amplify General class names for Widgets

Root component class for all widgets

```css
.picky-widget
```

> Add global `picky-widget` class before each CSS rule, for example:

```css
/* 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

```css
/* 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

<details>

<summary><strong>What type of changes can I make using custom CSS?</strong></summary>

You can modify colors, fonts, sizes, margins, padding, and other styling elements.

</details>

<details>

<summary><strong>Can I revert to the default styling?</strong></summary>

Yes, removing your custom CSS will revert the styling back to its default.

</details>

<details>

<summary><strong>How do I preview the changes made by custom CSS?</strong></summary>

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.

</details>

<details>

<summary><strong>What happens if I add incorrect CSS?</strong></summary>

Incorrect CSS might break some styles or have no effect at all; however, removing or correcting the code should restore the original appearance.

</details>

<details>

<summary><strong>Is there a limit to how much CSS I can add?</strong></summary>

There’s generally no strict limit, but overly complex or large CSS files may slow down your store’s performance.

</details>

***

## **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.](https://support.heyamplify.com/bundles-and-upsell/how-to-contact-support)

***

<table data-card-size="large" data-column-title-hidden data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:purple;"><strong>Get Bundles &#x26; Upsell</strong></mark> </td><td>Try free </td><td> </td><td><p>1. Custom CSS</p><p>2. Add custom code</p><p>3. Modify store layout</p><p>4. Custom fonts</p><p>5. Edit product page </p><p>6. Custom styling</p><p>7. Apply CSS</p><p>8. CSS snippets </p><p>9. Advanced customization</p><p>10. Store design   </p></td><td><a href="https://apps.shopify.com/product-kits-bundles-pickystory?surface_intra_position=1&#x26;surface_type=partners&#x26;surface_version=redesign">https://apps.shopify.com/product-kits-bundles-pickystory?surface_intra_position=1&#x26;surface_type=partners&#x26;surface_version=redesign</a></td><td></td></tr></tbody></table>