Creating a custom Hyvä theme in Magento 2

Creating your own theme in Hyvä can be a rewarding experience, especially if you’re looking to customize your Magento 2 store with performance and design flexibility in mind. Hyvä Theme, known for its lightweight and speed-focused architecture, provides a robust framework for developers who want to create highly optimized and visually appealing Magento stores. This guide will walk you through the steps to create your own theme in Hyvä Theme.

What is Hyvä Theme?

Hyvä Theme is a modern alternative to the default Magento Luma theme, designed to improve front-end performance and simplify development. It leverages Tailwind CSS and Alpine.js, replacing the default Magento front-end stack with a leaner, more efficient setup.

Prerequisites

Before starting, ensure you have the following:

• A working Magento 2 environment.
• Basic knowledge of Magento 2 theming.
• Access to the Hyvä Theme package (licensed purchase).
• Familiarity with Tailwind CSS and Alpine.js.

Step 1: Install Hyvä Theme

If you haven’t installed the Hyvä Theme yet, follow these steps:

1. Purchase a License: Start by purchasing a Hyvä Theme license from the official Hyvä website.

2. Install Hyvä: Use Composer to install the Hyvä Theme. Run the following

composer require hyva-themes/magento2-default-theme

3. Enable the Theme: Once installed, enable the Hyvä Theme using Magento CLI

bin/magento module:enable Hyva_Theme
bin/magento setup:upgrade
bin/magento setup:static-content:deploy
bin/magento cache:flush

Step 2: Create Your Custom Theme Directory

To create your custom Hyvä theme, start by setting up a new directory in the app/design/frontend directory.

1. Create Directory Structure:
Navigate to app/design/frontend and create a directory for your theme, e.g., VendorName/ThemeName:

mkdir -p app/design/frontend/VendorName/ThemeName

2. Create theme.xml:
Inside your theme directory, create a theme.xml file to define your theme’s basic information:

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Your Theme Title</title>
    <parent>Hyva/default</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

• Replace "Your Theme Title" with the desired name of your theme.
• The <parent> tag should reference Hyva/default to inherit Hyvä’s functionalities.

3. Create registration.php:
This file registers your theme with Magento. Create registration.php in the theme directory:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/VendorName/ThemeName',
    __DIR__
);

4. Create composer.json:
Define your theme’s dependencies and metadata in composer.json:

{
    "name": "vendorname/themename",
    "description": "A custom Hyvä theme.",
    "require": {
        "php": "^7.3 || ^8.0",
        "hyva-themes/magento2-default-theme": "^1.0"
    },
    "type": "magento2-theme",
    "license": "OSL-3.0",
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Step 3: Customize Your Theme

Now that your theme structure is set up, you can start customizing it.

1. Tailwind CSS Configuration:
Hyvä Theme uses Tailwind CSS for styling. To customize it, create a tailwind.config.js file in your theme’s root directory:

module.exports = {
    purge: [
        './app/design/frontend/VendorName/ThemeName/**/*.phtml',
        './app/design/frontend/VendorName/ThemeName/web/**/*.js',
        './app/design/frontend/VendorName/ThemeName/web/**/*.html',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

• Update the purge paths to point to your theme’s directories.

2. Override Layouts and Templates:
You can override default Hyvä templates by placing them in the appropriate directory structure. For example, to override the header.phtml file, place your custom template in:

app/design/frontend/VendorName/ThemeName/Magento_Theme/templates/html/header.phtml

3. Add Custom JavaScript:
If you need to add custom JavaScript, create a web/js directory and place your JS files there. Hyvä uses Alpine.js, so you can write Alpine.js components to manage interactivity.

4. Deploy Static Content:
After making changes, deploy the static content to see your theme in action:

Step 4: Activate Your Theme

To activate your new custom theme, go to the Magento Admin Panel:

1. Navigate to Content > Design > Configuration.
2. Edit the desired store view.
3. Select your custom theme under the “Applied Theme” dropdown.
4. Save the changes.

Conclusion

Creating your own theme in Hyvä Theme allows you to harness the power of a modern, performance-focused framework while still enjoying the flexibility Magento 2 offers. By following these steps, you can set up a custom theme that not only enhances the user experience but also aligns with your brand’s identity.

Happy theming!