How to add banner on pop up on site load?

To add pop-up on site load, first, you need to download the StoreHippo app "Pop-up at site load". This app allows you to create a pop up when the site is loading. Then you can add the banner on the pop up. 

Follow the below-mentioned steps to add registration form on the pop up on site load:

1. Go to Advance Settings > Apps section in the  StoreHippo Admin Panel.
2. Click on Visit StoreHippo App Store. It will redirect you to the StoreHippo App Store.
   
3. Search for the app Pop on site load and install it.

4. Go to design theme in StoreHippo Admin Panel.

5. In the HTML section, click on Show all widgets. 

   

6. Now click on +Add a new widget.

   

7. Here, enter the widget name as "pop up banner" and template as given below.

   <div class="banner" ms-widget="ms.banner" ms-data-name="popup-banner"> 
       <a ng-href="{{banner.url}}">
           <img ms-widget='ms.responsiveImage'
                ms-data-valign='middle' alt='{{banner.title}}' ms-data-halign='center'  ms-data-aspect-ratio='1:1' ng-src="{{banner.image|image:'480x480'}}">
       </a>
   </div>

   

8. Click on Save when you are done. Your widget will be added successfully.
   

9. Go to Site > Banners section in StoreHippo Admin Panel.
10. Click on Add New to add a new banner.
    
11. Enter the Name as "popup-banner" and banner image.
    
12. Click on Save to save the banner.
    
13. Go to Advance Settings > Apps section in the  StoreHippo Admin Panel.
14. Click on the Settings of the app.
    
15. Click the Edit to provide the widget name and header.
    
16. Specify the Widget Name and header for the pop-up in app settings. 
    
    Widget name: Provide the name of the registration widget as "popup-banner".
    Header: Enter the tagline of the pop-up as "Welcome to Attire".
17. The pop-up on the site load will appear as shown below.
    
    

NOTE: Can directly put the code in startup widget to show widget dialog;

Specify the widget name as per user added widget

ms.dialog({'widget': 'widgetname'}).showModal()