How can I customize the size, padding, and color of my cart?

Our app offers you a lot of options to customize your cart the way you want.

Not seeing the customization that you want or you need help? Simply reach out to us at hello@apphq.co and we will gladly assist you.

How do I change the colors in my cart?

In the Cart placement, go to the Theme tab and enable the toggle so your changes reflect correctly.

Here, you will find the option to change the color of each cart section. For example, if you want to change the color of the footer, look for the Footer section and, in Background color, change the color or add the code of the color that you want.

Remember to save your changes!


How to modify the size, padding, and color with CSS code.

All the widgets shown in the Cart are configurable using two methods:

  1. By modifying the CSS variables that AMP Cart has available
  2. By overriding the default styles for the CSS classes of the widgets (when variables are not enough)

We recommend updating the style using the available CSS variables, and in case they are not enough, use the CSS classes to override the default style.

This is an example of how you can update the style of the Announcement Banner using these two methods.

Using variables (See Section Variable List)

The following variables are available for the Announcement Banner:

  • Background color of the banner

--amp-cart-announcement-background-color

  • Border color

--amp-cart-announcement-border-color

  • Border thickness/width

--amp-cart-announcement-border-width

  • Height of the slides

--amp-cart-announcement-slide-height


Let's say the default Announcement Banner looks like the one below, and you want to change the background color to green (RGB value of 0, 128, 0):

To use the CSS variables:

  1. Click on Edit Code for your theme in Shopify:

  1. Open the theme.liquid file


  1. In the {{style}} section of the code, enter the values of the variables as shown below (notice that the main class here needs to be amp-cart-drawer)

  1. Save the changes, and your Announcement Banner will now have the new color in your cart.

Using CSS selectors to override the default style.

When variables are not enough, you can override the styles by targeting the CSS classes of the component. E.g. In the storefront, opening the console for the cart would show the following CSS class for the announcement banner:


You can now override the style of this banner via



Variable List 

## Cart (General Cart Level)

--amp-cart-color-background

--amp-cart-color-foreground


## CartLines

--amp-cart-cart-line-border-alpha

--amp-cart-cart-line-border-color

--amp-cart-cart-line-border-radius

--amp-cart-cart-line-border-width

--amp-cart-cart-line-details-padding-left

--amp-cart-cart-line-details-top-margin-bottom

--amp-cart-cart-line-image-max-width

--amp-cart-cart-line-padding-bottom

--amp-cart-cart-line-padding-left

--amp-cart-cart-line-padding-right

--amp-cart-cart-line-padding-top

--amp-cart-color-foreground

--amp-cart-font-body-scale

--amp-cart-font-heading-scale

--amp-cart-font-heading-weight

--amp-cart-header-font-size

--amp-cart-inputs-border-alpha

--amp-cart-inputs-border-color

--amp-cart-inputs-border-radius

--amp-cart-inputs-border-width

--amp-cart-line-quantity-selector-base-min-height

--amp-cart-line-quantity-selector-base-width

--amp-cart-line-quantity-selector-border-radius

--amp-cart-line-quantity-selector-button-font-size

--amp-cart-line-quantity-selector-button-width

--amp-cart-line-quantity-selector-padding-bottom

--amp-cart-line-quantity-selector-padding-left

--amp-cart-line-quantity-selector-padding-right

--amp-cart-line-quantity-selector-padding-top

--amp-cart-spacing-x-scale

--amp-cart-spacing-y-scale


## CartFooter

--amp-cart-button-background-color

--amp-cart-button-border-width

--amp-cart-button-min-height

--amp-cart-button-radius

--amp-cart-button-text-color

--amp-cart-color-foreground

--amp-cart-font-body-scale

--amp-cart-font-heading-family

--amp-cart-font-heading-scale

--amp-cart-font-heading-weight

--amp-cart-footer-background-color-opacity

--amp-cart-footer-checkout-button-disabled-opacity

--amp-cart-footer-checkout-button-font-size

--amp-cart-footer-checkout-button-min-height

--amp-cart-footer-padding-bottom

--amp-cart-footer-padding-left

--amp-cart-footer-padding-right

--amp-cart-footer-padding-top

--amp-cart-footer-row-padding-bottom

--amp-cart-footer-row-padding-left

--amp-cart-footer-row-padding-right

--amp-cart-footer-row-padding-top

--amp-cart-footer-row-subtotal-font-size

--amp-cart-footer-row-subtotal-label-font-size

--amp-cart-footer-terms-gap

--amp-cart-footer-terms-padding-bottom

--amp-cart-footer-terms-padding-left

--amp-cart-footer-terms-padding-right

--amp-cart-footer-terms-padding-top

--amp-cart-spacing-x-scale

--amp-cart-spacing-y-scale


## CartHeader

--amp-cart-color-foreground

--amp-cart-font-heading-family

--amp-cart-font-heading-scale

--amp-cart-font-heading-weight

--amp-cart-header-border-alpha

--amp-cart-header-border-color

--amp-cart-header-border-width

--amp-cart-header-cart-count-opacity

--amp-cart-header-close-button-icon-background-opacity

--amp-cart-header-close-button-icon-border-radius

--amp-cart-header-close-button-icon-height

--amp-cart-header-close-button-icon-width

--amp-cart-header-content-gap

--amp-cart-header-font-size

--amp-cart-header-padding-bottom

--amp-cart-header-padding-left

--amp-cart-header-padding-right

--amp-cart-header-padding-top

--amp-cart-spacing-x-scale

--amp-cart-spacing-y-scale


## CartDiscount

--amp-cart-button-background-color

--amp-cart-button-border-width

--amp-cart-button-min-height

--amp-cart-button-radius

--amp-cart-button-text-color

--amp-cart-color-foreground

--amp-cart-discount-box-background-color

--amp-cart-discount-box-button-font-size

--amp-cart-discount-box-button-min-height

--amp-cart-discount-box-form-gap

--amp-cart-discount-box-gap

--amp-cart-discount-box-input-padding-bottom

--amp-cart-discount-box-input-padding-left

--amp-cart-discount-box-input-padding-right

--amp-cart-discount-box-input-padding-top

--amp-cart-discount-box-padding-bottom

--amp-cart-discount-box-padding-left

--amp-cart-discount-box-padding-right

--amp-cart-discount-box-padding-top

--amp-cart-font-body-scale

--amp-cart-font-heading-weight

--amp-cart-inputs-border-alpha

--amp-cart-inputs-border-color

--amp-cart-inputs-border-radius

--amp-cart-inputs-border-width

--amp-cart-spacing-x-scale

--amp-cart-spacing-y-scale


## CartAnnouncement

--amp-cart-announcement-background-color

--amp-cart-announcement-border-color

--amp-cart-announcement-border-width

--amp-cart-announcement-slide-height


## CartRewards

--amp-cart-color-foreground

--amp-cart-font-body-scale

--amp-cart-font-heading-scale

--amp-cart-rewards-applied-reward-color

--amp-cart-rewards-applied-reward-font-size

--amp-cart-rewards-background-color

--amp-cart-rewards-background-color-opacity

--amp-cart-rewards-current-reward-font-size

--amp-cart-rewards-current-reward-font-weight

--amp-cart-rewards-gap

--amp-cart-rewards-padding-bottom

--amp-cart-rewards-padding-left

--amp-cart-rewards-padding-right

--amp-cart-rewards-padding-top

--amp-cart-rewards-progress-bar-indicator-background-color

--amp-cart-rewards-progress-bar-indicator-height

--amp-cart-rewards-progress-bar-padding-bottom

--amp-cart-rewards-progress-bar-padding-left

--amp-cart-rewards-progress-bar-padding-right

--amp-cart-rewards-progress-bar-padding-top

--amp-cart-rewards-progress-bar-tier-label-font-size

--amp-cart-rewards-progress-bar-tier-label-margin-top

--amp-cart-rewards-progress-bar-tier-marker-background-color

--amp-cart-rewards-progress-bar-tier-marker-background-color-opacity

--amp-cart-rewards-progress-bar-tier-marker-height

--amp-cart-spacing-x-scale

--amp-cart-spacing-y-scale


## FreeGift

--amp-cart-button-background-color

--amp-cart-button-border-width

--amp-cart-button-radius

--amp-cart-button-text-color

--amp-cart-font-body-scale

--amp-cart-font-heading-scale

--amp-cart-font-heading-weight

--amp-cart-free-gift-item-button-font-size

--amp-cart-free-gift-item-button-padding-bottom

--amp-cart-free-gift-item-button-padding-left

--amp-cart-free-gift-item-button-padding-right

--amp-cart-free-gift-item-button-padding-top

--amp-cart-free-gift-item-details-padding-left

--amp-cart-free-gift-item-details-top-margin-bottom

--amp-cart-free-gift-item-image-max-width

--amp-cart-free-gift-item-margin-bottom

--amp-cart-free-gift-item-padding-bottom

--amp-cart-free-gift-item-padding-left

--amp-cart-free-gift-item-padding-right

--amp-cart-free-gift-item-padding-top

--amp-cart-free-gift-padding-bottom

--amp-cart-free-gift-padding-left

--amp-cart-free-gift-padding-right

--amp-cart-free-gift-padding-top

--amp-cart-header-font-size

--amp-cart-spacing-x-scale

--amp-cart-spacing-y-scale


## Cart Upsell

--amp-cart-button-background-color

--amp-cart-button-border-width

--amp-cart-button-radius

--amp-cart-button-text-color

--amp-cart-color-foreground

--amp-cart-font-body-scale

--amp-cart-font-heading-scale

--amp-cart-spacing-x-scale

--amp-cart-spacing-y-scale

--amp-cart-upsell-carousel-padding-bottom

--amp-cart-upsell-carousel-padding-left

--amp-cart-upsell-carousel-padding-right

--amp-cart-upsell-carousel-padding-top

--amp-cart-upsell-header-font-size

--amp-cart-upsell-header-font-weight

--amp-cart-upsell-header-padding-bottom

--amp-cart-upsell-header-padding-left

--amp-cart-upsell-header-padding-right

--amp-cart-upsell-header-padding-top

--amp-cart-upsell-item-background-color

--amp-cart-upsell-item-background-color-alpha

--amp-cart-upsell-item-border-radius

--amp-cart-upsell-item-button-font-size

--amp-cart-upsell-item-button-padding-bottom

--amp-cart-upsell-item-button-padding-left

--amp-cart-upsell-item-button-padding-right

--amp-cart-upsell-item-button-padding-top

--amp-cart-upsell-item-carousel-margin-bottom

--amp-cart-upsell-item-carousel-margin-left

--amp-cart-upsell-item-carousel-margin-right

--amp-cart-upsell-item-carousel-margin-top

--amp-cart-upsell-item-details-margin-left

--amp-cart-upsell-item-details-top-margin-bottom

--amp-cart-upsell-item-image-max-width

--amp-cart-upsell-item-margin-bottom

--amp-cart-upsell-item-padding-bottom

--amp-cart-upsell-item-padding-left

--amp-cart-upsell-item-padding-right

--amp-cart-upsell-item-padding-top

--amp-cart-upsell-item-title-font-weight

--amp-cart-upsell-padding-bottom

--amp-cart-upsell-padding-left

--amp-cart-upsell-padding-right

--amp-cart-upsell-padding-top

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us