Edit your Hello Commerce Header

The Hello Commerce Header will generally appear at the top of all your site’s pages. The Header gives visitors an easy way to navigate your site and provide them basic information such as your site name and logo.

Note: In this example, we’ll edit the Header found in a website template kit. 

To edit the Header:

1. From WP Admin, navigate to Hello Commerce.
   
2. Scroll down to the Site Parts section.
3. Under Header, click Edit.
   
4. For the most part, Header design is discussed in Customize your Hello Biz Header; however, Hello Commerce does include a Menu Cart section. 

To edit the Menu Cart section: 

1. In the Content tab, open the Menu Cart section.
   
   Note

   The Menu Cart options only appear if you have WooCommerce installed and active.
   
   
2. Toggle Menu Icon to Hide if you don’t want the Header to include a link to the shopping cart.
   
3. Use the Icon feature to choose an icon that links to the shopping cart:
   • : The leftmost icon is the default shopping cart icon.
   • : Click the middle icon to upload your own svg icon for the shopping cart.
   • : Click the rightmost icon to open the library and choose a shopping cart icon.
4. To change the look and feel of the Menu cart icon, click the Style tab.
   
5. Open the Menu Cart section.
   The Menu Cart section is divided into two parts:
   • Menu icon: Sets the style of the icon representing the shopping cart.
   • View Cart Button: Sets the style of the dropdown menu that appears when visitors click the shopping cart icon.
     
6. (Optional) Change the Style settings:
   

Menu Icon

Sets the style of the image that opens the shopping cart.

• Normal/Hover
  • Normal:  Determine how the cart icon or view cart button appears by default. 
  • Hover: Determine how the cart icon or view cart button appears when moused over.  
• Color, Text color and Background Color: Set the color of these elements. For details, see Choose a color or Use global fonts and colors.
• Use the Size slider to grow or shrink the shopping cart icon.

View Cart button

Set the style of the View Cart button that appears when users click the menu icon.

• Normal/Hover
  • Normal:  Determine how the cart icon or view cart button appears by default. 
  • Hover: Determine how the cart icon or view cart button appears when moused over.  
• Text color and Background Color: Set the color of these elements. For details, see Choose a color or Use global fonts and colors.