How to customise the styles in your online shop
26 June 2019
06 January 2022 - images and links updated to Bootstrap v5.1.3
Our latest FoodCommerce theme is built with Bootstrap v5 and this article is to show you how to customise it using Visual Studio Code (VS Code).
First you create a project in VS Code and then add in Bootstrap, Sass and Gulp. Once you have done this you can make your changes and build a new style sheet. You then replace the style sheet in your FoodCommerce theme with this new one.
Bootstrap “theming is now accomplished by Sass variables, Sass maps, and custom CSS” and how to do this is explained in detail at https://getbootstrap.com/docs/5.1/customize/sass/. Essentially though you modify the Bootstrap Sass variables and the custom FoodCommerce CSS in a file named styles.SCSS. From this you build a file named styles.CSS and replace the file of the same name in your FoodCommerce theme.
Not sure what VS Code and Bootstrap are? See the bottom of this article. Otherwise let’s jump straight in…
Creating the project environment in VS Code
Download FoodCommerce_SCSS_files_for_Default_theme.zip from our support website. These are custom files you will need to add to your project.
Launch VS Code
Open a folder for your project
Click on File > Save workspace as… and give your workspace a name.
Globally first to make sure versions don’t collide.
Click on Terminal > New Terminal and then type in:
npm rm --global gulp
(to remove old version)
npm install gulp -g
(to install latest version)
Now install Gulp locally into the project
From the ZIP file add the file package.json to the root of your project. Open it. It should look like this:
Type into the terminal
npm install gulp –save-dev
Note that doing this updates the package.json file.
npm install node-sass
npm install gulp-sass –save-dev
npm install gulp-autoprefixer –save-dev
npm install bootstrap
Or if you need to specify an older version
npm install email@example.com
That's it for creating the project environment! Your package.json file should now look something like:
You can now close the terminal as you won’t be needing it any more.
Getting ready to build your CSS file with Sass
Create a new folder named "SCSS" and another one named "CSS"
Put our bespoke SCSS files from our ZIP file in the SCSS folder.
Put the gulpfile.js file in the root folder.
Configure build task
In the VS Code terminal menu click on "configure default build task" and then "gulp:sass".
A folder named ".vscode" will be created containing a file named task.json.
Building your CSS file
After making your changes to the styles.SCSS you run the task that creates the styles.CSS file by pressing ctrl+shift+B. Your new CSS file will be located in the CSS folder.
Updating your FoodCommerce theme
The styles.CSS file can be found in the “media and files” folder of the theme. Either rename or delete it and then upload the new styles.CSS file you have just created.
In the template part named 'page' increment the version number of the styles.CSS file.
Customising Bootstrap’s Sass variables
About Bootstrap and VS Code
Bootstrap v5 is an open source toolkit for developing with HTML, CSS, and JS. They invite you to “build your entire app with our Sass variables...”, which is precisely what we did. There is lots of support on their website at https://getbootstrap.com/docs/5.1/getting-started/introduction/.
Microsoft Visual Studio Code is a free, open source, source code editor that runs on your desktop and is available for Windows, macOS and Linux. There is a lot of support on their website at https://code.visualstudio.com/docs. You can also download the app from there, or alternatively download and install it using Ninite (https://ninite.com).