2. Building your Theme
Creating your own Themes
There are two approaches to creating your own theme:
- You can create a child theme, the same way default Magento works
- You can create a duplicate of the
hyva-themes/magento2-default-themeand modify that
How to choose between a child theme or a duplicate:
If you are just getting started with Hyvä you probably want to start with the first approach.
If you want to heavily customize and optimize your Hyvä Theme, you might want to go for approach 2.
You can always start with a child theme and switch strategies in a later stage, by creating a new parent theme that is a copy of the default theme, and optimize that parent theme.
Creating a Child Theme
Follow the instructions from The official Magento Docs to create a new theme.
Set the parent theme to
Theme Preview Image
Please note we ship with a
preview.png file instead of
preview.jpg, which is referenced in the theme’s
You should copy over the
web directory from the parent theme
vendor/hyva-themes/magento2-default-theme/web/ to your own child theme
Next you must configure the parent theme path in the
web/tailwind/tailwind.config.js file of your child theme.
For example, if your child theme
tailwind.config.js file is
app/design/frontend/Acme/default/web/tailwind/tailwind.config.js , then configure the parent theme with:
If you want to further optimize the purging of Tailwind CSS, please refer to this (advanced) doc: advanced purging methods.
Extending your theme works just like with default Magento Themes. You can override
.pthml files and extend layout xml the same way as you could with a default Magento theme based on Luma.
Creating a Duplicated Theme
Why would you want to create a Theme duplicate instead of a Child Theme?
The reason you might not want to inherit from the
Hyva/default theme is that you will likely end up with a lot of unused tailwind classes. The CSS-classes used in the parent theme, that are overwritten in the child theme will still be generated in the final Tailwind CSS file, because of the way purging works.
You will need to be comfortable with advanced purging methods to inherit from the
Hyva/default theme and at the same time avoid adding any unused tailwind classes if you want to work with child themes instead.
Creating a Hyvä Base Theme
You can create your own base theme either in
app/design/frontend or in a
To do this, copy the
Hyva/default theme into your desired location. In this example we’ll assume you’re using
composer.json files to reflect your theme name.
Editing layout in your Hyvä Base Theme
All layout in your theme lives in the base theme you created. The
Hyva/reset theme creates an empty layout with containers only. No blocks are declared in the reset theme.
That means, if you remove a layout xml file from your theme, the blocks are entirely gone from the frontend.
Removing blocks is still an option, but removing them is a perfect solution to create the smallest amount of code you need to build your template.
In case you where wondering,
<referenceBlock name="block.name" remove="true"/> works, but you may also delete the original
<block name="block-name"> from layout.
If you where not wondering, don't worry.