Creating Your First Custom Hyvä Template (Step-by-Step)

In this third part of the series, we build a custom block + template using Hyvä’s lightweight architecture.

---

1. Create a Custom Layout File

Create:

app/design/frontend/Hyva/default/Magento_Theme/layout/default.xml

Add:

---

2. Create Custom Template File

Create:

app/design/frontend/Hyva/default/Magento_Theme/templates/custom.phtml

Add simple Hyvä-style HTML + Tailwind + Alpine.js:

    
Hyvä Custom Block

    

        
Count: 

        
            Increase
        
    

---

3. Deploy & Test

php bin/magento s:s:d -f
php bin/magento cache:flush

Open the frontend — your custom Hyvä component is live.