Header Builder – Customizing Shopping Cart Icon

Last Updated on

The Header Builder is a new feature in Jupiter which lets you create and modify your website header using a visual drag & drop editor.

In this article we’ll explain how to customize the shopping cart icon.

shopping cart icon

Note: Please install and activate WooCommerce plugin to show the shopping cart icon in frontend.
Beware! The Header Builder is still in beta version. Please do not test it on a live website until the stable release. If you found a bug related to the Header Builder, please report it as shown in this article.

In this article

Activating the Header Builder

By default, the Header Builder is disabled. To learn how to activate it, check outĀ this article.

Adding the Shopping Cart Icon

Since the Header Builder lets you create flawless layouts for your website using drag & drop, adding a shopping cart icon is as easy as dragging it to the header and styling it as you like:

From the left panel, click on the Elements icon.

shopping cart icon
Drag the shopping icon into the header.

shopping cart icon
Style the button from the Style pane in the right.

shopping cart icon

Hit preview to see the changes.

Customizing the Shopping Cart Icon

You can customize the shopping cart icon after you have added it to the header builder.

Click on the shopping icon to show the settings on the right panel.

The customization options available for the shopping cart icon are Properties, Style and Layout which are explained as follows:


AlignLets you align the icon. Available options are left, center, right and no alignment.
Make InlineHelps you set your icon along side of the other element or below it. Available option are enable and disable.


Select iconGives you an option to choose from eight different styles of shopping card icon.
Icon SizeLets you set icon size in pixel.
Icon colorAllow you to choose an icon color using the color picker.
Hover SettingsAllow you to choose a hover color using the color picker.


Margin/Padding: It adds padding and margin to the row. You can specify all the 8 values individually.

Visibility on Devices

This option lets you toggle the devices options on the desktop, tablet and mobileĀ and decide whether to show your shopping cart option or not.

Note: To learn more about the Header Builder, check out this article.
Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket