Cart

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on the theme editor
3. Company XYZ documentation on navigation layout settings
4. Company XYZ documentation on colors settings
5. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to add a cart icon to the main navigation and position it for your header layout. For a broader overview of how theme blocks work, see Shopify documentation on sections and blocks. It works well for simple headers, split navigation designs, and custom mobile arrangements where the cart needs different placement on different screen sizes.

Alignment settings

These settings control how the cart block sits inside the space it has been given. They are most noticeable when the block is stretched across extra space or moved into its own full-width row.

If alignment changes seem subtle, check the layout settings first. A compact left, center, or right placement leaves less room for visible alignment changes.

Layout settings

Use these settings to decide where the cart block appears on desktop and mobile. Left, center, and right keep it in the main navigation row, while Full-width moves it to a separate row below.

Fill available space stretches the block across the remaining desktop row width. This is useful when you want the cart area to help balance header spacing, but it also makes the alignment settings more important because the icon will sit within a larger area.

When you want different header structures by device, set desktop and mobile layouts separately in Shopify documentation on the theme editor. For example, you can keep the cart grouped neatly in the main row on desktop while giving it its own row on mobile. Use the Navigation layout settings reference for additional placement details.

Choose layout before fine-tuning alignment. Placement has the biggest effect on how the cart block feels in the header.

Standard block settings

Color settings

These settings override the broader theme colors for this block, letting you style the cart icon and related text independently. This is helpful when the cart needs stronger emphasis or when your header uses a custom color treatment.

Keep the cart easy to spot without making it feel disconnected from the rest of the header. Check contrast carefully if you use different icon and text colors. See the Color settings reference for more details.

Visibility settings

Use visibility controls to show the cart block only on desktop or only on mobile. This is useful for custom responsive headers, especially if another cart access point already appears on one device size.

Before hiding the block on any device, make sure customers still have a clear and predictable way to reach the cart. See the Visibility settings reference for more details.

Usage notes

1. Set layout first. Pick the desktop and mobile placement before adjusting alignment or colors.
2. Use full-width intentionally. Move the block to its own row only when the header benefits from a more stacked or spacious layout.
3. Stretch carefully. Enable Fill available space when you want the cart block to help balance desktop header spacing.
4. Preserve cart access. If you hide this block on one device size, make sure another cart link or icon is clearly available there.
5. Check header contrast. Test custom colors against the header background so the cart remains easy to find.
6. Review both viewports. Desktop and mobile can behave differently, so confirm placement, visibility, and spacing on each screen size.
7. Keep fallback styling in mind. Default or transparent-looking choices usually blend with the header, while explicit colors make the cart feel more independent from nearby elements.