Cart

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:

1. 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.
2. Cart 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.

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.

Learn more about color schemes.

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.

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 this setting to display product variant options—such as color, size, or material—in the product blocks within the cart drawer.

• When turned on, any variants selected on the product page in the admin will be visible for each product in the cart drawer.
• This helps customers easily review which options they chose without opening the full product page.

Use this setting to select a specific list of products to display in the “Products You Might Like” block at the bottom of the cart drawer.

These promoted products will appear whether the cart contains items or is empty, helping highlight additional products to encourage purchases.

Select a color scheme from the list and customize it with appropriate colors for heading, countdown bar, button, and background.

Applying a color scheme to the banner block automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.

In Theme Settings → Typography → Fonts, you can set font settings for Heading, Caption, and Paragraph. Choose which style to apply in this block.

• H5-H6: This style allows you to select a heading level: H5 or H6.
• Subheading: This style is used for text that appears below a main heading, typically smaller or less prominent than the heading, but still visually distinct from body text.
• Caption: This style is used for short supporting text, such as labels or annotations.
• Paragraph: This style is used for standard body text.

In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.

• Heading
• Body
• Accent

Enter the end date for a specific promotion. Refer to the example provided below, the field in the theme customizer to ensure the discount period's end date is correctly formatted.

Note: Example, how to entered correctly: Dec 31, 2026 or Dec 31, 2026 20:00

When the specified date has passed, use a dropdown menu to choose how the countdown bar behaves:

• Stop and show zeroes: The countdown stops and displays 00:00:00       for all units (days, hours, minutes, seconds).
• Restart when finished (cycle): The countdown resets and starts over from the initial duration, creating a repeating cycle.

Use the slider to adjust the cycle hours for the countdown bar when the “Restart when finished (Cycle)” option is enabled.

Note: This setting is visible only after the countdown date has passed.

The font size slider allows you to customize the font size for numbers, with the following options:

• Minimum font size: 10px
• Maximum font size:  24px

Use the slider to adjust the default font size according to your design needs.

The font size slider allows you to customize the font size for numbers on mobile, with the following options:

• Minimum font size: 10px
• Maximum font size: 24px

Use the slider to adjust the default font size according to your design needs.

In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.

• Heading
• Body
• Accent

Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme.

• Heading
• Text
• Accent

The font size slider allows you to customize the font size for text (days,hours,minutes, seconds labels), with the following options:

• Minimum font size:10px
• Maximum font size:  24px

Use the slider to adjust the default font size according to your design needs.

The font size slider allows you to customize the font size for for text (days,hours,minutes, seconds labels) on mobile, with the following options:

• Minimum font size: 10px
• Maximum font size: 24px

Use the slider to adjust the default font size according to your design needs.

In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.

• Heading
• Body
• Accent

Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme.

• Heading
• Text
• Accent

You can add a gift box product here as a cross-sell item that customers can purchase along with the main products.

How it works:

• If the gift box does not have variant options, clicking its title will automatically add the product to the cart.
• If the gift box has variants (e.g., color, size), a quick view popup will open, allowing customers to select the desired options. After clicking Add to Cart, the product will appear in the cart drawer.

Enabling the “Show 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.

Enable this toggle to display a checkout button that sends customers directly to the checkout page so they can purchase products immediately.

Note: Enable this option to access button style settings.

Choose the button’s appearance:

• Primary: The main button style. It uses the primary color from your color scheme. You can choose to fill it with the background color or display it as an outline if the background is set to transparent.
• Secondary: A secondary action style, using the secondary color from your color scheme. Like the primary button, it can be filled or outlined depending on the background settings.
• Inline: Minimal style that looks like text with an underline.

This setting lets you add a small visual indicator to your button.

• None: The button displays only the text, with no icon.
• Dot: A small dot appears before the button label.

Enable this toggle to display a View Cart button that sends customers directly to the cart page, so they can review their items before checkout.

Note: Enable this option to access button style settings.

Choose the button’s appearance (Read explanation in checkout button style) :

• Primary
• Secondary
• Inline

This setting lets you add a small visual indicator to your button (Read explanation in checkout button icon) :

• None
• Dot

Enable this toggle to display a Continue Shopping link or button that sends customers to the all products page.

Note: Enable this option to access button style settings.

Choose the button’s appearance (Read explanation in checkout button style) :

• Primary
• Secondary
• Inline

This setting lets you add a small visual indicator to your button (Read explanation in checkout button icon) :

• None
• Dot

Choose the button’s appearance:

• Primary: The main button style. It uses the primary color from your color scheme. You can choose to fill it with the background color or display it as an outline if the background is set to transparent.
• Secondary: A secondary action style, using the secondary color from your color scheme. Like the primary button, it can be filled or outlined depending on the background settings.
• Inline: Minimal style that looks like text with an underline.

This setting lets you add a small visual indicator to your button.

• None: The button displays only the text, with no icon.
• Dot: A small dot appears before the button label.