Browse by Topic

Adding Banners to the BigCommerce Mobile Theme (Blueprint)

 

This requires editing the code of your store. See Getting Help for avenues of assistance.

These instructions apply to our legacy Blueprint Themes that have not been customized and use the BigCommerce Mobile Theme. As always, we recommend backing up your current theme customizations before making any changes.

In order to complete these steps you must have a WebDAV client such as CyberDuck (Windows & Mac) or BitKinex (Windows) installed on your computer. For more information see Connecting to WebDAV.

The BigCommerce Mobile Theme by default does not display Banners created in the control panel so the mobile experience loads quickly.  To add this element to the mobile theme, follow the steps below.

Downloading the Mobile Template

1. Go to Storefront Design › Design Options, then click the Mobile tab.

2. Make sure Enable Mobile Theme and at least one device under Enable on these Devices are selected.

3. Click Download Template Files. Your mobile theme files will download in a single .zip file.

Download Template Files button highlighted in the Mobile tab

4. Create a new folder on your desktop and name it BigCommerce Mobile Theme Files.

5. Move the downloaded .zip file to the new folder on your desktop, then unzip the file using a program such as 7-Zip or WinZip.

Example of the BigCommerce Mobile Theme Files folder.

Adding the Banner Variables

In order to have the banners you create in your control panel display on specific pages, two variables — %%Banner.TopBanner%% and %%Banner.BottomBanner%% — must be added to the theme file for those pages. You may choose to add the code to some or all of these files, depending on where you plan on displaying banners.

Homepage

Follow these steps to allow banners to display on your store's homepage.

1. In the list of theme files you unzipped, find default.html and open it in a plain text editor such as Notepad or TextEdit.

2. Place your cursor in front of the %%Panel.HomeFeaturedProducts%% variable, then press Enter or Return once.

3. On the empty line that you've just created, copy and paste the following:

%%Banner.TopBanner%%

4. Place your cursor after the %%Panel.HomeFeaturedProducts%% variable, then press Enter or Return once.

5. On the empty line that you've just created, copy and paste the following:

%%Banner.BottomBanner%%

6. Save your changes.

Example of the customized default.html template file.

Category Pages

Follow these steps to allow banners to display on your store's category pages.

1. In the list of theme files you unzipped, find category.html and open it in a plain text editor such as Notepad or TextEdit.

2. Place your cursor in front of the %%Panel.CategoryHeading%% variable, then press Enter or Return once.

3. On the empty line that you've just created, copy and paste the following:

%%Banner.TopBanner%%

4. Place your cursor after the %%Panel.CategoryPagingBottom%% variable, then press Enter or Return once.

5. On the empty line that you've just created, copy and paste the following:

%%Banner.BottomBanner%%

6. Save your changes.

Example of the customized category.html theme file.

Brand Pages

Follow these steps to allow banners to display on your store's brand pages.

1. In the list of theme files you unzipped, find brands.html and open it in a plain text editor such as Notepad or TextEdit.

2. Place your cursor in front of the %%GLOBAL_TrailBrandName%% code, then press Enter or Return once.

3. On the empty line that you've just created, copy and paste the following:

%%Banner.TopBanner%%

4. Place your cursor after the %%Panel.BrandContent%% variable, then press Enter or Return once.

5. On the empty line that you've just created, copy and paste the following:

%%Banner.BottomBanner%%

6. Save your changes.

Example of the customized brands.html theme file.

Creating custom.css

1. Create a new file in your plain-text editor, and save it to the Styles folder in your BigCommerce Mobile Theme Files folder. Name the file custom.css.

Example of the custom.css stylesheet in the Styles folder.

2. Copy and paste the following code into the file:

.banner_home_page_top img,
.banner_home_page_bottom img,
.banner_category_page_top img, 
.banner_category_page_bottom img,
.banner_brand_page_top img,
.banner_brand_page_bottom img {
	max-width: 100%;
	height: auto;
}

3. Save your changes.

Updating HTMLHead.html

1. Open the HTMLHead.html file, located in the Panels folder of your BigCommerce Mobile Theme Files folder.

2. Place your cursor in front of the line of code that begins with <link href='//fonts.googleapis.com, then press Enter or Return once.

3. On the empty line that you've just created, copy and paste the following:

<link href="%%GLOBAL_TPL_PATH%%/Styles/custom.css" type="text/css" rel="stylesheet" />

4. Save your changes.

Example of the customized HTMLHead.html theme file.

Uploading Your Changes

1. In your control panel, go to Server Settings File Access (WebDAV), then click Download for the WebDAV client you have installed on your computer. A connection file for that WebDAV client will download to your computer.

Cyberduck and BitKinex WebDAV connection file download buttons in the File Access (WebDAV) screen

2. Open the downloaded file. It will automatically open a connection to your store's server in your WebDAV client.

3. Upload any customized files to the mobile_template directory. Be sure to follow the same template structure as exists in the file you originally downloaded in the Downloading the Mobile Template section earlier. For example, since default.html exists outside of all of the other folders in the download file, it should be uploaded outside of the folders in WebDAV, as well.

Example of default.html uploaded to the mobile_template directory.

If you are uploading a file that is in a folder, such as Panels, then it should be uploaded in that same folder in WebDAV. If the folder does not exist, you must create it.

Example of the Panels directory in the mobile_template folder.

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Ask a Design Partner Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?