Cart

Cart type: Page or 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.

Cart icon

You can change the view of the cart icon located in the header using SVG format. “Cart icon” field you can use for adding an SVG icon. SVG icons for the cart can be found in free or paid sources. A simple way to do this is to right-click on the SVG file, choose “Open with Notepad” (or any other text editor), and the file's code will be copied to the editor. Alternatively, you can use a text editor like “TextEdit” or a “Visual Studio Code editor” to read the SVG file.

In the “Visual Studio Code editor”, you can drag the SVG image from your computer into the editor, copy the code, and then paste it into the "Add icon to link" field. This allows you to easily incorporate custom SVG icons into your button design.

Drawer settings

Setting	Description
Product image ratio	This setting allows picking the image ratio for products displayed in the cart drawer. You can select either "Portrait" or "Square" to ensure your images look good and maintain consistency with your design.
Product button	The “Add to cart” button enables adding a product from the “You may also like” sidebar directly to the Cart Drawer and Cart Page. Please note that it will display only the first available variant of the product. The “Choose options” button enables opening a product quick view popup to see all product options and then add the selected variant with size and color to the Cart Drawer or Cart Page according to cart settings.
Add icon to replace the "Remove" button	This field you can use for adding an SVG icon to the button. SVG icons can be found in free or paid sources. A simple way to do this is to right-click on the SVG file, choose “Open with Notepad” (or any other text editor), and the file's code will be copied to the editor. Alternatively, you can use a text editor like “TextEdit” or a "Visual Studio Code editor" to read the SVG file. In the "Visual Studio Code editor", you can drag the SVG image from your computer into the editor, copy the code, and then paste it into the "Add icon to link" field. This allows you to easily incorporate custom SVG icons into your button design.
Promoted collection	Choose the collection of products that you want to display in the “You May Also Like” sidebar in the cart drawer to promote a specific collection.
Empty drawer promoted collection	The “Empty drawer promoted collection” setting allows you to specify which collection should be displayed in the cart drawer when it is empty, meaning there are no products in the cart. Customers can click on this collection, and it will take them to the collection page where they can browse and add products to their cart. This feature can help promote a specific collection to customers who may not have added any products to their cart yet.
Show separator line	Enable this option to add lines between products, providing a clear visual separation for a more organized and aesthetically pleasing display.
Announcement	You can add an important message for customers as an announcement of the cart drawer.
Announcement image left Announcement image right	Customize the position of the icon relative to the text. You can choose to place the icon before text to the left, after text to the right, or in both places – before and after.
Announcement background	Choose the appropriate background color to highlight your announcement to make it noticeable and visually appealing.
Show cart note	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
Show product vendor	Shows the vendors of the products under the image.
Show product details	Shows or hides product details (Color, size, material…).
Show money with currency at "Checkout" button	Mark if you want to show currency codes at the "Checkout" button.
Add border to image	Tick the checkbox to add a border to the image.
Product image background	This setting allows you to specify the background color for products without images. This background will be visible in cases where a product lacks an image. Additionally, the background can be visible on the image container's paddings according to the image ratio.
Product style	Two product styles: Primary or Secondary. The difference is in image sizes and different appearance of quantity and product options.
Cart button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. *To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	There are four options for style: Default button Default button with icon Outline button Outline button with icon Inline button Inline button with underline Inline button with underline on hover
Checkout button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. *To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	You can choose from seven different button styles: Default button: This is the standard button style with a solid background color and text. Default button with icon Outline button: This style features a transparent background with a colored outline and text. Outline button with icon Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color. Inline button with underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable. Inline button with underline on hover — this option adds an underline to the text on hover.
Heading size	Adjust the heading font size in the cart drawer by picking from large, medium, or small sizes. The style is for the “Your cart” heading, also when the cart drawer is empty for the “Your cart is empty” heading, and the “Collection name” heading.
Heading style	This setting enables you to define the capitalization style for text. You have the following options: Default: No capitalization transformation is applied. Capitalize: Capitalize the first letter of each word. For instance, "Your cart" becomes "Your Cart". Uppercase: Converts all text to uppercase letters. For example, "Your cart" becomes "YOUR CART".
Heading font family	Heading: This option lets you select the font family used in headings for buttons and links text throughout the website. Body: This option lets you select the font family used in body text for buttons and links text throughout the website.
Heading color	The setting allows you to set up heading color. Three options: Main Secondary Heading *To choose or change colors for the heading, go to the “Colors” tab in the theme settings and locate the “General colors" block with text color options. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Show tax note	Mark if you want to show a tax note.