Cart

The Cart block is a customizable feature designed to display cart-related information, enhancing the shopping experience by allowing users to view and manage their cart contents easily. It is available in the "Main navigation" section and can be tailored to fit the aesthetic and functional needs of a site.

Key settings include layout options that allow the Cart block to fill available space and be centered on desktop devices. Background settings offer customization through solid colors, gradients, and imagery, with specific options for mobile devices to ensure optimal display. Color settings enable users to adjust the colors of icons, text, and subheadings, while visibility settings allow the block to be shown or hidden on different devices.

Usage examples include optimizing the desktop layout by enabling "Fill available space" and "Show centered" options, using background gradients and overlay colors for visual appeal, and setting different background images for desktop and mobile devices to maintain a cohesive look across all screen sizes. These settings help create a Cart block that is both functional and visually appealing.

Overview #

The Cart block is designed to display cart-related information and settings, allowing users to customize the appearance and functionality of the cart section on their site. This block is available in the "Main navigation" section and is limited to one instance per section.

Key components and functionality #

Cart block introduction

The Cart block is intended to show a customer's cart items if any have been added. If no items are present, it will display an empty cart message. This block is crucial for providing users with a seamless shopping experience by allowing them to view and manage their cart contents easily.

Layout settings

Layout settings control the arrangement of the Cart block, particularly on desktop devices. Note that the block arrangement, including settings for "Show centered" and "Fill available space," only apply to desktop. The mobile layout is optimized and will not be affected by these settings.

Fill available space

This setting allows the Cart block to fill the available space within its section. It is useful for ensuring that the block utilizes the full width of its container on desktop devices.

Show centered

This option centers the Cart block within its section on desktop. Only one block per section should have this setting enabled to maintain a balanced layout.

Background settings

Background settings allow customization of the Cart block's background, including color, gradient, and imagery options.

Background color

Users can set a solid background color for the Cart block.

Background gradient

This option allows for a gradient background, providing a more dynamic visual effect.

Overlay color and gradient

These settings add an overlay color or gradient on top of the background, which can enhance the block's appearance.

Overlay opacity

This setting controls the transparency of the overlay, with a default value of 48%.

Background image and video

Users can select images or videos as the background for the Cart block, with separate options for mobile devices to ensure optimal display across different screen sizes.

Color settings

Color settings allow users to customize the colors of various elements within the Cart block, such as icons, text, and subheadings. These settings will override the default theme settings.

Visibility settings

Visibility settings determine the visibility of the Cart block on different devices.

Visibility options

Users can choose to hide the Cart block on desktop, mobile, or not hide it at all. The default setting is do not hide.

Available in sections #

• Main navigation

Usage examples #

1. Desktop layout optimization: Enable the "Fill available space" and "Show centered" options to ensure the Cart block is prominently displayed on desktop devices, providing a clear and accessible view of cart contents.

2. Background customization: Use a background gradient with an overlay color to create a visually appealing Cart block that complements the overall theme design.

3. Responsive design: Set different background images for desktop and mobile devices to ensure the Cart block looks great on all screen sizes.

By utilizing these settings, users can create a Cart block that is both functional and visually appealing, enhancing the shopping experience for their customers.