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 #
-
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.
-
Background customization: Use a background gradient with an overlay color to create a visually appealing Cart block that complements the overall theme design.
-
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.
Align v1.7 is out now! Learn more about our best release yet →