Helpcenter +918010117117 https://help.storehippo.com/s/573db3149f0d58741f0cc63b/ms.settings/5256837ccc4abf1d39000001/57614ef64256dc6851749879-480x480.png" [email protected] https://www.facebook.com/StoreHippohttps://twitter.com/StoreHippohttps://www.linkedin.com/company/hippoinnovations/https://plus.google.com/+Storehippo/posts
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India
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.

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.

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

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. How can I add more links to the mobile header?

To add links to the mobile header, go to Site > Navigation section in StoreHippo admin panel. Find or add (if it's not there), a new link in the name of "mobileheader", and add as many links as you want. The links will be displayed on the mobile header.

Q. How can I customise the header widget?

To customise the header, go to the Design Theme. In the HTML section. Click on the Header widget and edit the code. 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 > General Settings in StoreHippo admin panel. One logo is for the web view another is for the mobile site.

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

You need to add languages from Settings > Languages section in StoreHippo admin panel. 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 can add currencies from Settings > Currency section in the StoreHippo admin panel. Until and unless the currencies are more than one, they'll be displayed in the header.

2019-08-14T08:09:12.900Z