Browse by Topic

Using the BigCommerce Mobile Theme (Blueprint)

The BigCommerce Mobile theme allows legacy Blueprint themes that are not responsive to have an SEO friendly mobile version. Since a growing percentage of shoppers use their mobile device to browse stores, it's critical to have a mobile-friendly site.

 
 

Responsive Themes

Some of our legacy Blueprint Themes are responsive, meaning they will automatically resize your store to fit any screen, from desktops to laptops to tablets and phones. If you are using a responsive theme, leave the mobile theme disabled.

To see if your current theme is responsive:

1. Go to Storefront › My Themes.

2. Click on your current theme's thumbnail image or the Theme Details button.

Highlighted Theme Details button and theme thumbnail image.

3. Check the Features section; if the theme is responsive, it will be listed as such.

Example features list.

If your theme is not responsive, we highly recommend enabling the mobile theme by following the steps below.

 
 

Enabling the Mobile Theme

To enable the mobile theme, go to Storefront › Mobile Theme Settings, then check the box marked Yes, enable the mobile theme.

Enable mobile theme check box.

Once checked, the following options will appear:

Mobile theme settings.

  • Download Mobile Theme — Downloads your mobile theme's template files so that you can customize and re-upload them. 
  • Enable on These Devices — Allows you to select which types of mobile devices your mobile theme should be used for.
    • Mobile — Displays the mobile theme when customers are shopping from an Apple iPhone/iPod Touch, Android Phone, or Windows 8 Phone.
    • Tablet — Displays the mobile theme when customers are shopping from an Apple iPad, Android Tablet, or Windows 8/RT Tablet. 
*Other mobile and tablet devices may display the mobile theme when the appropriate setting above is enabled, but are not guaranteed.
  • Mobile Theme Logo — Click Choose File to upload a mobile-specific version of your logo to be used when customers are shopping from mobile devices.
 
 

Customizing the Mobile Theme

These instructions apply to stores using the BigCommerce mobile theme for our legacy Blueprint themes as opposed to a responsive theme. To complete these steps, you must have a WebDAV client such as CyberDuck installed on your computer. For more information see File Access (WebDAV).

Downloading the Mobile Template

1. Go to Storefront › Mobile Theme Settings.

2. Verify that Enable Mobile Theme and at least one device under Enable on These Devices are selected.

Mobile theme settings

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

Highlighted Download template file button

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 extracted mobile theme files

Making Changes

Customizing the BigCommerce mobile theme requires making changes to the HTML and CSS files on your computer using a plain text editor such as Notepad or TextEdit. As always, we recommend saving an unmodified copy of the files you are modifying so that you can revert any unwanted changes.

Uploading Your Changes

1. In your control panel, go to Server Settings File Access (WebDAV), then click Download. A Cyberduck connection file will download to your computer.

WebDAV connection file download button

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

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 files uploaded to the Panels subdirectory of the mobile_template directory.

 
 

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 Design Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

 
 

FAQ

Do Stencil Themes have a mobile version?

All Stencil themes are responsive, so there are no separate mobile theme files. If you want to adjust how the site looks on mobile devices, you will need to use the Stencil Theme Editor or Ask a Design Partner for assistance.

If my theme is responsive, can I still use the mobile theme?

While you can turn on the mobile theme, it is not recommended if the theme is already responsive. Responsive themes offer a better experience in general.

Is the mobile theme unique for every theme?

The mobile theme is not unique to the theme. It is a very basic mobile site that would need to be customized to match your brand.

Was this article helpful?