The Flex theme includes four distinct Cart type options, Mini cart, Drawer, Page, and Refresh. These cart types determine how your cart functions and the customer experience when adding a product to their cart.
Explore cart type examples and preview the mobile layout for each cart type to determine which option suits your storefront's needs.
- Open Flex with the theme editor (Customize)
- Open THEME SETTINGS
- Open CART
- Adjust the Cart type
Cart Type Examples
-
Mini Cart
When a customer adds a product to their cart, a smaller version of the cart page in a drop-down format will display from the header which is updated dynamically using AJAX. The mini cart is also accessible by hovering over the cart icon! The customer can either navigate to the cart page from here, or if enabled, head straight to the checkout.
If the mini cart is empty, on hover, your cart icon will display as well as a link that says 'Start Shopping' which will take customers to the Collections/All page.
Enable note text box
If you'd like to have a 'note' text box to appear in the mini cart for your customers, you can check off the Enable 'note' text box setting found under Theme Settings > Cart.
Agree to Terms
If you'd like the agree to terms to display in the mini cart, you can enable the 'Agree to terms checkbox' found under Theme Settings > Cart > Show 'agree to terms' checkbox.
If you'd like to add a link to your Terms page, you can select your page under the 'Agree to terms' page setting as well. This will show a 'View Terms' link where customers can easily access the page.
Show total savings
If an item is on sale, the total savings can be enabled to display in the mini cart! 'Show total savings' can be enabled under Theme Settings > Cart > Mini and Drawer Cart > Show total savings.
Show quantity box
If you'd like to add a quantity box in the mini cart so your customers can easily update the quantity of the item, enable the 'show quantity box' setting.
Cart message
If you would like a message to appear to your customers in the mini cart, you can add text in the 'Cart message' field. The cart message can be added under Theme Settings > Cart > Mini and Drawer Cart > Cart message.
This is a great way to add your shipping timelines, hours, promo codes, or anything else you'd like your customers to see before they make their purchase!
Checkout
If you'd like your customers to be able to skip the cart page and head directly to the Checkout page from the mini cart, you can enable the 'Checkout' setting.
-
Drawer
When a customer adds an item to their cart, a sliding drawer cart will reveal from the right side of the screen which is updated dynamically using AJAX. If the drawer has been closed, you can click the cart icon again for it to re-open. The customer can either navigate to the cart page from here, or if enabled, head straight to the checkout.
If the drawer is empty, on hover, your cart icon will display as well as a link that says 'Start Shopping' which will take customers to the Collections/All page.
Enable note text box
If you'd like to have a 'note' text box to appear in the mini cart for your customers, you can check off the Enable 'note' text box setting found under Theme Settings > Cart.
Agree to Terms
If you'd like the agree to terms to display in the drawer, you can enable the 'Agree to terms checkbox' found under Theme Settings > Cart > Show 'agree to terms' checkbox.
If you'd like to add a link to your Terms page, you can select your page under the 'Agree to terms' page setting as well. This will show a 'View Terms' link where customers can easily access the page.
Show total savings
If an item is on sale, the total savings can be enabled to display in the drawer! 'Show total savings' can be enabled under Theme Settings > Cart > Mini and Drawer Cart > Show total savings.
Show quantity box
If you'd like to add a quantity box in the drawer so your customers can easily update the quantity of the item, enable the 'show quantity box' setting.
Cart message
If you would like a message to appear to your customers in the drawer, you can add text in the 'Cart message' field. The cart message can be added under Theme Settings > Cart > Mini and Drawer Cart > Cart message.
This is a great way to add your shipping timelines, hours, promo codes, or anything else you'd like your customers to see before they make their purchase!
Checkout
If you'd like your customers to be able to skip the cart page and head directly to the Checkout page from the drawer, you can enable the 'Checkout' setting.
-
Page
When a customer adds an item to their cart, they will be redirected to the shop's cart page. This method is great if you'd like your customers to see specific content available on your cart page.
Learn more about setting up the cart page
-
Refresh
When a customer adds an item to their cart, the current page will refresh and the cart icon will update with the count.
Cart Icon Setting
There are four options for the cart icon: bag, basket, cart, and box. The cart icon setting is found in your Theme Editor (Customize) under Theme Settings > Cart > Cart Icon.
The cart icon can either be displayed as the 'outline' icon style, or the 'solid' icon style. This setting is found under Theme Settings > Typography > Icons > Icon style.
Note: the 'icon style' setting will affect all of your icons!
Mobile Layout
-
Mini Cart
On mobile, when a customer adds an item to the cart, the screen will scroll up and reveal the mini cart. When the mini cart is open, customers can access the cart page by clicking the cart icon.
-
Drawer
On mobile, when a customer adds an item to the cart, the drawer will slide in from the right and fill the screen.
-
Page
On mobile, when a customer adds an item to the cart, they will get redirected to the cart page.
-
Refresh
On mobile, when a customer adds an item to the cart, the screen will refresh to the top of the current page where the cart count will get updated.
