{"id":12987,"date":"2025-04-25T17:00:00","date_gmt":"2025-04-25T11:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=12987"},"modified":"2025-12-10T12:20:58","modified_gmt":"2025-12-10T06:50:58","slug":"hyva-widgets","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/hyva-widgets\/","title":{"rendered":"Hyv\u00e4 Widgets: Improve Magento 2 Store Performance"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Learn in this detailed blog post about what are Hyv\u00e4 Widgets.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This simple framework can streamline your CMS framework without any need for extensive coding.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s learn more.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are Hyv\u00e4 Widgets?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 Widgets are a package of prebuilt widgets built for the Hyv\u00e4 theme ecosystem to create pages quickly without any special requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike CMS extensions with heavy dependency and unnecessary complexity, Hyv\u00e4 Widgets aims to reduce them and provide the right amount of settings to work within the ecosystem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Developers can use these Hyva widgets as a toolset to create custom content templates or build custom layouts using Tailwind\/Alpine technologies.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A simple solution to avoid custom page builder troubles.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How They\u2019re Useful in Theme Development?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 Widgets plays a crucial role in theme development, here is how they help:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 No extra libraries are needed as it is built using Tailwind CSS and Alpine.js<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Allow developers to define UI components in a modular and reusable way and also work with headless setups<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Instead of heavy coding, Hyv\u00e4 Widgets enable developers to manage frontend components through the Magento Admin CMS interface<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Developers can rapidly adjust layout, color, spacing, and responsiveness directly in the widget\u2019s template<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705Uses native TinyMCE drag-and-drop functionality&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Hyv\u00e4 Widgets in Magento 2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To get started with Magento 2 Hyv\u00e4 Widgets, you must have &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Magento 2.4.3 or higher version<\/li>\n\n\n\n<li>Hyv\u00e4 Themes version 1.1.10 or higher<\/li>\n\n\n\n<li>Access to Hyv\u00e4 Themes via Private Packagist or <a href=\"http:\/\/gitlab.hyva.io\" target=\"_blank\" rel=\"noopener\">gitlab.hyva.io<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, follow these five easy steps to install Hyv\u00e4 Widgets:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 1: Install Hyv\u00e4 Widgets<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 2: Enable the Module<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 3: Modify Tailwind Purge Settings<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 4: Build the styles.css File<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 5: Insert Widgets from Admin Panel<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install Hyv\u00e4 Widgets<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, ensure you have the necessary packages installed. If you hold a <a href=\"https:\/\/www.hyva.io\/hyva-themes-license.html\" target=\"_blank\" rel=\"noopener\">Hyv\u00e4 theme license<\/a>, the process is straightforward:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can install the Hyv\u00e4 Widgets module via Composer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer require hyva-themes\/magento2-hyva-widgets<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">For contributions and technology partner, the installation process requires a few more steps:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gitlab access is required<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer config repositories.hyva-themes\/magento2-hyva-widgets vcs git@gitlab.hyva.io:hyva-themes\/magento2-hyva-widgets.git\ncomposer require hyva-themes\/magento2-hyva-widgets:dev-main<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After that, run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bin\/magento setup:upgrade<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2: Enable the Module<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, make sure the module is enabled, for that you need to activate the the Hyv\u00e4 Widgets module by the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bin\/magento module:enable Hyva_Widgets\nbin\/magento setup:upgrade<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3: Modify Tailwind Purge Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Navigate to the Tailwind configuration file located at <strong>.\/app\/design\/frontend\/[Your]\/[Theme]\/web\/tailwind\/tailwind.config.js<\/strong><br>Then add the <strong>hyva-themes\/magento-hyva-widgets<\/strong> module to the purge list configuration as shown:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>purge: {\n    content: &#91;\n        ...\n        '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-hyva-widgets\/**\/*.phtml'\n    ]\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4: Build the styles.css File<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you\u2019ve integrated Hyv\u00e4 Widgets into your theme, the next step is to check if everything is displaying correctly on your live site.<br>For that, run <strong>npm run build-prod<\/strong> from the <strong>web\/tailwind <\/strong>directory of your theme<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Insert Widgets from Admin Panel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With Hyv\u00e4 Widgets successfully installed and configured, you can now add them to your store in two ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to the admin panel and then <strong>Content &gt; Widgets<\/strong> to create and manage widgets manually.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Using the <strong>WYSIWYG Editor or PageBuilder<\/strong> you can insert widgets directly into CMS pages, blocks, or product descriptions using the built-in visual editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">[hire_hyva_theme_development_expert]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Types of Hyv\u00e4 Widgets<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 Widgets comes in various forms, each serving a specific purpose in Magento 2 frontend development.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s break down the four types and how they are with examples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hyv\u00e4 Multi Field Widget<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Multi-Field Widget allows you to group multiple fields inside one widget. It is perfect for creating a neat widget without creating multiple separate widgets.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This widget has various customizable contents like reusable elements, widget titles, Multi-field data, and Display type.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, you can add the fade animation(10 options available) and adjust padding and spacing as required.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a widget showcasing a full-width image with a title and call-to-action button displayed at the top of the homepage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hyv\u00e4 Banner Widget<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Banner Widget is used to create visually appealing sections, often with images, CTA buttons, and background styling. It helps draw attention to promotions, sales or announcements.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This comes with multiple modifiable content options such as banner image(height, width, title, text), content text background, alignment, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, you can change banner layout with different variations along with banner fade animation and spacing &amp; padding adjustments.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a big homepage with a background image, a main headline (&#8220;Summer Sale 2026!&#8221;), a subtitle, and a &#8220;Shop Now&#8221; button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hyv\u00e4 Category Products<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Category products lets you display products dynamically from specific categories. It pulls products automatically, making it easy to showcase a collection without manual updates.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It has content options to customize, category product listing options, animation option, widget types and padding &amp; spacing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, display a &#8220;New Arrivals&#8221; product carousel that automatically shows the latest products from your &#8220;New In&#8221; category.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hyv\u00e4 Content Widget<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Content Widget is a general-purpose widget designed to add free-form HTML content wherever you need it. It gives you complete control over the markup and styles using Tailwind CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This widget provides a WYSIWYG editor, which allows visual editing, a container, content fade animation, text font color, and spacing and padding.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a custom &#8220;About Us&#8221; section with rich text, images, and Tailwind-based styling on the homepage.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other Helpful Hyv\u00e4 Resources<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 Widgets can work like magic in your Magento 2 store\u2014enhancing your frontend experience and boosting sales overnight when used effectively.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some helpful resources for you:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/meetanshi.com\/blog\/add-popup-modal-in-hyva-theme\/\">How to Add a Popup Modal in Magento 2 Hyv\u00e4 Theme?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/meetanshi.com\/blog\/add-loader-in-hyva-theme-magento-2\/\">How to Implement Loader in Hyv\u00e4 Theme Magento 2?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/meetanshi.com\/blog\/how-to-create-a-hyva-child-theme-in-magento-2\/\">How to Create a Hyv\u00e4 Child Theme in Magento 2?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn in this detailed blog post about what are Hyv\u00e4 Widgets.&nbsp; This simple framework can streamline your CMS framework without any need for extensive coding.&nbsp;&#8230;<\/p>\n","protected":false},"author":5,"featured_media":13000,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34,5869],"tags":[],"class_list":["post-12987","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/12987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=12987"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/12987\/revisions"}],"predecessor-version":[{"id":24926,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/12987\/revisions\/24926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/13000"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=12987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=12987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=12987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}