Storefront UI¶

Layouts System¶

OroCommerce storefront templating is based on the Layouts system of OroPlatform.

The advantage of the OroPlatform Layouts system over regular Symfony templating lies in the possibility of making unlimited adjustments to the appearance with the help of independent bundles.

Thanks to the OroPlatform Layouts system, for instance, any number of third-party bundles in OroCommerce can change and extend the storefront Product Details view page without any of these bundles knowing about each other’s existence.

Theming¶

OroCommerce application organizes layouts and assets files in themes. Out-of-the-box, it comes with three themes: basic, default, custom.

We recommend creating your own theme if you want to customize OroCommerce out-of-the-box 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 conveniently switch to the core themes with a few clicks.

CSS and Images¶

CSS and template images are included as assets in themes and declared in the theme configuration files.

All out-of-the-box themes have an adaptive design based on Bootstrap Toolkit.

Oro applications use SCSS syntax of SASS preprocessor to define CSS. Thanks to this, many storefront appearance customization tasks can be performed by changing the value of SCSS variables.

Please, refer to CSS and Images section for more details.

Storefront Customization¶

Examples of how to use technologies used in the storefront in concrete customization tasks are provided in the Storefront Customization section.

Further Reading:

• Slideshare: Using Oro Layouts