Designing Header

Site header is generally common for all the pages on the site. All standard StoreHippo themes have a header widget that contains the code for the site header. The header widget is included in the default Layout of the theme which is common to all pages.

Following are few examples of site headers. You can design the look and feel and placement of the header components in any way you prefer.

Example 1

Example 2

Example 3

Example 4

Data Elements

• Logo
• Navigation Menu or Categories List
• Search Bar
• Currency 
• Language 
• Cart Summary
• User links
• User Widgets
• Substore (MultiStore)

Logo

Logocan be set in Settings > General Settings section in StoreHippo Admin Panel. You can specify different logos for desktop and mobile sites.

For using the logo in the header, logo image is available in ms.settings object. You can use it in the following way:

<img data-ng-src="{{ms.settings.logo|image:'480x480'}}" title="{{ms.settings.store_title}}" alt="{{ms.settings.store_title}}">

You need to use image filter with the logopath. In alt and title tag of the image, you can use store title.

Search Bar

With the help of a search bar, the user can searchproducton the basis of the product name, category, description, brands etc. There are two types of search you can use:

• Normal search
• Autocomplete Search

Normal search

The normal search will show the result of a search on the search result page. ms.form.searchwidget is used to enable this search. 

<form ms-widget="ms.form.search" ng-submit="submit()"> 
   <input data-ng-model="fields.search" type="text" > 
   <button type="submit">Search</button> 
</form>​

Example:

Autocomplete Search

In autocomplete search, suggestion gets listed below the search bar as soon as the user starts entering the search text. It is available in premium onwards plans. You need to use autocompletewidget for this.

 <div ms-widget="autocomplete"></div>​

Example:

Currency

You can enable multiple currencies for your store in Settings > Currencies section in StoreHippo Admin Panel. If there are multiple currencies enabled on the store, the currency widget can be used to let the user select a specific currency.

 <div ms-widget="currency"></div>

The currency widget uses ms.currency global widget to fetch the currencies. Please see the examples of ms.currency widget.

You should always use currency filter wherever you show prices. Currency filter automatically uses the settings like a symbol or decimal points, corresponding toselectedcurrency. 

Language

You can enable multiple languages for your store in Settings > Languages section in StoreHippo admin panel. If there are multiple languages enabled on the store, the language widget can be used to let the user select a specific language.

<div ms-widget="language"></div>​

The currency widget uses ms.language global widget to fetch the languages. Please see the examples of ms.currency widget.

You should always use translate filter for the static content in your theme. translate filter automatically uses the translations, corresponding to the selected language. 

Cart Summary

Cart Summary provides a brief summary of the cart to the user. You can use the data from the ms.cart object for showing the cart summary. Clicking on the cart summary takes the user to the cart page. 

<!-- for item count--> 
{{ms.cart.item_count}} 

<!--for cart total-->
{{ms.cart.total}} 

Navigation Menu or Category Listing

Navigation menu shows one of the navigation menus defined for the store. You can manage navigation menus in Site > Navigation section in StoreHippo Admin Panel. You use ms.navigation widget to fetch the navigation. You can also fetch categories automatically in the navigation menu by using type <all categories> in the corresponding navigation menu in StoreHippo admin panel.

<div ms-data-widget="ms.navigation" ng-repeat=”link in navigation.header.links”> 
<!-- in navigation.header.links, header is the name of navigation--> 
   <a data-ng-href=”link.url”> 
       {{link.title}} 
   </a> 
</div>​

Tips:

• Avoid having too many top level categories that might push the navigation to multiple lines. StoreHippo allows you to define multi level hierarchical categories.
• Make sure your theme supports the number of levels that you plan to use for your categories. Otherwise the bottom level categories might not be visible. Most of StoreHippo themes support upto threee levels of categories.

User Links

For user related links, you can use ms.user object. Please find below the examples of how you can construct the user links. You can use ms.user.isLoggedIn property to find out whether the user is logged in or not. Based on that, you can direct the user to Login/Register pages, or show user summary with the logout button. 

<!--Login link-->
<li data-ng-if="!ms.user.isLoggedIn"><a data-ng-href="/user/login"> {{'Login'|msTranslate}} </a>
</li> <!--Register Link-->
<li data-ng-if="!ms.user.isLoggedIn"><a data-ng-href="/user/register"> {{'Register'|msTranslate}} </a>
</li> <!--Logout Link-->
<li data-ng-if="ms.user.isLoggedIn"><a data-ng-click="ms.user.logout('/')"> {{'Logout'|msTranslate}} </a>
</li> <!--Welcome message for logged in user-->
<li data-ng-if="ms.user.isLoggedIn"><span class="welcome-user">Welcome {{ms.user.name}} </span>
</li> <!--Account profile page link-->
<li data-ng-if="ms.user.isLoggedIn"><a href="/account/profile">{{MyAccount'|msTranslate}} </a></li>

User Widgets

For user related widgets, Please find below the examples of how you can construct the user widgets. You can use these widgets for user forms in the popup.

<!--Register widget-->
 <div data-ng-if="!ms.user.isLoggedIn"> 
   <div ms-widget="register"></div>
 </div>
  <!--Login widget--> 
  <div data-ng-if="!ms.user.isLoggedIn">
  <div ms-widget="login"></div>
  </div>
  <!--Account--> 
  <div data-ng-if="ms.user.isLoggedIn"> 
    <div ms-widget="account"></div>
 </div>​

Substore(MultiStore)

Substores allow you to create sub/child stores in your store. You can create substore based on location e.g. you can define one store for each of the city or area that you are catering. You can also create different substores for different categories of product. You can use substore functionality for myriads of different use cases. You can enable substores functionality from Settings > Misc in StoreHippo Admin Panel and click on Enable Multistore.

<div ms-widget="ms.multistore"></div>