How to Create a Custom Hyvä Theme

Creating a custom theme using the Hyvä frontend in Magento 2 involves several steps. It includes setting up the development environment, creating and enabling the child Hyvä theme, and more. Following them is important to create a proper and effective custom Hyvä theme for your store.

So, this tutorial walks you through each step so you can easily develop a custom Hyvä theme with a unique, high-performance design tailored to your store. However, before getting started, make sure that you meet the following requirements:

Prerequisites

• Magento 2.4.3 CE or higher
• A valid license for Hyvä Themes, please view https://hyva.io/license
  • For licensees: A Private Packagist Key
  • For partners: Access to Hyvä Gitlab
• PHP 7.4, 8.1 or 8.2
• Node.js v20.17.0(LTS) (as of August 2024)

Also, you need to install the following Hyvä modules:

hyva-themes/magento2-theme-module
hyva-themes/magento2-reset-theme
hyva-themes/magento2-email-module
hyva-themes/magento2-default-theme
hyva-themes/magento2-order-cancellation-webapi

How to Create a Custom Hyvä Theme

Creating a custom Hyvä theme with a unique design involves several key steps. By following this guide, you’ll be able to craft a high-performance, visually distinct theme tailored to your Magento store.

Steps to Get Started:

Step 1: Set up the development environment.
Step 2: Create a child Hyvä theme.
Step 3: Enable your custom Hyvä theme.
Step 4: Set CSS compilation paths in your custom Hyvä theme.
Step 5: Configure Tailwind.config.js for a unique design.

Let’s dive deeper into the process and explore how to bring your custom Hyvä theme to life.

Step 1: Set up the development environment

1. Ensure your Magento 2 project already has a Hyvä base (Hyvä-base) theme installed via Composer.

composer require hyva-themes/magento2-default-theme

2. Check the installed tools.

To use Alpine.js and Tailwind CSS, you will need Node.js. Verify that it is already set up on your system:

node -v

Step 2: Create a child Hyvä theme

1. Generate a new catalog for your own theme.

app/design/frontend/Plumrocket/CustomTheme

2. Create theme.xml file.

In the new directory, you need to create a theme.xml file to declare your custom theme and its parent Hyva theme:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Plumrocket CustomTheme</title>
   <parent>Hyva/default</parent>
   <media>
       <preview_image>media/preview.png</preview_image>
   </media>
</theme>

3. Create registration.php file.

The theme must be registered in the root directory of your theme Plumrocket/CustomTheme.

<?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Plumrocket/CustomTheme', __DIR__);

4. Download the theme preview image.

app/design/frontend/Plumrocket/CustomTheme/media/preview.png

5. Copy the web catalog from the Hyvä theme.

Clone the web catalog with all its files from the parent theme.

vendor/hyva-themes/magento2-default-theme/web/ into your own theme.

The Magento root command:

cp -r vendor/hyva-themes/magento2-default-theme/web/app/design/frontend/Plumrocket/CustomTheme/

Step 3: Enable child Hyvä theme for Magento 2

Activate the theme through the admin panel:

Step 4: Set CSS compilation paths in the child Hyvä theme

1. Update the paths for the child theme.

This is what the updated content section should look like:

content: [
   // this theme's phtml and layout XML files
   '../../**/*.phtml',
   '../../*/layout/*.xml',
   '../../*/page_layout/override/base/*.xml',
   // parent theme in Vendor (if this is a child-theme)
   '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
   '../../../../../../../vendor/hyva-themes/magento2-default-theme/*/layout/*.xml',
   '../../../../../../../vendor/hyva-themes/magento2-default-theme/*/page_layout/override/base/*.xml',
   // app/code phtml files (if need tailwind classes from app/code modules)
   //'../../../../../../../app/code/**/*.phtml',
]

2. Install dependencies for Tailwind.

Install dependencies for Tailwind and execute the command in the directory

app/design/frontend/Plumrocket/CustomTheme/web/tailwind to install packages:

npm install

3. Compilation of styles.

Run the command in the directory app/design/frontend/Plumrocket/CustomTheme/web/tailwind.

The following command is used to start tracking file modifications that utilize Tailwind CSS classes. It is helpful during active development when you frequently change the .phtml, .xml, or CSS files in your theme.

npm run watch

How it works:

• Track changes to files: When you modify any file that contains Tailwind classes (e.g. .phtml, .xml, or .js), Tailwind automatically generates new CSS styles based on those classes.
• Swift style updates: Tailwind uses Just-in-Time (JIT) compilation, which means that only the necessary styles are generated on the fly.

Here is the command that prepares the project for production. It optimizes styles for a productive environment.

npm run build-prod

How it works:

• CSS Purge: Tailwind CSS uses a process called purge, which removes all unnecessary CSS classes, leaving only those that are used in your code. This significantly reduces the size of the final CSS file.
• Minification: All styles are minimized and optimized to reduce file size and improve page load speed.

Step 5: Configure Tailwind.config.js for custom Hyvä theme design

The tailwind.config.js file defines the styles and adapts them to the needs of your project. It is used to extend or override the default Tailwind CSS settings. Let’s take a closer look at an example of a custom configuration for a different design:

theme: {
   extend: {
       screens: {
           'sm': '640px',
           'md': '768px',
           'lg': '1024px',
           'xl': '1280px',
           '2xl': '1536px'
       },
       fontFamily: {
           sans: ["Roboto", "Arial", "sans-serif"]
       },
       colors: {
           primary: {
               lighter: colors.indigo['300'],
               "DEFAULT": colors.indigo['600'],
               darker: colors.indigo['800']
           },
           secondary: {
               lighter: colors.teal['100'],
               "DEFAULT": colors.teal['200'],
               darker: colors.teal['300']
           },
           background: {
               lighter: colors.gray['100'],
               "DEFAULT": colors.gray['200'],
               darker: colors.gray['300']
           },
           green: colors.green,
           orange: colors.orange,
           purple: colors.purple
       },
       textColor: {
           orange: colors.orange,
           red: {
               ...colors.red,
               "DEFAULT": colors.red['500']
           },
           primary: {
               lighter: colors.black,
               "DEFAULT": colors.gray['900'],
               darker: colors.gray['700']
           },
           secondary: {
               lighter: colors.gray['500'],
               "DEFAULT": colors.gray['600'],
               darker: colors.gray['700']
           }
       },
       backgroundColor: {
           primary: {
               lighter: colors.indigo['500'],
               "DEFAULT": colors.indigo['600'],
               darker: colors.indigo['700']
           },
           secondary: {
               lighter: colors.teal['100'],
               "DEFAULT": colors.teal['200'],
               darker: colors.teal['300']
           },
           container: {
               lighter: '#ffffff',
               "DEFAULT": '#f8f9fa',
               darker: '#e9ecef'
           }
       },
       borderColor: {
           primary: {
               lighter: colors.indigo['500'],
               "DEFAULT": colors.indigo['600'],
               darker: colors.indigo['700']
           },
           secondary: {
               lighter: colors.teal['100'],
               "DEFAULT": colors.teal['200'],
               darker: colors.teal['300']
           },
           container: {
               lighter: '#dcdcdc',
               "DEFAULT": '#ced4da',
               darker: '#adb5bd'
           }
       },
       minWidth: {
           8: spacing["8"],
           20: spacing["20"],
           40: spacing["40"],
           48: spacing["48"]
       },
       minHeight: {
           14: spacing["14"],
           a11y: '44px',
           'screen-25': '25vh',
           'screen-50': '50vh',
           'screen-75': '75vh'
       },
       maxHeight: {
           '0': '0',
           'screen-25': '25vh',
           'screen-50': '50vh',
           'screen-75': '75vh'
       },
       container: {
           center: true,
           padding: '1.5rem'
       }
   }
},

Overall, this configuration file allows you to easily customize the theme to a specific design and display a unique style based on your business needs. What was done in the code snippet:

• Fonts: The Roboto font is utilized instead of the standard Segoe UI. This changes the appearance of the text on the site, making it more modern.
• Colors: The primary color has been changed to indigo, giving the site a fresh look with a cool color palette. The secondary color now uses shades of green (teal).
• Texts and backgrounds: Modifications have been made to text and background colors by using darker shades for sharp contrast and improved readability.
• Containers: Now, the container is centered on the screen and has additional padding for improved design responsiveness.

If you have issues with creating a child Hyvä theme and customizing it according to your needs, feel free to reach out to us for our custom Hyvä development services.