Important

You are browsing upcoming documentation for version 6.1 of OroCommerce, scheduled for release in 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.

Theme Configuration 

Theme configuration enables you to manage your website’s storefront look and feel, customize menus in the header, select the way the main navigation menu is displayed, choose the layout for the product page details, etc.

Note

To customize the storefront theme for 5.1 and earlier versions of OroCommerce, please refer to the theme system configuration settings.

To configure your current storefront theme:

  1. Navigate to System > Theme Configurations in the main menu.

  2. There is a list of storefront themes configured by a developer for your website. By default, there is a new 6.1 Refreshing Teal theme, but there can also be your backup themes from the previous versions of OroCommerce.

  3. You can create a new configuration of the existing theme by clicking Create Theme Configuration on the top right or edit any existing theme configuration by clicking to the right of the theme.

The list of existing theme configurations

  1. In the General section, configure the following options:

    Theme configuration details

    • Owner — Select the owner responsible for the theme configuration.

    • Theme — Select the storefront theme from the list. The default theme starting from version 6.1 LTS is Refreshing Teal. However, if you select one of your backup themes from the previous OroCommerce LTS versions, the settings under the Configuration menu below will become disabled. You can still configure them under the theme system configuration settings.

    Theme configuration details when the default 5.0 theme is selected

    • Name — Specify the name for the theme to distinguish it from other themes.

    • Description — Type a short but meaningful description that can help you and other users understand the specifics of the theme.

    • Type — Select the theme type. Currently, only storefront themes are available for configuration.

  2. In the Configuration section, customize the following options. You can preview each menu configuration setting to visualize what the option does and where the selected storefront menu will be positioned.

    • Promotional Content — Select a content block from the dropdown list to display it at the top of the storefront header.

    Promotional content configuration and representation in the storefront header Top navigation menu representation in the storefront header

    • Quick Links Menu — The top level items from the selected storefront menu will be added to the header to provide quick access to the most frequently used pages. Please see the concept guide on storefront menu items to learn more about each menu.

    Quick Links Menu representation in the storefront header

    • Quick Access Button — The quick access button can either open an additional storefront menu, be a direct shortcut to the product catalog, or another important section of the website. Select the type of the quick access button and specify the name to display it in the storefront header.

    Quick access button representation in the storefront header

    • Language And Currency Switchers — Select where you want to place the language and currency switcher. When Above the header option is selected, the language and currency switchers are rendered above the header on the devices with the sufficient screen width. On smaller screens the language/currency switchers will be placed inside the “hamburger” menu (product catalog).

    Two representations of language and currency switchers in the storefront

    • Standalone Main Menu — Enable the setting to let the main menu be rendered separately and to provide easy access to its top level items on the devices with sufficient screen width. On smaller screens the main menu will be placed inside the “hamburger” menu.

    • Search on Smaller Screens — Select the way the search is going to be represented on devices with small screens. The search input can either be rendered in its own row to provide easy access to global search (standalone), or in line with the shopping list item (integrated).

    Two representations of search on small screens in the storefront

    • Use Pagination Input if Number of Pages Exceeds — Set the threshold for a number of pages, at which a pagination input field will appear. If the total number of pages exceeds this specified number, the system will display a pagination input, allowing users to directly enter a page number and quickly navigate to it, rather than clicking through each page individually.

    • CSS Variables Configuration — This option includes all the CSS variables that frontend developers use to define the theme in the storefront. These variables are made available here for easier access, allowing administrators to fine-tune the website’s storefront appearance directly. Currently, all variables are rendered as text inputs, and basic validation is in place. However, future updates will enhance validation to ensure that values entered match the allowed CSS properties. The list of supported CSS variables includes: css_background, css_border_radius, css_box_shadow, css_color, css_font_size, css_gap, css_length, css_line_height, css_min_height, css_outline, css_padding, and more.

    CSS variables configuration represented as as text inputs to be filled by back-office users

    • Product View Page Template — Select the product page template from the list. A page template is used to render the product page in the storefront by default, unless the template is overridden in the product details. Available options are Default, Tabs, and Wide.

      Default Template:

      ../../../../_images/default-page-template.png

      Tabs (Additional Attribute Groups Are Displayed In Tabs):

      ../../../../_images/tabbed-page-template.png

      Wide (Additional Attribute Groups Are Displayed In Collapse One Below Another For Full Page Width):

      ../../../../_images/wide-page-template.png

    • Display Price Tiers As — Select a multi or single unit table. A multi-unit table shows price tiers for all product units in the same table, which might not work well for products with many units or when quantity tiers are not aligned between units. Single-unit table shows price tiers only for the currently selected unit.

    • Filter Panel Position — Specify where the filter panel should be represented in the storefront. Available options are Top, Sidebar and Overlay.

    Three representations of filter panel positions in the storefront

    Hint

    To specify how to display the multi-select filter options, refer to the theme-related settings.

    To control whether to hide or disable product attributes within filters, refer to the filters and sorting settings documentation.

  3. Click Save Settings.

Once saved, you can now enable your theme configuration under the theme system settings on the required level: globally, per organization or website.