When changing a BigCommerce theme, you may be tasked with adding a custom component. You will also most likely need to add custom styles to that component. This guide will walk you through adding custom styles to BigCommerce components and pages. To add custom styles you will need to add a directory and a file as well as make an edit to the existing theme.scss file.
Step 1. Adding a New Directory
To start we will need to add a new directory to the assets/scss directory, titled custom. This new directory will hold all of our custom scss files and directories.
Adding Custom Directory
Above, you can see our new working directory tree, which will be used to add the custom styles.
Step 2. Adding a File
For the sake of this example I will be making changes to the home page of my site, so within the custom directory I will create a file titled _home-page.scss. In _home-page.scss we can define any styles as allowed by the scss format.
Note the “_” (underscore) in _home-page.scss tells the bundler that this is a partial scss file. This allows you to reduce your bundle size thus increasing your site speed.
Step 2. Importing the File to the Theme
Once we have defined the files we just need to import the file to our theme. To do so navigate to the /assets/scss/theme.scss file. In that file we just need to add the following code to the bottom of the file.
@import "custom/home-page";
Note that above the underscore is omitted from the import. From here any style that you define in home-page.scss will now work accordingly.
And just like that you have added custom styles to BigCommerce!
Author: Maxwell Sherwin
Got stuck on a step in this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!
BigCommerce Certified Partner, Oracle NetSuite Alliance Partner
As both a BigCommerce Certified Partner and an Oracle NetSuite Alliance Partner, Anchor Group is ready to handle BigCommerce and NetSuite projects alike! Whether you already have one platform and are looking to integrate the other, are considering a full-scale implementation of both platforms, or simply need support with ongoing customizations, our team is ready to help answer any questions you might have! Get in touch!
