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


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:

1From the left panel, click on the Elements icon.

shopping cart icon
2Drag the shopping icon into the header.

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

shopping cart icon

4Hit 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.

1Click 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:

Properties

SettingDescription

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.

Style

SettingDescription

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.

Layout

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.