# Cart

<figure><img src="/files/zmVtu60XUZZ5NecLxKdI" alt=""><figcaption></figcaption></figure>

The Cart settings allow you to control how customers interact with their shopping cart and how the cart is displayed across your store.&#x20;

From choosing between a traditional cart page or a modern slide-out drawer, to enabling discount fields, shipping calculators, image styles, and free-shipping progress bars, these options help you create a smoother and more engaging checkout experience.

## How to edit Cart

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), click **Theme settings**.
2. Locate **Cart**.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

## Cart settings options

### General

#### Cart type

Choose how customers will view their cart.

<figure><img src="/files/tI6ddKZ2rN3XzE8l1Gof" alt=""><figcaption></figcaption></figure>

* **Page**: Customers go to a full cart page when they click the cart icon.
* **Drawer**: A slide-out panel opens on the right side. Customers can review items without leaving the product or home page.

{% tabs %}
{% tab title="Page" %}

<figure><img src="/files/DcldcTnCo9X8UgfBFUpU" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="/files/7AuCJJpoMWUx2QEJNmds" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

If you’ve enabled the Cart type as **Drawer**, see how to customize your cart drawer here:

{% content-ref url="/pages/3OdRUzyUEphSzxe7tdhY" %}
[Cart drawer](/pebble-theme/global-sections/cart-drawer.md)
{% endcontent-ref %}

#### Cart options

These settings control what actions customers can perform inside the cart.

<figure><img src="/files/Qw10ZvpRcupTGpUJsAEg" alt=""><figcaption></figcaption></figure>

* **Allow note to seller**: Adds a message box so customers can leave order instructions or special notes.

{% tabs %}
{% tab title="Cart drawer" %}

<div><figure><img src="/files/MxfririAW8tJ6Y0XTG1k" alt=""><figcaption></figcaption></figure> <figure><img src="/files/yfSVlK1AgeOWpTBgJ3vI" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Cart page" %}

<figure><img src="/files/0QdshWGG8DEyAOyBoTCj" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Allow discounts in cart**: Shows a discount code field directly in the cart, so customers can enter coupons before checkout.

{% tabs %}
{% tab title="Cart drawer" %}

<div><figure><img src="/files/UE4OMGUAC8U7VzGDUYAv" alt=""><figcaption></figcaption></figure> <figure><img src="/files/yNYqjUuL8XldDgXrwWGs" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Cart page" %}

<figure><img src="/files/VJgmwgivs1g6qnnBmHdD" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Allow calculate shipping rate**: Shows a shipping calculator that lets customers estimate shipping fees.

{% tabs %}
{% tab title="Cart drawer" %}

<div><figure><img src="/files/h4x0ykAEBTnabuY71qLm" alt=""><figcaption></figcaption></figure> <figure><img src="/files/42OLiuEjaUfI79nOCvtB" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Cart page" %}

<figure><img src="/files/sswGUL5jxxlzL2auIT95" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Installments**: Displays installment or payment-plan messaging (such as Shop Pay installments), if your payment provider supports it.
* **Accelerated checkout buttons**: Displays fast-checkout buttons (Shop Pay, Apple Pay, Google Pay). These let customers complete their purchase more quickly and can increase conversions. [Learn more](https://help.shopify.com/manual/online-store/dynamic-checkout)

### Media

Controls product image appearance inside the cart drawer/page.

<figure><img src="/files/WZu7KwafTViDhLbN1GDi" alt=""><figcaption></figcaption></figure>

* **Aspect ratio**: Choose how product images are cropped or displayed. This helps you match your store’s photography style. Available options:
  * **Auto**
  * **Square (1:1)**
  * **Portrait (4:5)**
  * **Portrait (3:4)**
  * **Landscape (16:9)**
  * **Landscape (4:3)**
  * **Landscape (21:9)**

<figure><img src="/files/UvXX48zaPweqYNiqurtG" alt=""><figcaption></figcaption></figure>

* **Corner radius**: Change the roundness of product image corners. Range: 0px (square) to 32px.

<div><figure><img src="/files/CBQcFQ10DlmqoLi5mI1H" alt=""><figcaption></figcaption></figure> <figure><img src="/files/WjF9wh2gXlkfJXY41m4p" alt=""><figcaption></figcaption></figure></div>

### Free shipping goal

Offering free shipping is a great way to reduce cart abandonment and encourage customers to complete their purchases.

<figure><img src="/files/lU6jQnkKluoF1DYM95aY" alt=""><figcaption></figcaption></figure>

* **Show free shipping goal**: Toggle this option on to display the free shipping progress bar and message inside the cart.
* **Free shipping minimum amount**: Fill in the minimum spend for free shipping.

{% hint style="info" %}
**Note**:

* Enter the amount using numbers only as the minimum spend for free shipping.  Example: `100` &#x20;
* If your store supports multiple currencies, you can specify each amount using the currency code, separated by commas.&#x20;
  * When custom values are provided, these amounts override Shopify’s automatic conversion.
  * Example: `USD:100, EUR:95, JPY:13000`   &#x20;

![](/files/MXRv8Q3oIVUCWx1Y9ZJl)
{% endhint %}

{% tabs %}
{% tab title="Cart drawer" %}

<figure><img src="/files/2ZyuLDnL0boCscCCMp9w" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Cart page" %}

<figure><img src="/files/8w4vdbc0pAT21pisDRj0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
To ensure that customers receive free shipping at checkout, make sure that your [shipping rates](https://help.shopify.com/en/manual/fulfillment/setup/shipping-rates) are properly configured.
{% endhint %}

{% hint style="info" %}
The Free shipping goal is based on the store's primary currency. If no custom currency amounts are entered and a customer switches to another currency, the goal will be calculated using Shopify market [exchange rates](https://help.shopify.com/en/manual/markets/pricing/exchange-rates).
{% endhint %}

### Cart empty recommendation

Display a list of suggested collections customers can explore if they view their empty cart.

Use it to guide customers back to your products.

<figure><img src="/files/881HFZ0VVbRzTnc3xt0e" alt="" width="375"><figcaption></figcaption></figure>

#### Collections

<figure><img src="/files/85kg9hPnqoCIKAVktkcn" alt=""><figcaption></figcaption></figure>

Select the collections you want to display in the empty-cart recommendation area.

* Click **Change** to open the collection picker.
* You can select **up to 6 collections**.
* The selected collections will appear as recommendation cards when the cart is empty.

#### Display settings

**Style**

<figure><img src="/files/uNsnxOeL6Zh6LzruOkNI" alt=""><figcaption></figcaption></figure>

Choose how the recommendation cards are displayed:

* **Default**: Text sits below the image. Clean and simple.
* **Overlay**: Text appears on top of the image. Ideal for high-quality photography.

{% tabs %}
{% tab title="Default" %}

<figure><img src="/files/yLvyqR7bjoE0BYm40OTb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Overlay" %}

<figure><img src="/files/pf0JtrKCOMcOaQ19ACgi" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Color scheme**

<figure><img src="/files/EkghBo9gsMVWRg12whkC" alt=""><figcaption></figcaption></figure>

Controls text and background colors of the recommendation cards.

(Only applies when using **Overlay** style.)

**Overlay color**

<figure><img src="/files/ILxNGHDGOtUw9JKc3VTZ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ErT5PlTMireobS7te5lo" alt=""><figcaption></figcaption></figure>

Set a tinted overlay color behind the text to improve readability.

(Visible only when using the **Overlay** style)

**Preset**

<figure><img src="/files/u6sbcxNr154LUy0gar7x" alt=""><figcaption></figcaption></figure>

Changes the Collection title style shown inside each recommendation card.

<figure><img src="/files/sNvcOFHVoYaLU8z47Non" alt=""><figcaption></figcaption></figure>

Available presets:

* **Paragraph**
* **Heading 1** (largest)
* **Heading 2–6** (descending sizes)

<figure><img src="/files/ge1Wl9XpWh0rpnqa6F1e" alt=""><figcaption></figcaption></figure>

**Alignment**

<figure><img src="/files/SuXRsEjkujgkNCz0lNLX" alt=""><figcaption></figcaption></figure>

Controls the alignment of the Collection titles inside each card.

Options:

* **Left**
* **Center**
* **Right**

Center alignment is most commonly used for a clean, balanced layout.

<figure><img src="/files/hpWjVfrlWic1BZrnYmEG" alt=""><figcaption></figcaption></figure>

**Columns**

<figure><img src="/files/xV1W28bhO94dZEYqAQ3D" alt=""><figcaption></figcaption></figure>

Controls how many collection cards appear per row in the empty-cart recommendation section.

Use the slider to choose the number of columns (from 2 to 4).

<figure><img src="/files/THYZaj3OiA4auOSbtKdi" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If the **number of columns** is smaller than the **number of selected collections**, the section will automatically display in a carousel layout.
{% endhint %}

### Gift wrapping

Offer customers the option to add beautiful gift wrapping to their orders. Choose whether gift wrap applies to the whole cart or each product individually, and customize pricing, quantity sync, and presentation to match your store experience.

{% stepper %}
{% step %}

#### Create a gift wrap product

{% hint style="success" %}
**Steps:**

1. From your Shopify admin, go to **Products.**
2. Click **Add product**.
3. Create a gift-wrap product [just as you would create any other product.](https://help.shopify.com/manual/products/add-update-products)
4. Make the necessary changes and click **Save**.
   {% endhint %}

<figure><img src="/files/gjDnc2h1iAgN6jm8h1vN" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

* Use the product description to explain your gift-wrap materials and style.
* Set the product price to charge for gift wrapping, or set it to 0 for free gift wrap.
* Upload an image to show customers how the gift wrapping looks.
* Make sure the gift-wrap product has inventory enabled, or disable inventory tracking if needed.
* For stores with multiple locations, uncheck **Track quantity** to avoid inventory tracking issues.
  {% endhint %}
  {% endstep %}

{% step %}

#### Set up the gift wrap product

Choose the product you created for gift wrapping.

<figure><img src="/files/OuTHeCFONIp8oqoFYunP" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Cart drawer" %}

<figure><img src="/files/7XFKsfPl5EWQ4IGB7SML" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Cart page" %}

<figure><img src="/files/vA6bWL0PYrRLQ874JUAk" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="success" %}
**Enable gift wrap per product**

* When disabled, customers pay one gift-wrap fee for the whole cart.
* When enabled, customers can choose gift wrapping for each product separately.
  {% endhint %}

<figure><img src="/files/mNCDNnkGoyFbKR6PXX7O" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Sync gift wrap quantity with cart**

* When enabled, the gift-wrap quantity matches the product quantity.
* When disabled, the gift-wrap quantity is always 1.
  {% endhint %}

<figure><img src="/files/QPg2vp0i1Gsd7Kq8tTH9" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/pebble-theme/theme-settings/cart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.