Appearance
Cart ​
This guide describes the Theme editor's 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 image shows a store's product page. In the upper left, part of the Theme editor's Theme settings > Cart menu is displayed. The menu's Cart type option is set to Modal. The menu's Open modal when product is added to cart option is also enabled. Use these options to specify the behavior for your store's cart when a customer selects the Add to cart button. With these options enabled, the store's cart displays on the current page inside a modal. On the right of the image, an example cart modal is displayed on the product page with a product added to the store's cart.
For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.
Configure Cart ​
To configure your Cart settings:
In the Theme editor, go to Theme settings > Cart.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| 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 | Use the Open modal when product is added to cart options to show or hide a cart modal. The modal opens whenever a customer adds a product to the cart. To use this option, set the Cart type option to Modal. |
| Installments | Use the Installments option to show or hide the option to pay in installments on the cart page. Refer to Shopify help: Shop Pay Installments. |
| Accelerated checkout buttons | Use the Accelerated checkout buttons options to show or hide accelerated checkout buttons on the cart page. Accelerated checkout buttons allow buyers to check out faster and can improve conversion. Refer to Shopify help: Accelerated checkouts. |
| Free shipping progress > Set up your shipping rates (link) | Follow the Set up your shipping rates link 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. Note that this feature is a visual aid only and does not actually enforce shipping rules. |
| Free shipping progress > Show free shipping progress | Use the Show free shipping progress options to show or hide the free shipping progress indicator on the cart page. Refer to Show a free shipping progress bar and Free shipping bar. |
| Free shipping progress > Free shipping threshold | In the Free shipping threshold text box, enter a value to use as a threshold for the free shipping indicator. This threshold value applies to all your store's markets. To use this option, enable the Show free shipping progress option. 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. To use this option, enable the Show free shipping progress option. Refer to Show a free shipping progress bar. |
| Free shipping progress > Color scheme | Use the Color scheme picker to select a color scheme for the Free shipping progress cart area. To use this option, enable the Show free shipping progress option. 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. To use this option, enable the Show free shipping progress option. |
Note
To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in the Theme editor.
To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the Theme editor.