Loading...

How To Add A Home Page Banner To Your Mobile Templates

Emilian F. Published on 18 September, 2014

You could be in for a surprise if you use promotional banners in your store. The home page banners are displayed only in the desktop version of the templates. Customers browsing your store using a mobile device such as a tablet or a smartphone will not see your banners if the mobile templates are enabled.

The issue stems from the Bigcommerce template system which uses two different sets of template files: one for the desktop, and one for mobile devices. In this case, a line of code that is responsible for generating the banners on your store's home page is missing from the mobile templates. To remedy this situation, I will show you how to add the missing code back into your mobile template files so that promotional banners will be displayed for all customers.

Instructions

  1. Login to your control panel and navigate to Design > Mobile and click the Download Mobile Theme button to download the mobile template files as a zip file.

  2. Extract the files from the zip file to your computer.

  3. Look for the default.html file, and then open it in a text editor such as Notepad.

  4. Add the following line of code above the home featured products panel, where you want the banner to be displayed:

    
    %%Banner.TopBanner%%
    
    

    If you have a bottom banner, then go ahead and add the following line of code:

    
    %%Banner.BottomBanner%%
    
    

    This is how the file should look like after you are done making changes:

  5. Save the changes, then using WebDAV upload the file to your Bigcommerce server in the /dav/mobile_template folder. Create the folder if it does not exist.

How It Works

We added back the code that is responsible for generating the banners on the home page by modifying the default.html file in the mobile templates. If you just want to display the top banner you can remove the %%Banner.BottomBanner%% code from the file.

Troubleshooting

I modified the mobile template file, and added the correct %%Banner.TopBanner%% code but the banner is still missing. Why?

Verify that the banner is active, and that it is set to display on the home page. The settings should look like this:

Emilian F. Published on 18 September, 2014