Fully customize and style your Cart and Cart button.
Once you’ve added a Cart to your page, you can fully customize and style the Cart button as well as the cart itself.
In this lesson
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.
“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.
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.
To hide the Cart quantity element:
- Double-click the Cart button
- Toggle the Cart quantity button (from the Element settings panel that opens up on the right)
To hide the cart quantity when the cart is empty:
- Double-click Cart quantity
- Check Hide when the cart is empty from the Cart quantity settings
Show the subtotal in a Cart
To display the subtotal of the Cart on the Cart button:
- Add a text block to your Cart
- Choose Get the text from Cart > Subtotal (from Inner text settings)