Cart

Overview

The Cart block places a cart icon in your navigation, making it easy for customers to access and review their cart from anywhere on your storefront. This streamlined access improves the shopping experience and encourages customers to move confidently toward checkout.

⚠️ Important: Keeping the Cart block visible in your navigation helps users stay engaged and can lead to more completed purchases.

Layout settings

Layout settings determine how the Cart block is shown and positioned within your navigation menu. These options provide flexibility so you can achieve the best arrangement for your store’s layout and customers’ devices.

You can enable fill available space to have the Cart block expand horizontally and occupy as much space as possible in the navigation. By default, this is disabled, so the block stays compact unless changed.

For alignment navigation desktop, choose the block’s alignment on desktop screens:

1. Left

   1. Default

2. Center

3. Right

4. Full width

   1. The block stretches to fill the full navigation bar.

For alignment navigation mobile, set the block’s alignment for mobile navigation:

1. Left

   1. Default

2. Center

3. Right

4. Full width

   1. The block occupies the maximum horizontal space on mobile.

📝 Note: Use desktop and mobile alignment options to make sure the Cart block remains easy to find and interact with on every device.

Visibility settings

Visibility controls manage where and when the Cart block appears, giving you options to tailor the navigation for desktop and mobile users.

With display visibility, pick how the block will display:

1. Do not hide

   1. Default

2. Hide on desktop

3. Hide on mobile

Careful visibility choices help you avoid clutter and make navigation clearer for users on all devices.

📝 Note: Hiding the Cart block on one device type is useful if you already have cart access somewhere else—such as a floating button or dedicated menu item.

Available in sections

The Cart block can be used in these sections:

1. Main navigation

Usage notes

1. Always test both desktop and mobile layouts to confirm the Cart block is visible and accessible for all users.

2. If using fill available space or full width settings, confirm the block does not overpower other navigation elements.

3. Use just one Cart block per navigation to avoid confusion and streamline the customer journey.

4. Select icon and text colors with strong contrast against your navigation background for best accessibility across devices.

💡 Tip: Review your navigation regularly to ensure the Cart block stands out, remains functional, and supports your users’ path to checkout.