Cart

Adjust the cart view and cart icon style for your store.

GENERAL

Show as

Choose the cart view for your store.

Drawer and page

Features both a cart drawer and a cart page. When you select the cart icon in the header or the 'Add to cart' button on product pages and cards, the cart slides out from the right as a drawer. The drawer features the list of products in the cart, the direct checkout button, and the 'Go to cart' button that redirects to a separate 'Cart' page. Use the section 'Cart drawer' in the 'Aside' group of the navigation sidebar to adjust the view of the drawer.

Drawer only

Features only a cart drawer. The 'Cart' page becomes inactive. When you select the cart icon in the header or the 'Add to cart' button on product pages and cards, the cart slides out from the right as a drawer. The drawer features the list of products in the cart and the direct checkout button. Use the section 'Cart drawer' in the 'Aside' group of the navigation sidebar to adjust the view of the drawer.

Page only

Features only a cart page. The section 'Cart drawer' becomes inactive. Selecting the cart icon in the header redirects to a separate 'Cart' page. When you select the 'Add to cart' button on product pages and cards, a popup notifies you of the newly added product. The popup features the product and its options, the direct checkout button, and the 'Go to cart' button that redirects to a 'Cart' page.

Show sticky cart

Select to show a cart button in the corner of the screen when browsing on desktop. Note that the sticky cart doesn't appear when the sticky header is enabled.

CART STATUS COLORS

Background

Pick the color for the filled cart indicator on the cart icon.

Text

Pick the color for the product counter on the cart icon.

FREE SHIPPING BAR

Add a free shipping progress bar to the cart.

Show progress bar

Select to show the free shipping progress bar both in the cart drawer and on the cart page.

Free shipping goal

Fill in the value at the achievement of which the free shipping is unlocked. The currency for the value is the same as the main currency of your store. For other currencies, the free shipping value is converted automatically.

Note that for the correct functioning, you need to do either of the following:

Progress bar

Pick the color for the progress bar.

Progress bar gradient

Pick the colors and the type of gradient for the progress bar. Note that the gradient has priority over the solid color.

Message

Pick the color for the progress message over the bar.

Last updated