<img src="abc.png" />
    
call to replace anchor tags contains '/admin' in href

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.

Examples:

Example 1

Example 2

Example 3 

 

Example 4

Example 5

 

Data Elements

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

Logo

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

Tips:

  • Try to use a transparent logo. That allows you to play around with header background.
  • It's a general practice to make the logo a link to the home page of the site.
  • For SEO purposes, it is preferred to keep an alt tag for the logo image.

For using the logo in the header, logo image is available in ms.settings object. You can use it in 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 logo path. In alt and title tag of the image, you can use store title.

Search Bar

With the help of search bar, the user can search product on 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 search result page. ms.form.search widget 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 autocomplete widget 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 symbol or decimal points, corresponding to selected currency. 

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> 

FAQ

Q. How to change colors and backgrounds of various parts of header?

Colors and background colors are variables which can be changed from Design Theme. Hex code values of varius colors can be used.

Q. How to add links to the header?

All links on header or footer or any other page are managed from 'ms.navigations' entity. One may add any link or any category to navigations entity. Path is  Site -> Navigation. Links are grouped i.e. added in the form of group of arrays. Use a directive ms-widget="ms.navigations" in the html element to access all the added links. Now all the grouped links can be accesses from navigation object. For example: 'navigation.topheader.links' is an array of links of topheader section. Each link has a title and url. To use it in code ng-repeat directive can be used. 

<div ng-repeat=”link in navigation.topheader.links”>
           <a data-ng-href=”link.url”> {{link.title}} </a>
</div>

 

Q. Can we add external links?

Yes, only you have to specify its absolute URL.

Q. How to add currency and language select options?

'ms.settings.languages' and 'ms.settings.currency_settings' are two rootscope variables to store currency and languages in the store. 

Q. How to add categories?

Categories can be added using ms-widget='ms.categories' directive. This returns categories array. Navigation also has the support to show all categories, where categories can be referred by navigation links. 

Q. How many categories can be shown?

100 categories can be fetched. 

Q. How logo image of any size can be centered?

Use the following properties

Outer-div -> display:table ; table-layout:fixed;          use class -> ms-d-table

Inner-div -> display:table-cell; vertical-align:middle;       use class -> ms-d-tablecell

Q. How to add search bar?

We support two types of search i.e. simple search and auto-complete search. Use directive ms-widget='ms.form.search'  on form element to use simple search. In simple search search text should be modelled as fields.search. For auto-complete search use directive ms-widget='ms.th2.autocomplete'. ng-modeldirective of form input should be named as data.text in autocomplete search. 

Q. What is auto-complete search?

In auto-complete search user should get few related results as he types in search box input.

Q. How to add images or icons?

Banners can be used for images, icons or any other text. One may get image, title, sub-title from banners. Directive used is ms-widget='ms.banner'.

Q. Can I show anything else than the categories and blogs on the navigation bar in the header? If yes, how can I do it?

Yes, you can. Head to Admin > Site > Navigation. Locate "Header" there, click on edit. There you go! Add as many links as you want. A good approach is to add minimal links, in order to keep the layout of the header (on the frontend) intact.

Q. Why are my categories getting distributed to two rows whenever I happen to add more of them?

That's because you're adding more categories than the threshold. You can still add as many as you want, however, keep in note that your visitors might not appreciate a bulky UI, especially when it comes to the header.

Q. Is it possible to apply autocomplete search in the header, on my own?

Most of our headers have auto-search enabled on them by default. However, if your header doesn't seem to fit in, you can map a different header from a variety of widgets available in our themes store.

Q. I've done a few changes on the header, but they are not getting reflected. What should I do?

Chances are, you might be doing them in store widget. Do remember to save your design theme after saving your widget-level changes.

Q. I want to handle some color/formatting change in the header, however, I am not able to find that particular option in the design theme. What can I do now?

You can still do that, just head over to the design theme, and go to Global > Custom CSS. You can handle almost anything from there, not just regarding the header, but for other widgets too.

Q. How can I add more links to my mobile header?

That's really simple. Head to Admin > Site > Navigation. Find or add (if it's not there), a new link in the name of "mobileheader" (ignore the quotes), and add as many links as you want. You'll find all of them in mobile header.

Q. How do I customize the header and/or other widget(s) on my own?

Open up the design theme. Head to the HTML editing section. Locate the edit button against whichever widget you want to edit. Remember to save the changes to let them reflect!

Q. The logo that I have uploaded isn't visible on my mobile site. What's the issue?

Make sure that you've uploaded two logos in Settings (admin). One is for the web view and other one is for mobile. You need to upload one in mobile logo's input too

Q. There's no option to change the language settings over the header. What do I do?

You need to add languages from Admin > Settings > General > Languages. Until and unless the languages are more than unity, they'll be displayed in the header.

Q. How can I show multiple currency options on my header?

You need to add languages from Admin > Settings > Currency. Until and unless the currencies are more than unity, they'll be displayed in the header.

2018-09-18T13:34:04.196Z