Magento 2

Magento 2 is one of the most powerful eCommerce platforms available today. But while its capabilities are vast, so are its performance challenges, especially when using the default Luma theme, which often loads slowly and delivers a less-than-optimal user experience. That’s where the Hyvä theme enters the picture as a modern, high-performance frontend alternative. But switching to Hyvä also ... Read More

In this blog post, we'll guide you through creating an interactive star rating system using Alpine.js and Tailwind CSS. . This feature not only enhances user experience but also provides valuable visual feedback and meaningful labels during the rating process. The Goal We aim to implement a star rating system that: Highlights star label on hover and click. Displays a corresponding lab... Read More

Adding a modal popup to your website is a great way to enhance user experience by delivering information in a focused and interactive way. In this tutorial, we’ll show you how to create a simple yet fully functional modal popup using Tailwind CSS and Alpine JS in the Hyva Magento 2 environment. This guide is perfect for developers looking to: Implement lightweight modals without externa... Read More

Setting up a Language Switcher in Magento 2 is a straightforward process that involves creating multiple language store views, configuring language packs, and assigning them to your store views. This guide will take you through the steps to configure a multilingual store seamlessly. Let’s dive in! Step 1: Create a New Store View 1. Access the Magento Admin Panel Log in to your Magento 2 ... Read More

CMS blocks in Magento 2 allow you to display static or dynamic content on your website. Using widgets, you can place these blocks in specific locations, enhancing your store's design and functionality. Follow this step-by-step guide to learn how to display CMS blocks using widgets in Magento 2. Step 1: Access the Magento Admin Panel Log in to your Magento 2 Admin Panel and navigate to Content... Read More

In this tutorial, we'll walk you through how to easily create a "Read More Read Less" button in your Hyva Magento2 theme using Tailwind CSS and Alpine JS. This functionality enhances user experience by allowing users to toggle content visibility, making your page cleaner and more interactive. Step-1. You just copy and paste the below code into your PHTML File, CMS block, or CMS Page. You have... Read More

The collapsible widget converts a header/content pair into an accordion, where the content is collapsed or expanded on the header click. Magento 2 provides a versatile collapsible widget that is perfect for implementing features like collapsible sections. Like we can use in the footer, where space is limited, and you want to keep the interface clean while ensuring easy navigation. In this... Read More

Grunt is a modern JavaScript task runner designed to automate repetitive tasks like compilation, minification, and more. In Magento 2, Grunt can significantly streamline the process of theme development and make it easier to manage workflow. Installing and Configuring Grunt: Install node.js to any location on your machine. Open your terminal. Install the Grunt CLI tool globally. To ... Read More

As the year draws to a close, November and December become critical for businesses, with major retail events like Black Friday, Cyber Monday and Christmas Sales driving heavy traffic. This season of flash sales and big promotional offers can test any Magento store’s limits, making performance optimization essential to protect your brand reputation. These high-traffic months bring the largest... Read More

In Magento 2, you can remove specific elements like blocks or containers from a page layout by editing XML Files. This guide will walk you through how to do it. Removing Elements via XML To remove an element, you use the <referenceBlock> or <referenceContainer> tag with the remove attribute set to "true".   Step-by-Step Example: Removing the Wishlist Link and Logo fro... Read More