Blue background with pattern

Hyva: Always copy the default theme first

Hyva
Wouter SteenmeijerOrange dotJul 15, 2024

First, a little background. According to the documentation you can find here, a good practice is to start by setting up your Hyva theme with the theme structure such as: Hyva/reset, Hyva/default-theme, Vendor/child-theme. This can be very useful if you think the TTM is very long and you expect multiple theme upgrades during the process, that you have very limited capacity to upgrade Hyva during development or your client just doesn't care about the design :)

I am willing to argue that in almost all cases it is better to just start duplicating the Hyva/default theme and rename the theme. This has many advantages, such as a clean tailwind.config.js, all elements are no longer styled, so it's easy to see if you need to work on that or not.

But, the most important benefit is that this way you ensure that no branding elements leak into the new design. For example, if Hyva uses "text-red-600," you want to make sure that this color is exactly the color your client uses in their branding strategy. Of course, the same goes for font size, line spacing, headings, border colors, etc. My personal experience is that the store just doesn't feel "finished" if this doesn't exactly match the client's brand book.

Yes. This will take some extra time during development when Hyva rolls out a major theme update. However, with tools such as our upgrade helper, you will scroll through each modified file with great ease.