> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/other-pages/cart.md). # Cart The Cart Page is where customers review the items they've added to their shopping cart before proceeding to checkout. This page displays all cart items with their details, allows customers to update quantities or remove items, shows the cart total and any applicable discounts, and provides a checkout button to complete the purchase. The Cart Page is a critical part of the shopping experience, as it's the final step before checkout where customers confirm their selections and make any last-minute changes. A well-designed cart page can help reduce cart abandonment and increase conversion rates by making it easy for customers to review and modify their cart contents. The Cart Page automatically displays all items that customers have added to their cart from product pages or other sections of your store. It shows product images, names, prices, quantities, and any selected variants or customizations. Customers can adjust quantities, remove items, add notes for their order, and see the total cost including taxes and shipping information before proceeding to checkout. *** ### General Cart settings {% content-ref url="/pages/a7iuWMq7Y7570hvXIhDd" %} [Cart](/docs/theme-settings/cart.md) {% endcontent-ref %} *** ## Main Section: Cart The Cart section is the main component that displays the cart contents on the Cart Page. The Cart section displays all items in the customer's shopping cart in an organized layout. On desktop, the cart items appear on the left side with the checkout summary (totals, discounts, checkout button) on the right side. On mobile devices, the layout stacks vertically for easier viewing. The section includes settings to control the heading, product image sizes, color schemes for different parts of the cart, and spacing to create a professional and user-friendly cart experience.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Templates** > **Cart**. 3. Configure the sections and blocks. 4. Preview live, then click **Save**. {% endhint %} *** ### Settings #### Heading content * **Heading size**: Control the size of the cart page heading. Options range from h4 (smallest) to hxxl (extra large) to match your design preferences. The heading automatically displays "Cart" followed by the number of items in the cart. * **Underline**: When enabled, adds a decorative underline beneath the cart heading for visual emphasis. #### Items * **Image size**: Control the size of product images displayed in the cart items. Options include Small (compact images), Medium (standard size), or Large (larger images). Larger images make products easier to identify but take up more space in the cart. * **Colors**: Choose a color scheme for the main cart section background. This affects the overall appearance of the cart page. * **Content color scheme**: Choose a separate color scheme for the cart items table area. This allows you to visually distinguish the items section from the rest of the cart, creating better visual hierarchy. * **Top padding**: Add space above the cart items content area. Options range from 0px (no space) to 150px in 10px increments. This controls the spacing between the cart heading and the cart items. #### Footer * **Colors**: Choose a color scheme for the cart footer area where the totals and checkout button are displayed. This affects the background and text colors of the checkout summary section. #### Padding * **Padding top**: Add space above the entire cart section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. * **Padding bottom**: Add space below the entire cart section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. *** #### Nested line items The cart page fully supports nested cart lines, covering both Shopify mechanisms: * **Add-ons**: Apps can attach child items to a parent product (e.g., warranties, upsells, product protection). These children appear visually nested under their parent with indentation and smaller styling. Quantity controls and the remove button are shown or hidden based on the app's instructions — if the child can't manage its own quantity, a read-only label is displayed instead. * **Bundles**: Products created with the Shopify Bundles app display their components as read-only rows beneath the parent. Components show no quantity controls, no remove button, and no price — the parent item shows the bundle's total. Child rows use smaller text, reduced padding, and a lighter separator to visually distinguish them from parent items. On mobile, the indentation is slightly reduced to save space. This behavior is automatic and requires no configuration. *** ### Tips * Use different color schemes for the content area and footer to create visual separation between the cart items and the checkout summary. This helps customers distinguish between reviewing items and completing their purchase. * Choose an image size that balances visibility with space efficiency. Medium images work well for most stores, but if your products have important visual details, larger images may be better. * Adjust the top padding for the content area to create appropriate spacing between the heading and cart items. Too little spacing can make the cart feel cramped, while too much can waste valuable screen space. * The cart footer includes space for discounts, totals, checkout button, and additional checkout options. The layout is optimized to guide customers through the checkout process smoothly. * Use the Featured collection here for relevant add-ons or bestsellers; it’s a simple, effective upsell. * If you offer free shipping over a certain amount, set your threshold in Theme settings so the Cart footer shows progress and motivates larger orders.