How can I customise size, padding, color for my cart?
Our Slide Cart automatically inherits your theme. However, it also provides a lot of flexibility to customise it the way you want.
Our first recommendation would be to just simply reach out to us at hello@apphq.co with the kind of customisation you need and we will do it for.
Here's a self-serve guide for customising our Slide Cart
All the widgets shown in the Cart are configurable via 2 methods:
- By modifying some variables that AMP Cart exposes
- By overriding the default styles for the CSS classes of the widgets (when variables are not enough)
The recommended way to update the styles is to first try to use the variables provided, and in case they don’t suffice, use CSS overrides.
Below is an example of updating the styles of the Announcement Banner using these 2 methods above:
Updating the styling of Announcement Banner in AMP Cart as an example
- Using variables (See Section Variable List)
Following variables are exposed 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
Lets say the default Announcement Banner looks like below and we want to change the background color to green (RGB value of 0, 128, 0):
To use these variables:
- Click on Edit Code for your theme in Shopify:
- Open theme.liquid file
- 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)
- Save the theme and your Announcement Banner would now have the new color in your cart.
2. Using plain CSS overrides
When variables are not enough, you can just 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