Customizing the BigCommerce Mobile Theme


These instructions apply to stores using the BigCommerce mobile theme for our legacy Blueprint 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
Don't feel comfortable adjusting your design or working with code? Check out our BigCommerce approved agencies or our Community. Due to our Design Policy, technical support is unable to help with code editing. 

Downloading the Mobile Template

1. Go to Storefront DesignDesign 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 instructions on making specific customizations, see the Themes & Design Overview.

Uploading Your Changes

1. In your control panel, go to Server SettingsFile 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.

Was this article helpful?