Cart

These settings allow you to customize the cart page, cart notification, and cart drawer.

Setting

Description

Cart type

The “Cart type” setting allows you to choose between two styles for how the cart is displayed to users when they click on “Add to cart”. You have two options:

Drawer: When a customer clicks “Add to cart”, a drawer will slide out from the side of the screen, displaying the cart contents and allowing the user to continue shopping or proceed to checkout within the same screen.
Page: When a customer clicks “Add to cart”, they will be redirected to a separate page where they can review and edit their cart contents before proceeding to checkout.
Pop-up notification: This setting specifies the type of cart display, which appears as a pop-up notification when items are added to the cart.

Cart page

When this type is selected, clicking the cart icon in the header or the Add to Cart button on product cards will take the customer directly to the cart page.

Set general cart settings here:

Setting	Description
Type and vendor:	You can choose to display both the product type and vendor, only one of them, or hide both entirely.
Show type	Click “Show type” to display the product type for items added to the cart page. *Note:* The product type must first be added on the product page in the admin.
Show vendor	Click “Show vendor” to display the product vendor for items added to the cart page. *Note:* The product vendor must first be added on the product page in the admin.

Cart notification

When this type is selected, clicking the Add to Cart button on product cards will open a notification popup, while clicking the cart icon in the header will take the customer directly to the cart page.

Set the color scheme of popup notification:

Setting

Description

Color scheme

Apply a color scheme to the entire cart drawer for a cohesive look:

After creating your color schemes in the Theme Settings under the Colors tab, you can assign them to various templates, sections, blocks, drawers, and pop-ups across your store.
In the settings of each template, section, block, drawer, or pop-up, you'll find a Color Scheme dropdown list.
Select the appropriate color scheme to maintain consistency and align with your brand's identity.

Cart drawer

When this type is selected, clicking the cart icon in the header or the Add to Cart button on product cards will take the customer directly to the cart page.

Setting	Description
Color scheme	Apply a color scheme to the entire cart drawer for a cohesive look: After creating your color schemes in the Theme Settings under the Colors tab, you can assign them to various templates, sections, blocks, drawers, and pop-ups across your store. In the settings of each template, section, block, drawer, or pop-up, you'll find a Color Scheme dropdown list. Select the appropriate color scheme to maintain consistency and align with your brand's identity.
Type and vendor:	You can choose to display both the product type and vendor, only one of them, or hide both entirely.
Show type	Click “Show type” to display the product type for items added to the cart drawer. *Note:* The product type must first be added on the product page in the admin.
Show vendor	Click “Show vendor” to display the product vendor for items added to the cart drawer. Note: The product vendor must first be added on the product page in the admin.
Enable cart note	Enabling the “Enable cart note” option allows customers to leave important notes related to their purchased products during the checkout process. These notes could include special instructions, requests, or any additional information they want to convey regarding their order. These notes are valuable for communication between customers and the store's admin. When a customer leaves a note, the admin can view it in the customer's order history or within the order details.
Free shipping minimum amount Find the header Free shipping* under the table to learn more about this feature	Enter the order amount that customers must reach to qualify for free shipping.
Number prefix	A character, set of characters, or text added before a number.
Number suffix	A character, set of characters, or text added after a number.
Message Use [[amount]] to display progress towards free shipping.	This message is shown until the customer reaches the free shipping threshold. For example, you can enter: FREE DELIVERY FROM 120 USD – Spend [[amount]] to reach free shipping! In the preview, it may appear as: FREE DELIVERY FROM 120 USD – Spend $20.00 More to reach free shipping! Note: The word “More” is treated as a number suffix — add it in the Number Suffix settings.
Message free shipping	This message is displayed once the customer reaches the minimum amount required for free shipping. For example, you can enter: Your order will be shipped for free!
Recommended products	Choose specific products that you want to display in the “You May Also Like” sidebar at the bottom of cart drawer to promote these products.
Recommended products title	Add a custom heading for the recommended products displayed at the bottom of cart drawer. For example, you could use “Buy This With”, “You May Also Like” or another call to action to attract attention.
Enable quick add button	Turn on the toggle to display a quick add button for products in the “You May Also Like” section. For products without variants, an Add to Cart button (with a cart icon) will appear, allowing customers to add the product directly to the cart drawer. For products with variants, a Choose Options button (with an eye icon) will appear, opening a quick view popup to select product options.
Image ratio	The image ratio determines the shape and proportions of product images. Choosing the right ratio helps maintain a consistent layout and visual balance across product cards. Available options: Portrait: A vertical image layout (taller than it is wide). Best for showcasing products with more height. Square: A balanced layout where height and width are equal. Ideal for uniform product display. Landscape: A horizontal image layout (wider than it is tall). Suitable for wider product shots.
Show secondary image	Enable the toggle to display up to three additional gallery images on product cards, showcased with a captivating hover animation effect.
Show type	Click “Show type” to display the product type on product cards in the “You May Also Like” section. *Note:* The product type must first be added on the product page in the admin.
Show vendor	Click “Show vendor” to display the product vendor on product cards in the “You May Also Like” section. Note: The product vendor must first be added on the product page in the admin.
Show color swatch	Enable the toggle to show color swatches on product cards displayed in the “You May Also Like” section.
Swatch variant name	f the variant option name on the product page differs from the default “Color”, enter the custom name here to ensure swatches are displayed correctly on product cards.
Empty cart drawer collections	Select collections from the list to display when the cart is empty — meaning no products have been added. Customers can click on any of the recommended collections to visit the corresponding collection page, where they can browse and add products to their cart. This feature is useful for promoting specific collections to customers who haven’t started shopping yet.