Cart

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Cart section provides shoppers with a flexible, user-friendly area for viewing and updating their selected items before checkout. It is highly customizable, enabling you to align both visual style and user experience with your brand while optimizing ease of use and performance.

⚠️ Important: The Cart section is a crucial stop in every customer journey. Thoughtful configuration of its appearance and features can directly impact both customer satisfaction and conversion rates.

Key components and functionality

Settings within the Cart section are grouped for simplicity and efficiency, allowing you to quickly tailor layout, features, and extensibility. Each group makes it easy to keep your checkout process both effective and on-brand.

Section introduction

The Cart presents customers with everything in their shopping basket, enabling real-time adjustments such as quantity updates and item removals. This is also a strategic area to address customer questions, reinforce trust, or add last-minute incentives to help encourage checkout.

Supported block types

The Cart section supports key block types that let you extend cart functionality and personalize the shopping experience.

1. App block

   1. Embeds third-party or custom app content, such as upselling tools, loyalty programs, or special notices directly inside the cart view.

2. Custom liquid block

   1. Lets you inject custom Liquid code or HTML for advanced scenarios — such as dynamic discounts, conditional banners, or helpful tips that update based on what's in the cart.

   2. Includes built-in controls to manage block visibility by device. You can target content specifically to desktop or mobile shoppers as needed.

Usage notes

Responsive layout controls let you tune the Cart for optimal appearance across devices. Adjust padding, backgrounds, and supporting images for a polished look that helps guide customers smoothly to checkout. Favor smaller, high-quality visuals to boost performance and keep the cart experience fast and fluid. Always confirm that color choices, icon styles, and any custom code remain readable, accessible, and usable for all customers—including those using assistive technology.

💡 Tip: Preview the Cart section on multiple screen sizes after making changes. Check for loading speed, ease of use, and consistent brand appearance for an optimal customer experience.