Cart

The shopping Cart enhances the online shopping experience by organizing selected items, automatically calculating totals, and streamlining the checkout process—providing users with greater convenience, clarity, and flexibility.

1. Cart

Setting	Description
Action after add cart on desktop	Display the products after you've added them to the shopping cart Drawer: Display the cart drawer Page: Redirect to the cart page

2. Mobile settings

Setting	Description
Action after add cart	Select what happens after a customer adds a product to cart on mobile. Open mini cart Notify message Open cart once, notify after
Open cart as	Choose how the cart opens when tapping the cart icon in header and mobile navigation bar. Drawer Popup

3. Free shipping message

Free shipping can benefit an online store by attracting customers and increasing sales. It's seen as a value-added incentive, reducing cart abandonment rates and encouraging larger purchases. Ultimately, it enhances the overall shopping experience and customer satisfaction.

Setting	Description
Message	Customize the message shown to users. Use [amount] to dynamically display how much more the customer needs to spend to get free shipping.
Free shipping minimum amount	Set the minimum order value required to qualify for free shipping. Enter whole numbers only (no symbols or currency signs).

4. Discount progress bar

Show up to 3 spending milestones in the cart. Each milestone is a reward the customer unlocks by spending more, for example 10% off, then free shipping, then 30% off. The bar fills as the cart total grows, and the message above it tells the customer how much more to add for the next reward.

The bar only displays progress. It does not create or apply the discount. Make sure a matching discount code or automatic discount is created in your Shopify admin. An automatic discount is the easiest option, because it applies at checkout without the customer typing anything.

Enter milestone amounts in your store's default currency. They are converted automatically for local currencies.

Set it up

1. Go to Online Store > Themes > Customize > Theme settings > Cart.

2. Scroll to Discount progress bar and turn on Enable discount progress bar.

3. Turn on Milestone 1, then fill in Threshold, Label, and Icon.

4. Repeat for Milestone 2 and Milestone 3. Enter the thresholds from smallest to largest. Turn off any milestone you do not need.

5. Edit Progress message and All milestones reached message.

6. In Shopify admin, create a discount that matches each milestone, so the reward the customer sees is the reward they actually get.

7. Save, add a product to the cart, then check both the cart drawer and the cart page.

5. Cart count down

Display a countdown timer to indicate limited product stock, creating urgency and encouraging quicker purchase decisions.

Setting	Description
Show on minicart and cart page	Display the cart countdown timer on both the mini cart and the cart page.
Duration	Set the length of time the countdown timer runs.

6. Product recommendations

Product recommendations boost sales and enhance the shopping experience by suggesting relevant items based on customer behavior.

Setting	Description
Enable product recommendations	Product recommendations will be shown on the mini cart and cart page
Show on mobile	Display product recommendations on mobile devices.
Heading	Product recommendations section heading.
Product recommendations type	Customize the display style of product recommendations Auto Selected
Maximum products to show	Define the maximum number of products displayed at a time in the section.
Product	Customize product recommendations when selecting product recommendations type as selected.

7. Product gift wrap

Allow customers to add a gift wrapping option to their purchase.

Setting	Description
Product	Choose a product to use as the gift wrap option. *Note: This only works with products that do not have variants.

8. Empty cart settings

Below are the available settings and their descriptions to help you customize your empty cart experience and promotional messages effectively:

Setting	Description
Heading	Set the main title text displayed when the cart is empty.
Description	Add a short promotional or instructional message below the heading.
Empty cart layout	Choose between List and Grid layout for your minicart when it's empty.
Collection list	Display their featured image by default. Use metafield to change image and text.
Collections text color	Set the text color for the featured collection title.
Button label	Customize the text shown on the action button linking to collections.
Button link	Add a URL or select a page for the button to redirect users to. *Note: Default is Collection all page
Free shipping message	Display a promotional message offering free delivery for orders above a certain amount.
Terms and Conditions - Show checkbox in mini cart and cart page	Show an agree checkbox for your Terms and Conditions inside your cart.

Empty cart layout - List

Empty cart layout - Grid