How to Edit Mobile Template for BigCommerce store?

Selling online asks for many factors, not only the products but also the appearance of your store. Using the available theme of BigCommerce is great since it includes all the necessary sections that you need from an online website. However, when your business grows up, you start thinking about making your template better than the typical one. Luckily, it’s easy to customize and use add-ons on your online store. There are many free responsive themes on BigCommerce. When it comes to mobile themes, you hardly find a non-responsive theme.

In this post, we will give you an in-depth guide on how to customize mobile template files for BigCommerce to create a responsive theme for any device, including the mobile version.

Now, let’s get started!

Why should you use customized mobile templates for BigCommerce?

If you have just started selling online with the help of BigCommerce, customizing mobile templates for an online store may not be your concern. However, if you are owning a developing business or simply planning to grow your business higher, opting for customizing a mobile theme is necessary because:

• Your online site will be more noticeable than your rival businesses
• A custom mobile theme suits only your business
• User-friendly webpage Search engine
• More adaptable to business demands
• Higher scalability of the online site
• Sales increase

How to customize mobile template files for BigCommerce?

To customize mobile template files for BigCommerce, you need to fulfill the following four stages:

Enable Mobile theme

Step 1: Sign in your BigCommerce account

Before starting any steps, simply log into your account first using your login credentials.

Step 2: Go to Storefront

After that, go to Storefront, which is on the left hand of the main BigCommerce dashboard.

Step 3: Click on the Mobile Theme Settings

Then, you should simply click on the Mobile Theme Settings. For some versions, the flow may be Setup & Tools => Set up your store => Design.

Step 4: Choose Enable Mobile theme

Now, you will see a box named “Yes, enable the mobile theme”. Simply check this box to finish this stage.

Download the Mobile theme

Step 1: Download Template file

Right after you check the Enable Mobile Them box, the Download Mobile Files section will appear.

Then, click on this option, and mobile theme files will be downloaded as a .zip file.

There are some other options that you can see on the screen, which are:

• Download mobile files: Your template files will be downloaded and you now can save, edit, and upload them to customize your store.
• Enable on these devices: You are enabled to choose any type of mobile device your theme will be used for. They include Mobile and Tablet options. Mobile option means the theme will be displayed when customers visiting your store use an Apple iPhone/iPod Touch, Android phone, or Windows 8 Phone. Tablet option means the theme will be displayed when customers visiting your store use an Apple iPad, Android Tablet, or Windows 8/RT tablet.
• Mobile theme logo: You are allowed to choose a file and upload it as a mobile-specific version of your logo.

Step 2: Save the file

After downloading the files, you can save the file by creating a new folder on your desktop and name it BigCommerce Mobile Theme Files.

When downloading the file, remember to save it on the folder you have created before.

Step 3: Unzip the file

To make use of the file, you should unzip it by using a specialized program such as 7-Zip or WinZip.

Customize the Mobile theme

You have downloaded your files. It’s high time you make the change about them.

Step 1: Click on the CSS or HTML file you want to edit

For those who don’t know, in terms of customizing the BigCommerce mobile theme, you need to change the CSS or HTML files on your computer with the help of a plain text editing tool.

To be more specific, you should click on the file you want to edit first. They can be the stylesheet or the structure.

Step 2: Make the changes

Now you can make any changes to the HTML and CSS files. Remember that the code lines need saving. Any kind of modifications can be done as per the scenario (business scenario) demands.

Upload the customization

In the last stage, we will upload the files again. But before that, it’s necessary to have access to WebDAV:

Step 1: Go to Server Settings

From the Control Panel, let’s go to the Server Settings

Step 2: Go to File Access

Then, click on File Access which is WebDAV. Here you will see the Web DAV’s Username and Password.

Step 3: Download the connecting file

Next, let’s click on the Download option so that A Cyber duck connecting file for that WebDAV client will be downloaded on your computer.

Step 4: Open the currently downloaded file

Simply open the file you have just downloaded and it will automatically open a link to your store’s server in your WebDAV client.

Step 5: Upload the customization

Now, let’s upload the files you have edited to the mobile_template directory.

Notice:

• The template structure in this file must be exactly the same as the one you originally downloaded in the Downloading the Mobile Template section.
• The file that is uploaded in the X folder should also be transferred to the same X folder of WebDAV. If you can’t find it, you have to create it first.

Final thought

Customizing mobile template files for BigCommerce is necessary if your business grows more since it not only helps you attract attention from customers but also brings about a better shopping experience for them and then increases the sales.

We have just introduced and guided you on the way to customize mobile template files for BigCommerce in four stages, including Enabling Mobile Theme, Downloading the mobile theme, Customizing, and Accessing the Web DAV to upload the changes.

Hopefully, you have learned enough knowledge to apply to your online store. If you have any questions, be free to leave a comment in the section below. We will be glad if you can share this post with your friends and visit us for more interesting topics.

Thank you!