Header Builder – Customizing Shopping Cart Icon

Updated on January 2, 2019

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:



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.



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.


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.

Did this answer your question?