How to customize BigCommerce mobile theme and homepage of webstore?

Many organizations in the Fortune 500 and Internet Retailer 1000 use BigCommerce to boost their webstore so that you can scale it up and one can always avoid outgrowing. A large number of Bigcommerce store looks incredible and when you know, you have better options to customize them and end up in something that looks better than average.

The Theme store and the App store with large number of important add ons such that the functionality which you want to implement can be done through them. There are couple of free responsive themes and near about thirty paid themes. But when it comes to mobile theming you can never think of a non -responsive theme.

Therefore, below are the reasons why one should opt for customized mobile theme and homepage –

1. With a custom mobile theme, it is created just to suit your business. Your website will be different from anyone else’s.
2. It makes your web page Search engine friendly.
3. Your website is more adaptable to your business needs.
4. It also leads to the scalability of your website and subsequently scales up your business.

First of all, we shall focus on how to customize your BigCommerce mobile theme –

1. Log in to your BigCommerce account using your login credentials.
2. Then go to Store Setup › Design, then click the Mobile tab. In some versions of the control panel it goes like this: Setup & Tools› Set up your store › Design.
3. Any one device should be enabled and it should be taken care that “Enable Mobile Theme” is selected.
4. Then click on “Download Template File”. Mobile theme files downloads as .zip file.

5. You can save the file under “ BigCommerce Mobile Theme Files”
6. Later you can unzip these files using a program such as 7-Zip or WinZip.

How to make changes –

When it comes to customizing the BigCommerce mobile theme, frequent changes are made to the HTML and/or CSS files using text editing tools. The code lines should be saved such that any kind of modifications can be done as per the scenario (business scenario) demands.

1.In order to change a style, you can edit any of the CSS or HTML files there. For e.g. the main stylesheet is style.css. Click on that file to edit.

2.Here let’s change the background color of the main body. At the end of the css file, add:

3.The changed background color:

Similarly, you can change HTML structure also, along with tokens.

Transfer the Changes:

1. Go to the control Panel, then server settings.
2. Click on File Access (WebDAV).
3. Click Download for the WebDAV client you have installed on your computer. A connection file for that WebDAV client will download to your computer.
4. Now, Click on the downloaded file. It will automatically open a connection to your store’s server in your WebDAV client.
5. Upload any customized files to themobile_template  Make sure the template structure is same that 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.

It is important that any file which is being uploaded in a folder like Panels, then it should also be transferred in the same folder in WebDAV. If the folder is not to be seen, you must create it.

Another most important concern for the web store owners is managing the home page. Therefore, they mostly prefer a customized template. Let us take a look on how to edit and update the homepage of a BigCommerce store:

1. Go to the Design option in your Bigcommerce Store Admin.
2. Next, go to the Template Files.
3. Click “Edit” on the default.html file.
4. You can take the content from the default.html file.
5. Further click on “Create a Web Page”
6. Next is, paste the entire page content from the default.html to new homepage content space and save the file.

This is your customizable home page, ready for editing just like other pages.