Appearance
Cart
This guide describes the Theme settings > Cart menu options.
Use the settings to specify how customers purchase products on your store's cart page. Refer to Shopify help: Cart page.
The previous video shows a store's product page. When the Add to cart button is selected, the cart opens inside a side element called a Modal. To set up the Modal cart-type, in the Theme settings > Cart menu, on the left side, the following options are set:
The Cart type dropdown option is set to Modal.
The checkbox Open modal when product is added to cart is enabled.
For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.
Set up your store's cart
To set up your store's cart:
Go to Theme settings > Cart.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Icon | Use the Icon settings to choose an icon to represent the cart as a Cart or Bag. |
| Enable cart notes | Select the checkbox Enable cart notes to show/hide a text box that allows customers to add a note before they proceed to the checkout page. |
| Enable accelerated checkout buttons | Select the checkbox Enable accelerated checkout buttons to show/hide accelerated checkout buttons on the cart page. Refer to Shopify help: Accelerated checkouts. |
| Show product vendor | Select the Show product vendor checkbox to show/ hide the names of product vendors on the cart page. |
| Cart type | Use the Cart type options to set the cart to display as a Modal or Page, when the customer selects the Add to cart button. With this option set to Modal, the cart displays on the current page inside a modal. To turn off this functionality, and redirect visitors to the cart page, select the Page option. |
| Open modal when product is added to cart | Select the checkbox Open modal when product is added to cart to show hide a cart modal. The modal opens whenever a customer adds a product to the cart. To use this feature, set the Cart type option to Modal. |
| Free shipping progress > set up your shipping rates (link) | Follow the link set up your shipping rates to open your Shopify admin's Shipping and delivery page. On the admin page, use the settings to specify shipping and delivery rates for your store. |
| Free shipping progress > Show free shipping progress | Select the checkbox Show free shipping progress to show/hide a progress bar for sections that display the free shipping indicator. Refer to Show a free shipping progress bar and Free shipping bar. |
| Free shipping progress > Free shipping threshold | Enter a value to use as a threshold for the free shipping indicator. This threshold value applies to all your stores market. To specify thresholds for particular markets, refer to Show a free shipping progress bar and Free shipping bar. |
| Free shipping progress > see our guide (link) | Follow the see our guide link to access our guide to creating thresholds for particular markets. Refer to Show a free shipping progress bar. |
| Free shipping progress > Color | Use Color dropdown to select a color scheme for the Free shipping progress indicator. The options are Automatic, Primary, Secondary, Tertiary, and Quaternary. Refer to Colors. |
| Free shipping progress > Progress bar color | Use the Progress bar color options to set a color for the progress bar inside the Free shipping progress indicator. Set the progress bar to use the same color as the color scheme's Text, Accent 1, Accent 2, Card, or Gradient color. |