# Cart
The Cart settings allow you to control how customers interact with their shopping cart and how the cart is displayed across your store.
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.
* **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" %}
{% endtab %}
{% tab title="Drawer" %}
{% endtab %}
{% endtabs %}
If you’ve enabled the Cart type as **Drawer**, see how to customize your cart drawer here:
{% content-ref url="../global-sections/cart-drawer" %}
[cart-drawer](https://docs.foxecom.com/pebble-theme/global-sections/cart-drawer)
{% endcontent-ref %}
#### Cart options
These settings control what actions customers can perform inside the cart.
* **Allow note to seller**: Adds a message box so customers can leave order instructions or special notes.
{% tabs %}
{% tab title="Cart drawer" %}
{% endtab %}
{% tab title="Cart page" %}
{% 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" %}
{% endtab %}
{% tab title="Cart page" %}
{% 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.
* **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)**
* **Corner radius**: Change the roundness of product image corners. Range: 0px (square) to 32px.
### Free shipping goal
Offering free shipping is a great way to reduce cart abandonment and encourage customers to complete their purchases.
* **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`
* If your store supports multiple currencies, you can specify each amount using the currency code, separated by commas.
* When custom values are provided, these amounts override Shopify’s automatic conversion.
* Example: `USD:100, EUR:95, JPY:13000`
{% endhint %}
{% tabs %}
{% tab title="Cart drawer" %}
{% endtab %}
{% tab title="Cart page" %}
{% 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.
#### Collections
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**
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" %}
{% endtab %}
{% tab title="Overlay" %}
{% endtab %}
{% endtabs %}
**Color scheme**
Controls text and background colors of the recommendation cards.
(Only applies when using **Overlay** style.)
**Overlay color**
Set a tinted overlay color behind the text to improve readability.
(Visible only when using the **Overlay** style)
**Preset**
Changes the Collection title style shown inside each recommendation card.
Available presets:
* **Paragraph**
* **Heading 1** (largest)
* **Heading 2–6** (descending sizes)
**Alignment**
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.
**Columns**
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).
{% 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 %}
