Home > BigCommerce > Docs > How to customize BigCommerce Stores Design?

How to customize BigCommerce Stores Design?

Last updated: May 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

Due to the rapid development of technology, eCommerce has become the fertile ground for merchants around the world. It allows them to approach more customers and sell more products. And, in the world of online marketplaces, BigCommerce is considered as one of the top priority. It empowers users to sell products on multiple popular platforms, not only on BigCommerce simultaneously.

More than that, merchants on BigCommerce also are equipped with lots of features in terms of marketing, inventory management, SEO, and professional themes. With it, their business on this platform will be brought into a higher level, your products or services will be introduced in a professional manner and create a better impression in customers’ minds.

Consequently, it can’t be denied that BigCommerce is a great place to sell your products online. But, how can we start selling on BigCommerce? How to create a BigCommerce store with your own colors? They are the common questions among business owners, particularly the fishers.

Understanding that, in this post, we will help you shed light on all the steps to customize your BigCommerce store, different ways to do it, as well as some helpful tips for your store.

Design BigCommerce stores using a BigCommerce theme

As we know, before actually adding the first products and selling them, businesses have to create a professional and beautiful store theme which plays an important role in promoting people purchase their merchandise. Thus, the very first stage for your business journey on BigCommmerce is to design a store theme. In order to start design a store theme on BigCommerce, you have to implement multiple steps in advance. They are selecting suitable theme, uploading third-party store themes, installing theme pages, and finally customizing the store theme. This section will guide you carefully how to carry out these steps in an effective manner.

Select suitable theme

Select BigCommerce themes

The very first step to start your business on BigCommerce is to select the theme for your online stores. Merchants are given plenty of themes available on BigCommerce themes, so they can freely choose the suitable one. However, this is sometimes a problematic issue to entrepreneurs, particularly with the newbies when they don’t know which one is the best for them.

If you also have no ideas about this problems, these following tips will be for you:

The first one is about the features, you need to seek for a theme with mighty features like mega menus, price filters, product quick view, and more. Through these features, merchants can arrange all the categories in the menu but still maintain the stability of the primary navigation. Moreover, your visitors are allowed to access the categories they want, view merchandise, and even add them to the shopping cart without entering the product page.

The second criterion is the design. A responsive design is a necessary condition for any eStores. It ensures that your visitors and customers will have a smooth shopping experience regardless of the devices they are using, whether it is a tablet or cell phone. Furthermore, your store’s design needs to be suitable to your niche. Otherwise, a multipurpose theme seems to be a great option since it can work well in multiple niches.

Simply customization is also important to a BigCommerce store. It gives users the ability to design their store according to their desire, creating their own colors in customers’ mind. Additionally, with an easily customizable theme, businesses owners can integrate their brand with a third party platform seamlessly.

It is blogging tools that should be included in your online store theme. Unlike brick-and-mortar stores, online stores have to increase their visibility on the Internet. They need to express themselves, show and provide values to customers, so that their stores will come to people’s mind when shopping. Therefore, a theme with blogging tools will support business a lot in getting the high rank in the search engine.

Import the third-party BigCommerce store theme

Once you find the right theme for your store, purchase it, download the zip file to your computer and you can start setting up your online store design. After downloading the zip file, extract it and there will be a document folder and a theme folder in this file. The theme folder requires users to upload it to the BigCommerce site.

To do that, you have to login BigCommerce and select Storefront then click on My Themes on the left side of the menu. In fact, BigCommerce has already installed a theme for you but you still can upload a third-party theme. Scrolling down the page then selecting Upload Theme.

Upload third-party themes

When the zip file is uploaded completely on BigCommerce, a theme card will be displayed in My Themes which present the theme processing progress. Once it is done, you can see it in your dashboard, click on the theme and select Apply. Now, you complete the process of installing a third-party theme on BigCommerce.

Apply the new theme to the store

Install BigCommerce theme pages

As mentioned above, any stores which are created on BigCommerce are set up store themes already. By default, Shipping, Return, Contact, and Blog pages on BigCommerce are the ones that are added themes.

So, when you want to change the themes, just click on the section named Storefront then select Web Pages. There, click on the page name and you will be able to edit the page. You are allowed to change the text as well as to place it on the place you want.

Edit your web pages

In the Advanced options, there are also places for developers to import SEO information for the page and manage its appearance in the navigation menu. When everything is ok, what you need to do is to select Save to save all your changes and then Exit to do other tasks on this platform.

Obviously, you are free to create additional pages besides to default ones as Blog, Contact, Shipping, and Return. You can create a page to introduce about your store by choosing Create New Page. Also, you can not only select between generating a page or a website but also upload the content, set up SEO options, and determine how the page will be shown in visitor’s view from the navigation menu.

With the blog page, merchants are allowed to create new blog posts, make changes to the existing ones. The title, author and the content of the bolg are what editors can work with on each blog post. In terms of visual, it is possible to upload photos and set the thumbnail for each post.

Customize BigCommerce theme

Customize the theme

In general, there are four main steps to customize your BigCommerce store which are customizing the store theme, uploading your brand’s logo, editing the homepage carousel, and importing your brand’s social media account.

  • Customize the store theme: enter Storefront then select My Themes, There, you will see a button name Customize on the active theme, click on it. Users will be provided numerous tools to modify their store on the sidebar menu, such as changing the theme, font, colors, logo dimensions, forms, and so on. In addition, it also enables merchants to decide how many products will be displayed on the homepage, the products reviews on each product page, etc.

  • Upload your brand’s logo: When you finish editing your store theme, save all the changes and come back to Storefront. In this section, choose Logo and you can upload your brand logo image, and the icon that links to your site as well.

  • Edit the homepage carousel: As we know, a homepage carousel is an important part of your eCommerce store since it is one of the very first things coming to visitor’s mind. Therefore, changing it to match your store is an essential step for any online stores. To do that, click on the link Homepage Carousel then you will be able to create your own homepage carousel: upload your image, rearrange them, change the text overlay shown on the images, etc. to ensure that they are suited to your brand’s strategy.

  • Add your brand’s social media account: By adding your social media account to your online store, you customers can follow and connect with you in a more friendlier manner. Moreover, they will keep up with the latest promotion, deals, and discounted programs of your store which help them purchase at lower prices. On the other hand, your brand will build up a stable loyal customer base through these social media accounts. So, select Social Media Links and import any of your social media accounts since this platform allows you to add up to six profiles.

Finally, don’t forget to Save Changes when you are done.

Custom BigCommerce stores with Page Builder

Use Page Builder to customize BigCommerce store

One of the most popular ways to customize the BigCommerce store is via the page builder. With it, users can create and edit their sites with ease. By offering the drag-and-drop visual solution, you can design their BigCommerce storefront without any knowledge of coding.

Merchants can freely create and edit the site and content based on their desire without hiring any developers. Also, it enables users to control their brand smoothly and guarantee the shopping experiences of customers by keeping track of all the activities on the site.

After finishing editing, people can make use of the preview mode to see how your visitors will see when accessing your site. It also allows you to see the preview across different devices so that regardless of the devices people are using, you can check and make sure that it is the best version for your store. There are two options for entrepreneurs which are to change immediately or save it for later, which gives users time to consider carefully without worrying about the loss of changes.

Custom BigCommerce stores through Design Mode

It can be said that Design mode is the simplest tool to customize BigCommerce stores which allows users to make changes to their store by clicks. Similar to Page builder, Design mode enables merchants to edit their store with the help of multiple drag-and-drop tools. They can easily move items in any pages to another place or discard them in a couple of seconds.

Nevertheless, this tool has a disadvantage which is the limit in features. Apart from the ability to rearrange and get rid of items, there is no more ability that people can use through Design mode.

Therefore, it seems to be perfect with anyone who looks for a tool to just reorder and remove items on their page. To start customizing, what people have to do first is to open Store Design tab where they will see a tab named Design Mode in the control panel. It is exactly the tab that we need to click on to initiate designing.

In fact, editing with Design mode is like a piece of cake so that anyone, even the newbie can freely arrange their store to live up to their expectations. Visit the page you want to change and you will see all the necessary functionalities on the toolbar which is placed on the top of the page. Your pointer will change shape when it reaches an item, so move it to the item you want then use the left mouse button to move it to the suitable position. In case it seems to be unsuitable for your page, click on it with the right mouse button and then a menu will appear on the screen. Click on Remove Panel and it will be deleted.

Custom BigCommerce store design with Quick Edit

Via Quick Edit, businesses will be able to create beautiful and convenient online stores which helps their customers have a smooth shopping experience. Quick Edit offers users a variety of features and functionality which are not just moving and discarding items.

Besides designing online stores by a drag-and-drop tool, there is an effective option that is used by the majority of experts - It is via the stylesheet editor. With it, you are given the ability to make change to the CSS of all the template files of your store’s themes. However, it is not easy for starters since they have to understand HTML and CSS in advance. Yet, if you already know about these two concepts, there is nothing more suitable for you to customize stores than by stylesheet editor, and Quick Edit is a perfect option to help you conduct it.

When customizing with Quick Edit, a list of template files will be displayed on the left side of the screen, helping you to search for and use them more easily. More than that these files are arranged in a certain order in which the first part consists of the files in use. The rest are files that have not been used which are arranged based on the theme or type.

If you are satisfied with any file, click on it and the editor will be shown on the right side. Also, all the coding of the template appears on the screen so you can edit the HTML directly. Of course, it is complicated so if you are not professional in this field, let’s choose another option.

Custom BigCommerce store with FTP

File Transfer Protocol - FTP

Actually, there is nothing that people cannot change on a store theme if they know the way and, of course, the means to do it. With simple changes, Design Mode or Page Builder are a smart option, and when you have to deal with complex or advanced problems, your tools should be Quick Edit.

Yet, those are not all things we can do with BigCommerce stores, there is a special tool for merchants to customize their store. It is File Transfer Protocol (FTP). Considering FTP as a special tool since it gives users the opportunity to make some changes that are unable to be completed with these three tools.

To do this, it is necessary to connect the eStore with the directory via FTP, and upload your files. Then, your BigCommerce store will be updated with these files when they are linked back to your store. In fact, there are many ways to do that but people are advised to download the ZIP archiving all the template files. More than that, the types of files that are able to be uploaded are varied. It is ranging from HTML, CSS, to images like .jpg, .jpeg, .png or media files as .fla, .flv.

So, when they want to edit a file, just pick it and start modifying. Besides, there is an important notice that the URL link of files uploaded will be different from the ones in the template files. Consequently, you need to incorporate the link of files uploaded in the stylesheet or the page that they are being applied.

Design advice to make an awesome BigCommerce store

Upload high quality images

High quality images

In ECommerce, apart from the product description of price, product image plays a crucial role in promoting the sales. Since people are unable to see what it looks like in real life before receiving the package they ordered, these images can help them know its appearance.

These images need to be clear, beautiful and large enough, a small or blurry image can prevent your visitors from purchasing your products. Therefore, your photos should be a mirror to reflect your products. Nevertheless, a too large photo can affect the speed of loading your sites, so check carefully the suitable size for the image.

Prioritize contrasting colors for buttons on stores

What is your ultimate goal for designing a beautiful online store? Obviously, it is to generate more sales. Thus, the most important part of the page, the call to action buttons like buy now or add to cart need to be outstanding. And, the easiest way to draw people’ attention to them is to exploit the contrast among colors. By utilizing contrasting colors, they will be more likely to be noticed which increases the opportunity of selling merchandise.

Check the responsiveness of your theme

It is estimated that nowadays mobile phones are used not just to search information and connect to people but also to navigate to the site and order multiple goods online. Hence, the role of website responsiveness has become more and more important, especially on mobile devices.

Merchants need to generate a user-friendly site which allows their visitors to have great experiences on all devices. With BigCommerce, you should take responsiveness into account when selecting a theme for your store. With it, you will no longer waste time to make sure that your store runs well on every device.

In addition, you are offered a feature which allows you to decide how people will see your store on different devices such as desktop, laptop, mobile phone, tablet, and so on. You can take advantage of it to check the theme across multiple types of devices.

Arrange your store neatly

A chaotic store can be a distraction which decreases the likelihood of sales generation, so one of the primary concerns of any eCommerce store owner is to keep their store neat. “Neat” here means that the links and products displayed on one page should not be too high.

A page with too many links navigating to different pages can overwhelm visitors and then erode their initial demand - buying products. Likewise, if merchants place more merchandise on the homepage or reviews on the product pages than necessary, their visitors will be distracted and the result will be the same as with a page with too many links.

Instead, it is advisable to add links of the most crucial pages and put the bestseller products on your homepage. It not only makes sure that people can know the necessary information but also simplifies your pages, which helps customers navigate your site more easily. Moreover, you can add more information to your page by exploiting a theme having a mega menu feature which enables you to add sub categories and display them as a drop-down menu.

Activate quick view mode

Quick view mode

With quick view, customers can get the main information about the products without entering its product page, so it can help them save time when shopping online. Also, it can simplify the shopping experiences in your store since customers are not required to access separated pages for conducting different actions.

In fact, this feature is available on plenty of BigCommerce themes so that merchants can easily select a suitable theme with the quick view feature. Besides the ability to let people see the product details without navigating to the product page, quick view empowers them to directly add products to the shopping cart, proceed the payment or continue shopping.

Final thoughts

In short, a good start will be a huge advantage with merchants which help them increase sales and come nearer to the destination - success, and a suitable theme is exactly a good start with any BigCommerce stores. Actually, the store theme can be regarded as the face of eStores which can make it stand out in the market and attract more customers.

Thus, to be a successful store, the very first step for enterprise is to customize the store theme. There are many tools available for them like page builder, design mode, quick edit, and FTP. Each of them possesses their features and functionalities with different levels of complexity, so users should consider their demand and capacity carefully before selecting a method.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.