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:
|
| 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 | In this field, you can use to add 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. |
| Drawer corner radius | Adjust the border radius for the cart drawer using the slider. |
| 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. |
| Show cart note | The “Show cart note” option allows customers to leave essential 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 tax note | Switch the toggle if you want to show a tax note. |
| 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 | Switch the toggle if you want to show currency codes at the “Checkout” button. |
| Add border to image | Switch the toggle 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 the different appearance of quantity and product options. |
| Product heading size | Allows you to configure the heading font size for products added to the cart:
|
| Cart button color style | This feature allows you to customize the color style of buttons. You have two options to choose from:
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 seven options for style:
|
| Checkout button color style | This feature allows you to customize the color style of buttons. You have two options to choose from:
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 | Choose from seven button styles:
|