Cart

Featured links

1. Company XYZ documentation on the custom liquid block
2. Company XYZ documentation on section padding settings
3. Company XYZ documentation on section backgrounds settings
4. Company XYZ documentation on separators settings
5. Company XYZ documentation on layout widths settings
6. Shopify documentation on sections and blocks

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

This section shows cart items when products have been added and switches to empty-cart messaging when the cart is empty. Use it to refine the cart page styling and layout, and to add app-powered or custom content where it supports the purchase journey.

Color settings

These color controls let you override the cart page styling without changing your broader theme colors. They are most useful for improving contrast, separating line items more clearly, or making headings and supporting labels easier to scan.

Keep text and icon colors readable first, then use subheading and border colors more subtly for structure. Small adjustments usually work better than dramatic color shifts on a utility-focused page like the cart.

If you add a custom background or overlay, recheck contrast for item details, totals, and actions so the cart stays easy to use.

Supported block types

1. App
2. Custom liquid

App

App blocks let installed apps place features or messaging inside the cart section. Use them for cart-related additions such as incentives, notices, or other tools that belong close to the cart contents. For block behavior in the editor, see Shopify documentation on sections and blocks

Be selective with placement. Too many added blocks can make the cart feel longer and distract from reviewing items and moving forward.

Custom liquid

The Custom liquid block adds advanced custom content inside the cart section.

Use it when you need flexible messaging, app snippets, or other custom output that is not covered by the built-in cart settings. This block also includes its own visibility setting, which is helpful when you want supporting content to appear only on mobile or only on desktop.

Tip

If custom content is helpful but not essential, consider hiding it on mobile to keep the cart page shorter and easier to scan.

Standard section settings

Padding settings

Padding settings control the space above and below the cart content on desktop and mobile. Use them to make the page feel more open, or reduce extra space when your cart already includes longer messaging or added blocks.

Separate mobile padding is especially useful because cart pages can become long quickly. Trimming vertical space on smaller screens can make the page feel more efficient without changing desktop presentation.

Section background settings

Section background settings let you add a background color, gradient, image, video, and overlay to the cart section. These settings are best used when you want the cart page to feel more branded while keeping the content readable.

Gradient choices override flat color choices, and overlay gradients override overlay colors. You can also set separate mobile background media, which helps when desktop imagery crops poorly on smaller screens.

Caution

Strong imagery or motion behind cart details can reduce readability. Use overlays and contrast checks to keep the cart functional first.

Separator settings

Separator settings add an optional line at the top or bottom of the cart section. They are useful when the cart needs a clearer visual boundary from nearby content.

If you leave the separator color transparent, the section falls back to the theme border color. That is often the easiest way to keep the cart consistent with the rest of the design.

Width settings

Width settings control both the maximum width of the cart content and the width of the section wrapper. This lets you keep the cart compact and easy to read, or make it feel more spacious when paired with broader page styling.

For most stores, a moderate content width keeps line items, prices, and controls comfortable to scan. Wrapper width matters most when you use a background, because it changes how far that visual treatment extends across the page.

Note

Width changes can look different in the editor than on the live page, so preview the actual frontend before finalizing layout decisions.

Usage notes

1. Keep the cart easy to scan. Prioritize clear text, icon, and border contrast so item details and totals remain readable at a glance.
2. Use extra blocks sparingly. Add app or custom content only when it supports the cart journey instead of competing with core cart actions.
3. Adjust mobile separately. Review mobile padding, visibility, and background media so the cart does not become overly long or visually crowded.
4. Choose width with care. A balanced content width usually feels better than either a cramped cart or one that stretches details too far across the page.
5. Check both cart states. Preview the section with items in the cart and with the cart empty so styling and spacing feel polished in both situations.
6. Review desktop and mobile behavior. Compare both viewports for alignment, visibility, and media cropping, especially if you use different backgrounds or hide content on one screen size.
7. Keep form feedback legible. Make sure quantity changes, validation messages, and empty or success states stay easy to read when customers interact with cart controls.
8. Think through product context. Recheck the cart after changing variants, quantities, or availability so the displayed actions and item details still make sense.