Personalize the shopping cart button

Once you’ve included a Cart on your page, you are able to entirely personalize and design the Cart button along with the cart itself.

Regarding this tutorial

In this tutorial, customization of the Cart button is covered. To modify the cart itself, refer to Customization of the shopping Cart.

1. Design the default Cart components
2. Incorporate and eliminate components to and from the Cart button
3. Tailor the Cart quantity configurations
4. Display the subtotal in a Cart

Design the default Cart elements

The Cart button comes with an icon, a text block labeled “cart,” and the Cart quantity component by default.

Cart icon [Icon]

You have the ability to modify the color of the Cart icon by selecting a font color.

“Cart” [Text block]

You are free to edit the button text or connect it to the quantity or subtotal of your cart by a double-click. It’s possible to style it like any other typography element.

“Cart quantity” [Text block]

This text block is linked to the Cart quantity field, which cannot be edited. You can style this component as you would any other typography element.

Incorporate and remove components to and from the Cart button

You have the option to add alternative components to the Cart, such as a different image or text blocks, and style the Cart button as desired. Removing the Cart icon and text block is possible, but the Cart quantity component cannot be removed. You can hide it using the Cart settings. Further details below.

Personalize the Cart quantity configurations

By default, the Cart button reveals the Cart quantity – the overall items in the cart.

To conceal the Cart quantity component:

1. Double-tap the Cart button
2. Switch off the Cart quantity button (from the Element settings panel that pops up on the right)

To hide the cart quantity when the cart is empty:

1. Double-tap Cart quantity
2. Mark Hide when the cart is empty from the Cart quantity settings

Present the subtotal in a Cart

To exhibit the subtotal of the Cart on the Cart button:

1. Incorporate a text block to your Cart
2. Select Get the text fromCart > Subtotal (from Inner text settings)