Customizing BigCommerce Themes: A Beginner’s Guide

BigCommerce themes are some of the best ones on the market if you’re looking for gorgeous design and extreme functionality. But customizing them makes them look and work even better and is one of the best ways to make your online store truly your own. 

While using a pre-designed theme gets you up and running quickly, tailoring it to fit your brand can set your store apart from the competition.

But what if you’re not a developer? Don’t worry—customizing themes for BigCommerce doesn’t have to be overwhelming. Even without a technical background, you can make meaningful changes that enhance your store’s look and functionality.

In this guide, we’ll walk you through the basics of theme customization, share essential tools, and offer tips for creating a unique and engaging online store. We’ll make the process approachable and manageable. 

Let’s get started!

The Basics of BigCommerce Theme Customization

Before we go straight to customization, let’s first try to understand what a theme is and the building blocks that make it up. Knowing these basics will give you a clearer idea of how to make the changes that best suit your brand.

What is a BigCommerce theme?

A BigCommerce theme is the structure or foundation of your online store’s design. It controls the looks of your website as well as how it feels for the user. It includes everything from the layout of your product pages to the colors and fonts used across your site. 

A theme is what gives your store its unique visual identity to create a shopping experience that resonates with your customers.

BigCommerce themes use a powerful framework called Stencil. Stencil is designed to make theme customization flexible and straightforward, even if you’re not a tech expert. It allows you to modify your store’s appearance and functionality to better suit your brand.

Components of BigCommerce themes

Customizing themes for BigCommerce involves working with a few key components that make up the structure and style of your store:

Handlebars.js: This is a templating engine that helps you manage dynamic content on your website. It’s a tool that lets you easily display different types of content—like product details or customer information—based on what’s happening on your site. 

Handlebars.js templates determine how your store pages are structured.

SCSS (Sass): SCSS is an advanced way of writing CSS, the code that controls the look of your website. With SCSS, you can use features like variables and nesting to make your styling more organized and easier to manage. This means you can quickly change the color scheme of your entire site by updating a single line of code, rather than hunting through multiple files.

YAML: YAML is used to manage data in your theme, particularly for controlling which pieces of content are loaded onto different pages. It helps your site load faster by only pulling in the data it needs, making your store more efficient and improving the shopping experience for your customers.

These components work together to give you control over your BigCommerce theme customization.

Getting Started with Theme Customization

Before you can begin customizing your BigCommerce themes, you’ll need to set up a local development environment. This allows you to make changes safely and test them before they go live on your store. Here’s how to get started.

Set up your local development environment

Setting up a local environment might sound technical, but it’s a vital first step in customizing your BigCommerce theme. This setup lets you experiment and refine your design without affecting your live store. Don’t worry. Here’s a simple guide to getting everything in place:

1. Install Node.js and npm

• Node.js provides the environment you need to run Stencil CLI, the tool you’ll use for theme development.
• npm (Node Package Manager) comes bundled with Node.js and helps manage the packages and dependencies required for Stencil.
• To install, visit the official Node.js website, download the appropriate version for your operating system, and follow the installation instructions.

2. Install Stencil CLI

• Stencil CLI is the command-line tool that lets you develop and test your BigCommerce theme locally.
• Open your terminal or command prompt and run the following command to install Stencil CLI globally: npm install -g @bigcommerce/stencil-cli

3. Create a BigCommerce API account

1. To connect your local environment to your BigCommerce store, you’ll need API credentials.
2. In your BigCommerce dashboard, navigate to “Advanced Settings” > “API Accounts” and create a new API account.
3. Note down the API Path, Client ID, and Access Token—you’ll need these in the next step.

4. Initialize your local environment

1. In your terminal, navigate to the directory where you want to work on your theme.
2. Use the following command to set up your environment, replacing the placeholders with your actual API credentials: stencil init --url=https://your-store-url.mybigcommerce.com --client=your-client-id --access-token=your-access-token
3. This command will download your theme’s files and connect your local setup to your BigCommerce store.

Download and prepare your theme

With your environment set up, the next step is to get your theme’s source code and prepare it for customization.

Obtain your theme’s source code

If you’re using a pre-built theme from the BigCommerce marketplace, you’ll need to download its source code. You can also choose to start with BigCommerce’s default theme, Cornerstone, which is available on the BigCommerce Stencil GitHub repository.

Once downloaded, place the theme’s files in the directory where you initialized your Stencil environment.

Understand the theme’s directory structure

• Templates folder: This is where you’ll find the Handlebars.js files that define the layout and structure of your store’s pages. Each template corresponds to a specific page type, like the homepage or product page.
• Assets folder: This directory contains all the CSS, JavaScript, and image files that make up your theme’s design. You’ll spend a lot of time here when making visual changes.
• Config folder: This is where the theme’s settings are stored, including the YAML files that control which data gets loaded onto each page.

When you know where everything is located, you can start making changes with confidence, knowing exactly which files to edit. With your theme downloaded and your environment ready, you’re set to begin customizing your store to fit your brand’s unique style.

Basic Customizations for BigCommerce Themes

Once your local environment is set up, it’s time to start making your BigCommerce theme uniquely yours. 

You don’t need to be a developer to make impactful changes to your store’s look and feel. By using SCSS, a more advanced version of CSS, you can easily tweak colors, fonts, and other basic layout elements.

Changing colors

Colors play a big role in branding, and adjusting them to match your brand identity is a quick way to personalize your site.

For example, to change the background color of your site’s header:

1. Navigate to the assets/scss/components directory in your theme’s folder.
2. Open the header.scss file and locate the existing background-color property.
3. Update the color code to your desired shade. For instance:

.header {

    background-color: #ff9c33; // Change to your brand color

}

• Save the file, and your site’s header will now reflect the new color.

Adjusting fonts

Fonts contribute significantly to the overall vibe of your store. To change the font style or size:

1. Open the assets/scss folder and look for the typography.scss file.
2. Here, you can adjust global font settings like the primary font family or specific styles for headings and body text.
3. Example: 

body {

 font-family: 'Helvetica Neue', sans-serif; font-size: 16px;

}

• Save the file, and your site will now display the updated font styles.

Basic layout changes

• Simple layout adjustments, like padding or margin changes, can make your site more user-friendly.
• For instance, if you want to increase the spacing around your main content, you should locate the appropriate .scss file in the components directory, such as main-content.scss. Also, adjust the padding or margin values: 

.main-content {

 padding: 20px 40px;

}

• Save your changes, and preview the new layout.

Editing Templates with Handlebars.js

Beyond visual tweaks, you can customize the layout and structure of your store’s pages by editing Handlebars.js templates. This might sound technical, but it’s easier than you think.

Modifying template files

Handlebars.js files are responsible for how different types of content are displayed on your store’s pages. You can find these files in the templates directory.

For example, to add a custom section to your product page:

1. Navigate to templates/pages/product.html.
2. Identify the section where you want to add new content, such as below the product description.
3. Add your custom Handlebars code, like this:

<div class="custom-section">

<h2>Why You’ll Love This Product</h2>

<p>{{product.custom_description}}</p>

</div>

4. Save the file. Your product pages will now include the new section, making them more informative and engaging.

Adding custom data

Handlebars.js allows you to pull dynamic data directly into your templates, making your site more interactive.

For instance, if you want to display custom product features:

1. Ensure the custom data is available in your product catalog.
2. Use the Handlebars syntax to insert this data into the template:

{{#each product.features}}

  <li>{{this}}</li>

{{/each}}

This will dynamically list out all the features associated with a product.

By starting with these basic customizations, you can make meaningful changes to your BigCommerce theme without feeling overwhelmed. As you become more comfortable, you’ll find that even small tweaks can have a big impact on how customers interact with your store.

Deploying Your Customized BigCommerce Themes

Once your customizations are complete, it’s time to deploy your BigCommerce theme and make it live.

Bundling and uploading your theme

To get your theme ready for deployment:

1. Use Stencil CLI to bundle your theme by running the command:

stencil bundle

This will package your theme and optimize files for performance.

2. In your BigCommerce dashboard, go to Storefront > My Themes, click Upload Theme, and select your bundled theme file. Once uploaded, hit Apply to activate it.

Testing and final adjustments

Before going live, test your theme first:

1. Make sure your site looks and works well on various devices (mobile, tablet, desktop) and browsers.
2. Make any necessary adjustments based on your testing, then preview the site to confirm everything is in order.

With these steps, your customized BigCommerce theme will be ready to launch, offering a polished and tailored experience to your customers.

Best Practices for Theme Customization

As you learn to customize your BigCommerce themes, following some best practices will help ensure your store runs smoothly and efficiently. These practices also safeguard your work and make your site accessible to all users.

Version control and backup

Before making any major changes to your theme, back up your work. Using Git for version control is a simple yet powerful way to track changes and revert to previous versions if needed.

• If you don’t like the changes or something goes wrong, you can simply roll back to a stable version.
• Before implementing significant changes, create a backup of your current theme. This can be as simple as copying your theme’s folder to another location on your computer or using Git to create a new branch.

Performance optimization

A fast-loading store keeps customers happy and engaged. Here are a few tips to optimize your theme for better performance:

• Compress images before uploading them to your site to reduce file sizes without sacrificing quality. Tools like TinyPNG can help.
• Minify your CSS and JavaScript files to remove unnecessary characters and spaces, which can speed up loading times.
• Implement lazy loading for images and other elements that aren’t immediately visible. This technique loads content as users scroll down the page, improving initial load times.

Accessibility considerations

Making your store accessible ensures that all users, including those with disabilities, can navigate and use your site effectively.

• Make sure your text and background colors have sufficient contrast. This makes your content readable for everyone, including those with visual impairments.
• Test your site’s navigation using only the keyboard. All interactive elements should be accessible via the Tab key.
• Always include descriptive alt text for images to help users, who rely on screen readers, understand the content of your images.

Your Store, Your Way—With a Little Help

Customizing BigCommerce themes is a powerful way to create unique and functional online stores. With proper guidance, anyone can do it—even if you’re not a tech expert. However, as a busy business owner, finding the time to dive into these customizations might take you away from what you do best: running your business.

That’s where we at Epic come in. With our BigCommerce themes and expert support, you don’t have to worry about the technical details. We’ll take care of everything, from the initial setup to ongoing adjustments, so you can focus on growing your business. 

Let us help you bring your vision to life effortlessly and efficiently. Drop us a message today.