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

x
Note: Please install and activate WooCommerce plugin to show the shopping cart icon in frontend.
x
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 the header builder, 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:

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

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

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

shopping cart icon

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

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

Properties

SettingDescription
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

SettingDescription
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.

x
Note: To learn more about the header builder, check out this article.
Was this helpful?

Related Topics

Related Forum Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket