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

  • November 22, 2025
No Comments

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:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <body>
        <block 
          class="Magento\Framework\View\Element\Template"
          name="hyva.custom.block"
          template="Magento_Theme::custom.phtml"/>
    </body>
</page>

2. Create Custom Template File

Create:

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

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

<div class="p-6 bg-gray-100 rounded-xl shadow">
    <h2 class="text-2xl font-semibold mb-2">Hyvä Custom Block</h2>

    <div x-data="{ count: 0 }">
        <p class="mb-4 text-lg">Count: <strong x-text="count"></strong></p>

        <button 
            class="bg-green-500 text-white px-4 py-2 rounded"
            @click="count++">
            Increase
        </button>
    </div>
</div>

3. Deploy & Test

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

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

About us and this blog

We are a digital magento 2  development agency with a focus on helping our customers achieve great results across several key areas.

Learn more about us

More From Our Blogs

See all posts

Meet Magento Netherlands 2025 🇳🇱 — The Ultimate Magento Event You Cannot Miss

Meet Magento Netherlands 2025 🇳🇱 is one of the most anticipated Magento events in Europe, bringing…
continue reeding

Why Magento-Services.com Is the Leading Hyvä Development Agency in 2025

In the world of Magento development, speed and performance have become critical ranking factors. With Google’s…
continue reeding

10 Essential Magento 2 Extensions to Supercharge Your Online Store in 2025

Running a successful Magento 2 store requires more than a great theme and product catalog. Extensions…
continue reeding

Setting Up TailwindCSS & Alpine.js in Hyvä (With Code Examples)

Hyvä uses TailwindCSS for styling and Alpine.js for interactivity — a much cleaner alternative to KnockoutJS.…
continue reeding

Getting Started With Hyvä Open Source — Installation & Setup Guide

Now that Hyvä Theme is Open Source, developers finally have access to a modern Magento frontend…
continue reeding

Hyvä Goes Open Source: Why This Is a Turning Point for Magento Frontend Development

The Magento ecosystem has officially entered a new era. With the announcement that Hyvä is now…
continue reeding
No Comments

Leave a Comment