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.
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.
3. Check the Features section; if the theme is responsive, it will be listed as such.
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.
Once checked, the following options will appear:
- 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.
- 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.
3. Click Download Template Files. Your mobile theme files will download in a single .zip file.
4. Create a new folder on your desktop and name it BigCommerce Mobile Theme Files.
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.
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.
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.
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.