Best Coding Practices for BigCommerce Website Development

BigCommerce is considered to be one of the best B2B eCommerce platforms for mid-market manufacturers & distributors. With the open API and flexibility to create better integrations – it offers faster go-to-market.

In this blog, we’ve covered some of the best practices for your BigCommerce website development.

Basic best practices

• Local setup is one of the significant part of the entire development phase, so make sure you don’t directly edit the theme files from the store during development. Get the local setup done for your theme.
• CSS and JS files must be optimized and placed on the right files, don’t have them scattered in each file of your theme. It will slow down the performance of your website.
• Try to use stencil objects and helpers maximum other than using custom JS
• Download and use the library files rather than calling from 3rd party 
• Try to use BC customized features rather than hardcoding
• Make sure you go through default BC features before overriding any functionality.
• Try to use lang file for managing the common text.

Usage of creating local setup

• Stencil CLI gives developers the power to locally edit and preview themes with no impact on a merchant’s live storefront.
• Adding and Updating Javascript code files becomes easier.
• Additional feature customization (like creating a subcategory page)
• Custom template creation for products, categories, brands, and web pages.
• Easy to traverse the theme files,analyse and debug the code.

Use Stencil object instead of custom JS

BigCommerce has separate stencil objects that can only be retrieved on the specific page

Reference Link:

Always first try to check the existing helper that will help us to achieve our required functionality rather than directly using JS to achieve it

Reference Link:

Avoid using third-party CDN link

• Always download and use the Library files rather than linking them by a 3rd party link
• Avoiding calling CDN from 3rd party,library files helps in reducing the page load time. 

Use BigCommerce customized features rather than hardcoding

• Bigcommerce has many theme customization features in the admin panel,use those feature to enhance your e-commerce store, rather than hard-coding them into the theme file. This will allow the admin to edit the features without having to do code changes.
• Color schemes, Product Listing counts, typography and icons, etc are also available in the Theme Customize section of the BC admin panel,use those effectively .

Use the BigCommerce default feature for enabling and disabling BC default functionality

• Disabling our requirement rather than directly hardcoding or editing the theme files

Example : 

1. Product Inventory visibility.
2. Product Weight visibility.
3. The gift Certificate feature enables/disable.
4. Featured product count and enable/disable .
5. Removing ‘Powered by BigCommerce’ from Stencil Themes.

These can all be directly done using the bigcommerce inbuilt features, so always make sure you are utilizing those features efficiently, this will save a lot of time and also have better user experience.

How to work on the Stencil theme 

• How can I set up my Bigcommerce Project on a Local Machine?
• Code traversing

How can I set up my BigCommerce project on a local machine?

• Installing Stencil CLI

Reference Link:

• Download your theme and extract it from your local machine
• Open a terminal in the Theme folder path and follow the stencil commands below for live previewing of a theme with our BC store.
• npm install (install theme modules)
• If it isn’t working and getting errors please change the nvm version.

• stencil init -> Store URL, Access Token, and Port number (initialize a new .stencil config for the theme)
• stencil start (serve a live, Browsersync enabled preview of the theme)

How to traverse the code

• Traversing the code to find our required code destination is the major requirement for the developers to update or add additional sections in our store theme for customization.
• If you know how to traverse the code, you save a lot of time during development and debugging, so make sure you understand the file structure.
• Always start traversing from the templates->pages folder file available in the theme folder structure.
• BC has separate base codes for individual page types (Example: home.html, category.html, product.html, page.html, search.html, cart.html, checkout.html, etc.)

Do’s

• CSS code must always be coded inside SCSS files in the assets folder.
• Mostly avoid using scheme files for customization features because it allows only certain sizes.  If it increases, the theme will not be bundled from the local setup.
• Custom template CSS or theme customizing CSS codes can be created inside the theme assets folder and imported directly into the theme.scss file
• Utilize the separate JS files for each page effectively
• Also, try to use Footer scripts and Script manager available in the Admin panel
• Create an API call from a separate server(like a middleware File).
• If the theme is not working in the local setup please check the nvm version and change it and try again.

Don’ts

• Avoid using Inline CSS and directly writing style codes in .html files
• Avoid hardcoding the JS scripts in .html page files.
• Don’t use API tokens in the theme files.