Edit in GitHubLog an issue

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:
  5. Customize styles. To learn how, check out the following sources:

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.

Storefront with Luma applied

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.

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.