# Cart page

Customize and design your Cart page using any of the professional sections available in Pipeline. Provide the details to help your shoppers reach checkout or add a few additional items to the cart. We also include some Cart extras to help with that final experience before making the transaction. 

## Cart page components 

### Sections

The Pipeline Cart age can include rich sections from our Sections library included in the theme. You can add sections to help deliver that final message to our customers. Any of the popular sections in Pipeline can be added to the Cart page. 

<div data-full-width="false"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FETEk3XxGQlbCbOrvX9Hh%2FCart%20overview.png?alt=media&#x26;token=3bf5ec01-6c6c-4a27-9651-6b6fff43e5c3" alt=""><figcaption></figcaption></figure></div>

### Section Examples

* Add **Icon columns** (shown in the above example) to build confidence in your brand
* The **Accordion group** (shown above after the checkout button) can provide key details to customers with frequently asked questions.&#x20;
* The **Accordion single** section is also another nice feature where you can include rich images with those questions and details.&#x20;
* Developers can use the **Custom HTML** or **Custom Liquid** sections.&#x20;
* The **Scrolling promotion** section (shown in the image below) can help deliver flash sale messaging and urgency to buy. The free shipping message can be moved into this section:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FxjnTbOf0MWi6UoImM2bw%2FKapture%202023-07-23%20at%2011.09.48.gif?alt=media&#x26;token=a1dcd2e1-cad6-450b-948c-a6750378c2db" alt=""><figcaption><p><strong>Accordion group and Scrolling promotion with free shipping message</strong></p></figcaption></figure>

Sections can be placed above and below the main Cart section which contains the order details and call-to-action area. Pipeline offers a wide range of sections for you to fully customize the Cart experience for your customers.

### Order details

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fva7d3LwAUqEKRj8BFsbp%2Fmain%20cart%20area.png?alt=media&#x26;token=2a17616f-baad-4e72-9adc-136b90e3458d" alt=""><figcaption></figcaption></figure>

The main area of the Cart contains the order details including:

* A thumbnail of the product variant chosen.&#x20;
* Name of product
* Size or variant selected
* Sale type, for example, pre-order item
* Color variant
* Product vendor
* Remove item button
* Price
* Quantity selectors with the current value
* Total

The Quantity selectors and product vendor are optional and can be managed in the Cart section settings.&#x20;

### Order total and additional components

Following the order details, the Cart page displays the main subtotal, Checkout button with Shipping and Taxes message. Additional components which are optional can also be displayed including:

* **Display Free Shipping message** -This dynamic message informs customers how close they are to qualifying for free shipping. The threshold is set in the Theme Settings -> Cart. The message text is configured in the Cart section settings along with a toggle to show or hide.&#x20;
* **Custom Cart message** - A badge-styled message box where you can display a coupon code or other short important information.
* **Additional Checkout buttons** - Show or hide the additional payment methods like Apple Pay, Google Pay, Amazon Pay, and PayPal.
* **Cart notes** - Include a mini-input form for customers to add additional notes with their order like engraving details or custom information regarding products ordered.&#x20;
* **Estimate shipping** - An accordion-based shipping cost calculator with country and region lookup. Prices are based on your shipping prices configured in the main Shopify Admin settings.&#x20;

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fx2FpmEoFymRvgsw09H2R%2Fno%20shipping.png?alt=media&#x26;token=7db9f2c3-4b0a-42dc-a1a2-4923364de532" alt=""><figcaption><p><strong>Additional Cart Components</strong></p></figcaption></figure>

### Cart Section Settings

Use the Cart section settings to configure the optional Cart components:

<div data-full-width="true"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FIUOQ8SU4pNeGfmCjauEU%2Fcart%20section%20settings.png?alt=media&#x26;token=2ee71638-a5b4-4d80-b6ba-5f9ab96c5854" alt=""><figcaption></figcaption></figure></div>

#### Empty cart link

{% hint style="info" %}
The Empty cart link has been moved to the Theme Settings -> Cart

You can customize the default link for shoppers to use if their cart is empty when viewing the cart. This is an opportunity to send them to a collection with special promotions or featured products.&#x20;
{% endhint %}