# Cart

{% hint style="success" %}
**Tip:** To edit the page, choose the **Cart** template in the top drop-down.
{% endhint %}

The theme includes two static sections to change the look and feel of the Cart page: **"Items"** and **"Subtotal"**.

## Items

### Layout

Use the **"Dividing line"** drop-down to specify whether to add the line separator on the top or bottom of the "Items" section. If you need to use the line, select its position as "Top", "Bottom" or "Both". To hide the dividing line, use the "None" option.

The **"Top spacing"** option controls the space between the breadcrumbs/Header (if the breadcrumbs are disabled) and the "Items" section. Use the scale from 0 to 100 pixels to set the desired parameter.

Handle the parameters on the **"Bottom spacing"** scale from 0 to 100 pixels to add or remove the space at the bottom of the "Items" section.

### Content

Here you can enable or disable the **"Show vendor"** option to display a brand of products added to the cart.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F4mu5F2NDcSr0T5OMha7b%2Fcart_items.png?alt=media&#x26;token=c2f32e8b-d4c2-40df-9999-c0f888ac2211" alt=""><figcaption></figcaption></figure>

## Subtotal

### Layout

Use the **"Dividing line"** drop-down to specify whether to add the line separator on the top or bottom of the "Subtotal" section. If you need to use the line, select its position as "Top", "Bottom", or "Both". To hide the dividing line, use the "None" option.

The **"Top spacing"** option controls the space between the breadcrumbs/Header (if the breadcrumbs are disabled) and the "Subtotal" section. Use the scale from 0 to 100 pixels to set the desired parameter.

Handle the parameters on the **"Bottom spacing"** scale from 0 to 100 pixels to add or remove the space at the bottom of the "Subtotal" section.

### Content

Display the input field for customer notes in the section by checking the **"Enable cart note"** checkbox.

<mark style="color:orange;">**Note!**</mark> The notes entered into the "Order special instruction" input field will appear in your _Shopify admin -> Orders -> Notes_.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbEcnjZwA6qzxHf2Sn648%2Fcart_subtotal.png?alt=media&#x26;token=d022be70-fcb3-4a6d-8208-e7c0af2bffc5" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tip:** To edit the "Subtotal" section on the Cart page, press **"Add block"** and choose the one in **Theme Blocks**. Each block can be added only once. Drag and drop the block to the desired position in the "Subtotal" section.
{% endhint %}

## Theme Blocks

### Subtotal price

Add this block in order to show the subtotal price of products.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FawEmlJ3JD2kEPuOZvQnM%2Fcart_subtotal%20price.png?alt=media&#x26;token=af503b4d-0951-47ee-8153-f40f81487c5e" alt=""><figcaption></figcaption></figure>

### Checkout button

If you need to display the checkout button, this block should be added.

Using the option **"Show confirmation checkbox"** allows adding the terms of use checkbox that should be accepted before proceeding to the checkout page:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FDFhmm8yAK1xlnbpXyTeH%2Fcart%20page_checkout%20bttn.png?alt=media&#x26;token=19085e1c-ac60-4df5-b99e-78fe40f926e3" alt=""><figcaption></figcaption></figure>



In the following examples, you can see how the Cart page might look on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FEIVrpa1Fdxdma28UHZWC%2Fcart_desktop.png?alt=media&#x26;token=a37a91c4-1c42-4238-9847-ef82011a2257" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FkyZScsRmruWfmqDWLLPc%2Fcart_mobile.png?alt=media&#x26;token=54483ac8-3f62-4608-b4e9-9a63c27a039b" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
