How to create marketing pages for your website?

Scenario

You want to create a dynamic page which displays discounted collections. When you click on a collection, it redirects you to the product collection.

Example

Steps

StoreHippo lets you add dynamic data to the pages. You can create dynamic templates using theme widgets. Follow the below steps to create a dynamic page with discounted collections.

Adding Banners

1. Go to Site > Banners section in the StoreHippo Admin Panel.
2. Click on Add New to add a new banner.
   
3. Provide the Name of the banner as "custom-banner1".
4. Upload the Banner image and provide the URL of the collection to which you want to redirect the banner.
   
5. Enter the display Title as "NEW IN DRESSES".
6. Click on Save to save the banner.
   
7. In the same way, add the second banner as "custom-banner2".
   
8. Similarly, the third banner as "custom-banner3" is shown below.
   
9. Now, go to Site >  Pages section in the StoreHippo Admin Panel.
10. Click on Add new to create a dynamic page.
11. Enter the Title as "Grab your discounts NOW..!!" and Alias as "discount-offers".
12. In the content field, switch to the code editor tab and paste the following code.
    
    for VueJs code (New themes):

    

    Create a new widget and paste the following code.

    <div class="row">
       <div class="col-md-4">
         <ms-banner :name="ms.variables.home_banner1">
           <a :href="banner.url">
             <ms-image :src="ms.filters.image(banner.image, '500x500')" :alt="banner.title"></ms-image>
          </a>
          <h3>{{banner.title}}</h3>
          <h4>{{banner.subtitle}}</h4>
          
         </ms-banner>
       </div>
       <div class="col-md-4">
         <ms-banner :name="ms.variables.home_banner2">
           <a :href="banner.url">
             <ms-image :src="ms.filters.image(banner.image, '500x500')" :alt="banner.title"></ms-image>
          </a>
          <h3>{{banner.title}}</h3>
          <h4>{{banner.subtitle}}</h4>
          
         </ms-banner>
       </div>
       <div class="col-md-4">
         <ms-banner :name="ms.variables.home_banner3">
           <a :href="banner.url">
             <ms-image :src="ms.filters.image(banner.image, '500x500')" :alt="banner.title"></ms-image>
          </a>
          <h3>{{banner.title}}</h3>
          <h4>{{banner.subtitle}}</h4>
          
         </ms-banner>
       </div>
    </div>
    
    

    Add this widget on you page and press save.

    

    
    
    for AngularJs code

    <div class="col-xs-12 col-sm-4">
      <div ms-widget="ms.banner" ms-data-name="custom-banner1">
        <!--If this widget doesn't produce any output, then change the value of"ms-data-name" to any banner name fron your store.-->
        <div><a ng-href="{{banner.url}}"/><img ng-src="{{banner.image|image:'320x320'}}"/></div>
          <h3>{{banner.title}}</h3>
          <p>{{banner.subtitle}}</p>
        </div>
    </div>
    <div class="col-xs-12 col-sm-4">
        <div ms-widget="ms.banner" ms-data-name="custom-banner2">
          <!--If this widget doesn't produce any output, then change the value of"ms-data-name" to any banner name fron your store.-->
          <div><a ng-href="{{banner.url}}"/><img ng-src="{{banner.image|image:'320x320'}}"/></div>
          <h3>{{banner.title}}</h3>
          <p>{{banner.subtitle}}</p>
        </div>
    </div>
    <div class="col-xs-12 col-sm-4">
        <div ms-widget="ms.banner" ms-data-name="custom-banner3">
          <!--If this widget doesn't produce any output, then change the value of"ms-data-name" to any banner name fron your store.-->
          <div><a ng-href="{{banner.url}}"/><img ng-src="{{banner.image|image:'320x320'}}" /></div>
          <h3>{{banner.title}}</h3>
          <p>{{banner.subtitle}}</p>
        </div>
    </div>

    

13. Click on Save to save the dynamic page.