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.
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:
Customizing the Shopping Cart Icon
You can customize the shopping cart icon after you have added it to the header builder.
The customization options available for the shopping cart icon are Properties, Style and Layout which are explained as follows:
Properties
| Setting | Description |
|---|---|
| Align | Lets you align the icon. Available options are left, center, right and no alignment. |
| Make Inline | Helps you set your icon along side of the other element or below it. Available option are enable and disable. |
Style
| Setting | Description |
|---|---|
| Select icon | Gives you an option to choose from eight different styles of shopping card icon. |
| Icon Size | Lets you set icon size in pixel. |
| Icon color | Allow you to choose an icon color using the color picker. |
| Hover Settings | Allow 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.
