Author’s Note: The steps in this article may be depreciated due to changes in BigCommerce’s theme platform since this article was written.
The default mobile theme used by BigCommerce is independent of the main store design theme that you choose from within BigCommerce’s Store Design tools found within the administrative area. This means that customizations to your main BigCommerce theme will not appear when viewing the site on a mobile device.
The exception to this rule is if you choose a theme that is “responsive”. A responsive theme will essentially use the same main theme on all devices, whereas a mobile theme will only be used on smaller mobile devices like a phone. However, the default theme and most of the free BigCommerce themes are non-responsive which means they will use the mobile template.
When using the mobile theme, you may find it necessary to add custom images to the home page for store personalization. The default look is a little boring and adding a custom image goes a long way in giving your store some zing when viewed on a phone or tablet.
Step 1 – Connect to Website via CyberDuck
In order to make changes to the mobile theme, you will have to download the mobile theme files, make changes on your desktop, and then re-upload the file back to the BigCommerce server. This is done via a process called WebDav.
Step 1.A – Understand the WebDev Connection
The first step is to get connected so that you can download and upload files. Fortunately, BigCommerce makes this relatively painless to do, and for the most part it takes just a few minutes to get set up.
First, navigate to the WebDav page from within your store admin area.
On this page, you will find your WebDav connection information. This is the information that you will need to type into the CyberDuck software in order to access your template files.
Further information on making the connection can be found here: https://support.bigcommerce.com/articles/Public/File-Access-WebDAV/?q=connect+to+webdav&l=en_US&fs=Search&pn=1
Step 2.A – Download and Install CyberDuck software.
BigCommerce has great instructions on how to get this set up and configured for easy connection here: https://support.bigcommerce.com/articles/Public/File-Access-WebDAV/?q=connect+to+webdav&l=en_US&fs=Search&pn=1#manual
NOTE: Sometimes, even if you’ve made the connection properly you won’t be able to log in. In this case, you’ll want to call BigCommerce tech support. Sometimes there’s a fix that has to be done on their end in order to make this connect. The fix is easy and only takes a few minutes, and once that’s done you shouldn’t have any more connection issues.
Step 2 – Download Your Mobile Template’s Home Page for Editing
Navigate to Store Design > Mobile. Click the “Download Template Files” button on this page. This will download all of the files to your desktop.
Once you’ve downloaded the .zip file containing the mobile template, unzip it into a location where you will remember where it is.
Once you’ve unzipped the file, you will have a new directory called mobile_template, and it will contain files like shown below.
Step 3 – Upload an Image to BigCommerce Image Manager
- Create an image for use on your mobile template. Suggested width is 325px wide. Height is flexible, and you can create your image at whatever height is required to get your message across. However, I recommend going no larger than 400px to 450px tall.
- Once you upload your image into the Image Manager, click the “View Full Size” link.
- A new browser window will open with your new image. Leave this window open for now and remember that we will come back here in order to copy our URL.
Step 4 – Ensure That You Have a Text Editor Software
- You will need a text editing software to open the template file and edit it. For Windows users, you can use NotePad. I recommend Notepad ++. This is a free program which you can download from http://notepad-plus-plus.org/. This software is much more robust than the default Notepad program. I regularly use this to edit and write web code.
- Do NOT use a word processing program such as MS Word to edit your files. These programs often add extraneous html code into the files, which can break the template.
Step 5 – Update the Image URL in the Mobile Theme Home Page
- Navigate to the location where you saved your mobile template. Open the file mobile_template/default.html with your Notepad software.Default.html is the home page of the mobile template.
- First, SAVE A BACKUP. Save the current default.html file as a copy named something like default.BAK, or defaultOLD.html (I like to use capitals because it makes it easy to spot backup files when viewing the file list).
- Now re-open the original default.html file. Your default.html file will have code like the following:
- Copy the line of html code below, and paste it into the default.html file as shown in the following image. In this case, I pasted the code just above the <div class=”homenav”> line referencing %%Panel.SideCategoryList%%, which means that our image will show just above the category navigation menu on the home page.<div align=”center”><img src=”YOUR_IMAGE_URL_AS COPIED FROM_YOUR_BIG_COMMERCE_IMAGE_MANAGER”></div>
- Now replace the YOUR_IMAGE_URL_AS COPIED FROM_YOUR_BIG_COMMERCE_IMAGE_MANAGER part of the code with the URL you copied from Step 3.3 above. So now it will look something like this (the URL will be dependent upon your BigCommerce image URL). That line will look something like this:<div align=”center”><img src=”https://cdn3.bigcommerce.com/………./product_images/uploaded_images/freeshipwomanmobile325.jpg?t=142236946″></div>NOTE: Make sure you don’t accidentally remove the quotation marks that surround the URL.
- Save the file.
Step 6 – Upload the Finished File
- Open Cyberduck via the quick connect file that you downloaded back in Step 1 (the download file can be obtained from your BigCommerce admin interface by going to Design > WebDav).
- Once Cyberduck is open and connected, you should see a file structure like below (with the mobile-template directory opened/expanded).
- Click the “Upload” button, and then choose the default.html file that you’ve updated (a window will open where you can navigate to the file you want to upload). Optionally, you can right click the existing default.html file and choose “upload”.
- NOTE: The file view on Cyberduck will only show files located on the BigCommerce server that have been modified. So don’t be confused if you don’t see any files in this Cyberduck view, but see a whole bunch of files when looking at the mobile_template folder on your local PC.
- NOTE: When viewing the server files in Cyberduck, you’ll see the mobile_template/default.html file. That’s because I’ve already modified it. If you ever change your home page image, you will want to right click that file, and then select “Upload” to overwrite it. NEVER delete this file from the server – just do an overwrite.
That’s it! You’re done. This same concept applies if you want to edit other files within the mobile theme. For example, you can add additional images on the home page by following this method. Also, in file mobile_template/Panels/Footer.html you can add images and other important store information.