# Customizing Your Cart with Custom CSS

This guide will help you customize elements of your Shopify store by adding custom CSS within the **Amplify | Power Slide Cart** settings. Follow the steps below to apply your unique style.

## **Steps to Add Custom CSS**

#### Step 1. Go to settings

When in **Amplify | Power Slide Cart**, navigate to Settings and then click on Custom CSS.

<figure><img src="https://1938823173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwr3WKkdPthY5q7z19yUd%2Fuploads%2FtOEKETk3HkQqip3qPiGw%2FHow%20to%20Add%20Custom%20CSS%20Bundles%20%26%20Upsell%20-%201.png?alt=media&#x26;token=25f51459-036e-4b90-bd59-9c5c728376b0" 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://1938823173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwr3WKkdPthY5q7z19yUd%2Fuploads%2F86YLJqfAMq53ngfO11K0%2FHow%20to%20Add%20Custom%20CSS%20Cart%20-%202%20(1).png?alt=media&#x26;token=df68610e-83ba-4d00-82f2-6ede192b2e1c" alt=""><figcaption></figcaption></figure>

#### Step 3. Publish Your Changes

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

<figure><img src="https://1938823173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwr3WKkdPthY5q7z19yUd%2Fuploads%2FLGEbrOL3UFZXnXDLMMiS%2FHow%20to%20Add%20Custom%20CSS%20Bundles%20%26%20Upsell%20-%203.png?alt=media&#x26;token=4b3bf20f-9659-49d0-ab29-51cfc15dfb57" alt=""><figcaption></figcaption></figure>

***

## Amplify class names for Widgets

#### Root component class for all classes

```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`

***

### Cart Specific Classes

#### Cart

Main widget component: `.picky-cart`

Content (*has background, borders, shadow*): `.picky-cart__content`

Scrolled wrapper of line items in the cart: `.picky-cart__scrolled-wrapper`

Header wrapper with title, counter, share and close buttons: `.picky-cart__header`

Title: `.picky-cart__title`

Counter: `.picky-cart__counter`

“Share” button: `.picky-cart__share-button`

“Close cart” button: `.picky-cart__close`

Footer wrapper with buttons, totals and discounts: `.picky-cart__footer`

“Enter discount code” button: `.picky-add-discount-field__button`

“Enter discount code” label: `.picky-add-discount-field__label`

“Add note” button: `.picky-add-note-field__button`

“Add note” label: `.picky-add-note-field__label`

Wrapper for all cart discounts in the footer: `.picky-discount__wrapper`

Discount item: `.picky-cart__discount`

Discount code: `.picky-discount__code`

Cart total wrapper: `.picky-totals__prices-wrapper`

Cart total title: `.picky-totals__title`

Cart total final(**discounted**) price: `.picky-totals__price`

Cart total original(**compare-at**) price: `.picky-totals__compare-at-price`

Checkout button: `.picky-cart__button`

***

#### Cart item

Main cart-item component: `.picky-cart-item`

Discount item: `.picky-cart-item__discount`

Discount code: `.picky-discount__code`

Remove item button: `.picky-cart-item__remove-button`

Item title: `.picky-cart-item__title`

Item selected variant title: `.picky-cart-item__selected-variant`

Cart item child title: `.picky-child-item__title`

Cart item child selected variant: `.picky-child-item__selected-variant`

***

#### SXGY

Main component: `.picky-sxgy`

Content wrapper: `.picky-sxgy__content`

Component title: `.picky-sxgy__title`

Progress bar: `.picky-progress-bar`

Colored line in progress bar: `.picky-progress-bar__line`

Goal item: `.picky-sxgy-item`

Icon for goal item: `.picky-sxgy-item__icon`

Label for goal item: `.picky-sxgy-item__label`

Price for goal item: `.picky-sxgy-item__price`

***

#### Select your “Free” gift

Main component: `.picky-free-gift-selector`

Content wrapper: `.picky-free-gift-selector__content`

Component title: `.picky-free-gift-selector__title`

***

#### Recommendations

Main component: `.picky-recommendations`

Content wrapper: `.picky-recommendations__content`

Recommendation title: `.picky-recommendations__title`

Recommendation product: `.picky-recommended-card`

ATC Recommendation button: `.picky-recommended-card__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; 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**

Customizing the **Amplify | Power Slide Cart** with CSS allows you to refine how your cart looks and functions, making it a seamless part of your store's design. Whether you want to change colors, adjust layouts, or personalize the overall style, custom CSS gives you full control. Implementing these changes helps improve the user experience, making your cart a more engaging and branded part of your online store. For more complex design needs, our support team is ready to assist you in tailoring your cart drawer to perfection. [Click here for information on How to Contact Support.](https://support.heyamplify.com/cart-and-checkout/how-to-contact-support)

***

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-type="content-ref"></th><th data-hidden></th></tr></thead><tbody><tr><td><mark style="color:purple;"><strong>Get Cart &#x26; Checkout</strong></mark></td><td>Try free</td><td><a href="https://apps.shopify.com/slide-cart-drawer-pickystory">https://apps.shopify.com/slide-cart-drawer-pickystory</a></td><td><a href="https://apps.shopify.com/slide-cart-drawer-pickystory#modal-show=WriteReviewModal">https://apps.shopify.com/slide-cart-drawer-pickystory#modal-show=WriteReviewModal</a></td><td><p>1. Uninstall app</p><p>2. How to delete the app</p><p>3. App removal guide</p><p>4. Uninstall cart app</p><p>5. Delete tool </p><p>6. Uninstall instructions</p><p>7. Unsubscribe</p><p>8. Cancel Subscription </p><p>9. Deactivate app</p><p>10. Remove app   </p></td></tr></tbody></table>