Bootstrap Theme for Sylius

Installs: 129 272

Dependents: 0

Suggesters: 0

Security: 0

Stars: 88

Watchers: 15

Forks: 52

Open Issues: 12





Sylius Bootstrap Theme

Sylius Bootstrap theme with build process based on Webpack Encore.

It allows to swap to Bootstrap-based theme separately in each channel.


There are two ways to install a theme. It is possible to copy files in themes/ or add this package as a composer dependency and create a child theme.

The instructions below refer to an installation in the theme folder. Installation as a composer dependency (with child theme) is also documented.

  • Sylius 1.6 : composer require sylius/bootstrap-theme:~0.1.0
  • Sylius 1.7 : composer require sylius/bootstrap-theme:~0.2.0
  • Sylius 1.8 : composer require sylius/bootstrap-theme:~0.3.0
  • Sylius 1.8, 1.9 and 1.10 : composer require sylius/bootstrap-theme:~0.4.0

Master is compatible with Sylius 1.8, 1.9 and 1.10.

  1. Copy files from repository to ./themes/BootstrapTheme

  2. Install Encore

    composer require encore
  3. Install node dependencies

    yarn add @symfony/webpack-encore sass-loader@^7.0.0 node-sass lodash.throttle -D
    yarn add bootstrap@^4.5.0 bootstrap.native@^3.0.0 glightbox axios form-serialize @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons popper.js
  4. Import bootstrap-theme config in the main webpack file

    # ./webpack.config.js
    const Encore = require('@symfony/webpack-encore');
    const bootstrapTheme = require('./themes/BootstrapTheme/webpack.config');
    module.exports = [bootstrapTheme];
  5. Edit project config files

    # ./config/packages/assets.yaml
                    json_manifest_path: '%kernel.project_dir%/public/bootstrap-theme/manifest.json'
    # ./config/packages/webpack_encore.yaml
        output_path: '%kernel.project_dir%/public/build'
            bootstrapTheme: '%kernel.project_dir%/public/bootstrap-theme'
    # ./config/packages/_sylius.yaml
        legacy_mode: true # for sylius 1.9 and 1.10
  6. To build the assets, run one of the following commands

    # compile assets once
    yarn encore dev
    # recompile assets automatically when files change
    yarn encore dev --watch
    # recompile assets automatically with live reload
    yarn encore dev-server
    # create a production build
    yarn encore production
  7. Change theme in the admin panel by visiting the Edit Channel page




Product show

Product page


Cart page

Checkout bar

Checkout bar

Changing the theme

Changing the theme


  1. Run composer create-project sylius/bootstrap-theme ProjectName or clone this project

Quickstart Installation (docker)

  1. From the plugin skeleton root directory, run the following commands:
sudo chmod -Rf 777 tests/Application/var
sudo chmod -Rf 777 tests/Application/public/media
docker-compose exec php php -d memory_limit=-1 /usr/bin/composer install
docker-compose exec nodejs yarn --cwd tests/Application install
docker-compose exec php tests/Application/bin/console doctrine:database:create --if-not-exists -vvv
docker-compose exec php tests/Application/bin/console doctrine:schema:create -vvv
docker-compose exec php tests/Application/bin/console assets:install tests/Application/public -vvv
docker-compose exec nodejs yarn --cwd tests/Application build
docker-compose exec php php -d memory_limit=-1 tests/Application/bin/console cache:warmup -vvv
docker-compose exec php tests/Application/bin/console sylius:fixtures:load -n

Quality tools

docker-compose exec php composer validate --ansi --strict
docker-compose exec php php -d memory_limit=-1 vendor/bin/behat --profile docker --colors --strict -vvv -f progress --no-interaction --tags="@javascript && ~@todo && ~@cli"

ProTip use Makefile ;)

Quickstart Installation (legacy)

  1. From the plugin skeleton root directory, run the following commands:

    $ (cd tests/Application && yarn install)
    $ (cd tests/Application && yarn build)
    $ (cd tests/Application && APP_ENV=test bin/console assets:install public)
    $ (cd tests/Application && APP_ENV=test bin/console doctrine:database:create)
    $ (cd tests/Application && APP_ENV=test bin/console doctrine:schema:create)

To be able to setup a plugin's database, remember to configure you database credentials in tests/Application/.env and tests/Application/.env.test.


Running plugin tests

  • Behat (non-JS scenarios)

    vendor/bin/behat --strict --tags="~@javascript"
  • Behat (JS scenarios)

    1. Install Symfony CLI command.

    2. Start Headless Chrome:

    google-chrome-stable --enable-automation --disable-background-networking --no-default-browser-check --no-first-run --disable-popup-blocking --disable-default-apps --allow-insecure-localhost --disable-translate --disable-extensions --no-sandbox --enable-features=Metal --headless --remote-debugging-port=9222 --window-size=2880,1800 --proxy-server='direct://' --proxy-bypass-list='*'
    1. Install SSL certificates (only once needed) and run test application's webserver on
    symfony server:ca:install
    APP_ENV=test symfony server:start --port=8080 --dir=tests/Application/public --daemon
    1. Run Behat:
    vendor/bin/behat --strict --tags="@javascript"

Opening Sylius with your plugin

  • Using test environment:

    (cd tests/Application && APP_ENV=test bin/console sylius:fixtures:load)
    (cd tests/Application && APP_ENV=test bin/console server:run -d public)
  • Using dev environment:

    (cd tests/Application && APP_ENV=dev bin/console sylius:fixtures:load)
    (cd tests/Application && APP_ENV=dev bin/console server:run -d public)