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.

for VueJs code (New themes):

 <ms-slides> 
    <div v-if="slides.length"> 
        <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> 
            <div class="carousel-inner"> 
                <template v-for="(slide , index) of slides"> 
                    <div class="carousel-item item" :class="{'active':index == 0}" data-bs-interval="10000"> 
                        <a :href="slide.url"> 
                            <ms-image v-if="slide.image" :src="ms.filters.image(slide.image , '1920x750')" :alt="slide.title"></ms-image> 
                        </a> 
                        <div class="carousel-caption"> 
                            <h1 v-if="slide.subtitle">{{slide.subtitle}}</h1> 
                            <h6 v-if="slide.title"><span v-html="slide.title"></span></h6> 
                        </div> 
                    </div> 
                </template> 
            </div> 
            <button v-if="slides.length > 1" class="carousel-control-prev arrow-btn prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> 
                <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
            </button> 
            <button v-if="slides.length > 1" class="carousel-control-next arrow-btn next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> 
                <span class="carousel-control-next-icon" aria-hidden="true"></span> 
            </button> 
        </div> 
    </div> 
</ms-slides>

for VueJs code (Multiple Slider tag based):

<ms-slides tag="slide2"> 
    Rest code will remain same 
</ms-slides>

for AngularJs code

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>

Example 3

Multiple Carousel Slider(based on tag)

<div ms-widget="ms.slides" ms-data-tag="slide2" 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:

for VueJs code (New themes):

<ms-banner :name="ms.variables.home_banner1"> 
      <div v-if="banner.image"> 
          <a :href="banner.url"> 
              <ms-image :src="ms.filters.image(banner.image, '1000x1000')" :alt="banner.title"></ms-image>
          </a>
     </div> 
</ms-banner>

for angularJs code

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

for VueJs code (New themes):

<ms-products grouptype="collection" :groupalias="ms.collection.alias"> 
    <div v-if="group.products.length"> 
        <h1>{{group.name}}</h1>
        <div v-for="product in group.products"> 
            {{product}} 
        </div> 
    </div> 
</ms-products>

for angularJs code

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

for VueJs code (New themes):

<ms-products grouptype="category" :groupalias="ms.category.alias"> 
    <div v-if="group.products.length"> 
        <h1>{{group.name}}</h1>
        <div v-for="product in group.products"> 
            {{product}} 
        </div> 
    </div> 
</ms-products>

for angularJs code

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

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

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

for VueJs code (New themes):

 <ms-entity entity="ms.brands"> 
    <div v-if="group.records.length"> 
       <div v-for="brand in group.records"> 
          <ms-image :src="ms.filters.image(brand.image)" :alt="brand.name"></ms-image> 
            {{brand.name}} 
       </div> 
    </div> 
</ms-entity>

for angularJs code

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

for VueJs code (New themes):

<ms-categories> 
    <div v-if="categories && categories.length"> 
        <div v-for="category in categories"> 
            <template v-if="category.images && category.images.length"> 
                <ms-image :src="ms.filters.image(category.images[0].image,'300x300')" :alt="category.name"></ms-image> 
            </template> 
            <a :href="'/browse/'+ category.alias">{{category.name}}</a> 
        </div> 
    </div> 
</ms-categories>

for angularJs code

<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

for VueJs code (New themes):

<ms-categories> 
    <div v-if="categories && categories.length"> 
        <div v-for="category in categories"> 
            <template v-if="category.images && category.images.length"> 
                <ms-image :src="ms.filters.image(category.images[0].image,'300x300')" :alt="category.name"></ms-image> 
            </template> 
            <a :href="'/browse/'+ category.alias">{{category.name}}</a> 
            <div v-if="category.children.length"> 
                <div v-for="subcategory in category.children"> 
                    <template v-if="subcategory.images && subcategory.images.length"> 
                        <ms-image :src="ms.filters.image(subcategory.images[0].image,'300x300')" :alt="subcategory.name"></ms-image> 
                    </template> 
                    <a :href="'/browse/'+ subcategory.alias">{{subcategory.name}}</a> 
                </div> 
            </div> 
        </div> 
    </div> 
</ms-categories>

for angularJs code

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

for VueJs code (New themes):

<ms-blog-posts> 
    <div v-for="(blog, index) of blog_posts.slice(0,3)"> 
        <a :href="'/blog/' + blog.alias"> 
            <ms-image :src="ms.filters.image(blog.image,'640x640')" :alt="blog.title"></ms-image> 
        </a> 
        <a :href="'/blog/' + blog.alias">{{blog.title}}</a> 
        <p v-html="ms.filters.truncate(blog.content ,'100')"></p> 
        <div v-if="blog.author || blog.created_on"> 
            <div v-if="blog.author"> 
                {{blog.author}} 
            </div> 
            <span v-if="blog.created_on"> 
                {{ms.filters.dateTimeFormat(blog.created_on, {dateStyle: 'medium'}) }} 
            </span> 
        </div> 
    </div> 
</ms-blog-posts>

for angularJs code

<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 can all elements be displayed on the home page?

Generally, the home page of a website contains 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, you can not have different landing page other than the home page.

Q. I've uploaded the sliders, however, they don't seem to cover the designated area on the storefront. 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, you are required to turn dev mode on from the design theme.

Q. Is it possible to hide a few banners?

Yes, it is possible to hide a few banners. 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 such as the first banner will be having "banner1" class, the second banner would be having "banner2" class, and so on. Let's say you need to hide the second banner.
Go to the Design Theme. In the Design section, click on CSS and paste the following CSS in the custom CSS section:
.banner2{display:none}

Similarly, to hide the fourth banner, add the following 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 storefront. What should I do?

If your collections are not displaying on the storefront, 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 storefront?

You can hide the blogs on storefront by adding the following CSS in the custom CSS section of 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;}

StoreHippo Help Center

StoreHippo Help Center

Designing home page

Examples

Example 1

Example 2

Example 3

Example 4

Common Components

Slider or Carousel

Example 1

Example 2

Example 3

Banners

Collection details & Collection Products

Category Details & Category Products

Display Product using product & category alias

Brand's Listing

Category Listing

Blogs

FAQ