Articles on: Website Builder

How to customize Cart block in Website Builder

Cart block helps your customers access their shopping cart anywhere and review items before going to checkout. In your store, we have insert Cart automatically to ensure your store functions well. This article shows you how to create and customize the Cart block.

In this article

A. Create cart block.
B. Customize cart block.

A. Create Cart Block

Click the Insert panel (The + button) in Web Builder > Search Cart > Drag the Cart block to the position you want on the page (usually above the store header area).

B. Customize Cart block

Edit the design for the block: Select the Cart block > Design tab.

Icon size: You can choose the size of the Cart Button to match the other elements on the page (You can choose from the available options or customize a suitable number).

Badge position: You can choose the display position of the quantity badge relative to the cart icon.

Badge color: You can choose the display color for the quantity badge, making the number of items in the cart more prominent.

Number color: You can choose the color of quantity items.

General style: You can also edit the general style of the block according to the general settings according to this article.

Edit the content for the block: Select the Cart block > Content tab

Label: You can choose whether to show the Cart label next to the cart icon or not

Icon: You can choose to change different icons for the cart to make the store richer.

Action: You can specify the action of the cart when the buyer clicks on the icon, where will they be redirected
* Open mini cart: Buyers can open the mini cart below the icon, letting them review items quickly without going to the Cart page. To see more about configuring the components in the Mini cart, visit this article.
* Open cart drawer: Buyers can review cart right on the current page, with a clear design for a better view.
* Go to cart page: Buyers will be redirected to Cart page
* Go to checkout page: Buyers will be immediately redirected to the Checkout page

If you choose Open a mini cart, you can customize this button: Price compare, Remove item, Note, Cart button, Checkout button. Please refer to this article for more information.

If you choose Open cart drawer, you can preview cart drawer.

Updated on: 27/06/2023

Was this article helpful?

Share your feedback


Thank you!