# Cart

### Cart type

Here you can pick if you want the cart to be shown as a cart drawer or as a separate page. If you pick `Drawer` when a product is added to the cart, the page won't refresh. If it's set to `Page` once a product is added to the cart, the user will be redirected to the cart page.

### Colors

If you need to have custom colors for the mini-cart or the cart page, you can overwrite the default ones from here. If the checkbox `Overwrite colors` is checked, then the `Text` and `Background` color options will take action.

### Shipping bar

<figure><img src="https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2FT5BgFZvZLVxjxqhtlRBr%2Fimage.png?alt=media&#x26;token=663faf61-a571-4a31-b6a9-8bd97e5a3673" alt=""><figcaption></figcaption></figure>

Use the `Enable` checkbox to enable the shipping bar.

The `Threshold` field should contain the amount above which the shipping becomes free.

The `Progress text` is the text which will show when the threshold amount in the cart is still not reached.\
Use `[amount]` to print the remaining amount needed for free shipping.

The `Success text` field is showing when the threshold amount is reached.

The text from the field `Empty text` is used when there's nothing in the cart or mini-cart.

### Additional checkout buttons

Turn on/off the additional checkout buttons.

### Buttons style

The selectbox is used to determine the style of the buttons on the mini-cart and the cart page.

### Mini-cart Upsell products

The section uses the Shopify's recommendations API to determine the most appropriate products based on the products in the customer's cart.

<figure><img src="https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2Fek6ykMvacLSwmjAymSFY%2Fimage.png?alt=media&#x26;token=6e201065-4fc8-46a2-a407-a40c39bbc58e" alt=""><figcaption></figcaption></figure>

The upsell section can be enabled/disabled and the title above it can be changes from the `Heading` field.

### Empty cart

The empty cart link shows when there's nothing in the cart or mini-cart.

<figure><img src="https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2FKmniRcbyoL43Ho0gRZyG%2Fimage.png?alt=media&#x26;token=05c3c014-3759-40b2-b30d-7e59b4718119" alt=""><figcaption></figcaption></figure>