Making a custom BigCommerce theme
The storefront of every online store is one of the most important aspects that influence the conversion rate. Building a store on BigCommerce provides multiple options in selecting themes and extensions that shape an eCommerce store’s experience. However, the additional customization is always an incredible opportunity to make the store unique and attractive with the particular features and visual design. Therefore, we will discuss why custom themes are important and how to customize one on BigCommerce.
Why do you need a custom BigCommerce theme?
As it was mentioned in the introduction, the primary purpose of creating a custom theme is to make your storefront unique, appealing, and convenient for the customers. Also, merchants have their own brand design in mind that they want to manifest through the online store. Besides the visual appeal, changes in the theme can influence the conversion rate and overall performance of a store. The out-of-box themes do not have the desired functionality that modern merchants need. In this regard, the customization of themes comes as a necessity when you want to build a successful online store.
Although this section can be described along with the customization instruction, the concepts of the Stencil theme and Stencil CLI should be discussed separately because it is a significant part of the BigCommerce theme development.
The Stencil theme is a basic theme which is used as the backbone to customize it as you wish in terms of design, layout, and additional features. With a drag-and-drop page builder, one can add any content and custom HTML code to any page. After the editing is done, a merchant just needs to press “publish”, and all the changes will be applied. Meanwhile, one may also change the code in the files through the BigCommerce interface. However, this customization only applies to the elements that are available in the page builder.
For the more effective and extensive customization of a BigCommerce theme, one needs to install the Stencil CLI tool. Basically, all BigCommerce themes are built on the Stencil framework. Thus, to be able to customize them and extend their functionality, one has to be familiar with all the specifics of Stencil, which can be found in the official documentation.
How to customize a BigCommerce theme
As with every SaaS eCommerce platform, the customization options of BigCommerce are limited and closely related to the specific ecosystem. However, the customization of themes with BigCommerce can be done using two methods — build-in editor and making changes in the code of the files.
Customization with built-in editor
When choosing one of the standard BigCommerce themes, there is an option to customize it from the dashboard. Just choose your storefront, and click on the button “customize.”
Page Builder. BigCommerce
After that, a merchant can customize the layout, colors, design, and add widgets with a drag-and-drop page builder that is very convenient to use, even for users without technical proficiency and coding knowledge. Besides, there is also a possibility to customize every widget through this customization mode just by clicking on a widget, and editing options will appear. Notably, while in the customization mode, merchants can also preview the mobile version of a site.
Customization through theme files
This option to customize a theme is more complex and requires experience as a developer. Nevertheless, it is used when a merchant requires specific customization and widgets that are unavailable within BigCommerce basic functionalities. To edit the files, one needs to install BigCommerce Stencil CLI, which is used for the local development and editing of themes. To access this file customization, one needs to choose the option “edit theme files” in the page builder menu.
Editing Stencil Theme Files. BigCommerce
Within the theme folder, the main file which contains the theme code is theme.scss. Meanwhile, the layout of the theme can be edited through the layout files. The detailed instruction on how you can edit theme files and what you can customize is on the corresponding page in the BigCommerce documentation.
The customization of BigCommerce themes can be a very smooth process when you use the built-in page editor for the editing of the basic elements. However, for the more advanced customization, one needs to have technical proficiency and know CSS and HTML programming languages. In most cases, the merchants who launch big-scale eCommerce stores hire professional developers who can customize the store according to the business needs.