Cart drawer

Where to find it

Usage notes

Keeps the drawer open by default for faster customization.

Controls the drawer shown when the cart has no real cart items.

Image banner pinned between the cart header and the scrollable body. Renders above Sticky banner 1 and 2.

Pinned between the cart header and the scrollable body. Tokens: [savings] · [count] · [subtotal].

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID

ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.

Display on

Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only

Color source

Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors

Drawer backgroundConditional

Choose a local color when the relevant custom source is enabled.

HeadingConditional

Choose a local color when the relevant custom source is enabled.

TextConditional

Choose a local color when the relevant custom source is enabled.

Actions and badgesConditional

Choose a local color when the relevant custom source is enabled.

Accent textConditional

Choose a local color when the relevant custom source is enabled.

BordersConditional

Choose a local color when the relevant custom source is enabled.

Soft bannerConditional

Choose a local color when the relevant custom source is enabled.

Color schemeConditional

Choose an available Shopify color scheme.

Enable test mode

Enable or disable this option and preview the result.

Text

Use [count] to display total amount of items. Example: 'Your Cart [count]'

Alignment

Choose the presentation or source that fits this component.Options: Left · Center

Font weight

Choose the presentation or source that fits this component.Options: Medium · Semi Bold · Bold · Extra Bold

Header vertical spacing

Adjust within the range offered by the theme editor.

Use custom heading color

Enable or disable this option and preview the result.

Heading colorConditional

Choose a local color when the relevant custom source is enabled.

Show count badge

Enable or disable this option and preview the result.

Badge backgroundConditional

Choose a local color when the relevant custom source is enabled.

Badge text colorConditional

Choose a local color when the relevant custom source is enabled.

Show bottom divider

Enable or disable this option and preview the result.

Enable custom header background

Enable or disable this option and preview the result.

Header backgroundConditional

Choose a local color when the relevant custom source is enabled.

Title

Edit the text shown by this component.

Button label

Edit the text shown by this component.

Show account prompt

Enable or disable this option and preview the result.

Enable

Enable or disable this option and preview the result.

ImageConditional

Choose an image from your shop. Preview its crop on desktop and mobile.

Image alt textConditional

Edit the text shown by this component.

LinkConditional

Choose the destination for this link or button.

BackgroundConditional

Choose a local color when the relevant custom source is enabled.

Image fitConditional

Choose the presentation or source that fits this component.Options: Cover · Contain

Image positionConditional

Choose the presentation or source that fits this component.Options: Center · Top · Bottom · Left · Right

Enable

Enable or disable this option and preview the result.

TextConditional

Edit the text and use supported inline formatting.

Subscription cart textConditional

Shown only when the cart contains an actual selling-plan purchase. Savings in this message cover subscription lines only.

Savings text sizeConditional

Adjust within the range offered by the theme editor.

Show star icon (left of text)Conditional

Enable or disable this option and preview the result.

Hide when there are no savingsConditional

Auto-hides this banner when the cart has no [savings] amount. Off by default so the banner always shows once enabled.

Background colorConditional

Choose a local color when the relevant custom source is enabled.

Use gradient backgroundConditional

When on, the gradient below overrides the solid color above.

GradientConditional

Use the matching control in the theme editor and preview the component before publishing.

Text colorConditional

Choose a local color when the relevant custom source is enabled.

Font weightConditional

Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold · Bold

Enable

Enable or disable this option and preview the result.

TextConditional

Edit the text and use supported inline formatting.

Show star icon (left of text)Conditional

Enable or disable this option and preview the result.

Hide when there are no savingsConditional

Enable or disable this option and preview the result.

Background colorConditional

Choose a local color when the relevant custom source is enabled.

Use gradient backgroundConditional

When on, the gradient below overrides the solid color above.

GradientConditional

Use the matching control in the theme editor and preview the component before publishing.

Text colorConditional

Choose a local color when the relevant custom source is enabled.

Font weightConditional

Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold · Bold

Desktop width

Choose the presentation or source that fits this component.Options: Normal (420px) · Medium (460px) · Large (520px)

Mobile width

Choose the presentation or source that fits this component.Options: Full screen width · Percentage

Mobile width (%)Conditional

Adjust within the range offered by the theme editor.