Quickstart

This chapter combines the topics aiming to help you to quickly start working with styles of your custom theme:

• Simple ways to customize a theme's styles
• Simple style changes with client-side Less compilation vs. server-side

Steps to create a theme and change styles

1. Set your application to the developer mode.
2. In the file system, add a new theme inheriting from Blank or Luma.
3. Apply your theme
4. Decide which CSS compilation mode you will use. Compilation modes are described in the following topics:
   • Detailed description: Styles debugging
   • Practical illustration: Simple style changes with client-side Less compilation vs. server-side
5. Customize styles. To learn how, check out the following sources:
   • CSS chapter of this book
   • Simple ways to customize a theme's styles

Why do you need to create a custom theme?

The application provides two themes out of the box: Blank and Luma. If the application is installed with sample data, the theme applied after installation is Luma. If no sample data is installed, the Blank theme is installed by default.

Luma inherits from Blank, which contains all the basic functionality and styling required for a theme.

You can use either Luma or Blank for your storeview, if there is literally nothing you want to change in their design.

But if there is something you want to improve, the only recommended way is creating a new theme. It can inherit from Blank or Luma so you can preserve all you need, and change or add whatever is required.

Making changes in the out-of-the-box themes is a bad idea, because can result in your changes being overwritten during upgrade.

Last updated 9/11/2023

Was this helpful?

Yes

No