Important

You are browsing documentation for version 5.0 of OroCommerce, supported until January 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Themes

A theme is a collection of files that declares a visual presentation for a group of pages. You can think of a theme as the skin for your application.

Files that the theme consists of are layout updates, styles, scripts, and anything else related to the look and feel of the page.

Out-of-the-box, OroCommerce comes with three themes: blank, default, custom.

We recommend creating your own theme if you want to customize out-of-the-box OroCommerce storefront. To create your own theme, you have to choose one of the three base themes as the parent for your own.

You can customize the core themes, but creating your own theme will enable you to switch to the core themes with a few clicks conveniently.

Theme Definition

To define a new theme, it is enough to create a theme configuration file in the theme folder.

A theme folder

must have a unique name
must match the [a-zA-Z][a-zA-Z0-9_-:]* pattern
must be placed in the Resources/views/layouts folder of the bundle

An example of a theme folder is DemoBundle/Resources/views/layouts/first_theme/.

The theme folder name becomes the theme ID.

The theme configuration file should be placed in the theme folder and named theme.yml, for example, DemoBundle/Resources/views/layouts/first_theme/theme.yml.

The allowed options in the theme configuration file is the following:

Option	Description	Required
label	The label displayed in the theme management UI.	yes
logo	The logo displayed in the UI.	no
parent	Parent theme identifier	no
groups	Group name or names for which it is applicable. Use `commerce` group for an OroCommerce application	no
rtl_support	Defines whether Theme supports RTL and additional *.rtl.cssfiles have to be build	no

Example:

#DemoBundle/Resources/views/layouts/first_theme/theme.yml
label:  First Theme
logo:   bundles/demo/themes/images/logo.png
parent: default
groups: [ commerce ]
rtl_support: true

w here first_name is a unique theme identifier.

Enable the Theme

Add the theme name to the following configuration in the config/config.yml file in an application, and remove themes that the application does not use:

#config/config.yml
oro_layout:
    enabled_themes:
         - first_theme
         - view-switcher

The view-switcher theme is required for the management of CMS pages and should always be enabled.

Activate the Theme

From the Code

To set a default storefront theme on the code level, add the following configuration to the config/config.yml file in an application:

#config/config.yml
oro_layout:
    active_theme: first_theme

where first_theme is the theme folder name.

From UI

To change the theme from the back-office, refer to Theme section.

To get the full configuration reference, run the oro:layout:config:dump-reference command which dumps the reference structure for Resources/views/layouts/THEME_NAME/theme.yml:

php bin/console oro:layout:config:dump-reference

Theme Layouts Directory Structure

This is a typical theme directory structure, where AcmeDemoBundle is a bundle name:

DemoBundle/
  Resources/
    public/                  # Files that will be copied to
      scss/                  # `public/bundles` folder in an application
      js/
      images/
    views/
      layouts/
        first_theme/         # Theme name
          theme.yml          # Theme definition
          config/
            assets.yml       # SCSS configuration
            jsmodules.yml    # JS modules configuration
          layout_update1.yml # Layout updates applied for all the pages
          layout_update2.yml
          oro_shopping_list_frontend_view/ # Layout updates applied only for
            layout_update.yml              # `oro_shopping_list_frontend_view` route
          ...

Built-in OroCommerce Themes

Out-of-the-box, the OroCommerce application comes with three predefined storefront themes: blank, default, and custom.

The blank theme is a simple theme aimed at providing the base for future decorations.
The default theme is a fully featured theme that extends the blank theme and provides the complete look and feel for the OroCommerce storefront UI out-of-the-box.
The custom theme is a sample that illustrates how to build your own custom theme.

The blank and default themes are aimed to be base for any customizations.