Customize the view cart button

Learn how to customzie the view cart button.

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!

Once you’ve added a cart onto your page or pages, you can fully customize and style the cart button as well as the cart itself.

In this lesson

In this lesson, we customize the cart button. To customize the cart itself, check out the lesson Customize the shopping cart.

  1. Style the default cart elements
  2. Add and remove elements to and from the cart button
  3. Customize the cart quantity settings
  4. Show the subtotal in a cart

Style the default cart elements

By default, the cart button has an icon, a text block “cart”, and the cart quantity element.

Cart icon [Icon]

You can change change the color of the cart icon by applying a font color.

“Cart” [Text block]

You can edit the button text or double-click and connect it to the quantity or subtotal of your cart. You can style it like you would any typography element.

Connect any text block in a cart button to the total quantity of products in the cart or the subtotal amount of the cart items.
“Cart quantity” [Text block]

This text block is connected to the cart quantity field which you cannot edit. You can style this element like you would any typography element.

Add and remove elements to and from the cart button

You can add other elements to the cart, such as a different image or text blocks and style the cart button as you please. You can delete the cart icon and text block, but not the cart quantity element. That you can hide using the cart settings. Read more below.

Customize the cart quantity settings

By default, the cart button shows the cart quantity — the total items in the cart. You can hide the cart quantity element by double-clicking the element called “Cart button,” then toggling the “Cart quantity” option in the Element settings panel that opens up on the right.

You can also choose to hide the cart quantity when the cart is empty by double-clicking the element called “Cart quantity.” This opens the Cart quantity settings on the right. There, you can check the option called “hide when the cart is empty.”

Hide the cart quantity when the cart is empty

Show the subtotal in a cart

If you want to display the subtotal of the cart on the cart button, you can do that! Add a text block to your cart, and in the inner text settings that appear, choose to get the text from the cart subtotal.

Browser support

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