Blue background with pattern

Hyva: Always copy the default theme when starting

Hyva
Wouter SteenmeijerOrange dot15 Jul 2024

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

I'm willing to argue that in almost all cases it's better to just start with duplicating the Hyva/default theme and rename the theme. This has many benefits, like a clean tailwind.config.js, all elements are not styled anymore so it's easy to see if you need to work on that. 

But, the main benefit is that you'll make sure this way that no branding elements are leaking into the new design. For example when hyva is using “text-red-600” you want to make sure that this color is the exact color that your client is using in their brand strategy. Obviously this also goes for fontsize, leading, headings, border-colors, etc. My personal experience is that the shop just doesn't feel “finished” when this is not exactly matched from the customer's brand book.

Yes. This will take some extra time during development when Hyva rolls out a big theme update. However, with tools like our upgrade tool, you'll scroll through every changed file with great ease.