Browse by Topic

Customizing the BigCommerce Mobile Theme (Blueprint)


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

These instructions apply to stores using the BigCommerce mobile theme for our legacy Blueprint themes themes as opposed to a responsive theme. For more information on responsive themes vs. the BigCommerce mobile theme, and for instructions on enabling the BigCommerce mobile theme, see Using the BigCommerce Mobile Theme.

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

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.

Dowload Template Files button under 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 extracted mobile theme files.

Making Changes

Customizing the BigCommerce mobile theme requires making changes to the HTML and/or 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.

For a list of sample customizations, see the Themes & Design Overview.

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.

WebDAV connection file download buttons

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

Was this article helpful?