Virtual themes in Magento 2

Joaquín Ruiz - 19th August 2019

Virtual themes in Magento 2
  • Date:   19th August 2019
  • Category:

      Magento 2

  • Comments:

      0

A theme is a component of Magento which provides a custom look and feel for the entire application area (frontend, backend) using a combination of templates, layouts, styles, javascript, and images.

They are designed to override or make custom view resources, provided initially by modules or libraries. Also, your new theme can be a standalone new theme, or it can inherit from the default or any other existing one. This is because you can use the theme inheritance concept implemented in Magento, that allows you to change only certain theme files.

Sure you knew all of this… and now, What is a Virtual theme?

Magento 2 theme types

There are three different types of Magento 2 themes, as we can see in

Magento/Framework/View/Design/ThemeInterface
    /**
     * Physical theme type
     */
    const TYPE_PHYSICAL = 0;
    /**
     * Virtual theme type
     */
    const TYPE_VIRTUAL = 1;
    /**
     * Staging theme type
     */
    const TYPE_STAGING = 2;

Physical theme

A physical theme is a normal theme, it refers to the fact that those themes are defined by files. For example, the Blank and Luma themes that come by default in Magento 2, and are physically defined under:

app/design

Virtual theme

A virtual theme would be (if I am not mistaken) a theme that extends existing physical themes, but it is not fully implemented yet. Actually, when you select a virtual theme, you can see there’s two tabs available in the edit section. Then those tabs let you provide custom CSS and JS.

So you could create for example a virtual theme that extends from some physical theme with custom CSS and JS for Xmas or Sales.

Then, the only way to set up a virtual theme is directly from the database:

INSERT INTO `theme` (`theme_id`, `parent_id`, `theme_path`, `theme_title`, `preview_image`, `is_featured`, `area`, `type`, `code`) VALUES (NULL, '1', NULL, 'test', NULL, '0', 'frontend', '1', 'misco/jones');

Why my theme changes don’t show up in the front-end?

Your theme might have become virtual, check on the ‘theme’ table of your database the type of your theme, and change the type to ‘0’.

Why my theme changes don't show up in the front-end?
Why my theme changes don’t show up in the front-end?

How did it happen? You are probably working with Git, you may end up for a moment in a branch without the theme folders and somehow loaded the front-end, for that moment. Therefore Magento saw there were no files, and change the theme to virtual.

Staging theme

And finally, what is a Staging theme? Well.. I have no idea 😀

Did you know it? Do you know what a Staging theme is? Leave a comment, and share the post!

The Author

Joaquín Ruiz (aka Joki)
Joki is a Computer Engineer, Senior Full-Stack Developer and Lead Developer, specialized in web and e-commerce. Joki has also a wide international experience as freelance and working in agencies.