Customize the shopping cart

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Customize the shopping cart

After adding a cart, customizing the cart button, and styling it, it’s time to customize the cart itself. You can choose the cart type, the easing and duration of the opening and closing animation, and the number of items to show in the cart preview. You can also specify if you want to open the cart when a product is added to it.

Previous lessons
In this lesson
  1. Specify the cart type
  2. Customize the cart animation
  3. Style the different states
  4. Styling the cart wrapper

Specify the cart type

Select the cart element on the canvas and open the cart from the Element settings panel (D). Then, choose the type of your cart.

Edit the cart settings

Customize the cart animation

Next, modify how the cart opens and closes by setting the transition easing and duration of the animation. You can test the effect in preview mode.

Edit the cart settings

Style the different states of the cart

Edit the cart settings

Now that you’ve set how the cart opens, you can style the different elements of the cart in its three states: default (preview of cart), empty (when the cart has no items), and error (when there’s an error and you cannot continue to checkout). You can toggle between these states in the Cart wrapper settings.

Learn more: Cart element

Customize the cart for different states

For the default state, you can specify how many items should appear in the cart preview.

For the error state, customize error messages that may appear when the checkout fails. Select the Error message text block to access the Error message settings. Select each message in the setting to view it on the canvas. To edit the message, click the pencil icon that appears next to the message in the setting when you hover over it.

You can restore default error messages from the error message editor.

Once you’re done styling and customizing your cart, you can close it the same way you opened it, by clicking the open cart button in the Element settings panel.

Styling the cart wrapper

When you open the cart, you’ll notice that there’s a semi-transparent overlay over your page surrounding the cart. This is the “cart wrapper.” If you want, you can change the background color of the wrapper. Make sure to select the cart wrapper, you can use the Navigator for precision. Then change the background color in the Style panel. You can choose an opaque color, but you’ll most probably want to add some opacity to your color to make itapparent that the cart is a popup modal in the same page.

You can restore the default style anytime by removing the applied style from the background color property of the cart wrapper.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form