How to Customize The Home Page Image in a BigCommerce Mobile Template

By March 3, 2015BigCommerce

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.

Start Your Free 15 Day Trial Today!

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.

BigCommerce Default Mobile View

This is a sample of what the default mobile view will look like. Note the category menu, but there is no zing to the home page.

BigCommerce Mobile Site with Custom Image

This is the same site with a custom image added. Ideal size for a mobile site image is 325px wide by 200px tall. NOTE: You can adjust image height as necessary.

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.

BigCommerce Store Design Interface

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/Connecting-to-WebDav/

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/How-do-I-connect-to-my-store-via-WebDAV-using-CyberDuck

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.

Download BigCommerce Template Files

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.

BigCommerce Mobile Template Files

 

Step 3 – Upload an Image to BigCommerce Image Manager

  1. 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.
    View Full Size Image
  2. Once you upload your image into the Image Manager, click the “View Full Size” link.
  3. 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.BigCommerce Image URL

Step 4 – Ensure That You Have a Text Editor Software

  1. 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.
  2. 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

  1. 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.
  2. 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).
  3. Now re-open the original default.html file. Your default.html file will have code like the following:
    Default html Home Page File
  4. 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>
    Add the code
  5. 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.Update the code with your image URL
  6. Save the file.

Step 6 – Upload the Finished File

  1. 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).
  2. Once Cyberduck is open and connected, you should see a file structure like below (with the mobile-template directory opened/expanded).BigCommerce WebDav Connection
  3. 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”.
  4. 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.
  5. 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.
    WebDav Connection with Default

    As you are uploading, another window will appear showing the upload status. Once the upload is done, you can close out Cyberduck.

Final Notes:

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.

Start Your Free 15 Day Trial Today!