# Cart drawer ### Section overview The cart section is responsible for rendering and handling the functionality of the cart in a Shopify store. It includes a slide-out cart drawer, an alert cart overlay, and manages the display of cart items, upsells, subtotal, and checkout options. #### Common use cases * Providing a seamless checkout experience without leaving the current page * Displaying cart items, subtotals, and discounts in a visually appealing format * Offering upsell opportunities to increase average order value * Implementing free shipping thresholds with progress bars #### Usage tips * Use the progress bar to encourage customers to reach free shipping thresholds * Leverage upsell blocks to promote complementary products * Keep the cart visually consistent with your store's design using color scheme settings * For mobile responsiveness, the cart adapts to smaller screens with a bottom slide-up drawer instead of a side drawer on desktop ### Section settings | Setting | Description | | ----------------------------- | -------------------------------------------------------------------- | | Color scheme (top) | Sets the color scheme for the top bar of the cart drawer | | Color border (top) | Sets the border color style for the top bar | | Primary background | Sets the main background color for the cart drawer | | Secondary background | Sets the background color for item rows and sections within the cart | | Color border (main) | Sets the border color style for dividers between cart sections | | Enable cart notes | Allows customers to add notes to their order | | Enable cart share | Enables the option for customers to share their cart with others | | Enable cart SKU | Shows product SKUs in the cart items list | | Color scheme (bottom) | Sets the color scheme for the bottom checkout area | | Color border (bottom) | Sets the border color style for the bottom area | | Color button | Sets the button style for the checkout/cart button | | Cart button behavior | Determines whether the primary button links to checkout or cart page | | Optional text | Displays disclaimer text below the checkout button | | Show continue shopping button | Shows an additional button to continue shopping | | Show button prices | Displays the cart total on the checkout button | | Show cart subtotals | Shows the subtotal, discount, and total information | ### Block settings #### Empty cart Displays content when the cart is empty to encourage shopping. * Block limit: 1 | Setting | Description | | ------------------------ | ----------------------------------------------------------- | | Heading | Sets the heading text for the empty cart message | | Content | Sets the content text for the empty cart message | | Button label | Sets the text for the call-to-action button | | URL | Sets the destination link for the button | | Image | Optional image to display with the empty cart message | | Show image as background | Toggles between showing the image as a background or inline | | Video | Optional video to display with the empty cart message | | Enable autoplay | Automatically plays the video when visible | | Enable mute toggle | Shows a button to toggle video sound | | Enable loop | Plays the video continuously on a loop | | 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 color scheme for the empty cart content | | Color border | Sets the border style for the empty cart content | | Color text | Sets the text color treatment for the empty cart content | | Color button | Sets the button style for the empty cart content | | Enable gradient | Applies a gradient effect to the background | | Y alignment | Sets the vertical alignment of the content | | X alignment | Sets the horizontal alignment of the content | #### Announcement Displays an announcement message at the top of the cart. * Block limit: 1 | Setting | Description | | ------------ | ------------------------------------------------------ | | Content | Sets the announcement message text | | Color scheme | Sets the color scheme for the announcement bar | | X alignment | Sets the horizontal alignment of the announcement text | #### Upsell checkbox Adds a checkbox option to add an additional product to the cart. * Block limit: 1 | Setting | Description | | ------------------ | ------------------------------------------------- | | Checkbox upsell ID | The variant ID of the product to add when checked | | Label | The text label displayed next to the checkbox | #### Upsell featured Shows featured products as upsell opportunities in the cart. * Block limit: 1 | Setting | Description | | ----------- | ----------------------------------------------------------------- | | Collection | Selects the collection containing products to display as upsells | | Upsell type | Chooses between slider, stacked, or second column display formats | #### Content Displays custom content in the cart, such as promotions or announcements. * Block limit: 5 | Setting | Description | | ------------------------ | ----------------------------------------------------------- | | Heading | Sets the heading text for the content block | | Content | Sets the main text content | | Button label | Sets the text for the call-to-action button | | URL | Sets the destination link for the button | | Image | Optional image to display with the content | | Show image as background | Toggles between showing the image as a background or inline | | Video | Optional video to display with the content | | Enable autoplay | Automatically plays the video when visible | | Enable mute toggle | Shows a button to toggle video sound | | Enable loop | Plays the video continuously on a loop | | Minimum height | Sets the minimum height for the content block | | Enable padding | Adds padding around the content | | Color scheme | Sets the color scheme for the content block | | Color border | Sets the border style for the content block | | Color text | Sets the text color treatment for the content block | | Color button | Sets the button style for the content block | | Enable gradient | Applies a gradient effect to the background | | Text position | Sets whether text appears above or below media | | Y alignment | Sets the vertical alignment of the content | | X alignment | Sets the horizontal alignment of the content | #### Progress bar Shows a progress bar towards free shipping or other threshold-based goals. * Block limit: 1 | Setting | Description | | ------------------------ | --------------------------------------------------------------------- | | Progress bar threshold | The amount in dollars required to reach the goal | | Progress bar calculation | Determines whether to use subtotal or total for threshold calculation | | Progress bar success | The message displayed when the threshold is reached | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.brickspacelab.com/space/sections/sitewide/cart-drawer.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.