> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/theme-settings/cart.md).

# 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.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Fc4xvO06yBzfoKZo1XWMp%2Fimage.png?alt=media&amp;token=4ec4eb17-92a6-45f8-9edf-5920846991a7" alt=""><figcaption></figcaption></figure>

### 1. Cart

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Fag5kanu3R7XpBUYiRL5Q%2Fimage.png?alt=media&amp;token=b401aca9-3b94-4a1b-a626-ba3db40cbef7" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Action after add cart on desktop</strong></td><td><p>Display the products after you've added them to the shopping cart</p><ul><li><strong>Drawer</strong>: Display the cart drawer</li><li><strong>Page</strong>: Redirect to the cart page</li></ul></td></tr></tbody></table>

### 2. Mobile settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FYt78HuuSspZsfEloOekb%2Fimage.png?alt=media&amp;token=2620b61e-0908-4414-938d-e97a29267dad" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Action after add cart</strong></td><td><p>Select what happens after a customer adds a product to cart on mobile.</p><ul><li><strong>Open mini cart</strong></li><li><strong>Notify message</strong></li><li><strong>Open cart once, notify after</strong></li></ul></td></tr><tr><td><strong>Open cart as</strong></td><td><p>Choose how the cart opens when tapping the cart icon in header and mobile navigation bar.</p><ul><li><strong>Drawer</strong></li><li><strong>Popup</strong></li></ul></td></tr></tbody></table>

### 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.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FEVqokV0HIdYJcKNZSew0%2Fimage.png?alt=media&amp;token=a357c162-1b70-4d8f-bbde-022df7dc8611" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Message</strong></td><td>Customize the message shown to users. Use <code>[amount]</code> to dynamically display how much more the customer needs to spend to get free shipping.</td></tr><tr><td><strong>Free shipping minimum amount</strong></td><td>Set the minimum order value required to qualify for free shipping. Enter whole numbers only (no symbols or currency signs).</td></tr></tbody></table>

### 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](https://admin.shopify.com/discounts). 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.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F8zbK6ycgXkfIIFUlII4A%2Fimage.png?alt=media&amp;token=7ffab2ce-c03f-4985-82ad-40df1cbe0bc1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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.
   {% endhint %}

### 5. Cart count down

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

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FSvOONjZBnwIeKrIufzfi%2Fimage.png?alt=media&amp;token=fe43afa4-df6a-46a1-8ab6-b703b966fc59" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show on minicart and cart page</strong></td><td>Display the cart countdown timer on both the mini cart and the cart page.</td></tr><tr><td><strong>Duration</strong></td><td>Set the length of time the countdown timer runs.</td></tr></tbody></table>

### 6. Product recommendations

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

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F3PmFn1iovVvDhbRumzV9%2Fimage.png?alt=media&amp;token=230a0d10-0fd9-4600-a113-f117571b512d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable product recommendations</strong></td><td>Product recommendations will be shown on the mini cart and cart page</td></tr><tr><td><strong>Show on mobile</strong></td><td>Display product recommendations on mobile devices.</td></tr><tr><td><strong>Heading</strong></td><td>Product recommendations section heading.</td></tr><tr><td><strong>Product recommendations type</strong></td><td><p>Customize the display style of product recommendations</p><ul><li><strong>Auto</strong></li><li><strong>Selected</strong></li></ul></td></tr><tr><td><strong>Maximum products to show</strong></td><td>Define the maximum number of products displayed at a time in the section.</td></tr><tr><td><strong>Product</strong></td><td>Customize product recommendations when selecting product recommendations type as selected.</td></tr></tbody></table>

### 7. Product gift wrap

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

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FehPfZux0t7ypt2ddOnZe%2Fimage.png?alt=media&amp;token=b0ca01ce-fecc-462a-bee6-8569f77e815d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Product</strong></td><td>Choose a product to use as the gift wrap option.<br>*<em>Note: This only works with products that do not have variants.</em></td></tr></tbody></table>

### 8. Empty cart settings

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

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FSk2vHGI2GjOiF9vVYuAc%2Fimage.png?alt=media&amp;token=49a58fa4-c463-46c9-b551-349295d40c35" alt="" width="237"><figcaption></figcaption></figure>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FOEngRXsO8SpkrE4tV71T%2Fimage.png?alt=media&amp;token=8b75c265-ed7c-4f3f-af36-13d0c82f44c0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FAtlhMP57Ze0Pw2BVhigS%2Fimage.png?alt=media&amp;token=895b01e8-c3a3-4085-9336-94e730592cb0" alt="" width="237"><figcaption></figcaption></figure>

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

{% tabs %}
{% tab title="Empty cart layout - List" %}

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F9ablX7bayHjK1hpm4sDQ%2Fimage.png?alt=media&amp;token=290d77b5-dc59-4e88-b095-d783c32f65c2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Empty cart layout - Grid" %}

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FCbxvU5LtvDuwwrlLzjRy%2Fimage.png?alt=media&amp;token=bb501cf7-5e2d-4a37-98b2-938a1b4920c4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}