How to customise the styles in your online shop

26 June 2019
Intended audience: web developer

06 January 2022 - images and links updated to Bootstrap v5.1
01 November 2022 - Bootstrap links changed v5.2
02 August 2023 - FoodCommerce SASS files for Bootstrap v5.3.1 included
04 September 2023 - Bootstrap links changed to v5.3 and default FoodCommerce SASS files to Bootstrap v5.3.1. Links to additional SASS files for different Bootstrap versions removed.
04 December 2023 - latest Gulp-AutoPrefixer v9.0.0 does not compile, use version 8.0.0 instead.

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.3/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

  1. Download FoodCommerce_SCSS_files_for_Default_theme.zip from our support website. These are custom files you will need to add to your project.

  2. Launch VS Code

  3. Open a folder for your project

  4. Click on File > Save workspace as… and give your workspace a name.

  5. Install Gulp

    1. 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)

      Uninstall Gulp

      And then:
      npm install gulp -g
      (to install latest version)

    2. Now install Gulp locally into the project

      1. From the ZIP file add the file package.json to the root of your project. Open it. It should look like this:

        beginning package json file

      2. Type into the terminal
        npm install gulp –save-dev
        Note that doing this updates the package.json file.

        Install Gulp

  6. Install node-sass
    npm install node-sass

  7. Install gulp-sass
    npm install gulp-sass –save-dev

  8. Install gulp-autoprefixer
    npm install gulp-autoprefixer@8.0.0 –save-dev
    (4 December 2023 - latest version 9.0.0 does not compile, use v8.0.0 instead)

  9. Install Bootstrap
    npm install bootstrap

    Or if you need to specify an older version
    npm install bootstrap@4.1.3

That's it for creating the project environment! Your package.json file should now look something like:

final package json file

You can now close the terminal as you won’t be needing it any more.

Getting ready to build your CSS file with Sass

  1. Create a new folder named "SCSS" and another one named "CSS"

  2. Put our bespoke SCSS files from our ZIP file in the SCSS folder.

  3. Put the gulpfile.js file in the root folder.

    gulpfile

  4. 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.

styles scss file

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

See https://getbootstrap.com/docs/5.3/customize/sass/.

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.3/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).

Tony Fear
Tony Fear