In this quick guide, we will show you how to make updates to your BigCommerce theme.
There are two ways to make edits to your theme:
- Using the Built-in Visual Editor (BigCommerce Page Builder)
- Updating your Theme files
The e-commerce industry has been growing for years, however, the COVID-19 pandemic has driven the e-commerce upward big time.
With that being said, having a website that loads quickly, look good and can be easily found by major search engines is vital for your online success.
Your BigCommerce theme has a profound impact on UX (user experience), usability, crawlability, and indexability.
With that in mind, if you are looking to make some quick changes to your storefront, you are in the right place, so let’s get started:
Using the Built-in Visual Editor (BigCommerce Page Builder)
1. Sign in to your BigCommerce store and Click on “Storefront”
You are probably already familiar with this section of the BigCommerce backend. This is where you can adjust your logo, add a favicon, add or edit homepage slides, add external scripts, and much more.
2. Click on “Customize” to view the Page Builder
Once you click the “Customize” button you will be redirected to the BigCommerce Page Builder. This is BigCommerce’s drag-and-drop visual editing tool that was introduced in 2020 to help merchants make quick edits to their themes.
There’s no coding required and you can easily make minor customizations to your storefront.
There are a few things to mention in the screenshot above.
- There are a few preview modes at the very top of the page. The Design button is checked by default and it shows the sidebar with all the tools available. If you switch to Preview, you will see how the store looks after you make a change and save it.
- Next to it there are 3 icons for desktop, tablet and smartphone views. These views can be used to preview how the sites looks on respectively desktop, tablet and smartphone resolution. Keeping in mind that smartphone traffic is on upward trend and it will explode in the upcoming years, it’s important to check how your storefront works on mobile.
- In the top left corner of the page just under the BigCommerce logo there are 3 icons. The first one is the actual Page Builder. The second shows all Layers. When you add an element to any of the Global or Local Regions the Layers will expand to show you the hierarchy of the page. One thing to note here is the difference between Global and Local Regions. The Global regions are sections of the theme that shows on all pages. Basically everything you add there will be applied storewide. While the Local Regions will show on the specific page that you are editing. Let’s take an example of a banner that you want to show across that website that you have “Free Shipping above $50”. This will be added in a Global Region section so that even if people land on your website from a page different than the homepage, they will still see the marketing incentive, which potentially will affect your AOV (Average Order Value).
Adding or Editing Widgets
In the Page Builder sidebar, you can view all the widgets that are available to you. You can add images, carousels, videos, products, text, and even custom HTML.
Let’s say you want to add a carousel to your homepage. It’s as easy as drag and drop this widget to the specific area of the website. After you add the carousel widget, you can edit the background image by clicking the brush icon next to “Background”. Underneath the background, you can edit the Box, Title, Description, and Button. You also have an option to hide any of the elements by click on the “eye” icon next to it. You can change the color of the box, customize the title and description font, weight and size, as well as the color and shape of the CTA (call-to-action) button underneath.
In a similar way you can add all other widgets to the desired locations and customize them to your liking. The interface is pretty straightforward and easy to navigate.
Editing your Theme files
This area is for more advanced users as it requires at least basic knowledge in HTML and CSS. Keep in mind that BigCommerce doesn’t allow for the customization of the JS (JavaScript) files directly from the backend. This can only be done by installing Stencil CLI, which is BigCommerce’s theme engine. The theme editor is a great tool if you want to make changes to the structure of a specific template file, however, for major customizations, the Stencil CLI is recommended.
Click on “Advanced” and then “Edit Theme Files”
We suggest that you first create a backup of your theme and then make edits to your template files.
Once you click on “Advanced” a dropdown will show with different options. Firstly, you will want to “Make a Copy” of your store. This is basically a backup that you can use if you break anything and need to revert to the previous version.
After you have the backup ready, it will show under “My Themes” as an inactive theme. Now you are ready to rockin’ the code world. Click on “Edit Theme Files”. Your browser can block the pop-up window. You will need to allow it. A new window will show and by default it will open the home.html. This is the structure of your homepage.
In the left sidebar, you will notice different folders and files. You will notice that all JSON and JS files are grayed out. As mentioned before in this article, these files can only be edited through the Stencil CLI theme engine that needs to be installed locally.
There are 3 active folders in there in the default theme. Each folder has a lot more subfolders. The specific structure can differ from theme to theme. The “assets” folder keeps all the theme fonts, icons, images, javascript files and CSS. In here the file that’s of the most interest is the theme.scss that can be found under assests > scss > theme.scss. This is the main CSS file that is used for all customizations. In here you can add more CSS, such as changing the size, color or anything else of an element that cannot be edited in the Page Builder.
The other area that is good to mention is the “templates” folder. In there you can find the layout of all your pages, as well as all other components that are linked to it. Let’s say you want to make an adjustment to your product page where you want to change the order of the additional information. E.g. you can swap the order of the SKU with the Availability. You can also add Size Guide or anything else that you want to show on all pages. This way you won’t have to add it to each product individually, but it will show by default.
Even though BigCommerce has a great user-friendly drag-and-drop builder and admin portal getting the exact visual layout that you envision for your store might be more time-consuming than it looks like. In addition, if you want to have a custom design that sets you apart from the competition, or you need specific functionality that doesn’t come with BigCommerce or a third-party app, you may require assistance from professional BigCommerce design and development services.
