Cart

Overview #

The Cart section is designed to display the items a customer has added to their cart. It provides a visual representation of the cart's contents and includes settings for customizing the appearance and functionality of the cart display. This section is essential for facilitating the checkout process by allowing customers to review their selected items.

Key components and functionality #

Introduction

The Cart section will show a customer’s cart items if any have been added; empty cart messaging will show if no items have been added.

Padding settings

The padding settings allow you to adjust the space above and below the section content. This can help in aligning the Cart section with other elements on the page for a cohesive look.

• Top padding (desktop): Adjusts the space above the cart section on desktop devices. The range is from 0 to 120 pixels, with a default of 32 pixels.
• Bottom padding (desktop): Adjusts the space below the cart section on desktop devices. The range is from 0 to 120 pixels, with a default of 32 pixels.
• Top padding (mobile): Adjusts the space above the cart section on mobile devices. The range is from 0 to 120 pixels, with a default of 16 pixels.
• Bottom padding (mobile): Adjusts the space below the cart section on mobile devices. The range is from 0 to 120 pixels, with a default of 16 pixels.

Supported block types

The Cart section supports various block types to enhance its functionality. These include:

• @app: Allows integration with third-party applications.
• Custom liquid: Enables the addition of custom liquid code for advanced customization.

Usage notes #

• Responsive design: Ensure that padding settings are adjusted for both desktop and mobile views to maintain a consistent user experience across devices.
• Performance: Avoid excessive use of custom liquid code, as it may impact page load times.
• Accessibility: Ensure that text and background colors meet accessibility standards for readability.

Usage examples #

1. Adjusting padding for a cohesive layout:

   • If your Cart section appears too close to other sections on the page, you can increase the top and bottom padding to create more space and improve readability.

2. Customizing with liquid code:

   • Use the custom liquid block to add specific functionalities or display additional information, such as promotional messages or custom checkout instructions.