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

Designing home page

The homepage is one of the default theme pages. This is the first page on which the user lands when they type your store URL.  

Header and footer widgets are mostly common to all the theme pages and are typically used in the default layout.

 

Examples

Example 1

Example 2 

Example 3

Example 4

Common Components

Following are some of the common components used on a homepage: 

Slider or Carousel

Sliders are used to display multiple images or slides that show one after another. You can use the slides to highlight featured product or promotions on your products. You can use ms.slides widget to render slides.

Example 1

Basic Slider
<div ms-widget="ms.slides">
       <a ng-animate="slide" href="{{currentSlide.url}}
"> <img ng-src="{{currentSlide.image|image:'2048x2048'}}" alt="{{currentSlide.title}}"> </a>
           <div>
               <a ng-click="prev()">Previous</a> &nbsp; | &nbsp;
               <a ng-click="next()">Next</a>  
          </div>
    </div>
</div>
 

Controllers

<a href="#home-carousel" data-slide="prev"><i class="fa fa-chevron-left "></i> </a>
<a href="#home-carousel" data-slide="next"> <i class="fa fa-chevron-righ"></i></a>


Example 2

Carousel Slider

<div ms-widget="ms.slides" id="home-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div data-ng-repeat="slide in slides" data-ng-class="{active:$index==0}" class="item">
            <a href="{{slide.url}}">
                <img class="" data-ng-src="{{slide.image|image:'1024x1024'}}" alt="{{slide.title}}" title="{{slide.title}}">
            </a>
            <div class="carousel-caption">
                <h3>{{slide.title}}</h3>
                <p>{{slide.description}}</p>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left arrow-right" href="#home-carousel" data-slide="prev"><i class="fa fa-chevron-left primary"></i></a>
    <a class="right arrow-left" href="#home-carousel" data-slide="next"><i class="fa fa-chevron-right  primary"></i></a>
</div>

Banners

This can be used for displaying promotional banners or other images. Banners can be displayed using widget ms.banner. You need to specify the name of the banner with this widget. This widget returns object which contains a name, image, title and subtitle of a banner. For implementing it, you can use the following approach:
<div ms-widget="ms.banner" ms-data-name="banner_name">
<a ng-href="{{banner.url}}"> <img ng-src="{{banner.image|image:'1024x1024'}}" alt="{{banner.title}}"> </a>        
</div>​

Collection details & Collection Products

Products can be loosely coupled in collections by defining some rules on the basis of product details or can manually add products to collections from StoreHippo admin console. Collections and their products can be displayed using ms.collectionProducts widget. You need to specify the alias of the collection with this widget. For implementing, you can use the following approach:

<div ms-widget="ms.collectionProducts" ms-data-collection="collection_alias">
      <h1>{{collection.name}}</h1>                        
      <div data-ng-repeat="product in products">      
      {{product}}
      </div>
</div>​

There is collection detail page for each collection, you can link from here to collection detail page.
 

Category Details & Category Products

A particular category detail and its products can be displayed using ms.categoryProducts widget. You need to specify the alias of the category with this widget. For implementing it, you can use the following approach:
<div ms-widget="ms.categoryProducts" ms-data-category="category_alias" >
   <h3>{{category.name}}</h3>                      
   <div data-ng-repeat="product in products">        
     {{product}}
   </div>
</div>​


Display Product using product & category alias

The products can be displayed using ms.products widget. You need to specify the alias of category & product with this widget. For implementing you can use the following approach:
<div ms-widget="ms.products" ms-data-group_type="product" ms-data-group_alias="product-1">
   <div ng-repeat="product in products">
      <div ms-widget="product_grid_item"></div>
   </div>
</div>

There is category detail page for each category, you can link from here to category detail page.
  

Brand's Listing

Brands list can be fetched using ms.brands widget. 
<div ms-widget="ms.brands" ng-repeat="brand in brands">  
      <div>{{brand.name}} </div>   
</div>
 

Category Listing

Categories list can be fetched using ms.categories widget. 
<div ms-widget="ms.categories" > 
   <div ng-repeat="category in categories">
<!--provide name of category-->
        <div>{{category.name}}</div> 
        <img ng-src="{{category.image|image:"240x240"}}" />  //provide category image
<!--provide name with category detail page url-->
        <a ng-href="/browse/{{category.alias}}"> {{category.name}}   </a>     

   </div>
</div>

//if category has subcategories

<div ms-widget="ms.categories">
  <div ng-repeat="category in categories">
<!--provide name with category detail page url-->
    <a ng-href="/browse/{{category.alias}}"> {{category.name}}   </a>     
<!--if category has subcategories-->
     <div ng-if="category.children.length">  
         <div ng-repeat="subcategory in category.children">
<!--provide name of subcategory-->
             <div>{{subcategory.name}}</div> 
<!--provide subcategory image-->
             <img ng-src="{{subcategory.image|image:"240x240"}}" /> 
<!--//provide name with subcategory detail page url--> 
             <a ng-href="/browse/{{subcategory.alias}}"> {{subcategory.name}}   </a>     
         </div>
     </div>
  </div>
</div>  

Blogs

Blogs list can be fetched using ms.blog widget.

<div class="" ng-repeat="record in records| limitTo:3">
    <div class="blog-image ms-mb-m">
        <a href="/blog/{{record.alias}}">
             <img class="ms-img-content" ng-src="{{record.image|image:'480x240'}}" alt=".." />
        </a>
    </div>
    <div>
        <a href="/blog/{{record.alias}}">
            <h4 ng-bind-html-unsafe="record.title|truncate:20"></h4>
        </a>
    </div>
    <div ng-if="record.content" >
        <p ng-bind-html-unsafe="record.content|truncate:200" class=""></p>
        <a class="btn btn-default pull-right" href="/blog/{{record.alias}}">{ {'Read more'|msTranslate} }</a>
    </div>
    <div ng-if="record.author"><i class="fa fa-pencil ms-mr-s"></i> <span ng-bind-html-unsafe="record.author"> </span></div>
    <div ng-if="record.created_on"><i class="fa fa-calendar ms-mr-s"></i><span ng-bind-html-unsafe="record.created_on|date:'dd MMM, yyyy'"></span></div>
</div>

The homepage is one of the default theme pages. This is the first page on which the user lands when they type your store URL.  

Header and footer widgets are mostly common to all the theme pages and are typically used in the default layout.

 

Examples

Example 1

Example 2 

Example 3

Example 4

Common Components

Following are some of the common components used on a homepage: 

Slider or Carousel

Sliders are used to display multiple images or slides that show one after another. You can use the slides to highlight featured product or promotions on your products. You can use ms.slides widget to render slides.

Example 1

Basic Slider
<div ms-widget="ms.slides">
       <a ng-animate="slide" href="{{currentSlide.url}}
"> <img ng-src="{{currentSlide.image|image:'2048x2048'}}" alt="{{currentSlide.title}}"> </a>
           <div>
               <a ng-click="prev()">Previous</a> &nbsp; | &nbsp;
               <a ng-click="next()">Next</a>  
          </div>
    </div>
</div>
 

Controllers

<a href="#home-carousel" data-slide="prev"><i class="fa fa-chevron-left "></i> </a>
<a href="#home-carousel" data-slide="next"> <i class="fa fa-chevron-righ"></i></a>


Example 2

Carousel Slider

<div ms-widget="ms.slides" id="home-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div data-ng-repeat="slide in slides" data-ng-class="{active:$index==0}" class="item">
            <a href="{{slide.url}}">
                <img class="" data-ng-src="{{slide.image|image:'1024x1024'}}" alt="{{slide.title}}" title="{{slide.title}}">
            </a>
            <div class="carousel-caption">
                <h3>{{slide.title}}</h3>
                <p>{{slide.description}}</p>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left arrow-right" href="#home-carousel" data-slide="prev"><i class="fa fa-chevron-left primary"></i></a>
    <a class="right arrow-left" href="#home-carousel" data-slide="next"><i class="fa fa-chevron-right  primary"></i></a>
</div>

Banners

This can be used for displaying promotional banners or other images. Banners can be displayed using widget ms.banner. You need to specify the name of the banner with this widget. This widget returns object which contains a name, image, title and subtitle of a banner. For implementing it, you can use the following approach:
<div ms-widget="ms.banner" ms-data-name="banner_name">
<a ng-href="{{banner.url}}"> <img ng-src="{{banner.image|image:'1024x1024'}}" alt="{{banner.title}}"> </a>        
</div>

Collection details & Collection Products

Products can be loosely coupled in collections by defining some rules on the basis of product details or can manually add products to collections from StoreHippo admin console. Collections and their products can be displayed using ms.collectionProducts widget. You need to specify the alias of the collection with this widget. For implementing, you can use the following approach:

<div ms-widget="ms.collectionProducts" ms-data-collection="collection_alias">
      <h1>{{collection.name}}</h1>                        
      <div data-ng-repeat="product in products">      
      {{product}}
      </div>
</div>

There is collection detail page for each collection, you can link from here to collection detail page.
 

Category Details & Category Products

A particular category detail and its products can be displayed using ms.categoryProducts widget. You need to specify the alias of the category with this widget. For implementing it, you can use the following approach:
<div ms-widget="ms.categoryProducts" ms-data-category="category_alias" >
   <h3>{{category.name}}</h3>                      
   <div data-ng-repeat="product in products">        
     {{product}}
   </div>
</div>


Display Product using product & category alias

The products can be displayed using ms.products widget. You need to specify the alias of category & product with this widget. For implementing you can use the following approach:
<div ms-widget="ms.products" ms-data-group_type="product" ms-data-group_alias="product-1">
   <div ng-repeat="product in products">
      <div ms-widget="product_grid_item"></div>
   </div>
</div>

There is category detail page for each category, you can link from here to category detail page.
  

Brand's Listing

Brands list can be fetched using ms.brands widget. 
<div ms-widget="ms.brands" ng-repeat="brand in brands">  
      <div>{{brand.name}} </div>   
</div>
 

Category Listing

Categories list can be fetched using ms.categories widget. 
<div ms-widget="ms.categories" > 
   <div ng-repeat="category in categories">
<!--provide name of category-->
        <div>{{category.name}}</div> 
        <img ng-src="{{category.image|image:"240x240"}}" />  //provide category image
<!--provide name with category detail page url-->
        <a ng-href="/browse/{{category.alias}}"> {{category.name}}   </a>     

   </div>
</div>

//if category has subcategories

<div ms-widget="ms.categories">
  <div ng-repeat="category in categories">
<!--provide name with category detail page url-->
    <a ng-href="/browse/{{category.alias}}"> {{category.name}}   </a>     
<!--if category has subcategories-->
     <div ng-if="category.children.length">  
         <div ng-repeat="subcategory in category.children">
<!--provide name of subcategory-->
             <div>{{subcategory.name}}</div> 
<!--provide subcategory image-->
             <img ng-src="{{subcategory.image|image:"240x240"}}" /> 
<!--//provide name with subcategory detail page url--> 
             <a ng-href="/browse/{{subcategory.alias}}"> {{subcategory.name}}   </a>     
         </div>
     </div>
  </div>
</div>  

Blogs

Blogs list can be fetched using ms.blog widget.

<div class="" ng-repeat="record in records| limitTo:3">
    <div class="blog-image ms-mb-m">
        <a href="/blog/{{record.alias}}">
             <img class="ms-img-content" ng-src="{{record.image|image:'480x240'}}" alt=".." />
        </a>
    </div>
    <div>
        <a href="/blog/{{record.alias}}">
            <h4 ng-bind-html-unsafe="record.title|truncate:20"></h4>
        </a>
    </div>
    <div ng-if="record.content" >
        <p ng-bind-html-unsafe="record.content|truncate:200" class=""></p>
        <a class="btn btn-default pull-right" href="/blog/{{record.alias}}">{ {'Read more'|msTranslate} }</a>
    </div>
    <div ng-if="record.author"><i class="fa fa-pencil ms-mr-s"></i> <span ng-bind-html-unsafe="record.author"> </span></div>
    <div ng-if="record.created_on"><i class="fa fa-calendar ms-mr-s"></i><span ng-bind-html-unsafe="record.created_on|date:'dd MMM, yyyy'"></span></div>
</div>

FAQ

Q. What all elements can be displayed on this page?

Generally this page has sliders at the top, multiple banners, collection products, category products.

Q. How can one use multiple banners?

Use directive ms-widget='ms.banner' with attribute ms-data-name='banner-name' to specify which banner it is. The 'banner-name' should come from a variable as ms.variables.home_banner1, ms.variables.home_banner2 etc.

Q. Can we have a different landing page other than home page?

No

Q. I've uploaded the sliders, however, they don't seem to cover the designated area on the frontend. What's wrong?

Make sure that they possess the ratio and dimensions as governed by the placeholders. In case you don't see the ratio and dimensions over the placeholders, remember to turn dev mode ON through the design theme.

Q. Is it possible to hide a few banners?

Yes, it is possible. The banners appearing over the themes follow a particular sequence. For instance, an ideal example could be when a home widget occupies 3-6 banners, all these banners appear in a particular fashion of having classes like: first banner will be having "banner1" class, second banner would be having "banner2" class, and so on. Let's say you need to hide the second banner.
Head to the design theme and paste this css there in the custom css section:
.banner2{display:none}
ikewise, to hide fourth banner, add this css:
.banner4{display:none}
Just remember to follow this convention while appending to custom css:
(dot)banner(number of banner), followed by {display:none}

Q. I've created collection(s) and have added products in the same. However, the same isn't reflecting on the frontend. What can I do now?

Make sure to map them from the design theme's collection dropdown (can be found under 'Home' list in the design theme).

Q. I've mapped the collection(s) from the design theme. However, only the title seems to appear and not the products of the same collection. What's wrong?

That's because the product(s) contained in that particular collection (if any), are lesser than the threshold value of 4. Or, in some cases, 8 (wherever the products are supposed to come in two rows).

Q. How can I hide the blogs appearing on the frontend?

You can do that by adding the following line in the custom css section in the design theme:

.blog{display:none}
Q. How can I make custom changes on my own, to the home widget?

Open up the design theme, head to the HTML editing section. Locate the edit option on the home from there. Remember to save the changes after you're done editing the same!

Q. How can I make my home banners point to some URL?

Head to the admin panel. Under "Site", open "Banners". Find the banner you need to supply URL to, and click on edit button against the same. A new view will open up,and all you're supposed to do is to insert a URL in the URL section. Save the changes after you're done.

Q. My banners don't seem to occupy the area they're set in, properly. What do I do?

Make sure that they possess the ratio and dimensions as governed by the placeholders. In case you don't see the ratio and dimensions over the placeholders, remember to turn dev mode ON through the design theme.

Q. Is it possible to apply a background image over the store?

Yes, you can. Head to the design theme section, under "global", you'll find an option to upload the background image. Remember to save the changes after you're done.

Q. How do I hide brands from the home?

Apply the following css to the custom css section from the design theme, and don't forget to save the changes: 

.blog{display:none;}
2018-01-24T10:54:15.073Z

Share: