# Cart drawer ### Section overview The Cart section manages the display and functionality of the shopping cart in your Shopify store, providing both overlay and sidebar cart options with customizable appearance and features. #### Common use cases * Creating a slide-out cart drawer for a seamless shopping experience * Displaying cart items, subtotals, and checkout options * Adding upsell products or promotional content to the cart interface * Providing shipping threshold indicators with progress bars #### Usage tips * Choose between overlay and sidebar cart styles based on your store's design * Customize color schemes for the top, main, and bottom areas of the cart * Use cart blocks to add empty cart messaging, announcements, or promotional content * Consider mobile responsiveness by testing both drawer styles (the mobile view defaults to bottom positioning) * For upsell features, carefully select products that complement items typically added to cart ### Section settings | Setting | Description | | ----------------------------- | ----------------------------------------------------------------------------- | | Top color scheme | Sets the background and text color for the top section of the cart drawer. | | Top color border | Determines the border style for the top section of the cart drawer. | | Primary background | Sets the main background color for the cart drawer content area. | | Secondary background | Sets the secondary background color for alternating elements within the cart. | | Main color border | Determines the border style for the main content area of the cart. | | Enable cart notes | Allows customers to add notes to their order during checkout. | | Enable cart share | Enables cart sharing functionality. | | Enable cart SKU | Shows product SKUs in the cart items list. | | Show cart subtotals | Displays subtotal prices for individual line items. | | Bottom color scheme | Sets the background and text color for the bottom section of the cart drawer. | | Bottom color border | Determines the border style for the bottom section of the cart drawer. | | Bottom color button | Sets the style for buttons in the bottom section of the cart. | | Cart button behavior | Determines whether the primary button leads to checkout or cart page. | | Optional text | Adds disclaimer or promotional text below the checkout buttons. | | Show continue shopping button | Displays a button to continue shopping below the checkout button. | | Show button prices | Shows prices on the checkout and cart buttons. | ### Block settings #### Empty cart Displays content when the cart is empty, providing a message and call-to-action for customers. * Block limit: 1 | Setting | Description | | --------------------- | -------------------------------------------------------------- | | Heading | Sets the heading text for the empty cart message. | | Content | Provides detailed messaging for when the cart is empty. | | Button label | Sets the text for the call-to-action button. | | URL | Determines where the button links to when clicked. | | Image | Adds a featured image to the empty cart display. | | Image background | Adds a background image behind content. | | Video | Adds a video to the empty cart display. | | Enable video autoplay | Automatically plays the video when visible. | | Enable mute button | Shows a button to toggle sound for the video. | | Enable video loop | Continuously loops the video. | | Minimum height | Sets the minimum height for the empty cart content area. | | Enable padding | Adds padding around the empty cart content. | | Color scheme | Sets the background and text color for the empty cart message. | | Color border | Determines the border style for the empty cart message. | | Color button | Sets the style for the call-to-action button. | | Enable gradient | Applies a gradient effect to the background. | | Vertical alignment | Controls the vertical positioning of content. | | Horizontal alignment | Controls the horizontal positioning of content. | | Text position | Determines whether text appears above or below media. | #### Announcement Displays an announcement message at the top of the cart drawer. * Block limit: 1 | Setting | Description | | -------------------- | ------------------------------------------------------------- | | Content | Sets the text for the announcement message. | | Color scheme | Sets the background and text color for the announcement. | | Horizontal alignment | Controls the horizontal positioning of the announcement text. | #### Upsell checkbox Adds a checkbox upsell for a specific product variant that can be added to cart. * Block limit: 1 | Setting | Description | | ---------- | ---------------------------------------------------------------- | | Variant ID | The Shopify variant ID for the product to be upsold. | | Label | The text describing the upsell offer shown next to the checkbox. | #### Upsell featured Displays featured products as upsell recommendations in the cart. * Block limit: 1 | Setting | Description | | ---------- | ---------------------------------------------------------------------- | | Collection | Selects a collection of products to display as upsell recommendations. | #### Content Adds custom content sections within the cart drawer. * Block limit: 5 | Setting | Description | | --------------------- | --------------------------------------------------------- | | Heading | Sets the heading text for the content block. | | Content | Provides the main text for the content block. | | Button label | Sets the text for the call-to-action button. | | URL | Determines where the button links to when clicked. | | Image | Adds a featured image to the content block. | | Image background | Adds a background image behind content. | | Video | Adds a video to the content block. | | Enable video autoplay | Automatically plays the video when visible. | | Enable mute button | Shows a button to toggle sound for the video. | | Enable video loop | Continuously loops the video. | | Minimum height | Sets the minimum height for the content block. | | Enable padding | Adds padding around the content. | | Color scheme | Sets the background and text color for the content block. | | Color border | Determines the border style for the content block. | | Color button | Sets the style for the call-to-action button. | | Enable gradient | Applies a gradient effect to the background. | | Vertical alignment | Controls the vertical positioning of content. | | Horizontal alignment | Controls the horizontal positioning of content. | | Text position | Determines whether text appears above or below media. | #### Progress bar Displays a progress bar showing how close the customer is to reaching a threshold for promotions like free shipping. * Block limit: 1 | Setting | Description | | --------------- | ------------------------------------------------------------------ | | Threshold | The amount that must be reached to complete the progress bar. | | Calculation | Determines whether to use cart subtotal or total for calculations. | | Success message | The message displayed when the threshold has been reached. |