Skip to content

Configure the default OroCommerce theme from the user interface without writing any code. Set multiple theme options (logo, colors, font, styling) and customize visual representation of the storefront.

License

Notifications You must be signed in to change notification settings

yshyshkin/DefaultThemeConfigurationBundle

Repository files navigation

OroCommerce Default Theme Configuration Bundle

The bundle allows configuring the default OroCommerce theme from the user interface without writing any code. It allows setting multiple theme options (logo, colors, font, styling) and customize visual representation of the storefront.

The bundle is compatible both with the Community Edition and Enterprise Edition of OroCommerce.

How To Install The Bundle

Open the OroCommerce application root and run the following command:

composer require ys-tools/default-theme-configuration-bundle

If the application is already installed, then cache has to be cleared manually, assets have to be rebuilt, and application has to be upgraded:

rm -rf var/cache/prod
php bin/console oro:assets:install --env=prod
rm -rf var/cache/prod
bin/console oro:platform:update --force --env=prod

Where Is Configuration?

The default theme configuration has to be set in System Configuration. It can be found in the management console menu System > Configuration inside the Commerce > Design > Default Theme Configuration section.

Configuration Placement

What Options Can Be Configured?

There are many visual options split into several groups. Community Edition supports only global configuration, while Enterprise Edition supports both global and website level configuration.

Logo Configuration

Logo Configuration

Company Logo sets company logo in the application header. Logo is automatically resized to 50 pixels in height to fit the header

Company Name sets alternative text for the company logo

Favicon sets application favicon. The image is automatically resized to 64x64 size

Logo Configuration Example

Main Colors

Main Colors

Header And Footer Background Color sets the background color of both header and footer of the page

Header And Footer Text Color sets the color of text (both plain and links) in the header and footer of the page

Table Header Background Color sets the background color of standard table headers

Table Header Text Color sets the color of the text used in standard table headers

Main Colors Example

Secondary Colors

Secondary Colors

Icon Background Color sets the background color of icon and icon based elements

Icon Content Color sets the color of icon and icon based elements

Form Background Color sets the background color of the forms and similar elements

Link Color sets the color of links and interactive elements (radio buttons, checkboxes)

Secondary Colors Example

Menu Colors

Menu Colors

Main Menu Background Color sets the background color of the main menu

Main Menu Text Color sets the text color of the main menu

Secondary Menu Background Color sets the background color of the secondary menus and similar elements

Secondary Menu Text Color sets the text color of the secondary menus and similar elements

Menu Colors

Button Colors

Button Colors

Main Button Background Color sets the background color of main buttons (Submit, Yes, Confirm)

Main Button Text Color sets the text color of main buttons

Secondary Button Background Color sets the background color of secondary buttons (Cancel, No, Decline)

Secondary Button Text Color sets the text color of secondary buttons

Button Colors Example

Additional Styling

Additional Styling

External Stylesheets adds multiple external stylesheets as link tags

Font Family sets the predefined font used all over the storefront

Custom Font Family sets the custom font used all over the storefront, overrides Font Family

Additional Styling Example

CSS Styling

CSS Styling

Global Styling adds custom CSS styles to all storefront pages

Home Page Styling, Product Listing Page Styling, Product Details Page Styling, Quick Order Form Styling, Shopping List Styling, Checkout Styling add custom CSS styles to appropriate pages, these styles put after the global styling and may override it

CSS Styling Example

Email Templates

CSS Styling

Enable Email Template Wrapper enables custom email template wrapper for all standard emails

Email Template Wrapper contains HTML content of the email wrapper. Please do not forget to verify that all links are static

CSS Styling Example

How To Thank The Author

If this bundle helped you and you are feeling generous today, then you can thank the author and support this initiative using one of the following buttons.

Support

About

Configure the default OroCommerce theme from the user interface without writing any code. Set multiple theme options (logo, colors, font, styling) and customize visual representation of the storefront.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published