ssossossosso
Documentation Home »User Guide »System Configuration »General OroCommerce Configuration »OroCommerce Design: Theme
current version

OroCommerce Design: Theme

In your Oro application, you can control and customize the front store look and feel.

This can be done on three levels – globally, per organization and website.

Configure Theme Globally

You can set the following theme-related options that apply globally by default:

  • Pre-designed theme for the front store
  • The layout for the product page details (default tabbed view, short, two column, or list)
  • Style of the selector in filters
  • Display mode for the user menu on the front store

To configure the front store theme options globally:

  1. Navigate to System > Configuration in the main menu.
  2. Select Commerce > Design > Theme in the menu to the left.

Note

For faster navigation between the configuration menu sections, use Quick Search.

The following page opens:

  1. In the Theme Settings section, select the theme from the list. The theme controls general design of the front store that defines its look and feel. Default, blank, and custom themes are available out of the box for the front store.

    For example, this is how the address book looks in the front store when for the default and custom themes:

    Default theme

    Custom theme

  2. In the Page Templates section, select the product page template from the list.

    This page template is used to render the product page in the front store by default, unless the template is overridden in the product details.

    Default template (tabbed), Short page, Two-column page, and List page templates are available out of the box. For preview and more information on these options, see the Manage Product Page Design with Page Templates topic.

    Select the Use Parent Scope Value check box to use the default value.

  3. In the Filter Settings section, specify how the multi-select filters should look in the front store. Available options are Drop-down and All at once.

    For example, this is how the user menu looks for different values:

    Drop-down

    All at once

  4. In the Menu Templates section, select the user menu display mode that defines the look and feel of the user menu in the front store.

    For example, this is how the user menu looks for different values:

    Show all items at once

    Show subitems in a popup

  5. Click Save Settings.

Configure Theme per Organization

You can set the following theme-related options for the organization to override global configuration:

  • Pre-designed theme for the front store
  • The layout for the product page details (default tabbed view, short, two column, or list)
  • Style of the selector in filters
  • Display mode for the user menu on the front store
  1. Navigate to System > User Management > Organizations in the main menu.
  2. For the necessary organization, hover over the More Options menu to the right of the necessary organization and click to start editing the configuration.
  3. Select Commerce > Design > Theme in the menu to the left.

Note

For faster navigation between the configuration menu sections, use Quick Search.

  1. Select the necessary theme, product page template, filter selector and user menu display mode. Refer to the :ref:` <configuration–commerce–design–theme–theme-settings–globally>` for available options and their impact on the front store look and feel.
  2. Click Save Settings.

Configure Theme per Website

You can set the following theme-related options for the website to override global configuration:

  • Pre-designed theme for the front store
  • The layout for the product page details (default tabbed view, short, two column, or list)
  • Style of the selector in filters
  • Display mode for the user menu on the front store
  1. Navigate to System > Websites in the main menu.
  2. For the necessary website, hover over the More Options menu to the right of the necessary website and click to start editing the configuration.
  3. Select Commerce > Design > Theme in the menu to the left.

Note

For faster navigation between the configuration menu sections, use Quick Search.

  1. Select the necessary theme, product page template, filter selector and user menu display mode. Refer to the :ref:` <configuration–commerce–design–theme–theme-settings–globally>` for available options and their impact on the front store look and feel.
  2. Click Save Settings.