Configure Global Theme Settings
In your Oro application, you can control and customize the storefront look and feel.
Hint
Theme is configurable on three levels – globally, per organization and website.
You can set the following theme-related options that apply globally by default:
Pre-designed theme for the storefront
The layout for the product page details
Style of the selector in filters
Display mode for the user menu in the storefront, and more
To configure the storefront theme options globally:
Navigate to System > Configuration in the main menu.
Select Commerce > Design > Theme in the menu to the left.
Note
For faster navigation between the configuration menu sections, use Quick Search.
In the Theme Settings section, configure the following options:
Theme — select the storefront theme from the list. The default theme starting from version 6.1 LTS is Refreshing Teal.
Product Image Placeholder — select the image file that will appear on the product listing and product view pages for the products that have no associated images to avoid a blank image page.
Category Image Placeholder — select the image file to be applied to the category that has no associated image. The image is usually used in various category widgets (e.g., Featured Categories).
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.
In the Header section, configure the following options for the storefront design:
Promotional Content — select a content block that will be rendered above the header. The provided content must be sized properly to fit into the designated area.
Top Navigation Menu — select the menu that will be rendered above the header. Please see the documentation on storefront menu items to learn more about each menu.
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).
Standalone Main Menu — select how you want to display your product catalog menu. It can either be rendered separately to provide easy access to its top level items on the devices with sufficient screen width, or combined with other navigational elements in the “hamburger” menu.
Quick Access Button — The quick access button can either open an additional menu, be a direct shortcut to the product catalog or another important section of the website.
Quick Links — The top level items from the selected menu will be added to the header to provide quick access to the most frequently used pages.
Search on Smaller Screens — On smaller screens the search input can be rendered in its own row to provide easy access to global search.
In the Page Templates section, select the product page template from the list. Available options are Default, Tabs, Wide.
A page template is used to render the product page in the storefront by default, unless the template is overridden in the product details.
Default:
Tabs:
Wide:
In the Filter Settings section, specify how the multi-select filters should look in the storefront. Available options are Drop-down and All at once.
In the Grid Settings section, configure the following options:
Responsive Grids — This option makes storefront grids responsible, realigning row cells to fit various screen sizes.
Swipe Actions Grids — This option enables swipe actions for the storefront grids on mobile devices.
Click Save Settings.