<?xml version="1.0" encoding="UTF-8" ?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/"
     xmlns:wfw="http://wellformedweb.org/CommentAPI/"
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:atom="http://www.w3.org/2005/Atom"
     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
     xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
     version="2.0" >
<channel>
   <title>Blog Rss</title>
   <atom:link href="https://www.jajuma.de/en/blog/rss/feed" rel="self" type="application/rss+xml"/>
   <link>https://www.jajuma.de/en/blog/rss/feed</link>
   <description></description>
       <item>
      <title>Magento vs Shopify 2025: The Shopify Fog &amp; Why Ownership Wins the Decade</title>
      <link>https://www.jajuma.de/en/blog/magento-vs-shopify-why-ownership-wins</link>
      <guid>https://www.jajuma.de/en/blog/magento-vs-shopify-why-ownership-wins</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=AIL4S1T],#html-body [data-pb-style=C0GBU40]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=C0GBU40]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=AIL4S1T]{align-self:stretch}#html-body [data-pb-style=XWWELK4]{display:flex;width:100%}#html-body [data-pb-style=ILJU1RS],#html-body [data-pb-style=XX6NLIH]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=Y00HS42]{border-style:none}#html-body [data-pb-style=V35WX1V],#html-body [data-pb-style=YD9VBK1]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=O1NNGAK]{margin-top:48px;margin-bottom:48px}#html-body [data-pb-style=M8EBM4X],#html-body [data-pb-style=YFLKGPW]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=YFLKGPW]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=M8EBM4X]{align-self:stretch}#html-body [data-pb-style=MVWKGT6]{display:flex;width:100%}#html-body [data-pb-style=KDWX5H0],#html-body [data-pb-style=LDPUV3Y]{width:50%;align-self:stretch}#html-body [data-pb-style=C5ISHX8],#html-body [data-pb-style=KDWX5H0],#html-body [data-pb-style=LDPUV3Y]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}@media only screen and (max-width: 767px) { #html-body [data-pb-style=Y00HS42]{border-style:none} }</style><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
.pull-quote { 
	border-left: 4px solid #1b478a; 
	padding: 25px; 
	margin: 40px 0px 40px 40px; 
	font-size: 1.4em;
	font-style: italic; 
	font-weight: 600; 
	line-height: 1.5; 
	color: #333;
	background-color: #deecfd;
    border-radius: 14px;
	}
</style>	</div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="C0GBU40"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="AIL4S1T"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="XWWELK4"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="XX6NLIH"><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>In enterprise e-commerce, simplicity sells. <br>But simplicity can also blind.</strong></p>
<p>Behind Shopify&rsquo;s polished SaaS surface lies <br><strong>a costly, inflexible reality.</strong> <br><strong>A fog that hides its long-term risks.</strong></p>
<p>This fog is seductive; it promises speed to market and freedom from technical overhead. <br>Yet, as an enterprise scales, this fog of convenience thickens, obscuring a landscape of <strong>escalating costs</strong>, <strong>architectural constraints</strong>, and <strong>strategic vulnerabilities.</strong></p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="ILJU1RS"><figure class="hero md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="Y00HS42"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/jajuma/strategic-sovereignty-magento-vs-shopify.png" alt="3D chessboard visual showing glowing gold chess pieces representing Magento&rsquo;s strategic strength facing green fog-covered pawns symbolizing Shopify&rsquo;s limitations, with the title &lsquo;Magento vs Shopify 2025: The Shopify Fog &amp; Why Ownership Wins the Decade&rsquo;" title="" width="1472" height="830" data-element="desktop_image" data-pb-style="V35WX1V"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/jajuma/strategic-sovereignty-magento-vs-shopify.png" alt="3D chessboard visual showing glowing gold chess pieces representing Magento&rsquo;s strategic strength facing green fog-covered pawns symbolizing Shopify&rsquo;s limitations, with the title &lsquo;Magento vs Shopify 2025: The Shopify Fog &amp; Why Ownership Wins the Decade&rsquo;" title="" width="" height="" data-element="mobile_image" data-pb-style="YD9VBK1"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p><strong>Magento</strong>, once dismissed as too complex, has quietly evolved into <a title="Your Ultimate Guide to Magento, the World's Most Powerful Commerce Platform" href="/en/magento-metropolis-guide" target="_blank" rel="noopener"><strong>the most future-proof commerce framework on the market.</strong></a> <br>The <strong>choice between Shopify Plus and Magento</strong> is no longer about easy versus hard.</p>
<p>&nbsp;</p>
<p><strong>It&rsquo;s about renting versus owning.</strong><br><strong>It&rsquo;s about convenience versus control. <br>It&rsquo;s about being a tenant versus being the landlord of your own commercial destiny.</strong></p>
<p>&nbsp;</p>
<p>For strategic leaders, the platform decision is a declaration of ambition. This is the data-driven case for choosing sovereignty.</p>
<p>&nbsp;</p></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span id="KHIIM8H" class="text-[#93c5ff]">The Executive Summary</span><br>Why Ownership Wins</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<p>For strategic leaders who need the bottom line, our data-driven analysis boils down to five undeniable conclusions. <br>These are the core pillars of the sovereignty argument:</p>
<p>&nbsp;</p>
<div class="flex flex-col gap-8">
<ul class="space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Lower Long-Term TCO</strong>: <br>For scaling businesses, Magento delivers a 35%+ lower 5-year Total Cost of Ownership by eliminating Shopify's escalating app and transaction penalties that function as a tax on growth.</li>
<li><strong>True GDPR &amp; Data Sovereignty</strong>: <br>Ownership guarantees full control over customer data and hosting location, eliminating the legal ambiguity and existential compliance risks inherent in Shopify's use of US-based subprocessors.</li>
<li><strong>Full Architectural Freedom:</strong><br>Magento's open framework unlocks deep customization, complex B2B workflows, and true multi-store capabilities that Shopify&rsquo;s locked-down, product-centric architecture cannot match.</li>
<li><strong><a title="Your Expert Guide to Hyv&auml;: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">The Hyv&auml;</a> &amp; <a title="Launching the Very First Mage-OS Store Ever - Our Journey..." href="/en/blog/launching-the-very-first-mage-os-store-ever-our-journey" target="_blank" rel="noopener">Mage-OS</a> Revolution:</strong> <br>Community-led innovation delivers world-class speed, slashes development costs, and ensures long-term platform viability.</li>
<li><strong>Strategic Independence</strong>: <br>An owned, sovereign codebase is the ultimate competitive asset, ensuring a business can innovate without permission, control its own destiny, and avoid being held hostage by a vendor's roadmap or price hikes.</li>
</ul>
</div>
</div>
</div>
</div></div><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb82-absolute {
position: absolute
}
.cmsb82-relative {
position: relative
}
.cmsb82-bottom-0 {
bottom: 0px
}
.cmsb82-left-0 {
left: 0px
}
.cmsb82-z-\[1\] {
z-index: 1
}
.cmsb82-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb82-my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.cmsb82-ml-4 {
margin-left: 1rem
}
.cmsb82-flex {
display: flex
}
.cmsb82-inline-flex {
display: inline-flex
}
.cmsb82-grid {
display: grid
}
.cmsb82-hidden {
display: none
}
.cmsb82-h-10 {
height: 2.5rem
}
.cmsb82-h-auto {
height: auto
}
.cmsb82-w-10 {
width: 2.5rem
}
.cmsb82-w-8 {
width: 2rem
}
.cmsb82-flex-shrink-0 {
flex-shrink: 0
}
.cmsb82-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb82-flex-row {
flex-direction: row
}
.cmsb82-items-center {
align-items: center
}
.cmsb82-justify-center {
justify-content: center
}
.cmsb82-gap-2 {
gap: 0.5rem
}
.cmsb82-gap-8 {
gap: 2rem
}
.cmsb82-overflow-hidden {
overflow: hidden
}
.cmsb82-rounded-lg {
border-radius: 0.5rem
}
.cmsb82-\!bg-\[\#EE682F\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(238 104 47 / var(--tw-bg-opacity)) !important
}
.cmsb82-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb82-py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.cmsb82-pt-4 {
padding-top: 1rem
}
.cmsb82-text-center {
text-align: center
}
.cmsb82-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb82-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb82-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb82-font-bold {
font-weight: 700
}
.cmsb82-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb82-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb82-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb82-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb82-duration-300 {
transition-duration: 300ms
}
.cmsb82-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb82-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb82-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb82-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb82-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb82-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
@media (min-width: 640px) {
.cmsb82-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
}
@media (min-width: 1024px) {
.cmsb82-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb82-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.cmsb82-lg\:gap-4 {
gap: 1rem
}
.cmsb82-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb82-lg\:text-\[20px\] {
font-size: 20px
}
.cmsb82-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div data-cacheable="false">
    <hr>
    <p class="hyvaverse-main-cta-subtext cmsb82-text-center cmsb82-my-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
        Find all you need to know and more valuable insights about Hyv&auml; and Magento.<br>
        Expertly curated by JaJuMa:
        <br>
    </p>
    <div class="hyvaverse-main-cta-container cmsb82-text-center cmsb82-grid cmsb82-grid-cols-1 cmsb82-lg:grid-cols-2 cmsb82-gap-8">
        <div>

            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">        
                <span>&#128640;</span>
                <span>Launch the JaJuMa Hyv&auml;verse</span>
                <svg class="cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10 cmsb82-ml-4 cmsb82-lg:ml-6" height="210.000000pt" preserveaspectratio="xMidYMid meet" version="1.0" viewbox="0 0 245.000000 210.000000" width="245.000000pt" xmlns="http://www.w3.org/2000/svg">

                    <g fill="#402b05" stroke="none" transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)">
                        <path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
                        <path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
                        <path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
                        <path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
                        <path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
                        <path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
                        <path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
                    </g>
                </svg>
                </div>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Hyv&auml;.
            </p></div>
        <div>

            <a class="btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-white cmsb82-!bg-[#EE682F] cmsb82-overflow-hidden" href="/en/magento-metropolis-guide" title="Explore the Magento Metropolis!">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">
                    <svg class="cmsb82-drop-shadow-lg cmsb82-w-8 cmsb82-h-auto" fill="none" height="24" viewbox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect fill="url(#pattern0_413_38)" height="24" width="22"></rect>
                        <defs>
                            <pattern height="1" id="pattern0_413_38" patterncontentunits="objectBoundingBox" width="1">
                                <use transform="matrix(0.00329268 0 0 0.003 -0.317073 -0.311111)" xlink:href="#image0_413_38"></use>
                            </pattern>
                            <image height="500" id="image0_413_38" preserveaspectratio="none" width="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRFAAAA/////////v7+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v////////////7+///////////////////+///////////////////////+///////////////////////////+/////////////////////////////////v///////////v///v///////////////////////////////v///////////v///////////////v///v///v7+/v//ZZGWUAAAAFp0Uk5TAAUS/wwBBg8YAgMHGiMKCRMiHw0EERUIIRkdHBcQCxYOFB4gGyG6tv+yjO3//7E1h9uw/OSbTSnA8qA5i/GvuDFfyf/i9qmg9S9rZEpq6eJR5jjGKG0bIiAVGb/2kAAAFSlJREFUeJztnduPHEcVh3t2PbFnfVs7vq0vWSdxkFAkeCPhASFeyANISNz+zAghEA9IwAOKhABFQgSJWzAkcRKHODcnjoO9y86tZ7qnu+t2qs6pOr/vwXGSmZ6e/qarq06dOjWqgDpG3CcA0gPpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hWiVPpoNKr/9j/WM+FAm/QnOiWPD7cepD8XNnRJ3x76n8c/S3Ua3OiRfnJkvJl3Rh+nOBN2tEgfbdm97tRHcc9DBDqkHzu0f+3pD+OdhxA0SJ984fb6A4efSJaUL318yv1BXXgjX7z0k5/7vOvsPerzkETh0m37b5tM7lOehyzKlu7SgdvgMdlpSKNk6U+G9sNLfbSXK33nIcFBnigyOlus9NM0QdUiH+2FSj/+iOxQI7pDSaFI6Rc+ID1ccT26AqW7BuAsKEx7edIvxoir7L4f4aBslCb9bKyO14lPIx2YgcKkE/XZOymnjS9J+vhc3Eb4ybtRD5+OkqQPJkORUEisphjpEfrsXZz7b5KPiUsp0qN14NpceDfRB0WkDOnJlE/ZTtOmRKQE6eMn30v7gbk/2guQvpe+U515Yk320s/wBE2yDtFlLt0/HSqYjPvxWUufHHIuPrz8Qa6P9pylM7XsK3Kdas9Xul9uMzEns1z8lq30a+9wn8GMvTe5z8CDTKXvfsJ9BjXjx9lVNchTevypFReym3PNUbos5VMyG77lJ/2yxAucV4cuN+mM0ZhhLr3NfQb2ZCb9xh2iAx1brn8Z71LF0fN5tGcl/TrN3bSZ40j0W8pFe0bSiZYwHOtc43aO5KF87T8UR4lOPtJp+uz9/ewtkkuRhfZcpAetNK8Z7G2RLHOtzmxLHF00yUP6+IDkMKZnLpF22pV0EchBOlGiq03ewz5JKF367FsG0mketoeWjcUJkki67ORJ8dKDa4jMsS/8SjNI2Dku+NEuXDpRy+5249F8qG3TwoBs6TRtrXOEdLxF8lC+cZviKBGQLJ0ozu4VJ6OJCggN0cmVThSA8531JPrFiVwXIVY6TQpcSAt78w2KM7hKchRahEqnmTQPrQdGM8Ejb9QuUjpRAC48s4HoESOtjZconaaGCE27SvNo3/lcVPKkPOk0Uys7j6juLppho6g2Xpp0omgM6c5LV0nqEAiKzAqT/jTJdPR54vXqT5CMty+/J6WNFyWd5gEaY/E4jXYpITpB0id7/6Y4TJxtd8aXSYZvMvYEkiOdZpwWsQ4QSWR2LGHZpRjpJJf0+t2YI2KaIKGA3T2FSKe5zaMHQS5RFB3hXwMlQ/pTbxEcJEXJ3slxguWy3UnYCREhnWJq4wrF78YCilkB6iGlKxKknw/fFOnSh+nC2wQB+af+RXAe/giQThDnTBzkvBJ8p/K28PzSn70degSGnlFwqjRrUJZdenghEZacpOCuJ6d1bunBztnS0EKLEDPmzzFLD413cBZ3Co0tbLHNv/BKD5xIZa/nFRRGTDXI3IRXeljsVcD+t0GPdrbZF1bpQVuoCckpDxm1c30FTukht8l4i3/eYs7OVe9IC9fuvZzSAxp3Ibf5Au8vwvQ1GKX773wsrmqbdz1qHut80r1HPKdpFi/T4jnpyjO5zifdM7v97ANhKwcW+G04cPOf5CdiAZ90vwchfwZCL14Va1jadzbpXvFXcQ/zJh7aWUoXsEn3udFl9dm7cC89yfGduKR7VA8SqHzy8Oq9VtfENQuIYxtPLunON3qdJzF+tP/ZtKvMH4QdnZufwqUHDw5XkwiO8wnXSZL93chEem14PYrH/IRvZn+spWW6aWdowJiku12Xi+8vhkPtRyZfJsJmLaL12oQuDy890p1u9FUEY/NtTA/6rshS41SesW61GVJj5UtfLy7Q8TaOmi6dQ7NWoNB+yWP63y2PdIf5yMaqlc77J/lF6x6XbWTk2mZ8apFuPZxt5cb0XMekiUd980Sbld4tn+xapN+ynIJud9T6npQJFw/0Ppg6ns126+3TR5Z5pFs+0jcWJPZ3jxLtZz504heq+4etSI1Vxmz68Ixk6dN2z34uLkEr6VKRen46pyymBNPXIBIsfRrucCn7UY/mI+GW9HFxvgGwxTdNX5RErvTZc9qtvljMhtI55+Ox7dvST7TJlT67aK7LSKJpd1+zuGijzPWy9l93P50wxEqfB9bdV8BEqUbhs73EQrrFHHvyMZtY6fMr4bHsiX7hiF8dgqVK82gd0pevmI/Qveq30c6+TSZ+c7j1mRu/LKQvWATZPIv2EV5G772iIL2F8Tosw6/elRqJHu0BFWYgvYX1dfBfykyy6WnIAstapTElHtLnhEsnGL6FFUyoVRq/A6TPoZAeeDVDaw6sPtz0bSF9zvI6BFZtC4h7BJcthfQWpstQl80NLezi28Z7r0hcAektTJehnh8Plu41aif4VEjfwHQZ6nwzgjvOfddN/zXU60B6C9NlqCeeSCoFu0Vmg2qirAHpLRJLd6jpQ7QTW7Wu0pQODekzyKXbXlmafXVbH7h31/aViRAuneKZvmCvvdRwE5rdVResVJqm1CF9RgzpxiWPRFvCLVmpNCV8Q/qMONIHcxAnx4jLv6xUmhoQSJ8RS3r/BabrPGx+kunYOqQbw9oROnJLOiOzNHvtNVkd0vTL1SHd+PSMKL1r+EYTjWmxUmmaQID0GfUSoRjS25nm7nVirFipNE0VQvqMWjrNvtqbrF1nwqF5z0dA+hRjWnC96Nwn99iOycFncZ7lSyC9iQTp0VmpNP20dEg3BrjrHawgPQbCpZMGRtMC6a0PNS3Wr6VHGUylAdJbHwrp3a9MhHDpkcbQKVipND3NIH0GpEeFRbpxeFyHzKhylxhYfUfTCBXSZ0B6VFikG9et1NK914zys1JpijrrkG5ct1JLD99zmQ1Ib2KcO6urwpkrtogF0psYg6u1dM+drySwUmnKGUm+vTKLdONsZlnSTd83Sm2kIWRKrxMY97k3y/bHXnryHflkSq/LSKiQnrwiMKTHwl76CeqUXxPCpV93XXEqB3vpyfedkim9XlOuQnryXacgPRb20kkKYbkgU3rd4KmQnmiDghWQHgt76ck3nBIu/UTqYBUd9tIT7kAzR6b0uiaUCunJg+/CpZuKOAgG0ptAeu9LkyBTeh2jgvQYCJdus8WVUCC9CaT3vjQJwqXb7s8pEEhvAum9L02CTOn1xrqQHgNIjwWkN4H03pcmQab0ugDUtXcin0o8IL2JvfSryfcWJwPSm0B670uTAOmxgPQmRul1UjCkxwDSYwHpTSC996VJkCm9XugD6TGA9FhAehN76RkHZ9YWIEN6peROh/QmRun1im1IjwGkxwLSm0B6E0ifUl8wSI8BpMdirZIMpFeQ3gbSp0B6VGRKr68CpMcA0mMB6U3spZv2mxcMpDeB9CaQPgXSowLpsVgr/gnplYv086nr6tEB6U2ylX7uU9PWwCsgvUkc6Y+Nu4QEMi3yZ9w8sgbSm0SRvvemxd5fAey/PvuH9c7bkN4kSkduXncx2o68yyXzkO5JFOnLCqtRgnir+n7W0tequEN6FUl6vRtEhDbeQaDPeyB9in/zPv8r7cZe2+tddkj3JLb0arJHF9Q53G6UKoV0T6JIrzfwm2Hc78+W9gYrkO5JAukWO/7ZsLnTBqR7EmWcfqy9ja1pX1sLOnZMg3RP0kgP1t65SZ619LqwAqTPiCK9c3+EgFm6y3c6/zOke5JOuvfGnT3K40hPvdmqcOnP3rY+aN9OKMcOu//7IP27ZllLXxvdQ3qVWHpVnXHd4XBodzxI9ySx9OoJt4fmhaHoPaR7klq6eQvzNQzb3UK6J+mlVztX7PrxFz8ybCsA6X6Ybzsf6effC/3Uymb/ekj3g0f60bU1fdlDi98Fhmx+cEk3XP2LVkWNIN0PB+kOwRkb6dXZ+73/a9su0TVG7B3Sp9TSHYr8W0nvbeNP2I7lY+TIQfqUWvrxR0Mva2ApvbMfv/ux9WW3lu5QfkSD9ImxIa2lm19aYyt986C9cfYurKU7VIyE9CmrC2Z9jd12IZ/sLFKln7nzhdsVtz2h9SAgpLtJt7eeaOt5y/OZrPcYId1RunWymyzpDY+Q7tSRq+zXrIiSftCYz4V0V+m2PfiOdKkYWElvzdNBurN0yzQIQdLbjQ6ku0u3G7jJkb4R6IH0yqXe+xKLVYlipG/O1EF6ZXHhNvOVzK2DEOnLxbNrGJddQPqUrp64aWJUhvSNNsr8FqRAz5l0ToYNv02C9O6MSkifYn4udl+GwZXn/NK7f6oW4SVIn9F3Gfbu9r6FPTjTl2plzglQId18GaZVgzrpH73Zz7IF0Sd9t3cljf9PPBYs0i3qcvVfh76b3SbBjYAehf2J0+aAYqKf6woW6RY//qEFB09vjooqXun9t7lNBRxzCi4xUqUPNnmdS5BPxyom1qTr1IdyrQK/ahTESm8XlmjSEY5nkz608q26eM98SCXSbWq9DYepNpanPXuXSfrged60GFIkGmuuwSPdat7McAO0rv6teyl778/9ffGv48F6tMblFVOsE3HJ4JFuNytt6ODMu8XLy/+l+ynH6c9V848dfgjZFa9MHXmXLX14zfARz5wYjUZ/mf/9+b+mjMg9V82sD/qyXSmb/JHOJd2ygvb+G8N3wclbo9Gf5n/96mtJpZ88+rndvT3wOuvF0b1xqHgwSbdOcj0wPf1f+MP8n6mkv/j76Z9fG43+PBhWtF+lkf5GFy+9e7JynckXXx+9Un35/O/SSP/mb6d/fuPVQeUupS8USXeoA2McgJ88uu+q/yWS/pXXqm/9elHwvw+XQmYDwbxocEl3uNXNF2a8e3N39Mc0V++l0Z1rvxkcVjisv6s4+u6M0m+4LCAztoH7z49+ab/sLYTvjl4d7nm5/JorltadT7rjxelJUBDHFccQEYdzRukORSZmDIa4heC8X5Rd9Qtq+KQ7VPlakHwK0hH3b2QcmsSBT7rVZEST058y9HpsmZzoLS3ayxnrXd5IYZTu2uWZwnNn2OC1lQTLE51XunPN1iN2jlPt00GK3+4h/WWH48Ipvbrm042xrAKVlNNeDdAVig1HfGCV7tPAV/K0d+fsmWFq3LmlO5ZnXnLpbeLzCMJ352e+3y6vdMeQ5Yqn/0F7Hv4MLL8YxpQsEBFm6Z4NfMUTs+7A+/yfsi+LSA63dI+AxhIBsRpv5amy9Lvhln5k/Ts/93wrW0dogWePZAbrubNLr8Yvbf/M972cbfxAbWEj1+m2gvWBX3q18+3RT33fy9cbcpsabsL5PJ8iQHpVfX/0E+/38gRmfYfmM4x5f7ERIX38vdf+5v3m8x8mb+Mtc3l7SL+4oY0I6UcN3gsv+795eMUBPXZrGHoYXhKTBiHSqwsv/sL/zUlnYcJ2ZufIg9xAinSf6fU10t0//kPzIwxZtKmQIz1o2JuqH+8ddJ3B3oNbIEi65164NfHjHWEtO9fs+SaipLvs3tFB5LIEk2Mho8Obd/ijxktkSQ8dDcUctNvWne9GVA6ANOmBcY9omYZhLTt3CK6FPOmBHeSOgrwEBA3NJcwHNpAoPbCNp29JfVM95shbpSFSumWxlj6os6lKGJo3ECrdM1N2CeXo6FzQsbjn/DsRKz1ovpruMWos0D+InKF5A7nSq2r3k4A3kwzaw+IGyWu+2iJZeuA1D+7QjbeDJm35p1D7EC3dqpzuAGEP1LDnS/o6kPYIl350v4TcbQGF/8OGjVfuysjQ7ka89MARk29gNizoKi0a0yID6WEh0MljDwFhT5VRUCwnATlID5zGds+TvhUSKmcqNOBCHtIDn7Bura1NifZ++vf1kEMm0gOzqVxmYYK6ECJS4IxkI70anwu5oJbZVONLIdHfG29J7rOvyEd6YPfKqhBdwHLKSuJ0Wg85SQ/MnTQuIGMOAKYjL+lRB+0+dY9WCB+aN8hNeqD2/uFbWNBV5AxqL/lJDxtSjQ+6WuHxTpByWTVwzGQoPTQ/fnNYtR+0o0YG0ZgWWUp3L7zbYu/hB1vbRw/hydbDg8tBi1Yy6rOvyFN6uHYqGGtE+ZOr9MD1JlRkNE5bI1vpofF4CvJUnrX0wETpYPbezSPouknW0gMH7WHkFI1pkbl0tg5dnNVTichdOk8bfzZoyp2d/KVXk7Op88vl7i9hRwHSQ7MYXRG6bMWBIqSn1J71w3xBIdKrnURrCzIMum5SivQ0sZoSbvOqJOmhi4otyHho3qAk6ZFjNTkkN9tRlvTAQiFDXA4o9S2NwqSH1nTsJa98KAPFSQ+sNtpNIR24JeVJD9t0oQvmzTfoKVF6YAJ7m3I6cEuKlE45+ZZ6B4EUFCr9qE0mSUve+TzXRIkhipUeuC5tjpQC7cSUKz1ce4kt+4ySpVfVqZC4qZDdXCNQtvSAwGxR0ZgWpUuvLnmVMpg8LPY2rxRI97rZS77NKxXSnUuSsW5znQIN0h1rORd+m1dapNsvav/Br4oLum6iRbrdNMwPXy65/1ajR3pVnbwwWHzgR6+8rUK5LunVUJCuiDRXS5RJP2L86PTDydqeET9++fL7B4VkPFqiTzqAdI1AukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hXyfy89l0B+7GqqAAAAAElFTkSuQmCC">
                            </image>
                        </defs>
                    </svg>
                    <span>Explore the Magento Metropolis!</span>
                    <svg class="cmsb82-drop-shadow-lg cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10" fill="none" height="24" viewbox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.7998 15.5999H15.5998V14.3999H13.7998V15.5999ZM15.5998 17.9999H13.7998V16.7999H15.5998V17.9999ZM13.7998 20.3999H15.5998V19.1999H13.7998V20.3999Z" fill="white"></path>
                        <path clip-rule="evenodd" d="M5.4 0L15 3.6V12H17.4C17.5591 12 17.7117 12.0632 17.8243 12.1757C17.9368 12.2883 18 12.4409 18 12.6V22.8H18.6C18.7591 22.8 18.9117 22.8632 19.0243 22.9757C19.1368 23.0883 19.2 23.2409 19.2 23.4C19.2 23.5591 19.1368 23.7117 19.0243 23.8243C18.9117 23.9368 18.7591 24 18.6 24H0.6C0.44087 24 0.288258 23.9368 0.175736 23.8243C0.0632142 23.7117 0 23.5591 0 23.4C0 23.2409 0.0632142 23.0883 0.175736 22.9757C0.288258 22.8632 0.44087 22.8 0.6 22.8H1.2V10.2C1.2 10.0409 1.26321 9.88826 1.37574 9.77574C1.48826 9.66321 1.64087 9.6 1.8 9.6H3V5.4H4.2V9.6H5.4V0ZM16.8 22.8H15.6V21.6H13.8V22.8H12.6V13.2H16.8V22.8ZM5.4 10.8H2.4V22.8H5.4V10.8ZM8.4 5.4H7.2V6.6H8.4V5.4ZM9.6 5.4H10.8V6.6H9.6V5.4ZM13.2 5.4H12V6.6H13.2V5.4ZM7.2 7.8H8.4V9H7.2V7.8ZM10.8 7.8H9.6V9H10.8V7.8ZM12 7.8H13.2V9H12V7.8ZM8.4 10.2H7.2V11.4H8.4V10.2ZM9.6 10.2H10.8V11.4H9.6V10.2ZM13.2 10.2H12V11.4H13.2V10.2ZM7.2 12.6H8.4V13.8H7.2V12.6ZM10.8 12.6H9.6V13.8H10.8V12.6ZM8.4 15H7.2V16.2H8.4V15ZM9.6 15H10.8V16.2H9.6V15ZM7.2 17.4H8.4V18.6H7.2V17.4ZM10.8 17.4H9.6V18.6H10.8V17.4ZM8.4 19.8H7.2V21H8.4V19.8ZM9.6 19.8H10.8V21H9.6V19.8Z" fill="white" fill-rule="evenodd"></path>
                    </svg>
                </div>
                <svg class="cmsb82-absolute cmsb82-left-0 cmsb82-bottom-0" fill="none" height="51" viewbox="0 0 435 51" width="435" xmlns="http://www.w3.org/2000/svg">
                    <path d="M521.149 66.6131V52.8942H518.576V49.1462H515.839V45.6486H506.218V49.1462H503.825V52.8084H502.489V39.4329H495.519V52.6368H491.445V45.5699H489.304V40.9636H484.482V45.4841H475.443V41.9864H465.053V44.9691H462.431V24.0116H451.869V39.7762H444.856V52.4651H440.523V49.7399H436.758V34.2328H431.074V47.9517H426.742V19.0691H424.6V14.5343L423.171 7.05972H421.777V0H421.058V7.05972H419.578L418.242 14.6774L418.234 14.7131V18.8975H416.524V46.5069H410.359V49.9116H408.254V41.0494H400.178V49.0604H395.895V57.4934H394.221V51.5281H391.484V35.5132H389.256V33.0455H384.686V35.5132H382.287V39.2612H378.902V34.2328H370.733V39.4329H365.258V43.095H363.066V38.1525H360.752V35.6848H355.155V38.0667H353.229V52.6368H350.614V38.7104H345.994V33.9825H338.722V41.1352H334.562V37.8164H323.317V60.4332H321.341V40.8777H318.388V25.4207H316.204V21.8372H314.156V18.1321H312.741V11.9736H312.022V18.1321H310.607V21.5797H309.069V25.4207H306.755V40.4986H304.01V27.3662L301.208 20.7572L298.413 27.495V35.8994H292.507V45.9919H290.021V25.4207H280.184V42.7946H277.231V57.1143H275.384V34.1041H273.2V30.5277H271.404V26.0573H268.113V30.399H266.187V34.1041H264.262V62.7364H261.388V29.1258H254.504V36.021H251.12V33.0884H245.214V26.1861H234.867V37.9451H232.373V29.2546H225.239V37.3013H222.745V26.0573H220.432V22.6025H214.453V26.0573H211.371V33.9825H209.007V26.5652L203.769 18.3324L198.718 26.2218L198.66 26.3076V29.8912H196.814V25.9285H189.42V28.103H187.954V24.0116H182.228V27.588H180.561V44.2037H178.966V32.1872H170.932V35.7707H161.434V38.3242H157.015V34.7478H153.551V30.5277H143.327V37.6876H141.609V34.7478H135.373V47.401H133.389V30.5277H130.824V20.8144H122.791V44.4612H120.169V23.7541H110.461V30.2703H103.276V34.4904H100.582V39.9836H98.2177V28.3533H87.8709V34.3616H85.2986V45.9919H81.6557V41.6502H79.4714V26.5652H72.3364V41.264H68.2264V50.212H65.9918V37.8164H59.3167V18.6471H47.5545V42.0293H44.4792V52.0002H42.7547V31.0427H36.0006V44.59H33.2558V29.7624H23.6779V37.4301H20.7247V50.9773H18.8781V47.1435H15.537V27.7167H4.42142V47.5297H1.67665V40.7561H-0.37833V37.5589H-11.3718V40.2411H-13.8076V64.3958H-21V83H525V66.6131H521.149Z" fill="#9B3205" fill-opacity="0.5"></path>
                </svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Magento.
            </p>
        </div>
    </div>
    <br>
    <hr>
    <style>
        .hyvaverse-teaser-shine {
            position: relative;
            overflow: hidden;
        }

        .hyvaverse-teaser-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: teaser-shine-move 6s infinite;
            pointer-events: none;
        }

        @keyframes teaser-shine-move {
            0% {
                left: -75%;
            }

            100% {
                left: 125%;
            }
        }
    </style>
</div></div></div>
</div><div data-content-type="text" data-appearance="default" data-element="main"><div id="toc-summary" class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 md:pb-6 xl:pt-[120px] p-6 lg:p-10">
<div class="mx-auto mb-8 lg:absolute lg:top-[40%] lg:right-4 xl:right-[5%] 2xl:right-[10%] max-w-[180px] rounded-full shadow-xl border-2 border-white/50 overflow-hidden shadow-inner"><img id="U5NENKB" class="w-full h-auto p-2" src="https://www.jajuma.de/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="The Hyv&auml;naut mascot introducing the Table of Contents for the Magento vs Shopify 2025 strategic guide." width="450" height="450"></div>
<h2 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Table</span><br>of Contents</h2>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-lg lg:text-xl">
<ul class="text-base space-y-2">
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" tabindex="-1" href="#fog"><strong>Shopify Plus TCO Myth:</strong> Piercing the Fog</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" tabindex="-1" href="#sovereignity"><strong>Why Digital Sovereignty Matters in 2025</strong></a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" tabindex="-1" href="#architecture"><strong>Magento Architecture vs Shopify: </strong>Framework vs. Product</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" tabindex="-1" href="#hyva"><strong>The Performance Revolution:&nbsp;</strong>How Hyv&auml; Redefined Magento</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" tabindex="-1" href="#conclusion"><strong>The Decade of Digital Sovereignty</strong></a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" tabindex="-1" href="#faq"><strong>Magento vs. Shopify&nbsp;</strong>FAQs</a></li>
</ul>
</div>
</div>
</div>
</div></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="fog">Shopify Plus TCO Myth: Piercing the Fog</h2>
<p>&nbsp;</p>
<p><strong>The most pervasive element of the Shopify fog is the myth of predictable cost.</strong> <br>What begins as a straightforward subscription systematically transforms into <strong>a growth penalty engine</strong>, eroding margins precisely when a business succeeds most. A forensic analysis of its <strong>total cost of ownership (TCO)</strong> reveals a model that <strong>systematically penalizes growth</strong> through a multi-layered <strong>tax on revenue and complexity.</strong></p>
<blockquote class="pull-quote">"On Shopify, you rent functionality. <br>On Magento, you own your assets."</blockquote>
<h3>The Enterprise-Level Growth Tax</h3>
<p>For large businesses on Shopify Plus, the <strong>cost structure is a punitive system</strong> that scales directly with success. <br>The base license fee, starting around $2,300 per month, is merely the entry point. The <strong>true costs are embedded in variable fees</strong> that transform the platform from a fixed-cost enabler into a <strong>variable-cost partner claiming a share of revenue</strong>.</p>
<ul>
<li>
<p><strong>The "Success Tax":</strong> <br>Once monthly revenue surpasses the $800,000 threshold, Shopify Plus levies an additional variable platform fee of 0.25% to 0.40% on all revenue above that mark. A business generating $10 million per month does not pay the advertised base fee; its platform cost escalates to approximately&nbsp;<strong>$25,000 per month</strong>. <a title="Shopify Plus pricing Page" href="https://www.shopify.com/plus/pricing" target="_blank" rel="nofollow noopener"><strong>In the Shopify ecosystem, your success is taxed.</strong></a></p>
</li>
<li>
<p><strong>The Payment Gateway Penalty:</strong> <br>Should a merchant choose an external payment provider better suited to their business needs, Shopify imposes an additional transaction <a title="Shopify Transaction Fees Explained" href="https://cmsminds.com/blog/shopify-plus-pricing/" target="_blank" rel="nofollow noopener"><strong>fee of 0.15% to 0.20% on every single sale</strong></a>. For a European retailer processing &euro;10 million annually, this penalty alone can exceed <strong>&euro;30,000 per year</strong>, a direct tax on operational flexibility.</p>
</li>
<li>
<p><strong>The Hidden App Tax:</strong> <br>Core functionalities native to Magento are absent in Shopify Plus, forcing merchants to rent them from the app store. This isn't about one or two features; it's a<a title="Shopify Transaction Fees Explained" href="https://cmsminds.com/blog/shopify-plus-pricing/" target="_blank" rel="nofollow noopener"> <strong>systemic cost across all critical enterprise operations</strong></a>. Industry analysis confirms merchants regularly spend<strong> $2,000 to $5,000+ per month</strong> on a patchwork of third-party apps.</p>
<ul>
<li>
<p><strong>For B2B Operations:</strong> <br>To replicate Magento's native company accounts and quoting workflows, you need apps like <a title="Sparklayer Pricing" href="https://www.sparklayer.io/pricing/" target="_blank" rel="nofollow noopener">SparkLayer</a> or <a title="Wholesale Gorilla Pricing" href="https://wholesalegorilla.com/plan-comparison/" target="_blank" rel="nofollow noopener">Wholesale Gorilla</a>, which can cost up to <strong>$150 per month</strong> or more based on order volume.</p>
</li>
<li>
<p><strong>For Subscriptions:</strong> <br>This essential business model relies entirely on third-party apps. Enterprise-grade solutions like Skio cost <strong>$599 per month plus a 1% transaction fee</strong>, while others like Recharge also take a percentage of your recurring revenue. <a title="Recharge vs. Skio vs. Recurpay" href="https://www.recurpay.com/recharge-vs-skio-subscriptions" target="_blank" rel="nofollow noopener"><strong>This becomes a direct tax on your growth.</strong></a></p>
</li>
<li>
<p><strong>For Advanced Search:</strong> <br>To match Magento's native capabilities, you need services like <a title="Shopify App Store - Algolia" href="https://apps.shopify.com/algolia-search" target="_blank" rel="nofollow noopener">Algolia</a>, which can easily run into <strong>thousands of dollars per month</strong> for high-volume stores.</p>
</li>
</ul>
</li>
</ul>
<p>This patchwork of recurring SaaS fees creates a <strong>compounding rental liability.</strong> <br>What is a one-time extension purchase in the<strong><a title="Your Ultimate Guide to Magento, the World's Most Powerful Commerce Platform" href="/en/magento-metropolis-guide" target="_blank" rel="noopener"> Magento ecosystem</a></strong> becomes a perpetual operating expense on Shopify.</p>
<p><strong>The predictable subscription dissolves.</strong> <br>In its place is a punitive, scaling cost structure that reveals a fundamental truth:</p>
<p>&nbsp;</p>
<p><strong>On Shopify, you rent functionality.<br></strong><strong>On Magento, you own your assets.</strong></p>
<p>&nbsp;</p>
<p>One is a perpetual operating expense that compounds with growth;&nbsp;<br>the other is an appreciating strategic investment that rewards scale.</p>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
  .custom-inset-shadow-green {
    position: relative;
    background-color: #ecfdf5; /* green-50 */
  }
  .custom-inset-shadow-green::before,
  .custom-inset-shadow-green::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-green::before {
    box-shadow: -15px 0 15px -15px inset #059669; /* green-600 */
    left: -15px;
  }
  .custom-inset-shadow-green::after {
    box-shadow: 15px 0 15px -15px inset #059669;
    right: -15px;
  }

  .custom-inset-shadow-red {
    position: relative;
    background-color: #fef2f2; /* red-50 */
  }
  .custom-inset-shadow-red::before,
  .custom-inset-shadow-red::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-red::before {
    box-shadow: -15px 0 15px -15px inset #dc2626; /* red-600 */
    left: -15px;
  }
  .custom-inset-shadow-red::after {
    box-shadow: 15px 0 15px -15px inset #dc2626;
    right: -15px;
  }
</style>

<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200 mb-20">
  <!-- Intro -->
  <div class="mb-6 text-slate-700 text-base leading-relaxed">
    <p>
      <strong>Shopify Plus vs. Magento + Hyvä: Ownership vs. Subscription</strong><br>
      Compare the long-term financial and operational impact of renting your eCommerce stack vs. owning it outright.
    </p>
  </div>

  <!-- Table -->
  <div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
    <table class="table-auto w-full text-sm text-left">
      <caption class="caption-top text-base text-slate-700 font-medium px-4 py-2">
        <strong>Table: 5-Year Total Cost of Ownership (TCO) Comparison</strong>
      </caption>
      <thead>
        <tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
          <th class="p-4 font-semibold">Cost Component</th>
          <th class="p-4 font-semibold text-center text-white bg-red-600">Shopify Plus<br>(The Tenant)</th>
          <th class="p-4 font-semibold text-center text-white bg-green-600">Magento + Hyvä<br>(The Owner)</th>
        </tr>
      </thead>
      <tbody class="text-slate-700">
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">Base License / Subscription</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">$2,300/mo minimum = $27,600/year</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">Free (Open Source) /<br>Custom (Adobe)</td>
        </tr>

        <tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">Variable Platform Fee</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">0.25%–0.40%<br>on revenue &gt; $800k/mo</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">None</td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">Payment Gateway Penalty</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">0.15%–0.20% on every sale</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">None - merchant selects freely</td>
        </tr>

        <tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">Third-Party App Costs</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">$2k–$5k+/month<br>(Recurring SaaS Fees)</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">One-time extensions ≈ $5k–$15k total</td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">Hosting &amp; Maintenance</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">Included (Limited Control)</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">$100–$600/mo + support retainer</td>
        </tr>

        <tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">Customization &amp; Ownership</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">Limited; source code closed</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">Unlimited; full code ownership</td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">5-Year Estimated TCO</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">$400k–$750k+</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">$250k–$450k (35%+ lower)</td>
        </tr>

        <tr class="hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">Financial Outcome</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">Compounding Liability</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">Appreciating Asset</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Executive Insight -->
  <div class="mt-8 lg:mt-10 text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200 relative">
    <div class="absolute -top-4 left-6 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
      &#128161; Executive Insight
    </div>
    <p class="mt-6 leading-relaxed">
      SaaS subscriptions <strong>compound costs with growth</strong>, turning success into rising monthly liabilities.<br>
      Owned infrastructure, by contrast, <strong>compounds ROI with scale</strong> - each optimization and integration adds lasting value to your business asset.
    </p>
  </div>
</div>
</div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3>The Smart Investment for Ambitious Businesses</h3>
<p>But this principle isn't just for enterprises. <br><strong>For growing businesses, the "own vs. rent" calculation is even more critical.</strong> <br>Thanks to the Hyv&auml; revolution, a powerful, <strong>custom-built Magento store is more accessible than ever</strong>, with many high-performance builds now <strong>achievable for less than $50,000</strong>.</p>
<p>&nbsp;</p>
<p><strong>Consider the ongoing costs.</strong> A small but ambitious merchant can host a lean <strong>Magento store</strong> on a reliable server for $100 - $300 per month and secure a professional maintenance retainer for a fraction of the enterprise cost. While this requires more upfront investment than a basic Shopify plan, <strong>it builds an asset.</strong></p>
<p><br><strong>The real tipping point is the app ecosystem.</strong> <br>A growing Shopify store quickly accumulates <strong>monthly SaaS fees for apps</strong> that replicate functionality <strong>Magento offers natively or through one-time extension purchases</strong>. That $50/month subscription app, plus another for loyalty, plus another for advanced search, creates <strong>a compounding rental liability</strong>. The one-time cost of a Magento extension becomes a <strong>smarter long-term investment,</strong> freeing up capital for marketing and growth rather than perpetual software rent.</p>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200 mb-20">
  <!-- Title -->
  <div class="mb-6 text-slate-700 text-base leading-relaxed">
    <h3>
      <strong>Sidebar: The SaaS Paradox</strong><br>
    </h3>
  </div>

  <div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
    <p class="p-6"><b>SaaS platforms are brilliant for launching.</b><br>But as a business scales, a paradox emerges: <br>
    The very attributes that made SaaS attractive - a managed architecture and usage-based cost - become strategic liabilities. <br>
    The platform’s rigidity stifles innovation, while its cost model erodes the profitability it was meant to support. <br>
    <b>Convenience becomes a constraint.</b>
    </p>
  </div>
  
  <div class="mt-8 overflow-x-auto rounded-xl shadow-lg border border-slate-200">
    <p class="p-6"><b>When Does Shopify Make Sense?</b> <br>
    To be clear, Shopify is an exceptional platform for a specific purpose: <br>
    Speed and simplicity. For startups, small businesses, or merchants with straightforward D2C models 
    who prioritize a rapid launch with minimal technical overhead - and for whom the potential 
    legal risks of the SaaS data model are acceptable - Shopify remains a best-in-class choice. <br>
    The "fog" only becomes a strategic liability when a business's scale, complexity, or ambition begins to exceed the limits of that convenience.</b>
    </p>
  </div>

  <!-- Executive Takeaway -->
  <div class="mt-8 lg:mt-10 text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200 relative">
    <!-- Badge -->
    <div class="absolute -top-4 left-6 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
      &#128161; Executive Takeaway
    </div>
    <p class="mt-6 leading-relaxed text-slate-700">
      <b>Shopify’s cost model penalizes growth at every level.</b><br> 
 	  <b>Magento’s Ownership model</b> is an appreciating asset that <b>rewards scale</b>, and it's <b>more accessible than ever</b>.
    </p>
  </div>
</div>

<!-- Supporting Styles -->
<style>
  .custom-inset-shadow-green {
    position: relative;
    background-color: #ecfdf5;
  }
  .custom-inset-shadow-green::before,
  .custom-inset-shadow-green::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-green::before {
    box-shadow: -15px 0 15px -15px inset #059669;
    left: -15px;
  }
  .custom-inset-shadow-green::after {
    box-shadow: 15px 0 15px -15px inset #059669;
    right: -15px;
  }

  .custom-inset-shadow-red {
    position: relative;
    background-color: #fef2f2;
  }
  .custom-inset-shadow-red::before,
  .custom-inset-shadow-red::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-red::before {
    box-shadow: -15px 0 15px -15px inset #dc2626;
    left: -15px;
  }
  .custom-inset-shadow-red::after {
    box-shadow: 15px 0 15px -15px inset #dc2626;
    right: -15px;
  }
</style></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="sovereignity">Why Digital Sovereignty Matters in 2025</h2>
<p><strong>Beyond the financial calculus lies a more fundamental, strategic divergence: risk.</strong> <br>The perceived simplicity of the SaaS model masks <strong>significant vulnerabilities</strong> related to <strong>dependency, compliance, and business continuity</strong>.</p>
<p>&nbsp;<br>An <strong>owned platform</strong> like Magento is the only architecture that <strong>provides the absolute control necessary to mitigate these board-level threats.</strong></p>
<blockquote class="pull-quote w-full lg:w-1/2">"SaaS platforms create compliance ambiguity and vendor dependency. <br>An owned platform is the only way to guarantee data sovereignty and mitigate this risk."</blockquote>
<h3>The GDPR Compliance Black Box</h3>
<p>For businesses selling to the European Union, proving 100% verifiable <strong>GDPR compliance on Shopify is a legally ambiguous endeavor</strong>. <br>Shopify's infrastructure routes data through a network of international subprocessors, including US-based companies like Cloudflare. This creates a legal gray area, as US surveillance laws like the CLOUD Act may grant authorities access to data regardless of where it is physically stored.</p>
<p>&nbsp;</p>
<p><strong>This is not a theoretical problem. <a title="Ist Shopify rechtswidrig? Datenschutzbeh&ouml;rde bringt H&auml;ndler in Bedr&auml;ngnis" href="https://t3n.de/news/shopify-rechtswidrig-datenschutzbehoerde-1517139/" target="_blank" rel="nofollow noopener">First merchants had to abandon Shopify for GDPR reasons.</a></strong> <br>German data protection authorities have initiated&nbsp;<a title="EU-US Data Transfers under Renewed Scrutiny &ndash; the Shopify Case" href="https://engity.com/blog/data-protection/shopify-case-eu-us-data-transfers-under-scrutiny/" target="_blank" rel="nofollow noopener"><strong>investigations into Shopify stores</strong></a> on these grounds, and a <strong><a title="German Court Rules Transfer of Personal Data to US-Based Cookie Provider Requires Cross-Border Mechanism Under GDPR, Even if Data Never Leaves EEA" href="https://www.arnoldporter.com/en/perspectives/blogs/enforcement-edge/2022/01/german-court-rules-transfer-of-personal-data" target="_blank" rel="nofollow noopener">German court has ruled</a></strong> that using a US-based service provider can constitute an <strong>unlawful data transfer</strong>. <br>With first <strong>stores forced to shut down</strong>, total GDPR fines now exceeding &euro;6 billion and individual penalties reaching up to 4% of global annual turnover,&nbsp;<strong>the financial stakes are immense.</strong></p>
<p dir="ltr">&nbsp;</p>
<p><strong>Magento eliminates this risk entirely.</strong> <br>By owning your infrastructure, you choose your hosting - a server in Frankfurt, for example.<br><strong>Guaranteeing 100% data sovereignty.</strong></p>
<h3>The Fragile House of SaaS: Business Continuity Risks</h3>
<p>Building an enterprise on a rented platform introduces a <strong>fragile "house of cards" of dependencies that threaten business continuity.</strong></p>
<ul>
<li>
<p><strong>Forced API Updates:</strong> <br>Shopify enforces a rapid, <a title="Sunsetting your app - Shopify developer documentation" href="https://shopify.dev/docs/apps/launch/distribution/sunsetting-your-app" target="_blank" rel="nofollow noopener"><strong>mandatory API deprecation</strong></a> cycle that can <strong>break essential business workflows</strong> with little warning. <br><strong>With Magento, you control</strong> the update schedule, turning a potential crisis into <strong>a planned maintenance window</strong>.</p>
</li>
<li>
<p><strong>Product De-platforming Risk:</strong> <br>Shopify's Terms of Service grant it <a title="Can Shopify Close Your Store? Understanding Policies and Best Practices" href="https://www.hulkapps.com/blogs/shopify-hub/can-shopify-close-your-store-understanding-policies-and-best-practices" target="_blank" rel="nofollow noopener"><strong>broad authority to suspend or terminate stores</strong></a> for selling products in high-risk but legal industries. <br>This entire category of <strong>risk is non-existent on Magento</strong>. Because <strong>you own the codebase</strong>, you cannot be de-platformed.</p>
</li>
<li><strong>Payment De-platforming Risk (The VAMP Threat):<br></strong>A more recent and widespread threat is payment de-platforming. In late 2025, in response to new network-level compliance rules (like the VISA Acquirer Monitoring Program or VAMP), <strong><a title="Shopify's official payments policy" href="https://help.shopify.com/en/manual/payments/shopify-payments/managing-chargebacks/monitoring-programs" target="_blank" rel="nofollow noopener">Shopify Payments</a></strong> began <strong>abruptly terminating merchant accounts</strong> that exceeded <strong><a title="New, stricter fraud and chargeback thresholds explained" href="https://www.chargeflow.io/blog/what-are-visas-new-vamp-rules-a-2025-guide-for-merchants" target="_blank" rel="nofollow noopener">new, stricter fraud and chargeback thresholds</a></strong>. <br>As seen in reports across social media, <strong>merchants were shut down</strong> with little warning, instantly losing their ability to process payments. <br>This event perfectly illustrates the <strong>extreme strategic risk</strong> of the SaaS model's <strong>"golden handcuffs."</strong> <br>When your <a title="Shopify Payments is an acquirer and thus subject to VAMP" href="https://www.practicalecommerce.com/visas-vamp-could-cost-banks-and-merchants" target="_blank" rel="nofollow  noopener">core platform is also your single-source payment processor</a>, a compliance change by a third-party (like VISA) can put you out of business overnight. <br><strong>On Magento, this risk is eliminated.</strong> Your platform and your payment processor are decoupled. If one processor terminates your account, you are free to integrate another. <br><strong>A foundational principle of true digital sovereignty.</strong></li>
</ul>
<p><strong>This resilience is further <a title="Mage-OS Website" href="https://mage-os.org/" target="_blank" rel="nofollow noopener">guaranteed by Mage-OS</a></strong>, a community-led, non-profit organization dedicated to ensuring the long-term viability, security, and evolution of Magento Open Source, <strong>independent of any single corporate agenda.</strong> (You can even <strong><a title="Mage-OS Demo Store" href="/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes" target="_blank" rel="noopener">see it in action in our demo store</a></strong>)</p>
<p>&nbsp;</p>
<p>This isn't just a backup plan; it's a <strong>declaration of independence</strong>. <br>While <strong>Shopify merchants</strong> are <strong>subject to the unilateral decisions</strong> of one company's roadmap, the <strong>Magento ecosystem is secured</strong> by a dual-engine of corporate <strong>backing from Adobe</strong> and <strong>community-driven stewardship</strong> from Mage-OS.</p>
<p>&nbsp;</p>
<p><strong>An owned platform like Magento is not a burden; it is a superpower.</strong></p>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><!-- Strategic Risk: Control vs. Dependency -->
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200 mb-20">
  <!-- Title -->
  <div class="mb-6 text-slate-700 text-base leading-relaxed">
    <p>
      <strong>Strategic Risk: Control vs. Dependency</strong><br>
      Evaluate long-term strategic exposure when relying on SaaS platforms versus owning your eCommerce stack.
    </p>
  </div>

  <!-- Table -->
  <div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
    <table class="table-auto w-full text-sm text-left">
      <caption class="caption-top text-base text-slate-700 font-medium px-4 py-2">
        <strong>Table: Control vs. Dependency Comparison</strong>
      </caption>
      <thead>
        <tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
          <th class="p-4 font-semibold">Strategic Risk</th>
          <th class="p-4 font-semibold text-center text-white bg-red-600">Shopify Plus <br>(High Dependency)</th>
          <th class="p-4 font-semibold text-center text-white bg-green-600">Magento <br>(Sovereign Control)</th>
        </tr>
      </thead>
      <tbody class="text-slate-700">
        <!-- Row 1 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128110;&#8205;&#9794;&#65039; Data Sovereignty &amp; GDPR</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            High Exposure<br><span class="font-normal">(US Subprocessors)</span>
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Low Exposure<br><span class="font-normal">(EU Hosting Choice)</span>
          </td>
        </tr>

        <!-- Row 2 -->
        <tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128274;&#65039; Vendor Lock-In</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            High<br><span class="font-normal">(Proprietary APIs &amp; Apps)</span>
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Low<br><span class="font-normal">(Open Source Code Ownership)</span>
          </td>
        </tr>

        <!-- Row 3 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128187;&#65039; Business Continuity</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Moderate<br><span class="font-normal">(Forced API Updates)</span>
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Low<br><span class="font-normal">(Controlled Update Schedule)</span>
          </td>
        </tr>

        <!-- Row 4 -->
        <tr class="hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#9940;&#65039; De-platforming</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Moderate<br><span class="font-normal">(Terms of Service)</span>
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            None<br><span class="font-normal">(Code Ownership)</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Executive Takeaway -->
  <div class="mt-8 lg:mt-10 text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200 relative">
    <!-- Badge -->
    <div class="absolute -top-4 left-6 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
      &#128161; Executive Takeaway
    </div>
    <p class="mt-6 leading-relaxed text-slate-700">
      SaaS platforms create <strong>compliance ambiguity</strong> and <strong>vendor dependency</strong>.
      An owned platform like Magento - backed by both Adobe and the <strong>Mage-OS community</strong> - is the only way
      to guarantee <strong>data sovereignty</strong> and <strong>long-term business continuity</strong>.
    </p>
  </div>
</div>

<!-- Supporting Styles -->
<style>
  .custom-inset-shadow-green {
    position: relative;
    background-color: #ecfdf5;
  }
  .custom-inset-shadow-green::before,
  .custom-inset-shadow-green::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-green::before {
    box-shadow: -15px 0 15px -15px inset #059669;
    left: -15px;
  }
  .custom-inset-shadow-green::after {
    box-shadow: 15px 0 15px -15px inset #059669;
    right: -15px;
  }

  .custom-inset-shadow-red {
    position: relative;
    background-color: #fef2f2;
  }
  .custom-inset-shadow-red::before,
  .custom-inset-shadow-red::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-red::before {
    box-shadow: -15px 0 15px -15px inset #dc2626;
    left: -15px;
  }
  .custom-inset-shadow-red::after {
    box-shadow: 15px 0 15px -15px inset #dc2626;
    right: -15px;
  }
</style>
</div><div data-content-type="text" data-appearance="default" data-element="main"><h2>The Illusion of SaaS Security: Control vs. Convenience</h2>
<blockquote class="pull-quote">"In SaaS, security is a prayer. <br>With ownership, it&rsquo;s a plan."</blockquote>
<p>A central tenet of the SaaS value proposition is that <strong>security is handled for you</strong>. <br>However, this offloads responsibility by trading direct control for blind trust.<br>A<strong> dangerous illusion</strong>. <br>The wave of data <strong><a title="The Salesforce Breach Wave Of 2025: Google, Workday, And Salesloft" href="https://www.blackfog.com/the-salesforce-breach-wave-of-2025/" target="_blank" rel="nofollow noopener">breaches targeting customers of major SaaS platforms</a></strong> in 2025, particularly Salesforce, serves as a stark reminder that the attack surface extends far beyond the vendor's core infrastructure.</p>
<p><br>In a <strong>series of high-profile incidents</strong>, <strong><a title="Salesforce Extortion Group Leaks Data After FBI Disruption" href="https://www.bankinfosecurity.com/salesforce-extortion-group-leaks-data-after-fbi-disruption-a-29710" target="_blank" rel="nofollow noopener">hacking groups exfiltrated millions of customer records</a></strong> from the Salesforce instances of major global brands, including Google, Adidas, and Toyota. Crucially, the breach didn't stem from a vulnerability in Salesforce's core platform. Attackers exploited <strong>the weakest links: third-party apps</strong> with compromised access tokens. <strong>The victims were left helpless</strong>, entirely <strong>dependent on the vendor</strong>'s incident response for a crisis that originated within the ecosystem they were forced to trust.</p>
<p><br>This stands in stark contrast to the security model of an <strong>owned platform like Magento</strong>, which is <strong>built on the principle of control</strong>. In October 2025, when<a title="Adobe Security patch release notes" href="https://experienceleague.adobe.com/en/docs/commerce-operations/release/notes/security-patches/overview" target="_blank" rel="nofollow noopener"> Adobe released a critical security update</a> (APSB25-94), Magento agencies and in-house teams applied the patches within hours, <strong>immediately neutralizing the threat.</strong> &nbsp;</p>
<p>This is the <strong>superpower of ownership</strong>: the <strong>freedom to act</strong> decisively, <strong>not just wait and hope</strong> you are protected.</p>
<p><br>This highlights the <strong>competitive advantage of ownership</strong>.</p>
<p><strong>Applying a patch is not a chore;</strong> <br><strong>it is a choice and an exercise of control.</strong></p>
<p>&nbsp;</p>
<p><strong>Freedom to Act Fast:</strong> <br>A Magento merchant can <strong>apply a critical patch</strong> the moment it is released, neutralizing a threat in hours. <br>A Shopify merchant must <strong>wait and hope</strong> the vendor has patched its entire infrastructure, with no visibility into the timeline or process.</p>
<p>&nbsp;</p>
<p><strong>Freedom to Stay in Control:</strong> <br><strong>The Magento merchant is</strong> responsible for their security, which means they are also <strong>in full control</strong> of it. <br>They choose their hosting environment, configure their firewalls, and manage their own update schedule.<br><strong>The Shopify merchant outsources this responsibility</strong>, and in doing so, also <strong>outsources control</strong> over their <strong>own business's resilience to attack</strong>.</p>
<p><br><strong>It is the freedom to act, not just react. </strong><br><strong>The freedom to patch now, not hope later. </strong><br><strong>The freedom to control your security, not just trust someone else&rsquo;s. </strong><br><strong>In SaaS, security is a prayer. With ownership, it&rsquo;s a plan.</strong></p>
<p>&nbsp;</p>
<p>In short, <strong>Shopify&rsquo;s fog of convenience scales into a storm of cost and risk</strong>. <br>The next section examines how <strong>Magento</strong>&rsquo;s open framework <strong>transforms that liability into lasting strategic advantage</strong>.</p></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="architecture">Magento Architecture vs Shopify: Framework vs Product</h2>
<p>The core strategic distinction is simple:</p>
<p>&nbsp;</p>
<blockquote class="pull-quote">"Shopify sells a product. <br>Magento builds an enterprise."</blockquote>
<p><strong>Shopify sells a product; Magento provides a framework. <br>Shopify limits. Magento liberates.</strong></p>
<p>&nbsp;</p>
<p>This architectural divide creates an&nbsp;<strong>"unbreakable ceiling" on Shopify</strong> that limits innovation and forces business processes to conform to the technology. <br><strong>Magento</strong>, by contrast, allows technology to be molded to the business, turning a unique operational model into <strong>a competitive weapon</strong>.</p>
<h3><strong>Unbreakable Ceilings vs. Limitless Capability</strong></h3>
<p>This architectural constraint is most evident in critical areas for scaling businesses.</p>
<ul>
<li>
<p><strong>Deep Customization (The Checkout):</strong> <br><strong>On Shopify, the checkout is fundamentally locked.</strong> Even with Shopify Plus's "Checkout Extensibility," it is architecturally<a title="Customizing and editing your checkout and accounts pages" href="https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations" target="_blank" rel="noopener"> impossible to alter the core checkout flow</a>. <br><a title="Custom Magento Store Development" href="/en/jajuma-shop/online-shop-with-magento-2" target="_blank" rel="noopener"><strong>With Magento, you have complete freedom</strong> to build</a> unique, multi-step checkout logic or integrate with legacy ERPs in real-time.</p>
</li>
<li>
<p><strong>Built for Complexity (B2B &amp; International):</strong> <br><strong id="F6NBF7X">Magento was architected from inception for <a title="Magento Marketplace Showcase" href="https://www.jajuma.de/en/blog/digital-transformation-from-historic-marketplace-to-regional-online-marketplace-einfach-heimat" target="_blank" rel="noopener">complex</a></strong><a title="Magento Marketplace Showcase" href="https://www.jajuma.de/en/blog/digital-transformation-from-historic-marketplace-to-regional-online-marketplace-einfach-heimat" target="_blank" rel="noopener"> B2B</a> and multi-brand international <strong>commerce</strong>. Its native multi-site architecture allows a global corporation to run dozens of distinct storefronts from a single admin panel. <br>To replicate this on<strong> Shopify would require purchasing and managing multiple, siloed, and expensive Shopify Plus licenses</strong>.</p>
</li>
<li>
<p><strong>Composable by Design:</strong> <br><strong>Modern commerce is composable</strong>, integrating best-of-breed tools around a sovereign, extensible core. <br><strong>Magento</strong>&rsquo;s open, API-first framework <strong>is inherently designed for this future</strong>, enabling deep, native integrations with essential enterprise systems like ERPs (SAP, NetSuite), PIMs (Akeneo), and proprietary AI engines. <br>Shopify&rsquo;s <strong>closed SaaS architecture</strong> and stricter API limits <strong>hinder true composable strategies</strong> for complex enterprise use cases.</p>
</li>
</ul>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><!-- Architectural Control: Magento vs. Shopify -->
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200 mb-20">

  <!-- Intro -->
  <div class="mb-6 text-slate-700 text-base leading-relaxed">
    <p>
      <strong>Architectural Control: Magento vs. Shopify</strong><br>
      Evaluate the underlying flexibility and scalability of both platforms. <br>The true foundation of digital commerce ownership.
    </p>
  </div>

  <!-- Table -->
  <div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
    <table class="table-auto w-full text-sm text-left">
      <caption class="caption-top text-base text-slate-700 font-medium px-4 py-2">
        <strong>Table: Architectural Flexibility &amp; Strategic Implications</strong>
      </caption>
      <thead>
        <tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
          <th class="p-4 font-semibold">Architectural Feature</th>
          <th class="p-4 font-semibold text-center text-white bg-green-600">Magento <br>(Native Framework)</th>
          <th class="p-4 font-semibold text-center text-white bg-red-600">Shopify Plus <br>(Product Overlay)</th>
          <th class="p-4 font-semibold text-center">Strategic Implication</th>
        </tr>
      </thead>

      <tbody class="text-slate-700">
        <!-- Row 1 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128187;&#65039; B2B Account Hierarchy</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Native multi-level roles &amp; permissions
          </td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Limited profiles, app-dependent
          </td>
          <td class="p-4 text-slate-700">
            Magento handles enterprise complexity; <br>Shopify requires a fragile app patchwork.
          </td>
        </tr>

        <!-- Row 2 -->
        <tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#127757;&#65039; International Store Mgmt</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            True multi-site from one admin
          </td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Siloed &quot;Expansion Stores&quot;
          </td>
          <td class="p-4 text-slate-700">
            Magento offers operational efficiency; <br>Shopify creates data silos &amp; overhead.
          </td>
        </tr>

        <!-- Row 3 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128722;&#65039; Checkout Logic</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Fully customizable source code
          </td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Locked core flow
          </td>
          <td class="p-4 text-slate-700">
            Magento molds to the business; <br>Shopify forces the business to conform.
          </td>
        </tr>

        <!-- Row 4 -->
        <tr class="hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128640;&#65039; Core Data Model</td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Open &amp; Extensible
          </td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Rigid &amp; Predefined
          </td>
          <td class="p-4 text-slate-700">
            Magento enables proprietary features; <br>Shopify limits innovation.
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Executive Takeaway -->
  <div class="mt-8 lg:mt-10 text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200 relative">
    <!-- Badge -->
    <div class="absolute -top-4 left-6 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
      &#128161; Executive Insight
    </div>
    <p class="mt-6 leading-relaxed text-slate-700">
      Magento’s open architecture provides <strong>true digital ownership</strong> and <strong>enterprise agility</strong>. <br>
      In contrast, Shopify Plus trades speed of setup for long-term rigidity - each customization adds hidden
      <strong>technical debt and platform dependency</strong>.
    </p>
  </div>
</div>

<!-- Supporting Styles -->
<style>
  .custom-inset-shadow-green {
    position: relative;
    background-color: #ecfdf5;
  }
  .custom-inset-shadow-green::before,
  .custom-inset-shadow-green::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-green::before {
    box-shadow: -15px 0 15px -15px inset #059669;
    left: -15px;
  }
  .custom-inset-shadow-green::after {
    box-shadow: 15px 0 15px -15px inset #059669;
    right: -15px;
  }

  .custom-inset-shadow-red {
    position: relative;
    background-color: #fef2f2;
  }
  .custom-inset-shadow-red::before,
  .custom-inset-shadow-red::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-red::before {
    box-shadow: -15px 0 15px -15px inset #dc2626;
    left: -15px;
  }
  .custom-inset-shadow-red::after {
    box-shadow: 15px 0 15px -15px inset #dc2626;
    right: -15px;
  }
</style>
</div><div data-content-type="html" data-appearance="default" data-element="main" data-pb-style="O1NNGAK" data-decoded="true"><!-- Operational Agility: Implementation, Maintenance, and Adaptability -->
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200 mb-20">

  <!-- Intro -->
  <div class="mb-6 text-slate-700 text-base leading-relaxed">
    <p>
      <strong>Operational Agility: Implementation, Maintenance &amp; Adaptability</strong><br>
      Assess how each platform supports long-term agility - from setup to scaling - and <br>
      whether it evolves with your business or slows it down.
    </p>
  </div>

  <!-- Table -->
  <div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
    <table class="table-auto w-full text-sm text-left">
      <caption class="caption-top text-base text-slate-700 font-medium px-4 py-2">
        <strong>Table: Operational Agility - Tenant vs. Owner Dynamics</strong>
      </caption>
      <thead>
        <tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
          <th class="p-4 font-semibold">Operational Dimension</th>
          <th class="p-4 font-semibold text-center text-white bg-red-600">Shopify Plus <br>(The Tenant)</th>
          <th class="p-4 font-semibold text-center text-white bg-green-600">Magento + Hyvä <br>(The Owner)</th>
        </tr>
      </thead>

      <tbody class="text-slate-700">

        <!-- Row 1 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128295;&#65039; Implementation Speed</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Fast Setup, Limited Flexibility
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Custom Setup, Optimized for Long-Term Growth
          </td>
        </tr>

        <!-- Row 2 -->
        <tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128295; Maintenance &amp; Control</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Vendor-Managed Updates; Limited Oversight
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Merchant-Controlled Lifecycle; Predictable &amp; Transparent
          </td>
        </tr>

        <!-- Row 3 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128640;&#65039; Feature Agility</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            App-Based, Fragmented Architecture
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Modular, Extensible Ecosystem (Hyvä + Magento)
          </td>
        </tr>

        <!-- Row 4 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128202;&#65039; Scalability Curve</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Costs Scale with Traffic
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            ROI Scales with Optimization
          </td>
        </tr>

        <!-- Row 5 -->
        <tr class="hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128736;&#65039; Platform Evolution</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Centralized Roadmap - Merchant Adapts
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Decentralized Innovation - Platform Adapts to Merchant
          </td>
        </tr>

      </tbody>
    </table>
  </div>

  <!-- Executive Takeaway -->
  <div class="mt-8 lg:mt-10 text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200 relative">
    <!-- Badge -->
    <div class="absolute -top-4 left-6 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
      &#128161; Executive Takeaway
    </div>
    <p class="mt-6 leading-relaxed text-slate-700">
      Shopify Plus prioritizes convenience over control - ideal for startups, but limiting for scaling merchants. <br>  
      Magento + Hyvä deliver <strong>operational sovereignty</strong>: <br>
      full command of infrastructure, customization, and scalability, <br> 
      ensuring your platform grows <b><em>with</em> you, not against you</b>.
    </p>
  </div>
</div>

<!-- Supporting Styles -->
<style>
  .custom-inset-shadow-green {
    position: relative;
    background-color: #ecfdf5;
  }
  .custom-inset-shadow-green::before,
  .custom-inset-shadow-green::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-green::before {
    box-shadow: -15px 0 15px -15px inset #059669;
    left: -15px;
  }
  .custom-inset-shadow-green::after {
    box-shadow: 15px 0 15px -15px inset #059669;
    right: -15px;
  }

  .custom-inset-shadow-red {
    position: relative;
    background-color: #fef2f2;
  }
  .custom-inset-shadow-red::before,
  .custom-inset-shadow-red::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-red::before {
    box-shadow: -15px 0 15px -15px inset #dc2626;
    left: -15px;
  }
  .custom-inset-shadow-red::after {
    box-shadow: 15px 0 15px -15px inset #dc2626;
    right: -15px;
  }
</style>
</div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h2 id="hyva"><strong>The Performance Revolution: How Hyv&auml; Redefined Magento</strong></h2>
<blockquote class="pull-quote">"Shopify sells speed to launch. <br>Magento, powered by Hyv&auml;, <br>builds endurance for the win."</blockquote>
<p id="NU1T6Y8">The most persistent argument against Magento - that it is slow, complex, and expensive - is a relic of its legacy "Luma" frontend. <br><a tabindex="-1" title="JaJuMa-Shop | Top 10 Reasons and Benefits for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener"><strong>The advent of Hyv&auml; themes has not just improved Magento;</strong></a> <br>it has <strong>revolutionized</strong> it, fundamentally resetting its value proposition.<br>Even more so since Hyv&auml; was <strong><a title="Hyv&auml; Theme on Github" href="https://github.com/hyva-themes/" target="_blank" rel="nofollow noopener">open-sourced and is now available for free</a></strong>, removing one of the last remaining barriers to adoption.</p>
<p>&nbsp;</p>
<p>This transformation is a profound testament to <strong>the resilience of the open-source model.</strong> <br>The platform's <strong>biggest weakness was solved</strong> not by its corporate owner, but <strong>by its community.<br></strong> A decentralized <a tabindex="-1" title="Fueling Performance &amp; Growth with Innovation" href="https://www.jajuma.de/en/innovation-engine-magento-hyva-performance-guide" target="_blank" rel="noopener"><strong>innovation engine</strong></a> that closed systems like <strong>Shopify cannot replicate</strong>.</p>
<ul>
<li>
<p><strong>Explosive Growth:</strong> <br>As of early 2025, data from Hyv&auml;.io shows that <strong>over 5,700 live stores</strong> now run on the platform, supported by a global network of over 850 agencies and more than 1,600 compatible extensions. <strong><br><a tabindex="-1" title="Your Expert Guide to Hyv&auml;: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">This is not a niche solution; it is the new standard.</a></strong></p>
</li>
<li>
<p><strong>Drastic Cost &amp; Time Reduction:</strong> <br>Agencies and developers consistently report that building a Magento store with Hyv&auml; <strong>reduces development time by 30-50%.</strong><br><strong><a tabindex="-1" title="JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener">As a certified Hyv&auml; Gold Partner, we've seen this firsthand</a>,</strong> with projects launching faster and delivering immediate performance gains that were previously unthinkable on legacy Magento.</p>
</li>
<li>
<p><strong>World-Class Performance:</strong> <br>The "Magento is slow" myth is dead. Stores built on Hyv&auml; routinely achieve near-perfect <a tabindex="-1" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"><strong>Google PageSpeed scores of 90-100</strong> and <strong>pass all Core Web Vitals assessments</strong></a> out of the box.</p>
</li>
</ul>
<p>The old compromise is dead. <br><strong>Shopify sells speed to launch. <br>Magento, powered by Hyv&auml;, builds endurance for the win.</strong></p>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="flex flex-col xl:flex-row justify-center items-center gap-4 my-16">
                <a href="/en/blog/magento-page-speed-roi-calculator" title="Calculate the Performance ROI and Impact on your Revenue"
                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512">
                                                <rect width="288" height="416" x="112" y="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" rx="32" ry="32"></rect>
		<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M160.01 112H352v64H160.01z"></path>
		<circle cx="168" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="344" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="168" cy="328" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="328" r="24" fill="currentColor"></circle>
		<circle cx="168" cy="408" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="408" r="24" fill="currentColor"></circle>
		<rect width="48" height="128" x="320" y="304" fill="currentColor" rx="24" ry="24"></rect>
                                            </svg>
                    Calculate The Page Speed Impact on Your Revenue
                </a>
            </div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><!-- Strategic Imperative: Shopify Plus (The Tenant) vs Magento (The Owner) -->
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200 mb-20">

  <!-- Intro -->
  <div class="mb-6 text-slate-700 text-base leading-relaxed">
    <p>
      <strong>Strategic Imperative: Ownership vs. Dependency</strong><br>
      Examine the ultimate business-level outcomes of each platform’s underlying philosophy.<br>
      Whether your commerce platform works <em>for</em> you or whether <em>you work for it</em>.
    </p>
  </div>

  <!-- Table -->
  <div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
    <table class="table-auto w-full text-sm text-left">
      <caption class="caption-top text-base text-slate-700 font-medium px-4 py-2">
        <strong>Table: Strategic Imperative - Tenant vs. Owner Mindset</strong>
      </caption>
      <thead>
        <tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
          <th class="p-4 font-semibold">Strategic Imperative</th>
          <th class="p-4 font-semibold text-center text-white bg-red-600">Shopify Plus <br>(The Tenant)</th>
          <th class="p-4 font-semibold text-center text-white bg-green-600">Magento <br>(The Owner)</th>
        </tr>
      </thead>

      <tbody class="text-slate-700">
        <!-- Row 1 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128184;&#65039; Cost Model</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Perpetual Rent (Penalizes Growth)
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Appreciating Asset (Rewards Scale)
          </td>
        </tr>

        <!-- Row 2 -->
        <tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128274;&#65039; Data &amp; Compliance</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Vendor-Dependent (Compliance Ambiguity)
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Sovereign Control (GDPR Clarity)
          </td>
        </tr>

        <!-- Row 3 -->
        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128161;&#65039; Innovation</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            Constrained by Platform Roadmap
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            Limited Only by Your Ambition
          </td>
        </tr>

        <!-- Row 4 -->
        <tr class="hover:bg-slate-50 transition-colors">
          <td class="p-4 font-medium text-slate-800">&#128187;&#65039; Core Architecture</td>
          <td class="p-4 custom-inset-shadow-red text-red-700 font-semibold text-center">
            A Standardized Product
          </td>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold text-center">
            A Composable Framework
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Executive Takeaway -->
  <div class="mt-8 lg:mt-10 text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200 relative">
    <!-- Badge -->
    <div class="absolute -top-4 left-6 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
      &#128161; Executive Takeaway
    </div>
    <p class="mt-6 leading-relaxed text-slate-700">
      Shopify Plus may deliver convenience - but it <strong>rents your success back to you</strong>. <br>
      Magento, on the other hand, transforms your digital platform into an <strong>owned, appreciating business asset</strong>
      that compounds <b>value through freedom, flexibility, and innovation</b>.
    </p>
  </div>
</div>

<!-- Supporting Styles -->
<style>
  .custom-inset-shadow-green {
    position: relative;
    background-color: #ecfdf5;
  }
  .custom-inset-shadow-green::before,
  .custom-inset-shadow-green::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-green::before {
    box-shadow: -15px 0 15px -15px inset #059669;
    left: -15px;
  }
  .custom-inset-shadow-green::after {
    box-shadow: 15px 0 15px -15px inset #059669;
    right: -15px;
  }

  .custom-inset-shadow-red {
    position: relative;
    background-color: #fef2f2;
  }
  .custom-inset-shadow-red::before,
  .custom-inset-shadow-red::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-red::before {
    box-shadow: -15px 0 15px -15px inset #dc2626;
    left: -15px;
  }
  .custom-inset-shadow-red::after {
    box-shadow: 15px 0 15px -15px inset #dc2626;
    right: -15px;
  }
</style>
</div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="conclusion"><strong>The Decade of Digital Sovereignty</strong></h2>
<p>If your e-commerce operation is scaling beyond the limits of simplicity, <strong>the question isn&rsquo;t whether to switch - it&rsquo;s when to reclaim your sovereignty.</strong></p>
<blockquote class="pull-quote">"In the next decade of commerce, <br>ownership is the ultimate competitive advantage."</blockquote>
<p><strong>The convenience of SaaS is a</strong> powerful tool for getting started, but it becomes a <strong>strategic cage for businesses</strong> built to lead. The myth of low TCO dissolves. The architectural divide is one of freedom. The old arguments against performance have been rendered obsolete by a community-led revolution. What remains is the undeniable value of a <strong>sovereign codebase</strong> - a permanent, transferable <strong>asset that ensures you are never held hostage by a vendor's roadmap or price hikes.</strong></p>
<p>&nbsp;</p>
<p>Magento, modernized by the <strong>Hyv&auml; frontend revolution</strong> and secured for the long-term by the <strong>Mage-OS initiative</strong>, doesn&rsquo;t just offer an alternative; it offers the freedom to <strong>integrate custom AI, </strong>to build for a<strong> composable future, and to <a tabindex="-1" title="Fueling Performance &amp; Growth with Innovation" href="https://www.jajuma.de/en/innovation-engine-magento-hyva-performance-guide" target="_blank" rel="noopener">innovate without asking</a></strong> for permission.</p>
<p>&nbsp;</p>
<p><strong>In the next decade of commerce, ownership is the ultimate competitive advantage.</strong></p>
<p>&nbsp;</p>
<p><em>Curious how your Shopify TCO compares to a modern Magento build?</em><strong> <br>As official partners with Hyv&auml; and active members of the Mage-OS and Magento Associations, our team is uniquely positioned to provide a data-driven, expert analysis for your business.<br></strong><em>We&rsquo;re happy to model it - no marketing fluff, just data.</em></p>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="YFLKGPW"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="M8EBM4X"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="MVWKGT6"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="LDPUV3Y"><div class="w-4/5 m-auto" data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><p class="text-center"><strong>Ready for a<br>complete transformation?</strong></p>
                     <div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Store Development Services"
                                    target="_blank"
                                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 400 400" class="w-6 h-6" width="25" height="25" role="img">
                                                <rect fill="#fff"></rect>
                                                <path d="M222.131 112.458L237.41 66.8783H290.403L275.043 112.458H222.131Z"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M158.026 174.716C172.966 162.84 191.165 155.37 211.659 155.37C253.609 155.37 294.409 182.196 294.409 250.953V336H240.776V250.953C240.776 215.516 223.929 202.107 200.933 202.107C181.969 202.107 168.181 213.026 160.516 224.517V336H106.692V115.336H74L91.2077 64H158.026V174.716ZM272.988 109.567L286.407 69.7565H239.485L226.132 109.567H272.988ZM235.338 64H294.409L277.112 115.336H218.13L235.338 64Z"></path>
                                                <title>Hyvä Logo</title>
                                            </svg>
                                    Explore our Hyvä Store Development Services
                                </a>
                      </div>
</div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="KDWX5H0"><div class="w-4/5 m-auto" data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><p class="text-center"><strong>Finally flawless and perfect Core Web Vitals for your Hyvä store?</strong></p>
                     <div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="/en/jajuma-develop/hyva-performance-optimization" title="Hyvä Performance Optimization"
                                    target="_blank"
                                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 64 64">	
                                    		<g fill="#ff9d27" stroke-width="1.5" stroke="#ff9d27"><path d="M10.9 48.7c4-4 4.4-5 6.9-2.5s1.5 2.8-2.5 6.9c-3 3-6.8 2.4-6.8 2.4s-.6-3.8 2.4-6.8"></path><path d="M18.5 52.8c1.6-4.2 2.1-4.7-.2-6s-2.3-.4-3.8 3.8c-1.2 3.1.2 5.9.2 5.9s2.7-.5 3.8-3.7"></path></g><path fill="#fdf516" d="M16.2 48.9c.9-2.3.9-2.8 2.1-2.1c1.3.7 1 1 .1 3.3c-.6 1.7-2.1 2.1-2.1 2.1s-.7-1.5-.1-3.3" stroke-width="1.5" stroke="#fdf516"></path><path fill="#ff9d27" d="M17.1 45.7c-1.3-2.3-1.8-1.8-6-.2c-3.1 1.2-3.7 3.8-3.7 3.8s2.8 1.4 5.9.2c4.2-1.6 5.1-1.6 3.8-3.8" stroke-width="1.5" stroke="#ff9d27"></path><g fill="#fdf516" stroke-width="1.5" stroke="#fdf516"><path d="M15 47.8c2.3-.9 2.8-.9 2.1-2.1c-.7-1.3-1-1-3.3-.1c-1.7.6-2.1 2.1-2.1 2.1s1.6.7 3.3.1"></path><path d="M13.9 47.6c2.2-2.2 2.4-2.8 3.8-1.4s.8 1.6-1.4 3.8c-1.7 1.7-3.8 1.3-3.8 1.3s-.2-2 1.4-3.7"></path></g><path fill="#3baacf" d="M18.5 38C12.3 27.6 2 31.9 2 31.9s14.7-14.7 24.6-4.8z" stroke-width="1.5" stroke="#3baacf"></path><path fill="#428bc1" d="m23.3 30.3l3.2-3.2C16.7 17.2 2 31.9 2 31.9s12.9-9.2 21.3-1.6" stroke-width="1.5" stroke="#428bc1"></path><path fill="#3baacf" d="M26 45.5C36.4 51.7 32.1 62 32.1 62s14.7-14.7 4.8-24.6z" stroke-width="1.5" stroke="#3baacf"></path><path fill="#428bc1" d="m33.7 40.7l3.2-3.2c9.9 9.9-4.8 24.6-4.8 24.6s9.2-13 1.6-21.4" stroke-width="1.5" stroke="#428bc1"></path><path fill="#c5d0d8" d="M48.8 30.9C37.1 42.5 24.2 48.8 19.7 44.3s1.8-17.4 13.4-29.1c13.6-13.6 28.7-13 28.7-13s.5 15.1-13 28.7" stroke-width="1.5" stroke="#c5d0d8"></path><path fill="#dae3ea" d="M45.8 27.6C34.2 39.2 22.6 46.8 19.9 44.1s4.9-14.3 16.5-25.9C50 4.6 62 2 62 2s-2.6 12-16.2 25.6" stroke-width="1.5" stroke="#dae3ea"></path><path fill="#c94747" d="M24.3 47.5c-.5.5-1.3.5-1.8 0l-6-6c-.5-.5-.5-1.4 0-1.9l1.8-1.8l7.8 7.8z" stroke-width="1.5" stroke="#c94747"></path><path fill="#f15744" d="M22.6 45.7c-.5.5-1.1.7-1.4.4l-3.4-3.4c-.3-.3-.1-.9.4-1.4l1.8-1.8l4.4 4.4z" stroke-width="1.5" stroke="#f15744"></path><path fill="#3e4347" d="M20.9 48.2c-.3.3-1 .3-1.3 0l-3.9-3.9c-.3-.3-.2-.9.1-1.2l1.2-1.2l5.1 5.1z" stroke-width="1.5" stroke="#3e4347"></path><path fill="#62727a" d="M20.1 47.4c-.3.3-.9.4-1.1.2l-2.7-2.7c-.2-.2-.1-.7.3-1l1.2-1.2l3.5 3.5z" stroke-width="1.5" stroke="#62727a"></path><path fill="#c94747" d="M61.8 2.2S56.4 2 49.1 4.8l10.1 10.1C62 7.6 61.8 2.2 61.8 2.2" stroke-width="1.5" stroke="#c94747"></path><path fill="#f15744" d="M61.8 2.2s-4.3.9-10.8 4.6l6.2 6.2c3.7-6.5 4.6-10.8 4.6-10.8" stroke-width="1.5" stroke="#f15744"></path><circle cx="43.5" cy="20.5" r="5" fill="#edf4f9" stroke-width="1.5" stroke="#edf4f9"></circle><circle cx="43.5" cy="20.5" r="3.3" fill="#3baacf" stroke-width="1.5" stroke="#3baacf"></circle><circle cx="33.5" cy="30.5" r="5" fill="#edf4f9" stroke-width="1.5" stroke="#edf4f9"></circle><circle cx="33.5" cy="30.5" r="3.3" fill="#3baacf" stroke-width="1.5" stroke="#3baacf"></circle><g fill="#fff" stroke-width="1.5" stroke="#fff"><path d="M48.9 6.9c-.3.3-.9.3-1.2 0s-.3-.9 0-1.2s.9-.3 1.2 0s.3.9 0 1.2"></path><circle cx="50.6" cy="8.6" r=".8"></circle><circle cx="53" cy="11" r=".8"></circle><circle cx="55.3" cy="13.4" r=".8"></circle><circle cx="57.7" cy="15.7" r=".8"></circle></g>
            							</svg>
                                    Discover our Hyvä Performance Optimization Service
                                </a>
                      </div></div></div></div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div
                                class="flex-1 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 items-center justify-evenly justify-items-center gap-4 p-4 lg:p-6 mt-6 rounded-2xl shadow-md bg-[#deecfd]">
                                <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"
                                    title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                                    <svg width="744" height="216" viewBox="0 0 744 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z"
                                            fill="#000938"></path>
                                        <path
                                            d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z"
                                            fill="#0CF292"></path>
                                        <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z"
                                            fill="#0CF292"></path>
                                        <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z"
                                            fill="#0CF292"></path>
                                        <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                                        <path
                                            d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z"
                                            fill="#0CF292"></path>
                                    </svg>
                                </a>
                                <a href="/en/jajuma-develop/hyva-extensions"
                                    title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                                    <svg width="744" height="216" viewBox="0 0 744 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <title>JaJuMa Hyva Technology Partner official badge</title>
                                        <rect width="744" height="216" rx="24" fill="#F6F7FF" />
                                        <rect width="193.5" height="216" fill="#0A23B9" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                                            fill="#14FFAF" />
                                        <path
                                            d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z"
                                            fill="#0A144B" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                                            fill="#0A144B" />
                                    </svg>
                                </a>
                                <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"
                                    title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                                    <svg width="732" height="216" viewBox="0 0 732 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <title>JaJuMa Hyva Contributor official badge</title>
                                        <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                                        <rect width="193.5" height="216" fill="#0A23B9"></rect>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                                            fill="#14FFAF"></path>
                                        <path
                                            d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z"
                                            fill="#0A144B">
                                        </path>
                                        <path
                                            d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z"
                                            fill="#0A144B">
                                        </path>
                                        <path
                                            d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z"
                                            fill="#0A144B"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                                            fill="#0A144B"></path>
                                    </svg>
                                </a>
                                <a href="https://commercemarketplace.adobe.com/partner/JaJuMa"
                                    title="Magento Extensions by JaJuMa on Magento Marketplace" target="_blank"
                                    rel="nofollow noopener">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="185" height="28"
                                        viewBox="0 0 168.231 25.325" class="w-auto h-auto">
                                        <title>JaJuMa Magento Marketplace Approved & Verified extension provider badge
                                        </title>
                                        <path d="M18.988 8.872v10.967l-2.715 1.563V10.448L9.485 6.525l-6.792 3.923.017 10.959L0 19.839V8.881l9.503-5.486zm-8.141
        12.53l-1.353.788-1.362-.779V10.448l-2.711 1.567.004 10.959 4.064 2.351 4.073-2.351V12.011l-2.715-1.567z"
                                            fill="#ee6524"></path>
                                        <text xml:space="preserve"
                                            transform="matrix(.264583 0 0 .264583 -16.773798 -10.986446)" font-size="53"
                                            font-family="sans-serif" fill="currentColor">
                                            <tspan x="146" y="115">Magento <tspan font-weight="600">Marketplace</tspan>
                                            </tspan>
                                        </text>
                                        <text xml:space="preserve" x="50" y="14" font-size="8" font-family="sans-serif"
                                            fill="currentColor">
                                            <tspan x="35" y="6">Approved by</tspan>
                                        </text>
                                    </svg>
                                </a>
                                <div class="flex items-center gap-2">
                                    <a href="/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes"
                                        title="JaJuMa-Shop | Mage-OS Demo-Shop">
                                        <img src="/media/wysiwyg/badges/mage-os-contributor-badge.svg" width="80"
                                            height="60" alt="Mage-OS Contributor Badge" loading="lazy">
                                    </a>
                                    <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"
                                        title="Magento Development Services - Magento Association Bronze Member Agency"
                                        target="_blank">
                                        <img src="/media/wysiwyg/badges/mams-brz-badge-full.svg" width="50" height="30"
                                            alt="Magento Association Bronze Member Badge" loading="lazy">
                                    </a>
                                </div>
                                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"
                                    title="Hyvä Certified Developers" target="_blank">
                                    <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="70"
                                        height="70" alt="Certified Hyvä Developers" loading="lazy" />
                                </a>

                            </div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="C5ISHX8"><div data-content-type="text" data-appearance="default" data-element="main"><section id="faq">
<p>&nbsp;</p>
<h2>Magento vs. Shopify Frequently Asked Questions (FAQ)</h2>
<p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-691 .chevron::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkzIDcuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCAxMC41ODZsMy4yOTMtMy4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNGwtNCA0YTEgMSAwIDAxLTEuNDE0IDBsLTQtNGExIDEgMCAwMTAtMS40MTR6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PC9zdmc+Cg==);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-1761906370289_0">
            <div class="accordion-item-header-691 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 chevron">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-1761906370289_0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-691 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>Is Magento still relevant in 2025?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>Absolutely. While its overall market share is smaller, Magento continues to dominate the enterprise segment for complex businesses. With the performance and development efficiency brought by Hyv&auml; themes, and the long-term viability guaranteed by Mage-OS, Magento is more relevant than ever for businesses that require deep customization, scalability, and platform ownership.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-691 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>What is the real Total Cost of Ownership (TCO) for Shopify Plus?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>The starting price of ~$2,300/month is misleading. The real TCO includes a variable platform fee (0.25%-0.40% of revenue over $800k/month), a 0.15%-0.20% penalty for using third-party payment gateways, and $2,000-$5,000+ per month in required third-party apps to replicate native Magento functionality. For a scaling business, the 5-year TCO is consistently higher than a modern Magento build.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-691 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span> Is a Magento store secure?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes, when managed professionally. Magento provides robust security features, but unlike Shopify's managed model, the responsibility for applying security patches lies with the merchant and their development partner. This model offers greater control and transparency, allowing a proactive agency to apply critical patches immediately upon release.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-691 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>Can Magento be as fast as Shopify?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes, and often faster. A Magento store built with a modern Hyv&auml; frontend routinely achieves Google PageSpeed scores of 90+, outperforming many Shopify stores that can be slowed down by numerous third-party app scripts. While Shopify's backend Time to First Byte (TTFB) is strong, Hyv&auml;'s frontend optimization delivers a superior end-user experience.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-691 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>How does Magento compare to Shopify for B2B commerce?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>Magento was designed with B2B in its core: native features like company accounts, custom pricing, quoting, purchase-order workflows, and multi-warehouse inventory. Shopify requires third-party apps or separate Plus instances to approximate these capabilities &mdash; adding both cost and fragility. For complex or hybrid B2B/B2C operations, Magento remains the definitive enterprise framework.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-691 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>Can Magento integrate with headless or composable architectures?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes. Magento&rsquo;s service-oriented, API-driven architecture makes it an ideal base for composable commerce. Many Hyv&auml; builds already leverage headless setups using React, Vue, or Next.js, enabling complete creative freedom without sacrificing platform ownership. Shopify&rsquo;s headless (Hydrogen) stack, in contrast, keeps merchants within a proprietary runtime.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-7">
                            <div class="accordion-item-header-691 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="6">
                                <span>How difficult is it to migrate from Shopify to Magento?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-7">
                                <div class="accordion-item-body-content p-4">
                                    <p>Migrating is a strategic project, not just a technical task. While it requires careful planning, the process is well-defined. A typical migration roadmap involves discovery (auditing your current setup), data migration (products, customers, orders), custom theme and extension development on Magento + Hyv&auml;, and rigorous testing before launch. With an experienced partner, a standard migration can be completed in 2-6 months, with the long-term ROI from lower TCO and greater flexibility often providing a payback period of 12-36 months.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    
</section>
<section id="explore-hyvaverse">
<p>&nbsp;</p>
</section></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div></div></div>]]></description>
              <pubDate>Sat, 01 Nov 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa]]></category>
           </item>
       <item>
      <title>Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS</title>
      <link>https://www.jajuma.de/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization</link>
      <guid>https://www.jajuma.de/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=D9625UM],#html-body [data-pb-style=IX2B99J],#html-body [data-pb-style=XH8X9CH],#html-body [data-pb-style=YVS5SNI]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=AQWFMT9],#html-body [data-pb-style=I9CCJFY],#html-body [data-pb-style=ICQ4Y1P],#html-body [data-pb-style=LOH0EA3],#html-body [data-pb-style=T6QC3P6],#html-body [data-pb-style=YRYPBO0]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=DU200C2]{border-style:none}#html-body [data-pb-style=K3NAK70],#html-body [data-pb-style=KVFV06J]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=T7B7HNJ]{border-style:none}#html-body [data-pb-style=GVU86JG],#html-body [data-pb-style=JONBHUR]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=CH1DXM2]{border-style:none}#html-body [data-pb-style=FEWM9U1],#html-body [data-pb-style=M4G1QCH]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=CW8KL6F],#html-body [data-pb-style=FTW6Y0P],#html-body [data-pb-style=GT48HJ0],#html-body [data-pb-style=HDXYXCO],#html-body [data-pb-style=I5IVXUI],#html-body [data-pb-style=OEEVENR]{display:flex;width:100%}#html-body [data-pb-style=A2YQFRX],#html-body [data-pb-style=R8F8HTC]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=UKBHR1F]{border-style:none}#html-body [data-pb-style=G626HB2],#html-body [data-pb-style=K15B36H]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=BJL75W9],#html-body [data-pb-style=E79H8WY],#html-body [data-pb-style=V7IT9RR],#html-body [data-pb-style=WIGVTIC]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:center}#html-body [data-pb-style=BJL75W9],#html-body [data-pb-style=V7IT9RR],#html-body [data-pb-style=WIGVTIC]{align-self:stretch}#html-body [data-pb-style=BJL75W9],#html-body [data-pb-style=V7IT9RR]{align-self:center}#html-body [data-pb-style=NI320KT]{border-style:none}#html-body [data-pb-style=FEWR00Y],#html-body [data-pb-style=M6DPU3C]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=TTKCQ75]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=E5UV8PO]{background-color:rgba(197,219,240,.5);border-color:#878787;border-radius:16px}#html-body [data-pb-style=E5UV8PO],#html-body [data-pb-style=QXS04LX]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=YS0G30E]{border-style:none}#html-body [data-pb-style=HJ398UC],#html-body [data-pb-style=YME9ML1]{border-radius:19px;max-width:100%;height:auto}#html-body [data-pb-style=BEIADWT],#html-body [data-pb-style=OW7FBEU],#html-body [data-pb-style=Y2HIBOG]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:center}#html-body [data-pb-style=OW7FBEU],#html-body [data-pb-style=Y2HIBOG]{align-self:stretch}@media only screen and (max-width: 768px) { #html-body [data-pb-style=CH1DXM2],#html-body [data-pb-style=DU200C2],#html-body [data-pb-style=NI320KT],#html-body [data-pb-style=T7B7HNJ],#html-body [data-pb-style=UKBHR1F],#html-body [data-pb-style=YS0G30E]{border-style:none} }</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="XH8X9CH"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="I9CCJFY"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="CW8KL6F"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="A2YQFRX"><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Every millisecond counts in the competitive world of e-commerce.</strong><br>Whether you are a seasoned merchant building on the <a href="https://www.jajuma.de/en/magento-metropolis-guide"><strong>robust foundation of the Magento Metropolis</strong></a> or <a href="https://www.jajuma.de/en/hyvaverse-guide"><strong>pushing the performance envelope within the modern Hyv&auml;verse</strong></a>, the <a title="Hyv&auml; Performance Optimization" href="/en/jajuma-develop/hyva-performance-optimization" target="_blank" rel="noopener">quest for ultimate speed</a> is relentless. <br>One of the final, <strong>most stubborn bottlenecks</strong> in this quest is <a title="render-blocking CSS file explained" href="https://web.dev/articles/critical-rendering-path/render-blocking-css" target="_blank" rel="nofollow noopener"><strong>render-blocking CSS</strong></a>. <br>This guide unveils a <strong>cutting-edge strategy</strong> to <strong>eliminate it entirely</strong>, <a title="Hyv&auml; Store Development" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">transforming your store's <strong>performance and user experience</strong></a>.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="R8F8HTC"><figure class="hero md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="UKBHR1F"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Go-CSS-less-The-Modern-Hyva-Strategy-to-Eliminate-Render-Blocking-CSS_1_.png" alt="Conceptual image of an optimized data stream flowing through translucent barriers, symbolizing the elimination of render-blocking CSS in Magento and Hyv&auml; for faster FCP." title="" data-element="desktop_image" data-pb-style="G626HB2"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Go-CSS-less-The-Modern-Hyva-Strategy-to-Eliminate-Render-Blocking-CSS_1_.png" alt="Conceptual image of an optimized data stream flowing through translucent barriers, symbolizing the elimination of render-blocking CSS in Magento and Hyv&auml; for faster FCP." title="" data-element="mobile_image" data-pb-style="K15B36H"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">tl;dr:</span><br>Key Takeaways</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<p><strong>Especially on mobile, latency - not bandwidth - is the main barrier to first paint.&nbsp;<br>Inlining only the used CSS per page removes the extra RTT for styles.css files and typically shaves 200+ ms from FCP/LCP - an outsized win for Hyv&auml; storefronts focused on conversion.</strong></p>
<p>&nbsp;</p>
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>RTT is the Bottleneck</strong>: <br>Especially on mobile, the <strong>Round Trip Time (RTT)</strong> for a network request is a bigger <strong>performance penalty</strong> than the file's download size.</li>
<li><strong><strong>Inline Wins on First Load</strong>:</strong> <br>Inlining all used CSS <strong>eliminates the RTT</strong> for the stylesheet, resulting in a <strong>significantly faster</strong> First Contentful Paint (FCP) for new visitors.</li>
<li><strong><strong>Caching is Nuanced</strong>:</strong> <br>While inlining forgoes cross-page caching, the <strong>performance on warm cache hits is often comparable</strong>, and it can be much faster in common cache revalidation scenarios.</li>
<li><strong>It's a Strategic Trade-Off:</strong> <br>For e-commerce, <strong>prioritizing the speed of the first impression</strong> for new, mobile users is a <strong>high-leverage strategy</strong> that often outweighs the benefits of traditional CSS caching.</li>
</ul>
</div>
</div>
</div>
</div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><hr>
<div class="hyvaverse-main-cta-container text-center">
            <p class="hyvaverse-main-cta-subtext mt-4 text-sm sm:text-base mx-auto">
                Find all you need to know and more valuable insights about Magento and Hyvä:<br>
                <br>
            </p>
            <a href="/en/hyvaverse-guide"
                class="hyvaverse-main-cta-button btn-primary inline-flex items-center justify-center px-4 py-2 lg:px-6 text-lg lg:text-xl font-bold rounded-lg shadow-xl focus:outline-none focus:ring-4 focus:ring-sky-300/70 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all ease-in-out duration-300 transform hover:scale-105 hover:shadow-2xl !text-[#402c05] hyvaverse-teaser-shine"
                title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights."
               >
                <span>&#128640; Dive Into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 w-10 h-10 ml-4 lg:ml-6" width="245.000000pt" height="210.000000pt" viewBox="0 0 245.000000 210.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext mt-4 text-sm sm:text-base mx-auto">
                Your central resource for everything Hyvä - expertly curated by JaJuMa.
            </p>
        </div><br>
<hr>
<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div><div data-content-type="text" data-appearance="default" data-element="main"><div id="toc-summary" class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 md:pb-6 xl:pt-[120px] p-6 lg:p-10">
<div class="mx-auto mb-8 lg:absolute lg:top-[40%] lg:right-4 xl:right-[5%] 2xl:right-[10%] max-w-[180px] rounded-full shadow-xl border-2 border-white/50 overflow-hidden shadow-inner"><img id="U5NENKB" class="w-full h-auto p-2" src="https://www.jajuma.de/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="Hyv&auml;naut Introducing and explaining Hyv&auml; Inline CSS"></div>
<h2 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Table</span><br>of Contents</h2>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-lg lg:text-xl">
<ul class="text-base space-y-2">
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#idea"><strong>The Big Idea:</strong> Trading Requests for Instant Rendering</a></li>
<li><a href="#strategy-section"><strong>The Strategy in Depth: </strong>Pros, Cons, and Real Data</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#strategy-right"><strong>Is This Strategy Right </strong>for Your Magento/Hyv&auml; Store?</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#hyva-inline-css"><strong>The Automated Solution: </strong>JaJuMa Hyv&auml; Inline CSS Extension</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#performance-to-profit"><strong>From Performance to Profit: </strong>The Business Case</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#decision"><strong>Decision Guide: </strong>When to Inline vs. Cache CSS</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#conclusion"><strong>Strategic Conclusion:</strong> Why First Impressions are Everything in E-commerce</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#faq"><strong>FAQ: </strong>Inline CSS, Caching, and Core Web Vitals</a></li>
</ul>
</div>
</div>
</div>
</div></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="idea">The Big Idea: Trading Requests for Instant Rendering</h2>
<p>&nbsp;</p>
<h3>Render-Blocking CSS Explained (Delivery Truck Analogy)</h3>
<p>If you're running a <a tabindex="-1" title="Magento Online Store Development" href="/en/jajuma-shop/online-shop-with-magento-2" target="_blank" rel="noopener"><strong>Magento store</strong></a> on <strong><a tabindex="-1" title="Top 10 Reasons &amp; Benefits for Hyv&auml; Themes" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Themes</a></strong>, you're already in the performance elite. <br>You've embraced a <strong><a tabindex="-1" title="Hyv&auml; Performance Optimization" href="/en/jajuma-develop/hyva-performance-optimization" target="_blank" rel="noopener">philosophy where every millisecond matters</a></strong>, knowing that <a tabindex="-1" title="Page Speed ROI Calculator - Calculate the revenue impact of speed" href="/en/blog/magento-page-speed-roi-calculator" target="_blank" rel="noopener"><strong>speed is directly tied to conversions and customer satisfaction</strong></a>. But after every image is optimized and every script is streamlined, <strong>one final bottleneck remains</strong>, stubbornly <strong>slowing down that first, critical paint</strong> of your website: <strong>the external <code>styles.css</code> file</strong>.</p>
<p dir="ltr">To understand why this file is such a performance villain, especially on mobile, let's use an analogy. <br>Imagine your website's data is a package that needs to be delivered to a customer's browser.</p>
<ul>
<li>
<p><strong>Bandwidth</strong> is the size of the delivery truck. A bigger truck can carry more packages (data) at once.</p>
</li>
<li>
<p><strong>Latency (Round Trip Time or RTT)</strong> is the distance the truck has to travel from the warehouse (your server) to the customer's house (their browser).</p>
</li>
</ul>
<p>Traditionally, your website makes two trips:</p>
<ol>
<li><strong>The first truck delivers the HTML. </strong><br><span>Once it arrives, the browser reads the instructions and says, "Oh, I also need the CSS package!"</span></li>
<li><strong>It then sends the truck all the way back to the warehouse to fetch the <code>styles.css</code> file.</strong></li>
</ol>
<p>No matter how big your truck is (high bandwidth), <strong>that second trip takes time</strong> - especially on mobile networks, this can be <strong>a long, 250+ millisecond journey</strong>.<br><strong>The browser can't show anything until that second truck gets back. </strong></p>
<p>It's worth noting that even with modern protocols like HTTP/2 and HTTP/3, which use multiplexing to reduce head-of-line blocking, the browser still needs to make a distinct request for the CSS file, which incurs this initial RTT cost.</p>
<p>&nbsp;</p></div><figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="DU200C2"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Render-Blocking-CSS-Explained-Delivery-Truck-Analogy.png" alt="An infographic illustrating the delivery truck analogy for render-blocking CSS, comparing a slow two-trip delivery to a fast single-trip delivery for HTML and CSS." title="" data-element="desktop_image" data-pb-style="KVFV06J"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Render-Blocking-CSS-Explained-Delivery-Truck-Analogy.png" alt="An infographic illustrating the delivery truck analogy for render-blocking CSS, comparing a slow two-trip delivery to a fast single-trip delivery for HTML and CSS." title="" data-element="mobile_image" data-pb-style="K3NAK70"></figure><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="AQWFMT9"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="I5IVXUI"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="E79H8WY"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>It's also important to note that the 250ms RTT used in our examples is a <strong>standard figure for lab tests</strong>.</p>
<p><br><strong>In the real world, this 'travel time' can be much longer</strong>. <br>Factors like a user's physical <strong>distance from the server</strong>, <strong>network congestion</strong> during peak hours, or a <strong>weak mobile signal</strong> can easily <strong>push the RTT to 300ms, 400ms, or even higher</strong>.</p>
<p>&nbsp;</p>
<p>This means the <strong>performance gains</strong> from eliminating that second trip are often&nbsp;<strong>even greater in reality</strong> than what these conservative examples show.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column md:ml-4" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="WIGVTIC"><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><p>&nbsp;</p>
<div class="message error rounded-3xl p-6 mt-6">
	<span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 512 512" class="inline-block float-left mb-1" width="29" height="51" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path><title>awesomeicons6/solid/triangle-exclamation</title></svg>

		<span class="block pl-12">
			<blockquote class="py-2.5 px-5 border-l-4 border-secondary-lighter">
				<b>INSIGHT:<br>RTT In Real-Life Can Be Significantly Higher:</b><br>
				For example, in a recent analysis we found Cloudflare was routing almost 50% of visitors
				through long-distance edge servers.<br>
				This resulted in up to 1.2s (!) higher TTFB times (75th percentile) for these users due to
				the increased round-trip times - this across all users, Desktop AND Mobile.
			</blockquote>
		</span>
	</span>
</div></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<div class="message success rounded-3xl p-6 mt-6"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512" class="inline-block float-left mr-2 w-16" width="29" height="51" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"></path><title>awesomeicons6/solid/lightbulb</title></svg>

<blockquote class="py-2.5 px-5 border-l-4 border-secondary-lighter"><strong>IDEA:<br></strong> <strong>Now, what if we could put all the necessary styles inside the first HTML box? <br>The truck makes only one trip. <br>It might be a slightly heavier box, taking a few extra milliseconds to unload, but you've completely eliminated that long, costly second journey. <br>This is the core principle of modern CSS optimization, and it's how we cross the final frontier of performance.</strong></blockquote>
</div>
<p>&nbsp;</p>
<h3>The Old Way: Critical CSS and Its Limits</h3>
<p><strong>For years, the go-to solution was "Critical CSS."</strong><br>The idea was to identify the styles needed for the "above-the-fold" content, put that small package of styles in the first delivery (the HTML), and then have the second truck bring the rest of the CSS later.</p>
<p>While clever, this approach was a flawed hero, plagued with problems:</p>
<ul>
<li>
<p><strong>The "Fold Problem":</strong> <br>What is "above-the-fold"? A phone in portrait mode? A tablet in landscape? A 4K desktop monitor? It's impossible to define a single "fold" that works for everyone, leading to compromises.</p>
</li>
<li>
<p><strong>Maintenance Nightmare:</strong> <br>Change your site's header, and your carefully crafted Critical CSS is now broken, requiring a tedious regeneration process.</p>
</li>
<li>
<p><strong>Flash of Unstyled Content (FOUC):</strong> <br>The most jarring flaw. If a user scrolls before that second CSS truck arrives, they see a flash of a broken, unstyled page - a terrible user experience.</p>
</li>
</ul>
<p>&nbsp;</p>
<h3>The Modern Approach: A Simpler, More Reliable First Paint</h3>
<p><strong>The new paradigm is simpler and far more effective:</strong> <br>Instead of inlining a fraction of the CSS, we <strong>automatically inline all of the used CSS</strong> for that specific page. <br><strong>This single change in strategy makes the old problems obsolete.</strong></p>
<p>&nbsp;</p></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="strategy-section">The Strategy in Depth: Pros, Cons, and Real Data</h2>
<p>&nbsp;</p>
<h3>Four Key Advantages of Going &ldquo;CSS-less&rdquo;</h3>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="LOH0EA3"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="FTW6Y0P"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="BJL75W9"><div data-content-type="text" data-appearance="default" data-element="main"><section>
<p>This <strong>"inline all used CSS"</strong> approach delivers four powerful, immediate benefits:</p>
<ol>
<li>
<p role="presentation"><strong>Eliminates the "Fold Problem" Entirely:</strong> <br>Since all the styles needed for the page are included from the start, the <strong>page is guaranteed to render perfectly</strong> from top to bottom, regardless of the user's screen size.</p>
</li>
<li>
<p role="presentation"><strong>Makes Flash of Unstyled Content (FOUC) Highly Unlikely:</strong> <br>The page is <strong>fully styled from the initial HTML response</strong>. There is no "second truck" to wait for, so there's <strong>no risk of seeing unstyled content</strong>.</p>
</li>
<li>
<p role="presentation"><strong>Maximizes Impact on the First Visit:</strong> <br>This <strong>strategy is hyper-optimized</strong> for the <strong>most important moment in an e-commerce</strong> journey: <strong>the first impression</strong>. <br>It directly attacks the RTT bottleneck, delivering a <strong>massive speed improvement</strong> that <strong>reduces bounce rates</strong> and <a title="Ultimate Guide to LCP &amp; CWV Optimization" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener"><strong>boosts Core Web Vitals</strong></a>.</p>
</li>
<li><strong>Automates "Dead Code" Removal: <br></strong>A <strong>huge side benefit</strong> is that this <strong>process acts as an automatic, per-page CSS cleanup</strong>. <br>You only ship the exact styles needed for that URL, <strong>keeping the payload lean and efficient</strong>. It's common to see a 15 KB stylesheet shrink to just 7 KB of used styles - a <strong>reduction to roundabout 40-50% the size</strong> of the full <code>styles.css</code> file generated by <a title="TailwindCSS Website" href="https://tailwindcss.com/" target="_blank" rel="nofollow noopener">TailwindCSS</a> in <a title="Hyv&auml; Theme Website" href="https://www.hyva.io/hyva-themes-license.html" target="_blank" rel="nofollow noopener">Hyv&auml; Theme</a>.</li>
</ol>
</section></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="V7IT9RR"><figure class="md:ml-8 shadow-xl rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="NI320KT"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Key-Advantages-Going-CSS-less-with-Inline-CSS.png" alt="A visual summary of the key advantages of inlining CSS, including eliminating the 'fold problem' and preventing Flash of Unstyled Content (FOUC) for better Core Web Vitals." title="" data-element="desktop_image" data-pb-style="M6DPU3C"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Key-Advantages-Going-CSS-less-with-Inline-CSS.png" alt="A visual summary of the key advantages of inlining CSS, including eliminating the 'fold problem' and preventing Flash of Unstyled Content (FOUC) for better Core Web Vitals." title="" data-element="mobile_image" data-pb-style="FEWR00Y"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3>A Balanced View: Disadvantages and Considerations</h3>
<p><strong>Of course, this strategy involves a trade-off.</strong> <br>To provide a fair and accurate view, let's address the main considerations:</p>
<ol>
<li>
<p><strong>The Loss of Cross-Page Caching:</strong> <br>This is the biggest drawback. When a user navigates from your homepage to a product page, they have to re-download the CSS for shared elements like the header and footer. This leads to redundant data transfer for users who browse many pages and higher bandwidth usage.</p>
</li>
<li>
<p><strong>Increased HTML Document Size: <br></strong>The HTML for every page will be larger because it now contains the CSS.</p>
</li>
<li>
<p><strong>Client CPU &amp; Parsing Costs:</strong> <br>While parsing an extra 20-40 KB of CSS is a trivial task for most devices, the subsequent style recalculation across a very large and complex DOM could be noticeable on low-end mobile phones.</p>
</li>
</ol>
<p>The data from a simulated mobile connection shows exactly why this trade-off is so effective for the crucial first page load.</p>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
  .custom-inset-shadow {
    position: relative;
    background-color: #f8fafc; /* slate-100 equivalent */
  }

  .custom-inset-shadow::before,
  .custom-inset-shadow::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }

  .custom-inset-shadow::before {
    box-shadow: -15px 0 15px -15px inset;
    left: -15px;
  }

  .custom-inset-shadow::after {
    box-shadow: 15px 0 15px -15px inset;
    right: -15px;
  }
</style></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left"><caption class="caption-top text-base text-slate-700 font-medium px-4 py-2">Table: Cold Cache Timeline Comparison (Mobile, 250ms RTT)</caption>
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Step</th>
<th class="p-4 font-semibold">External 40 KB CSS</th>
<th class="p-4 font-semibold">Inline 20 KB CSS</th>
<th class="p-4 font-semibold custom-inset-shadow text-slate-800">Performance Gain</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Initial RTT (HTML)</td>
<td class="p-4">~250 ms</td>
<td class="p-4">~250 ms</td>
<td class="p-4 custom-inset-shadow">&ndash;</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Extra RTT (CSS)</td>
<td class="p-4">~250 ms</td>
<td class="p-4">0 ms</td>
<td class="p-4 custom-inset-shadow text-green-700 font-semibold">~250 ms Saved</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Download CSS</td>
<td class="p-4">~32 ms</td>
<td class="p-4">~16 ms (in HTML)</td>
<td class="p-4 custom-inset-shadow text-green-700 font-semibold">~16 ms Saved</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Parse/Apply</td>
<td class="p-4">~10&ndash;20 ms</td>
<td class="p-4">~10&ndash;20 ms</td>
<td class="p-4 custom-inset-shadow">~Equal</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">First Paint (Total)</td>
<td class="p-4 font-semibold">~540&ndash;550 ms</td>
<td class="p-4 font-semibold">~276&ndash;286 ms</td>
<td class="p-4 font-bold custom-inset-shadow text-green-700">~250 ms Faster</td>
</tr>
</tbody>
</table>
</div>
<!-- Summary Section -->
<div class="mt-8 lg:mt-10 text-lg text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200">As the table clearly shows, the ~250 ms <strong>improvement in First Paint</strong> comes almost entirely from <strong>eliminating the Extra RTT (CSS)</strong>. <br>You are accepting a tiny download penalty (~16 ms) to win big on the much larger latency delay.</div>
</div>
<p><br><br></p></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3>Revisiting the Caching Argument</h3>
<p>Many engineers assume an external stylesheet will always win because of caching. <br>In practice, the outcome <strong>depends on cache headers,</strong> <strong>cache and revalidation behavior</strong>. If you use fingerprinted assets (<code>/&lt;deploy-version&gt;/styles.css</code>) with long max-age and immutable cache headers - a best practice for Hyv&auml; stores -<strong> external CSS can essentially behave as a zero-cost resource on warm navigations</strong>. <br>However, in the <strong>common cases</strong> where the <strong>user&rsquo;s cache is cold or has been evicted</strong> (mobile browser caches are often smaller and less persistent) or an asset is revalidated (a 304 Not Modified check), <strong>inlining used CSS often provides a more consistent and faster first visit.</strong></p>
<p>Let's analyze the data for a user with a warm cache that requires revalidation.</p>
<p>&nbsp;</p></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left"><caption class="caption-top text-base text-slate-700 font-medium px-4 py-2"><strong>Table: Warm Cache Performance Scenarios (Approx. First Contentful Paint)</strong></caption>
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Scenario</th>
<th class="p-4 font-semibold">What Happens</th>
<th class="p-4 font-semibold">Extra Network</th>
<th class="p-4 font-semibold">CSS Availability</th>
<th class="p-4 font-semibold">Approx. FCP</th>
<th class="p-4 font-semibold custom-inset-shadow">The Verdict</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Inline 20KB CSS</td>
<td class="p-4">CSS in HTML</td>
<td class="p-4">none</td>
<td class="p-4">Immediate</td>
<td class="p-4 font-semibold">~276&ndash;286 ms<br><span class="text-slate-500 text-xs">250ms HTML RTT + 16ms download + 10&ndash;20ms parse/apply + 0&ndash;2ms inline overhead</span></td>
<td class="p-4 custom-inset-shadow text-red-600 font-semibold">Penalty ~10&ndash;20ms</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">External 40KB &ndash; memory cache hit</td>
<td class="p-4">CSS found in RAM</td>
<td class="p-4">none</td>
<td class="p-4">Instant</td>
<td class="p-4 font-semibold">~260&ndash;270 ms<br><span class="text-slate-500 text-xs">250ms HTML RTT + 10&ndash;20ms parse/apply</span></td>
<td class="p-4 custom-inset-shadow text-green-700 font-semibold">Effectively a Draw</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">External 40KB &ndash; disk cache hit</td>
<td class="p-4">Disk lookup + parse (~5&ndash;15ms)</td>
<td class="p-4">none</td>
<td class="p-4">Slight delay</td>
<td class="p-4 font-semibold">~265&ndash;285 ms<br><span class="text-slate-500 text-xs">250ms HTML RTT + 5&ndash;15ms disk lookup + 10&ndash;20ms parse/apply</span></td>
<td class="p-4 custom-inset-shadow text-green-700 font-semibold">Effectively a Draw</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">External 40KB &ndash; cache revalidation (304)</td>
<td class="p-4">Browser checks if non-fingerprinted CSS is fresh</td>
<td class="p-4">+250ms</td>
<td class="p-4">After headers</td>
<td class="p-4 font-semibold">~500&ndash;520 ms<br><span class="text-slate-500 text-xs">250ms HTML RTT + 250ms revalidate RTT + 10&ndash;20ms parse/apply</span></td>
<td class="p-4 custom-inset-shadow text-green-700 font-bold">Inline Wins Big</td>
</tr>
</tbody>
</table>
</div>
<!-- Summary Section -->
<div class="mt-8 lg:mt-10 text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200">The data suggests that while a perfectly configured caching strategy with fingerprinted assets makes external CSS highly efficient for repeat views, the inline approach provides a significant advantage in scenarios involving revalidation or cold caches. <br><strong>The best approach depends on your audience and goals.</strong></div>
</div>
<p><br><br></p></div><div data-content-type="text" data-appearance="default" data-element="main"><div id="strategy-right">
<p>&nbsp;</p>
<h2>Is This Strategy Right for Your Magento/Hyv&auml; Store?</h2>
<p>&nbsp;</p>
<h3>Why This Strategy is a Perfect Match for Hyv&auml; Themes</h3>
<p>While the <strong>principles of inlining CSS</strong> can be applied to any platform, the <a title="Your Expert Guide to Hyv&auml;: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>Hyv&auml; architecture</strong></a> makes this <strong>"inline all used CSS" strategy uniquely powerful and effective.</strong></p>
<ul>
<li>
<p><strong>A Lean Foundation:</strong> <br>The magic starts with Hyv&auml;'s use of <strong><a title="Tailwind CSS Website" href="https://tailwindcss.com/" target="_blank" rel="nofollow noopener">Tailwind CSS</a> and <a title="PurgeCSS Website" href="https://purgecss.com/" target="_blank" rel="nofollow noopener">PurgeCSS</a></strong>. Before our <a title="Hyv&auml; Inline CSS Extension for Hyv&auml; Stores" href="https://www.jajuma.de/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Inline CSS Extension</strong></a> even begins its work, Hyv&auml; has already created a <strong>highly optimized stylesheet</strong> containing only the CSS classes your store actually uses. This means the amount of CSS we need to inline is already incredibly small (often just 7-15 KB), making the <strong>performance trade-off of a slightly larger HTML file a clear and decisive win</strong>. Attempting this with a bloated, traditional Luma stylesheet would be far less effective.</p>
</li>
<li>
<p><strong>Reliable and Predictable Output:</strong> <br><a title="Top 10 Reasons and Benefits for Hyv&auml; Theme" href="https://www.jajuma.de/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml;'s modern, streamlined stack</a>, which <strong>favors <a title="AlpineJS Website" href="https://alpinejs.dev/" target="_blank" rel="noopener">Alpine.js</a></strong> over complex JavaScript libraries, makes the process of <strong>detecting "used" CSS on any given page far more reliable</strong>. This ensures that the <strong>automatically generated inline styles are a complete and accurate</strong> representation of what the page needs <strong>to render perfectly.</strong></p>
</li>
<li>
<p><strong>A Shared Philosophy:</strong> <br>Merchants and developers choose Hyv&auml; because they are committed to a <a title="Hyv&auml; Performance Optimization" href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" target="_blank" rel="noopener"><strong>"performance-first" mindset</strong></a>. This strategy is the <strong>logical conclusion of that philosophy</strong>. It takes <a title="Hyv&auml; Store Development" href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml;'s already excellent baseline performance</strong></a> and <strong>eliminates the final</strong>, stubborn bottleneck - the <strong>render-blocking network request</strong> - to achieve a <strong>new level of speed</strong> that <strong>aligns perfectly with the core values of the <a title="Your Expert Guide to Hyv&auml;: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">Hyv&auml; community</a></strong>.</p>
</li>
</ul>
<p>&nbsp;</p>
<h3>Ideal Use Cases and Business Profiles</h3>
<p>This <strong>aggressive, performance-first approach is a game-changer</strong>, but it's particularly powerful for specific business profiles. <br>This strategy is for you if you identify with any of the following:</p>
<ul>
<li>
<p><strong>The Conversion-Focused Merchant:</strong> <br>Your <strong>primary goal is to turn new visitors into customers</strong>. <br>You understand that the <strong>first impression is everything</strong> and that <strong>a high bounce rate on your landing pages is lost revenue.</strong></p>
</li>
<li>
<p><strong>The Mobile-First Brand:</strong> <br>A significant portion of your traffic comes from users on <strong>mobile devices</strong>, where <strong>network latency (RTT) is the biggest performance killer</strong>. <br>You need a <strong>solution that directly attacks this mobile bottleneck.</strong></p>
</li>
<li>
<p><strong>The <a title="Hyv&auml; Store Development" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Performance-Obsessed Agency/Developer</a>:</strong> <br>You've already <a title="Ultimate Image Optimizer for Hyv&auml; &amp; Magento 2" href="/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">optimized images</a>, configured caching, and are <strong>looking for the final frontier of performance gains</strong>. <br>You want to <strong>deliver objectively faster sites</strong> than your competitors and have the <a title="Real User Montoring (RUM) For Magento" href="/en/jajuma-develop/magento-extensions/real-user-monitoring-rum-power-toy-for-magento-2" target="_blank" rel="noopener"><strong>Core Web Vitals scores to prove it</strong>.</a></p>
</li>
<li>
<p><strong>The Hyv&auml; Purist: <br></strong>You invested in Hyv&auml; for its <a title="Hyv&auml; Performance Optimization" href="/en/jajuma-develop/hyva-performance-optimization" target="_blank" rel="noopener"><strong>"performance-first" philosophy</strong></a> and <br>want to take that principle to its logical conclusion by <strong>eliminating the last major render-blocking resource.</strong></p>
</li>
</ul>
<p>&nbsp;</p>
<h3>When Not to Use This Strategy</h3>
<p>To maintain a balanced perspective, this aggressive inlining strategy is not always the best choice. <br>Consider sticking with a traditional external stylesheet if your project fits one of these profiles:</p>
<ul>
<li>
<p><strong>Internal Apps with Long User Sessions:</strong> <br>For applications where users are logged in for long periods and navigate through dozens of pages, overall bandwidth efficiency may be more important than the initial load time.</p>
</li>
<li>
<p><strong>Sites with Very Large, Monolithic CSS:</strong> <br>If your site has an exceptionally large CSS footprint (hundreds of kilobytes of used rules on every page), inlining could bloat the HTML document to an unacceptable size.</p>
</li>
<li>
<p><strong>Sites with a Strict Content Security Policy (CSP):</strong> <br>If your security policy disallows <code>unsafe-inline</code> styles, implementing this technique would require complex nonce or hash management, which may not be practical.</p>
</li>
</ul>
</div></div><div data-content-type="text" data-appearance="default" data-element="main"><h2>The Automated Solution: <br>JaJuMa Hyv&auml; Inline CSS Extension</h2>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="T6QC3P6"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="OEEVENR"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="TTKCQ75"><div data-content-type="text" data-appearance="default" data-element="main"><h3>How It Works (Automated Simplicity)</h3>
<p><strong>This powerful strategy is complex to implement manually.</strong> <br>That's why we built <a title="Hyv&auml; Inline CSS Extension for Hyv&auml; Stores" href="https://www.jajuma.de/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener"><strong>our Hyv&auml; Inline CSS Extension</strong> </a> It automates this entire process, <strong>turning advanced theory into a simple reality</strong> for <strong><a title="Hyv&auml; Store Development" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">your Hyv&auml; store</a></strong>.</p>
<ul>
<li>
<p><strong>Automatic Generation &amp; Caching:</strong> <br>The extension <strong>intelligently generates the used CSS for each page</strong> once, then serves it instantly from a <strong>long-lived cache</strong>, ensuring <strong>your server's TTFB remains fast.</strong></p>
</li>
<li>
<p><strong>Total Control: <br></strong>It's packed with <strong>features for real-world scenarios</strong>, including a <strong>"Safe List"</strong> for dynamic classes and a <strong>"Compatibility Mode"</strong> that provides the <strong>initial speed boost</strong> while loading the full stylesheet asynchronously as a <strong>risk-free fallback</strong>.</p>
</li>
</ul></div></div><div class="pagebuilder-column md:ml-4 p-4" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="E5UV8PO"><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><p class="font-bold mt-2"><b>Feature Highlights</b></p>
<ul class="list-outside py-2 pl-10 marker:text-success marker:text-3xl">
<li><b class="text-lg">Automatic Inline CSS:</b> <br>Generates and inlines only the used CSS for each page.</li>
<li><b class="text-lg">Third-Party CSS Cleanup:</b> <br>Merges and optimizes CSS from other extensions.</li>
<li><b class="text-lg">Compatibility Mode:</b> <br>Guarantees 100% compatibility with zero risk.</li>
<li><b class="text-lg">"First Visit" Optimization:</b> <br>Inlines CSS only for new visitors to balance speed and caching.</li>
<li><b class="text-lg">Dedicated Cache:</b> <br>Ensures fast performance with no server overhead.</li>
</ul></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><div id="hyva-inline-css">
<div>
<p>&nbsp;</p>
</div>
<a class="hover:!no-underline !text-secondary" title="Hyv&auml; Inline CSS Extension for Hyv&auml; Stores" href="jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener">
<div class="inline-block rounded-3xl bg-white shadow-lg hover:shadow-2xl duration-300 border border-container-light p-4 w-full mt-4 mb-8">
<div class="mb-5 md:pr-4 lg:mb-0 lg:float-left bg-white w-full md:w-3/12"><img id="JNKKK85" class="w-full rounded-3xl shadow-lg hover:shadow-2xl duration-300 border border-container-light" src="/media/wysiwyg/jajuma-develop/power-toys-magento/Hyva-Inline-CSS-Module-Magento-2-Marketplace.png" alt="JaJuMa Hyv&auml; Inline CSS Extension" width="240" height="240"></div>
<p><strong>Hyv&auml; Inline CSS, Run Your Hyv&auml; Themes Magento Store <strong>Without Unused CSS &amp; Without CSS File</strong></strong></p>
<p>The one and only cutting-edge extension to avoid render-blocking styles &amp; unused CSS by automatically generating CSS individually per page!</p>
<p><strong>Advanced Core Web Vitals (CWV) optimization for faster FCP (First Contentful Paint) &amp; LCP (Largest Contentful Paint).</strong></p>
<p>&nbsp;</p>
</div>
<strong> <span class="relative btn-primary rounded-lg p-2 mt-3 text-white hover:text-primary hover:shadow-2xl float-right"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 512 512" class="inline-block mb-1" width="13" height="17" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path><title>awesomeicons6/solid/circle-info</title></svg>
 More Info </span> </strong></a>
<div>
<p>&nbsp;</p>
<h3>Cleaning Up the Mess: Handling Third-Party CSS Files</h3>
<p><strong>In a perfect world, your Hyv&auml; store would only load its single, highly optimized <code>styles.css</code> file.</strong> <br>However, the reality of the <a title="Magento Metropolis - All You Need To Know About Magento" href="/en/magento-metropolis-guide" target="_blank" rel="noopener">Magento ecosystem</a> is that <strong>many third-party extensions do not follow Hyv&auml;'s best practices</strong> and add their own <strong>separate, render-blocking CSS files</strong>. <br>Each of <strong>these extra files reintroduces the RTT bottleneck</strong> we've worked so hard to eliminate, <strong>undermining your store's performance.</strong></p>
<p>&nbsp;</p>
<p>Our extension provides a<strong> powerful and elegant solution to this common problem</strong> with the <strong>"Collect All CSS Files"</strong> option. <br>When enabled, it <strong>actively seeks out these additional stylesheets</strong> loaded on the page. It then intelligently <strong>merges them into the main inline CSS generation process</strong>.</p>
<p>&nbsp;</p>
<p><strong>The result is a single, unified, and completely optimized inline style block.</strong> <br>This feature <strong>empowers you to clean up the frontend</strong>, <strong>enforce performance best practices</strong>, and ensure that <strong><em>all</em> of your store's styling</strong> - not just the theme's - is delivered in the fastest way possible, allowing you to <strong>fully realize the performance gains</strong> shown in our data.</p>
<p>&nbsp;</p>
<h3>Why It&rsquo;s a No-Compromise Approach</h3>
<p>While the <strong>data overwhelmingly supports prioritizing the first page load</strong>, the JaJuMa <a title="Hyv&auml; Inline CSS Extension for Hyv&auml; Stores" href="https://www.jajuma.de/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Inline CSS Extension</strong></a> includes an incredibly powerful feature that nullifies the main trade-off: <br><strong>"Inline CSS Only On First Page Load."</strong></p>
<p>&nbsp;</p>
<p>This intelligent setting delivers the absolute best of both worlds:</p>
<ul>
<li>
<p><strong>For New Visitors:</strong> <br><strong>The extension serves the fully inlined version</strong>, eliminating the RTT bottleneck and <strong>guaranteeing the fastest possible first impression</strong> to maximize conversion potential.</p>
</li>
<li>
<p><strong>For Repeat Visitors: <br></strong>Once the browser has the main <strong>styles.css file cached from the first visit</strong>, the extension <strong>stops inlining the CSS on subsequent page loads</strong>. <br>This allows the browser to use its local cache, <strong>optimizing for data efficiency during a longer session.</strong></p>
</li>
</ul>
<p>It's a sophisticated strategy that allows you to win the cold cache battle without sacrificing warm cache efficiency. <br>However, it's important to understand the one architectural trade-off: <br>This approach requires your Full Page Cache (like Varnish) to store two distinct versions of each page - one with inline CSS for new visitors and one without for returning visitors. <br>This means it will take longer for your FPC to become fully "warmed," but it's a <strong>strategic choice that ensures every single user gets the optimal experience for their context.</strong></p>
</div>
</div></div><div data-content-type="text" data-appearance="default" data-element="main"><div id="performance-to-profit">
<p>&nbsp;</p>
<h2>From Performance to Profit: The Business Case</h2>
<h3 class="text-2xl font-bold text-gray-800">Real-World Results: Faster FCP &amp; LCP</h3>
<p class="mb-4">The data is compelling, but the visual proof is undeniable. These waterfall charts show the dramatic difference.</p>
<blockquote class="p-4 bg-secondary-lighter rounded-2xl">
<p class="mb-4"><strong>Methodology: </strong>Tests below where run on Chrome Browser, using network throttling to simulate mobile network conditions.<strong><br></strong></p>
</blockquote>
</div></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
<div>
<h4 class="mb-2"><em>First Contentful Paint (FCP) Comparison</em></h4>
</div>
<div>
<p class="">&nbsp;</p>
<p class="mb-4">See the image below, on top (Default Hyv&auml;), the <strong>page can't render until the purple <code>styles.css</code> bar is finished</strong>.&nbsp;<br>Below (JaJuMa Inline CSS), the <strong>render (green FCP line) happens almost instantly</strong> - before the HTML document has even finished downloading.</p>
</div>
</div></div><figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="T7B7HNJ"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/hyva-inline-css-extension-for-magento-with-hyva-themes/Inline-CSS-Start-Render-First-Contentful-Paint-Comparison-xlarge.jpg" alt="A side-by-side comparison of two waterfall charts demonstrating a faster First Contentful Paint (FCP) with the JaJuMa Inline CSS method versus a default Hyv&auml; setup." title="" data-element="desktop_image" data-pb-style="GVU86JG"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/hyva-inline-css-extension-for-magento-with-hyva-themes/Inline-CSS-Start-Render-First-Contentful-Paint-Comparison-xlarge.jpg" alt="A side-by-side comparison of two waterfall charts demonstrating a faster First Contentful Paint (FCP) with the JaJuMa Inline CSS method versus a default Hyv&auml; setup." title="" data-element="mobile_image" data-pb-style="JONBHUR"><figcaption data-element="caption">Start Render/First Contentful Paint Comparison Hyv&auml; Default vs Inline CSS</figcaption></figure><div data-content-type="text" data-appearance="default" data-element="main"><div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
<div>
<p>&nbsp;</p>
<h4 class="mb-2"><em>Largest Contentful Paint (LCP) Comparison</em></h4>
</div>
<div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="mb-4">When your <a title="Ultimate Guide to LCP Optimization" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener"><strong>LCP element</strong></a> is text, the <strong>benefit is just as profound</strong>. <br>The <strong>LCP is no longer held back by the CSS network request</strong>, shaving hundreds of milliseconds off another <strong>crucial <a title="Google Core Web Vital KPI Definition" href="https://web.dev/articles/vitals" target="_blank" rel="nofollow noopener">Google Core Web Vital KPI</a></strong>.</p>
</div>
</div></div><figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="CH1DXM2"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/hyva-inline-css-extension-for-magento-with-hyva-themes/Inline-CSS-Largest-Contentful-Paint-Comparison-xlarge.jpg" alt="A comparison of two waterfall charts showing how inlining CSS leads to a faster Largest Contentful Paint (LCP) for text elements on a Hyv&auml; Themes storefront." title="" data-element="desktop_image" data-pb-style="M4G1QCH"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/hyva-inline-css-extension-for-magento-with-hyva-themes/Inline-CSS-Largest-Contentful-Paint-Comparison-xlarge.jpg" alt="A comparison of two waterfall charts showing how inlining CSS leads to a faster Largest Contentful Paint (LCP) for text elements on a Hyv&auml; Themes storefront." title="" data-element="mobile_image" data-pb-style="FEWM9U1"><figcaption data-element="caption">Largest Contentful Paint (Text element) Comparison Hyv&auml; Default vs Inline CSS</figcaption></figure><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3>The &ldquo;Render-Before-Download&rdquo; Phenomenon</h3>
<p><strong>Look closely at the waterfall charts again.</strong> <br>You'll notice something that defies traditional web performance logic. With the inline CSS method, the <strong>First Contentful Paint (the green vertical line)</strong> doesn't just happen sooner - it <strong>happens while the main HTML document (the blue bar) is still being downloaded</strong>.</p>
<p>This is the <strong>"Render-Before-Download" phenomenon</strong>, and it's the <strong>ultimate proof of this strategy's power</strong>. <br>By delivering all necessary styling instructions within the very first packets of the HTML, the <strong>browser has everything it needs to start painting the page for the user almost instantaneously</strong>. It no longer has to wait for one file to finish before it can request the next. <br>This isn't just shaving off milliseconds; <br><strong>it's fundamentally changing the sequence of events to create the fastest possible perceived performance.</strong></p>
<p>&nbsp;</p>
<h3>From Milliseconds to Money: The ROI of CSS-less</h3>
<p>A <strong>performance gain of over 200 milliseconds is a significant technical achievement</strong>, but <strong>what does it mean for your bottom line?</strong> <br>The data from major e-commerce players is clear and consistent:</p>
<ul>
<li><strong>Amazon</strong> famously found that every <strong>100ms of latency cost them 1% in sales.</strong></li>
<li><strong>Walmart</strong> discovered that for every <strong>1-second improvement</strong> in page load time, <strong>conversions increased by 2%</strong>.</li>
<li>A study by <strong>Portent</strong> found that a site loading in 1 second has a conversion rate <strong>2.5 times higher</strong> than a site loading in 5 seconds.</li>
</ul>
<p>With per-page inlining yielding <strong>consistent first-load wins of 250ms or more</strong>. Based on Amazon's findings, that's a potential <strong>2.5% increase in</strong> sales from day one. For an e-commerce store, <strong>this isn't just a performance tweak;</strong> it's one of the highest-leverage investments you can make in your <strong>conversion rate optimization.</strong></p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="flex flex-col xl:flex-row justify-center items-center gap-4 my-16">
                <a href="/en/blog/magento-page-speed-roi-calculator" title="Calculate the Performance ROI and Impact on your Revenue"
                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512">
                                                <rect width="288" height="416" x="112" y="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" rx="32" ry="32"></rect>
		<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M160.01 112H352v64H160.01z"></path>
		<circle cx="168" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="344" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="168" cy="328" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="328" r="24" fill="currentColor"></circle>
		<circle cx="168" cy="408" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="408" r="24" fill="currentColor"></circle>
		<rect width="48" height="128" x="320" y="304" fill="currentColor" rx="24" ry="24"></rect>
                                            </svg>
                    Calculate The Page Speed Impact on Your Revenue
                </a>
            </div></div><div data-content-type="text" data-appearance="default" data-element="main"><h3>Why Testing Matters</h3>
<p>While the data presented here is compelling, every website and audience is unique. <br>Before committing to a full roll-out of this strategy, we strongly recommend a data-driven approach. Monitor <strong>key business metrics</strong> like <strong>conversion rates</strong>, <strong>bounce rates</strong>, and <strong>average session duration</strong>, alongside <a title="Real User Monitoring (RUM) for Magento 2" href="/en/jajuma-develop/magento-extensions/real-user-monitoring-rum-power-toy-for-magento-2" target="_blank" rel="noopener"><strong>technical metrics like FCP, LCP, CLS, TTFB</strong></a>, and <strong>total bandwidth usage</strong>. <br><a title="Hyv&auml; Performance Optimization" href="/en/jajuma-develop/hyva-performance-optimization" target="_blank" rel="noopener">Pay special attention to performance</a> on representative low-end mobile devices to ensure that any potential increase in client-side processing doesn't negatively impact their experience. This will allow you to make an <strong>informed, evidence-based decision</strong> that is right for <a title="Hyv&auml; Store Development" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">your specific store</a>.</p>
<p>&nbsp;</p>
<h2 id="decision">Decision Guide: When to Inline vs. Cache CSS</h2>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="YRYPBO0"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="HDXYXCO"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="QXS04LX"><figure class="md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="YS0G30E"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Decision-Guide-Flow-Chart-Inline-vs-Cache-CSS.png" alt="A decision guide flowchart for Magento and Hyv&auml; developers, recommending the inline CSS strategy to achieve the fastest first impression and improve Core Web Vitals." title="" data-element="desktop_image" data-pb-style="HJ398UC"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Decision-Guide-Flow-Chart-Inline-vs-Cache-CSS.png" alt="A decision guide flowchart for Magento and Hyv&auml; developers, recommending the inline CSS strategy to achieve the fastest first impression and improve Core Web Vitals." title="" data-element="mobile_image" data-pb-style="YME9ML1"></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="BEIADWT"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>For <a title="Hyv&auml; Store Devevelopment" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml;-based e-commerce stores</a>, prioritizing first-time mobile visitors is often the highest-leverage decision.</p>
<p>&nbsp;<br>Per-page <strong>inlining of used CSS is an aggressive yet pragmatic optimization</strong> that <strong>removes the RTT bottleneck</strong> and reliably <a title="Ultimate Guide to LCP Optimization" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener"><strong>improves FCP/LCP</strong></a> for new visitors.</p>
<p>But do this intentionally: test on representative devices and networks, ensure per-URL CSS is cached server-side, and verify CSP and FPC behavior.</p>
<p>If you want the best of both worlds, use our extension&rsquo;s <strong>&ldquo;inline-first visit + preload external CSS&rdquo;</strong> feature - it&rsquo;s slightly more complex but gives <strong>strong first-load wins without burning bandwidth</strong> on long sessions.</p>
<p>&nbsp;</p>
<p>Or as a simple rule of thumbs CSS delivery strategy decision guide:</p>
<ul>
<li>If you sell, persuade, or convert &rarr; Inline wins.</li>
<li>If you retain, engage, or provide tools &rarr; Cache wins.</li>
</ul>
<p>&nbsp;</p></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>&nbsp;</p>
<div class="inline-block rounded-3xl bg-white shadow-lg hover:shadow-2xl duration-300 border border-container-light p-4 w-full mt-4 mb-8">
<div class="mb-5 md:pr-4 lg:mb-0 lg:float-left bg-white w-full md:w-[13%]"><img class="w-full rounded-3xl shadow-lg hover:shadow-2xl duration-300 border border-container-light" src="/media/wysiwyg/jajuma-develop/power-toys-magento/Hyva-Inline-CSS-Module-Magento-2-Marketplace.png" alt="JaJuMa Hyv&auml; Inline CSS Extension" width="240" height="240"></div>
<p><strong>Ready to go CSS-less?<br>Hyv&auml; Inline CSS: <br>Crossing The Final Frontier Of CSS Optimization <br>For Your Magento Hyv&auml; Store.</strong></p>
<p>&nbsp;</p>
</div>
<p><a class="hover:!no-underline !text-secondary" href="/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes"><strong><span class="relative btn-primary rounded-lg p-2 mt-3 text-white hover:text-primary hover:shadow-2xl float-right"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 512 512" class="inline-block mb-1" width="13" height="17" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path><title>awesomeicons6/solid/circle-info</title></svg>
 More Info</span></strong></a></p></div></div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="YVS5SNI"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="conclusion"><strong>Strategic Conclusion: <br>Why First Impressions are Everything in E-Commerce</strong></h2>
<p><strong>In e-commerce, the first page load isn't just a metric; it's the entire sales pitch.</strong> <br>You have seconds to convince a new visitor that your site is <strong>fast, professional, and trustworthy</strong>. <br>Sacrificing a few kilobytes on subsequent page views to guarantee the <strong>fastest possible first impression</strong> is not just a good trade-off; <br>it's <strong>the winning strategy</strong>.</p>
<p>The <strong>JaJuMa Hyv&auml; Inline CSS extension</strong> embodies this <strong>modern philosophy</strong>. It delivers <strong>clear, measurable benefits</strong>:</p>
<ul>
<li>
<p><strong>Eliminates render-blocking CSS for the inlined page.</strong></p>
</li>
<li>
<p><strong>Minimizes unused CSS shipped to each page.</strong></p>
</li>
<li>
<p><strong>Significantly improved FCP and LCP in our tests.</strong></p>
</li>
<li>
<p><strong>Better Core Web Vitals scores and enhanced SEO potential.</strong></p>
</li>
<li>
<p><strong>A more consistent first-impression experience that can reduce bounce rates and help conversions.</strong></p>
</li>
</ul>
<p><strong><strong>Thisis a high-leverage option for many Hyv&auml; stores for peak performance.</strong></strong></p>
<p>&nbsp;</p>
<div class="inline-block rounded-3xl bg-white shadow-lg hover:shadow-2xl duration-300 border border-container-light p-4 w-full mt-4 mb-8">
<div class="mb-5 md:pr-4 lg:mb-0 lg:float-left bg-white w-full md:w-[13%]"><img class="w-full rounded-3xl shadow-lg hover:shadow-2xl duration-300 border border-container-light" src="/media/wysiwyg/jajuma-develop/power-toys-magento/Hyva-Inline-CSS-Module-Magento-2-Marketplace.png" alt="JaJuMa Hyv&auml; Inline CSS Extension" width="240" height="240"></div>
<p><strong>Ready to go CSS-less?<br>Hyv&auml; Inline CSS: <br>Crossing The Final Frontier Of CSS Optimization <br>For Your Magento Hyv&auml; Store.</strong></p>
<p>&nbsp;</p>
</div>
<p><a class="hover:!no-underline !text-secondary" tabindex="-1" href="/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes"><strong><span class="relative btn-primary rounded-lg p-2 mt-3 text-white hover:text-primary hover:shadow-2xl float-right"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 512 512" class="inline-block mb-1" width="13" height="17" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path><title>awesomeicons6/solid/circle-info</title></svg>
 More Info</span></strong></a></p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="D9625UM"><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Do you like this idea and how we build and optimize Hyv&auml; stores?</strong><br>Using cutting-edge technolgy, pushing boundaries and limits to reach no-compromise peformance and user expierence?</p>
<p><strong>Partner with the proven experts.</strong>&nbsp;<a tabindex="-1" href="https://www.jajuma.de/en/contact">Contact us today for a free consultation</a> and let's build a faster, more profitable Magento <a title="Hyv&auml; Store Development" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; store</a> together.</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="ICQ4Y1P"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="GT48HJ0"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="OW7FBEU"><div class="w-4/5 m-auto" data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><p class="text-center"><strong>Ready for a<br>complete transformation?</strong></p>
                     <div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Store Development Services"
                                    target="_blank"
                                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 400 400" class="w-6 h-6" width="25" height="25" role="img">
                                                <rect fill="#fff"></rect>
                                                <path d="M222.131 112.458L237.41 66.8783H290.403L275.043 112.458H222.131Z"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M158.026 174.716C172.966 162.84 191.165 155.37 211.659 155.37C253.609 155.37 294.409 182.196 294.409 250.953V336H240.776V250.953C240.776 215.516 223.929 202.107 200.933 202.107C181.969 202.107 168.181 213.026 160.516 224.517V336H106.692V115.336H74L91.2077 64H158.026V174.716ZM272.988 109.567L286.407 69.7565H239.485L226.132 109.567H272.988ZM235.338 64H294.409L277.112 115.336H218.13L235.338 64Z"></path>
                                                <title>Hyvä Logo</title>
                                            </svg>
                                    Explore our Hyvä Store Development Services
                                </a>
                      </div>
</div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="Y2HIBOG"><div class="w-4/5 m-auto" data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><p class="text-center"><strong>Finally flawless and perfect Core Web Vitals for your Hyvä store?</strong></p>
                     <div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="/en/jajuma-develop/hyva-performance-optimization" title="Hyvä Performance Optimization"
                                    target="_blank"
                                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 64 64">	
                                    		<g fill="#ff9d27" stroke-width="1.5" stroke="#ff9d27"><path d="M10.9 48.7c4-4 4.4-5 6.9-2.5s1.5 2.8-2.5 6.9c-3 3-6.8 2.4-6.8 2.4s-.6-3.8 2.4-6.8"></path><path d="M18.5 52.8c1.6-4.2 2.1-4.7-.2-6s-2.3-.4-3.8 3.8c-1.2 3.1.2 5.9.2 5.9s2.7-.5 3.8-3.7"></path></g><path fill="#fdf516" d="M16.2 48.9c.9-2.3.9-2.8 2.1-2.1c1.3.7 1 1 .1 3.3c-.6 1.7-2.1 2.1-2.1 2.1s-.7-1.5-.1-3.3" stroke-width="1.5" stroke="#fdf516"></path><path fill="#ff9d27" d="M17.1 45.7c-1.3-2.3-1.8-1.8-6-.2c-3.1 1.2-3.7 3.8-3.7 3.8s2.8 1.4 5.9.2c4.2-1.6 5.1-1.6 3.8-3.8" stroke-width="1.5" stroke="#ff9d27"></path><g fill="#fdf516" stroke-width="1.5" stroke="#fdf516"><path d="M15 47.8c2.3-.9 2.8-.9 2.1-2.1c-.7-1.3-1-1-3.3-.1c-1.7.6-2.1 2.1-2.1 2.1s1.6.7 3.3.1"></path><path d="M13.9 47.6c2.2-2.2 2.4-2.8 3.8-1.4s.8 1.6-1.4 3.8c-1.7 1.7-3.8 1.3-3.8 1.3s-.2-2 1.4-3.7"></path></g><path fill="#3baacf" d="M18.5 38C12.3 27.6 2 31.9 2 31.9s14.7-14.7 24.6-4.8z" stroke-width="1.5" stroke="#3baacf"></path><path fill="#428bc1" d="m23.3 30.3l3.2-3.2C16.7 17.2 2 31.9 2 31.9s12.9-9.2 21.3-1.6" stroke-width="1.5" stroke="#428bc1"></path><path fill="#3baacf" d="M26 45.5C36.4 51.7 32.1 62 32.1 62s14.7-14.7 4.8-24.6z" stroke-width="1.5" stroke="#3baacf"></path><path fill="#428bc1" d="m33.7 40.7l3.2-3.2c9.9 9.9-4.8 24.6-4.8 24.6s9.2-13 1.6-21.4" stroke-width="1.5" stroke="#428bc1"></path><path fill="#c5d0d8" d="M48.8 30.9C37.1 42.5 24.2 48.8 19.7 44.3s1.8-17.4 13.4-29.1c13.6-13.6 28.7-13 28.7-13s.5 15.1-13 28.7" stroke-width="1.5" stroke="#c5d0d8"></path><path fill="#dae3ea" d="M45.8 27.6C34.2 39.2 22.6 46.8 19.9 44.1s4.9-14.3 16.5-25.9C50 4.6 62 2 62 2s-2.6 12-16.2 25.6" stroke-width="1.5" stroke="#dae3ea"></path><path fill="#c94747" d="M24.3 47.5c-.5.5-1.3.5-1.8 0l-6-6c-.5-.5-.5-1.4 0-1.9l1.8-1.8l7.8 7.8z" stroke-width="1.5" stroke="#c94747"></path><path fill="#f15744" d="M22.6 45.7c-.5.5-1.1.7-1.4.4l-3.4-3.4c-.3-.3-.1-.9.4-1.4l1.8-1.8l4.4 4.4z" stroke-width="1.5" stroke="#f15744"></path><path fill="#3e4347" d="M20.9 48.2c-.3.3-1 .3-1.3 0l-3.9-3.9c-.3-.3-.2-.9.1-1.2l1.2-1.2l5.1 5.1z" stroke-width="1.5" stroke="#3e4347"></path><path fill="#62727a" d="M20.1 47.4c-.3.3-.9.4-1.1.2l-2.7-2.7c-.2-.2-.1-.7.3-1l1.2-1.2l3.5 3.5z" stroke-width="1.5" stroke="#62727a"></path><path fill="#c94747" d="M61.8 2.2S56.4 2 49.1 4.8l10.1 10.1C62 7.6 61.8 2.2 61.8 2.2" stroke-width="1.5" stroke="#c94747"></path><path fill="#f15744" d="M61.8 2.2s-4.3.9-10.8 4.6l6.2 6.2c3.7-6.5 4.6-10.8 4.6-10.8" stroke-width="1.5" stroke="#f15744"></path><circle cx="43.5" cy="20.5" r="5" fill="#edf4f9" stroke-width="1.5" stroke="#edf4f9"></circle><circle cx="43.5" cy="20.5" r="3.3" fill="#3baacf" stroke-width="1.5" stroke="#3baacf"></circle><circle cx="33.5" cy="30.5" r="5" fill="#edf4f9" stroke-width="1.5" stroke="#edf4f9"></circle><circle cx="33.5" cy="30.5" r="3.3" fill="#3baacf" stroke-width="1.5" stroke="#3baacf"></circle><g fill="#fff" stroke-width="1.5" stroke="#fff"><path d="M48.9 6.9c-.3.3-.9.3-1.2 0s-.3-.9 0-1.2s.9-.3 1.2 0s.3.9 0 1.2"></path><circle cx="50.6" cy="8.6" r=".8"></circle><circle cx="53" cy="11" r=".8"></circle><circle cx="55.3" cy="13.4" r=".8"></circle><circle cx="57.7" cy="15.7" r=".8"></circle></g>
            							</svg>
                                    Discover our Hyvä Performance Optimization Service
                                </a>
                      </div></div></div></div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div
                                class="flex-1 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 items-center justify-evenly justify-items-center gap-4 p-4 lg:p-6 mt-6 rounded-2xl shadow-md bg-[#deecfd]">
                                <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"
                                    title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                                    <svg width="744" height="216" viewBox="0 0 744 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z"
                                            fill="#000938"></path>
                                        <path
                                            d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z"
                                            fill="#0CF292"></path>
                                        <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z"
                                            fill="#0CF292"></path>
                                        <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z"
                                            fill="#0CF292"></path>
                                        <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                                        <path
                                            d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z"
                                            fill="#0CF292"></path>
                                    </svg>
                                </a>
                                <a href="/en/jajuma-develop/hyva-extensions"
                                    title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                                    <svg width="744" height="216" viewBox="0 0 744 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <title>JaJuMa Hyva Technology Partner official badge</title>
                                        <rect width="744" height="216" rx="24" fill="#F6F7FF" />
                                        <rect width="193.5" height="216" fill="#0A23B9" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                                            fill="#14FFAF" />
                                        <path
                                            d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z"
                                            fill="#0A144B" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                                            fill="#0A144B" />
                                    </svg>
                                </a>
                                <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"
                                    title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                                    <svg width="732" height="216" viewBox="0 0 732 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <title>JaJuMa Hyva Contributor official badge</title>
                                        <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                                        <rect width="193.5" height="216" fill="#0A23B9"></rect>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                                            fill="#14FFAF"></path>
                                        <path
                                            d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z"
                                            fill="#0A144B">
                                        </path>
                                        <path
                                            d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z"
                                            fill="#0A144B">
                                        </path>
                                        <path
                                            d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z"
                                            fill="#0A144B"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                                            fill="#0A144B"></path>
                                    </svg>
                                </a>
                                <a href="https://commercemarketplace.adobe.com/partner/JaJuMa"
                                    title="Magento Extensions by JaJuMa on Magento Marketplace" target="_blank"
                                    rel="nofollow noopener">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="185" height="28"
                                        viewBox="0 0 168.231 25.325" class="w-auto h-auto">
                                        <title>JaJuMa Magento Marketplace Approved & Verified extension provider badge
                                        </title>
                                        <path d="M18.988 8.872v10.967l-2.715 1.563V10.448L9.485 6.525l-6.792 3.923.017 10.959L0 19.839V8.881l9.503-5.486zm-8.141
        12.53l-1.353.788-1.362-.779V10.448l-2.711 1.567.004 10.959 4.064 2.351 4.073-2.351V12.011l-2.715-1.567z"
                                            fill="#ee6524"></path>
                                        <text xml:space="preserve"
                                            transform="matrix(.264583 0 0 .264583 -16.773798 -10.986446)" font-size="53"
                                            font-family="sans-serif" fill="currentColor">
                                            <tspan x="146" y="115">Magento <tspan font-weight="600">Marketplace</tspan>
                                            </tspan>
                                        </text>
                                        <text xml:space="preserve" x="50" y="14" font-size="8" font-family="sans-serif"
                                            fill="currentColor">
                                            <tspan x="35" y="6">Approved by</tspan>
                                        </text>
                                    </svg>
                                </a>
                                <div class="flex items-center gap-2">
                                    <a href="/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes"
                                        title="JaJuMa-Shop | Mage-OS Demo-Shop">
                                        <img src="/media/wysiwyg/badges/mage-os-contributor-badge.svg" width="80"
                                            height="60" alt="Mage-OS Contributor Badge" loading="lazy">
                                    </a>
                                    <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"
                                        title="Magento Development Services - Magento Association Bronze Member Agency"
                                        target="_blank">
                                        <img src="/media/wysiwyg/badges/mams-brz-badge-full.svg" width="50" height="30"
                                            alt="Magento Association Bronze Member Badge" loading="lazy">
                                    </a>
                                </div>
                                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"
                                    title="Hyvä Certified Developers" target="_blank">
                                    <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="70"
                                        height="70" alt="Certified Hyvä Developers" loading="lazy" />
                                </a>

                            </div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="IX2B99J"><div data-content-type="text" data-appearance="default" data-element="main"><section id="faq">
<p>&nbsp;</p>
<h2>FAQ: Inline CSS, Caching, and Core Web Vitals</h2>
<p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-369 .chevron::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkzIDcuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCAxMC41ODZsMy4yOTMtMy4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNGwtNCA0YTEgMSAwIDAxLTEuNDE0IDBsLTQtNGExIDEgMCAwMTAtMS40MTR6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PC9zdmc+Cg==);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-369 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 chevron">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-369 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>Will this increase my server load or Time to First Byte (TTFB)?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>No. The extension uses a smart, hash-based caching system.</p>
<p>The unique CSS for a given page URL is generated only once upon the first visit. <br>For all subsequent requests for that same URL, the optimized CSS is served instantly from a long-lived cache, ensuring no impact on your TTFB or server load.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-369 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>Is this difficult to set up?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>No, the setup is straightforward for any Magento developer.</p>
<p>After installation via composer, the only required server-side step is to install the purgecss node package in your theme's Tailwind directory. <br>From there, the core functionality can be enabled with a single click in the Magento admin, and you can start seeing performance benefits immediately.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-369 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>What if I have a lot of JavaScript that adds CSS classes dynamically?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>The extension is built for these real-world scenarios.</p>
<p>It provides three levels of protection:</p>
<p>&nbsp;</p>
<ol>
<li><strong>Safe List:</strong> <br>Manually enter any dynamic class names (e.g., is-active) to ensure they are never removed. &nbsp;<br><strong>Scan Additional Files:</strong> <br>Configure the extension to scan specific JavaScript or PHTML files to find classes that are not present in the initial HTML source. &nbsp;<br><strong>Compatibility Mode:</strong> <br>For 100% peace of mind, enable this mode. It provides the initial render speed benefit of inlining while also loading the full stylesheet asynchronously as a fallback, guaranteeing no styles are ever missed. &nbsp;</li>
</ol>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-369 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>Is this better than just using a Content Delivery Network (CDN)?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>They work perfectly together and solve different problems. <br>A CDN aims to reduces network latency (RTT) by moving your files physically closer to the user, which is excellent. <br>This extension eliminates the RTT for your CSS file entirely for the initial render, which is even better. Using both gives you the maximum possible performance benefit.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-369 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>Does this work with Varnish or other Full Page Cache systems?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes, the extension is fully compatible with Varnish and other FPC solutions.</p>
<p>The "Inline CSS Only On First Page Load" feature is especially powerful here. <br>It allows Varnish to store two versions of a page: one with inline CSS for new visitors (to be served when the cookie is not present) and one without for returning visitors, ensuring the optimal version is served to every user.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    
<p>&nbsp;</p>
</section></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div></div></div>]]></description>
              <pubDate>Mon, 25 Aug 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa-Develop]]></category>
           </item>
       <item>
      <title>Magento Page Speed ROI Calculator: Quantify Your Lost Revenue &amp; Unlock Growth with Hyvä</title>
      <link>https://www.jajuma.de/en/blog/magento-page-speed-roi-calculator</link>
      <guid>https://www.jajuma.de/en/blog/magento-page-speed-roi-calculator</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=EREDVEJ],#html-body [data-pb-style=V2U132A]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=EREDVEJ]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=V2U132A]{align-self:stretch}#html-body [data-pb-style=SK4W4L0]{display:flex;width:100%}#html-body [data-pb-style=GQJBN9N],#html-body [data-pb-style=JJ08DH2]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=BEBXLER]{border-style:none}#html-body [data-pb-style=CQXY8LJ],#html-body [data-pb-style=HY707NC]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=A3T5Q0J]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=NQDPW3W]{display:flex;width:100%}#html-body [data-pb-style=K82JYIJ],#html-body [data-pb-style=XJNT6PC]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:center}#html-body [data-pb-style=XJNT6PC]{align-self:stretch}#html-body [data-pb-style=BQA9UJ3]{border-style:none}#html-body [data-pb-style=HYTYD67],#html-body [data-pb-style=N131O9C]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=A74TLRV]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=K6UAHCC]{display:flex;width:100%}#html-body [data-pb-style=GWGVHMM],#html-body [data-pb-style=OM2WI66],#html-body [data-pb-style=SEH9KLY]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=GWGVHMM],#html-body [data-pb-style=SEH9KLY]{justify-content:flex-start;display:flex;flex-direction:column;width:50%}#html-body [data-pb-style=OM2WI66]{margin-top:48px}#html-body [data-pb-style=ICLNULD]{display:flex;width:100%}#html-body [data-pb-style=CFCG7JQ]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:center}#html-body [data-pb-style=KKUC4O1]{border-style:none}#html-body [data-pb-style=JOGTJF2],#html-body [data-pb-style=NUBMERN]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=MNQOHLS],#html-body [data-pb-style=OCFSB4I]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=MNQOHLS]{justify-content:flex-start;display:flex;flex-direction:column;width:50%;align-self:center}#html-body [data-pb-style=OCFSB4I]{align-self:stretch}#html-body [data-pb-style=MM9ATLB]{display:flex;width:100%}#html-body [data-pb-style=FN12C63]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=JPM47CT]{text-align:center}#html-body [data-pb-style=ENQICUB]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}@media only screen and (max-width: 768px) { #html-body [data-pb-style=BEBXLER],#html-body [data-pb-style=BQA9UJ3],#html-body [data-pb-style=KKUC4O1]{border-style:none} }</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="EREDVEJ"><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
@media (min-width: 1280px) {
    .blog-widget-recent .post-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
 </style></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="V2U132A"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="SK4W4L0"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="JJ08DH2"><div data-content-type="text" data-appearance="default" data-element="main"><p>A slow website is more than just an annoyance for your customers;<br>it's an unseen<strong> tax on your revenue</strong>, a direct <strong>drain on your profits</strong>, and a silent<strong> gift to your faster competitors</strong>.</p>
<p>&nbsp;</p>
<p>For <strong><a tabindex="-1" title="Magento Online Store Development and Partner" href="/en/jajuma-shop/online-shop-with-magento-2" target="_blank" rel="noopener">Magento merchants</a></strong>, this issue is particularly acute. Every second of delay, every frustratingly slow page load, actively pushes potential customers away and erodes your bottom line. <br>This isn't a vague feeling or an abstract technical problem - it's a <strong>quantifiable financial liability</strong>.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="GQJBN9N"><figure class="hero md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="BEBXLER"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/magento-page-speed-ROI-calculator.png" alt="Magento Page Speed ROI Calculator - Conversion Rate Charts ilustrating lost/gained revenue by improving Magento performance and page speed" title="" data-element="desktop_image" data-pb-style="CQXY8LJ"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/magento-page-speed-ROI-calculator.png" alt="Magento Page Speed ROI Calculator - Conversion Rate Charts ilustrating lost/gained revenue by improving Magento performance and page speed" title="" data-element="mobile_image" data-pb-style="HY707NC"></figure></div></div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="#roi-calculator" title="Page Speed ROI Calculator" class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512">
                                                <rect width="288" height="416" x="112" y="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" rx="32" ry="32"></rect>
		<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M160.01 112H352v64H160.01z"></path>
		<circle cx="168" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="344" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="168" cy="328" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="328" r="24" fill="currentColor"></circle>
		<circle cx="168" cy="408" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="408" r="24" fill="currentColor"></circle>
		<rect width="48" height="128" x="320" y="304" fill="currentColor" rx="24" ry="24"></rect>
                                            </svg>
                                    Calculate Your Financial Impact Now
                                </a>
                            </div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>To combat this, it's essential to understand both the full power of Magento and the performance-first solutions available:<br>Dive deep into the platform with our&nbsp;<strong><a class="ng-star-inserted" tabindex="-1" title="Magento Metropolis: Your Ultimate Guide to the World's Most Powerful Commerce Platform" href="https://www.jajuma.de/en/magento-metropolis-guide" target="_blank" rel="noopener">Magento Metropolis Guide</a></strong> and discover the solution in our <strong><a tabindex="-1" title="The Hyv&auml;verse: All you need to know and more valuable insights about Magento and Hyv&auml;" href="https://www.jajuma.de/en/hyvaverse-guide" target="_blank" rel="noopener">Hyv&auml;verse Guide</a></strong>.</p>
<p>&nbsp;</p>
<p><strong>The good news is that the damage can be measured</strong>, and more importantly, it can be fixed. <br>This report will not only reveal the staggering, <strong>data-backed financial cost of a slow Magento store</strong> but will also provide a <strong>powerful tool to calculate your specific losses </strong>due to slow performance.</p>
<p><strong>More than</strong> that, <strong>it will illuminate a clear, proven path to recovery, <a tabindex="-1" title="Hyv&auml; Online Store Development and Partner" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">transforming performance bottlenecks into profit centers</a>.</strong></p>
<p>&nbsp;</p>
<p>Prepare to move from vague frustration to data-driven clarity. We'll explore:</p>
<ul>
<li><strong>The Hard Data:</strong> The staggering, industry-backed financial cost of a slow site.</li>
<li><strong>Your Numbers:</strong> A powerful ROI calculator to quantify your specific losses.</li>
<li><strong>The Root Cause:</strong> Why Magento's default Luma theme is an architectural bottleneck.</li>
<li><strong>The Proven Solution:</strong> How migrating to Hyv&auml; transforms performance liabilities into profit centers.</li>
</ul>
<p>&nbsp;</p></div><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb82-absolute {
position: absolute
}
.cmsb82-relative {
position: relative
}
.cmsb82-bottom-0 {
bottom: 0px
}
.cmsb82-left-0 {
left: 0px
}
.cmsb82-z-\[1\] {
z-index: 1
}
.cmsb82-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb82-my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.cmsb82-ml-4 {
margin-left: 1rem
}
.cmsb82-flex {
display: flex
}
.cmsb82-inline-flex {
display: inline-flex
}
.cmsb82-grid {
display: grid
}
.cmsb82-hidden {
display: none
}
.cmsb82-h-10 {
height: 2.5rem
}
.cmsb82-h-auto {
height: auto
}
.cmsb82-w-10 {
width: 2.5rem
}
.cmsb82-w-8 {
width: 2rem
}
.cmsb82-flex-shrink-0 {
flex-shrink: 0
}
.cmsb82-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb82-flex-row {
flex-direction: row
}
.cmsb82-items-center {
align-items: center
}
.cmsb82-justify-center {
justify-content: center
}
.cmsb82-gap-2 {
gap: 0.5rem
}
.cmsb82-gap-8 {
gap: 2rem
}
.cmsb82-overflow-hidden {
overflow: hidden
}
.cmsb82-rounded-lg {
border-radius: 0.5rem
}
.cmsb82-\!bg-\[\#EE682F\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(238 104 47 / var(--tw-bg-opacity)) !important
}
.cmsb82-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb82-py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.cmsb82-pt-4 {
padding-top: 1rem
}
.cmsb82-text-center {
text-align: center
}
.cmsb82-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb82-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb82-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb82-font-bold {
font-weight: 700
}
.cmsb82-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb82-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb82-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb82-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb82-duration-300 {
transition-duration: 300ms
}
.cmsb82-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb82-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb82-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb82-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb82-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb82-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
@media (min-width: 640px) {
.cmsb82-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
}
@media (min-width: 1024px) {
.cmsb82-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb82-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.cmsb82-lg\:gap-4 {
gap: 1rem
}
.cmsb82-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb82-lg\:text-\[20px\] {
font-size: 20px
}
.cmsb82-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div data-cacheable="false">
    <hr>
    <p class="hyvaverse-main-cta-subtext cmsb82-text-center cmsb82-my-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
        Find all you need to know and more valuable insights about Hyv&auml; and Magento.<br>
        Expertly curated by JaJuMa:
        <br>
    </p>
    <div class="hyvaverse-main-cta-container cmsb82-text-center cmsb82-grid cmsb82-grid-cols-1 cmsb82-lg:grid-cols-2 cmsb82-gap-8">
        <div>

            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">        
                <span>&#128640;</span>
                <span>Launch the JaJuMa Hyv&auml;verse</span>
                <svg class="cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10 cmsb82-ml-4 cmsb82-lg:ml-6" height="210.000000pt" preserveaspectratio="xMidYMid meet" version="1.0" viewbox="0 0 245.000000 210.000000" width="245.000000pt" xmlns="http://www.w3.org/2000/svg">

                    <g fill="#402b05" stroke="none" transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)">
                        <path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
                        <path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
                        <path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
                        <path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
                        <path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
                        <path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
                        <path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
                    </g>
                </svg>
                </div>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Hyv&auml;.
            </p></div>
        <div>

            <a class="btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-white cmsb82-!bg-[#EE682F] cmsb82-overflow-hidden" href="/en/magento-metropolis-guide" title="Explore the Magento Metropolis!">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">
                    <svg class="cmsb82-drop-shadow-lg cmsb82-w-8 cmsb82-h-auto" fill="none" height="24" viewbox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect fill="url(#pattern0_413_38)" height="24" width="22"></rect>
                        <defs>
                            <pattern height="1" id="pattern0_413_38" patterncontentunits="objectBoundingBox" width="1">
                                <use transform="matrix(0.00329268 0 0 0.003 -0.317073 -0.311111)" xlink:href="#image0_413_38"></use>
                            </pattern>
                            <image height="500" id="image0_413_38" preserveaspectratio="none" width="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRFAAAA/////////v7+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v////////////7+///////////////////+///////////////////////+///////////////////////////+/////////////////////////////////v///////////v///v///////////////////////////////v///////////v///////////////v///v///v7+/v//ZZGWUAAAAFp0Uk5TAAUS/wwBBg8YAgMHGiMKCRMiHw0EERUIIRkdHBcQCxYOFB4gGyG6tv+yjO3//7E1h9uw/OSbTSnA8qA5i/GvuDFfyf/i9qmg9S9rZEpq6eJR5jjGKG0bIiAVGb/2kAAAFSlJREFUeJztnduPHEcVh3t2PbFnfVs7vq0vWSdxkFAkeCPhASFeyANISNz+zAghEA9IwAOKhABFQgSJWzAkcRKHODcnjoO9y86tZ7qnu+t2qs6pOr/vwXGSmZ6e/qarq06dOjWqgDpG3CcA0gPpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hWiVPpoNKr/9j/WM+FAm/QnOiWPD7cepD8XNnRJ3x76n8c/S3Ua3OiRfnJkvJl3Rh+nOBN2tEgfbdm97tRHcc9DBDqkHzu0f+3pD+OdhxA0SJ984fb6A4efSJaUL318yv1BXXgjX7z0k5/7vOvsPerzkETh0m37b5tM7lOehyzKlu7SgdvgMdlpSKNk6U+G9sNLfbSXK33nIcFBnigyOlus9NM0QdUiH+2FSj/+iOxQI7pDSaFI6Rc+ID1ccT26AqW7BuAsKEx7edIvxoir7L4f4aBslCb9bKyO14lPIx2YgcKkE/XZOymnjS9J+vhc3Eb4ybtRD5+OkqQPJkORUEisphjpEfrsXZz7b5KPiUsp0qN14NpceDfRB0WkDOnJlE/ZTtOmRKQE6eMn30v7gbk/2guQvpe+U515Yk320s/wBE2yDtFlLt0/HSqYjPvxWUufHHIuPrz8Qa6P9pylM7XsK3Kdas9Xul9uMzEns1z8lq30a+9wn8GMvTe5z8CDTKXvfsJ9BjXjx9lVNchTevypFReym3PNUbos5VMyG77lJ/2yxAucV4cuN+mM0ZhhLr3NfQb2ZCb9xh2iAx1brn8Z71LF0fN5tGcl/TrN3bSZ40j0W8pFe0bSiZYwHOtc43aO5KF87T8UR4lOPtJp+uz9/ewtkkuRhfZcpAetNK8Z7G2RLHOtzmxLHF00yUP6+IDkMKZnLpF22pV0EchBOlGiq03ewz5JKF367FsG0mketoeWjcUJkki67ORJ8dKDa4jMsS/8SjNI2Dku+NEuXDpRy+5249F8qG3TwoBs6TRtrXOEdLxF8lC+cZviKBGQLJ0ozu4VJ6OJCggN0cmVThSA8531JPrFiVwXIVY6TQpcSAt78w2KM7hKchRahEqnmTQPrQdGM8Ejb9QuUjpRAC48s4HoESOtjZconaaGCE27SvNo3/lcVPKkPOk0Uys7j6juLppho6g2Xpp0omgM6c5LV0nqEAiKzAqT/jTJdPR54vXqT5CMty+/J6WNFyWd5gEaY/E4jXYpITpB0id7/6Y4TJxtd8aXSYZvMvYEkiOdZpwWsQ4QSWR2LGHZpRjpJJf0+t2YI2KaIKGA3T2FSKe5zaMHQS5RFB3hXwMlQ/pTbxEcJEXJ3slxguWy3UnYCREhnWJq4wrF78YCilkB6iGlKxKknw/fFOnSh+nC2wQB+af+RXAe/giQThDnTBzkvBJ8p/K28PzSn70degSGnlFwqjRrUJZdenghEZacpOCuJ6d1bunBztnS0EKLEDPmzzFLD413cBZ3Co0tbLHNv/BKD5xIZa/nFRRGTDXI3IRXeljsVcD+t0GPdrbZF1bpQVuoCckpDxm1c30FTukht8l4i3/eYs7OVe9IC9fuvZzSAxp3Ibf5Au8vwvQ1GKX773wsrmqbdz1qHut80r1HPKdpFi/T4jnpyjO5zifdM7v97ANhKwcW+G04cPOf5CdiAZ90vwchfwZCL14Va1jadzbpXvFXcQ/zJh7aWUoXsEn3udFl9dm7cC89yfGduKR7VA8SqHzy8Oq9VtfENQuIYxtPLunON3qdJzF+tP/ZtKvMH4QdnZufwqUHDw5XkwiO8wnXSZL93chEem14PYrH/IRvZn+spWW6aWdowJiku12Xi+8vhkPtRyZfJsJmLaL12oQuDy890p1u9FUEY/NtTA/6rshS41SesW61GVJj5UtfLy7Q8TaOmi6dQ7NWoNB+yWP63y2PdIf5yMaqlc77J/lF6x6XbWTk2mZ8apFuPZxt5cb0XMekiUd980Sbld4tn+xapN+ynIJud9T6npQJFw/0Ppg6ns126+3TR5Z5pFs+0jcWJPZ3jxLtZz504heq+4etSI1Vxmz68Ixk6dN2z34uLkEr6VKRen46pyymBNPXIBIsfRrucCn7UY/mI+GW9HFxvgGwxTdNX5RErvTZc9qtvljMhtI55+Ox7dvST7TJlT67aK7LSKJpd1+zuGijzPWy9l93P50wxEqfB9bdV8BEqUbhs73EQrrFHHvyMZtY6fMr4bHsiX7hiF8dgqVK82gd0pevmI/Qveq30c6+TSZ+c7j1mRu/LKQvWATZPIv2EV5G772iIL2F8Tosw6/elRqJHu0BFWYgvYX1dfBfykyy6WnIAstapTElHtLnhEsnGL6FFUyoVRq/A6TPoZAeeDVDaw6sPtz0bSF9zvI6BFZtC4h7BJcthfQWpstQl80NLezi28Z7r0hcAektTJehnh8Plu41aif4VEjfwHQZ6nwzgjvOfddN/zXU60B6C9NlqCeeSCoFu0Vmg2qirAHpLRJLd6jpQ7QTW7Wu0pQODekzyKXbXlmafXVbH7h31/aViRAuneKZvmCvvdRwE5rdVResVJqm1CF9RgzpxiWPRFvCLVmpNCV8Q/qMONIHcxAnx4jLv6xUmhoQSJ8RS3r/BabrPGx+kunYOqQbw9oROnJLOiOzNHvtNVkd0vTL1SHd+PSMKL1r+EYTjWmxUmmaQID0GfUSoRjS25nm7nVirFipNE0VQvqMWjrNvtqbrF1nwqF5z0dA+hRjWnC96Nwn99iOycFncZ7lSyC9iQTp0VmpNP20dEg3BrjrHawgPQbCpZMGRtMC6a0PNS3Wr6VHGUylAdJbHwrp3a9MhHDpkcbQKVipND3NIH0GpEeFRbpxeFyHzKhylxhYfUfTCBXSZ0B6VFikG9et1NK914zys1JpijrrkG5ct1JLD99zmQ1Ib2KcO6urwpkrtogF0psYg6u1dM+drySwUmnKGUm+vTKLdONsZlnSTd83Sm2kIWRKrxMY97k3y/bHXnryHflkSq/LSKiQnrwiMKTHwl76CeqUXxPCpV93XXEqB3vpyfedkim9XlOuQnryXacgPRb20kkKYbkgU3rd4KmQnmiDghWQHgt76ck3nBIu/UTqYBUd9tIT7kAzR6b0uiaUCunJg+/CpZuKOAgG0ptAeu9LkyBTeh2jgvQYCJdus8WVUCC9CaT3vjQJwqXb7s8pEEhvAum9L02CTOn1xrqQHgNIjwWkN4H03pcmQab0ugDUtXcin0o8IL2JvfSryfcWJwPSm0B670uTAOmxgPQmRul1UjCkxwDSYwHpTSC996VJkCm9XugD6TGA9FhAehN76RkHZ9YWIEN6peROh/QmRun1im1IjwGkxwLSm0B6E0ifUl8wSI8BpMdirZIMpFeQ3gbSp0B6VGRKr68CpMcA0mMB6U3spZv2mxcMpDeB9CaQPgXSowLpsVgr/gnplYv086nr6tEB6U2ylX7uU9PWwCsgvUkc6Y+Nu4QEMi3yZ9w8sgbSm0SRvvemxd5fAey/PvuH9c7bkN4kSkduXncx2o68yyXzkO5JFOnLCqtRgnir+n7W0tequEN6FUl6vRtEhDbeQaDPeyB9in/zPv8r7cZe2+tddkj3JLb0arJHF9Q53G6UKoV0T6JIrzfwm2Hc78+W9gYrkO5JAukWO/7ZsLnTBqR7EmWcfqy9ja1pX1sLOnZMg3RP0kgP1t65SZ619LqwAqTPiCK9c3+EgFm6y3c6/zOke5JOuvfGnT3K40hPvdmqcOnP3rY+aN9OKMcOu//7IP27ZllLXxvdQ3qVWHpVnXHd4XBodzxI9ySx9OoJt4fmhaHoPaR7klq6eQvzNQzb3UK6J+mlVztX7PrxFz8ybCsA6X6Ybzsf6effC/3Uymb/ekj3g0f60bU1fdlDi98Fhmx+cEk3XP2LVkWNIN0PB+kOwRkb6dXZ+73/a9su0TVG7B3Sp9TSHYr8W0nvbeNP2I7lY+TIQfqUWvrxR0Mva2ApvbMfv/ux9WW3lu5QfkSD9ImxIa2lm19aYyt986C9cfYurKU7VIyE9CmrC2Z9jd12IZ/sLFKln7nzhdsVtz2h9SAgpLtJt7eeaOt5y/OZrPcYId1RunWymyzpDY+Q7tSRq+zXrIiSftCYz4V0V+m2PfiOdKkYWElvzdNBurN0yzQIQdLbjQ6ku0u3G7jJkb4R6IH0yqXe+xKLVYlipG/O1EF6ZXHhNvOVzK2DEOnLxbNrGJddQPqUrp64aWJUhvSNNsr8FqRAz5l0ToYNv02C9O6MSkifYn4udl+GwZXn/NK7f6oW4SVIn9F3Gfbu9r6FPTjTl2plzglQId18GaZVgzrpH73Zz7IF0Sd9t3cljf9PPBYs0i3qcvVfh76b3SbBjYAehf2J0+aAYqKf6woW6RY//qEFB09vjooqXun9t7lNBRxzCi4xUqUPNnmdS5BPxyom1qTr1IdyrQK/ahTESm8XlmjSEY5nkz608q26eM98SCXSbWq9DYepNpanPXuXSfrged60GFIkGmuuwSPdat7McAO0rv6teyl778/9ffGv48F6tMblFVOsE3HJ4JFuNytt6ODMu8XLy/+l+ynH6c9V848dfgjZFa9MHXmXLX14zfARz5wYjUZ/mf/9+b+mjMg9V82sD/qyXSmb/JHOJd2ygvb+G8N3wclbo9Gf5n/96mtJpZ88+rndvT3wOuvF0b1xqHgwSbdOcj0wPf1f+MP8n6mkv/j76Z9fG43+PBhWtF+lkf5GFy+9e7JynckXXx+9Un35/O/SSP/mb6d/fuPVQeUupS8USXeoA2McgJ88uu+q/yWS/pXXqm/9elHwvw+XQmYDwbxocEl3uNXNF2a8e3N39Mc0V++l0Z1rvxkcVjisv6s4+u6M0m+4LCAztoH7z49+ab/sLYTvjl4d7nm5/JorltadT7rjxelJUBDHFccQEYdzRukORSZmDIa4heC8X5Rd9Qtq+KQ7VPlakHwK0hH3b2QcmsSBT7rVZEST058y9HpsmZzoLS3ayxnrXd5IYZTu2uWZwnNn2OC1lQTLE51XunPN1iN2jlPt00GK3+4h/WWH48Ipvbrm042xrAKVlNNeDdAVig1HfGCV7tPAV/K0d+fsmWFq3LmlO5ZnXnLpbeLzCMJ352e+3y6vdMeQ5Yqn/0F7Hv4MLL8YxpQsEBFm6Z4NfMUTs+7A+/yfsi+LSA63dI+AxhIBsRpv5amy9Lvhln5k/Ts/93wrW0dogWePZAbrubNLr8Yvbf/M972cbfxAbWEj1+m2gvWBX3q18+3RT33fy9cbcpsabsL5PJ8iQHpVfX/0E+/38gRmfYfmM4x5f7ERIX38vdf+5v3m8x8mb+Mtc3l7SL+4oY0I6UcN3gsv+795eMUBPXZrGHoYXhKTBiHSqwsv/sL/zUlnYcJ2ZufIg9xAinSf6fU10t0//kPzIwxZtKmQIz1o2JuqH+8ddJ3B3oNbIEi65164NfHjHWEtO9fs+SaipLvs3tFB5LIEk2Mho8Obd/ijxktkSQ8dDcUctNvWne9GVA6ANOmBcY9omYZhLTt3CK6FPOmBHeSOgrwEBA3NJcwHNpAoPbCNp29JfVM95shbpSFSumWxlj6os6lKGJo3ECrdM1N2CeXo6FzQsbjn/DsRKz1ovpruMWos0D+InKF5A7nSq2r3k4A3kwzaw+IGyWu+2iJZeuA1D+7QjbeDJm35p1D7EC3dqpzuAGEP1LDnS/o6kPYIl350v4TcbQGF/8OGjVfuysjQ7ka89MARk29gNizoKi0a0yID6WEh0MljDwFhT5VRUCwnATlID5zGds+TvhUSKmcqNOBCHtIDn7Bura1NifZ++vf1kEMm0gOzqVxmYYK6ECJS4IxkI70anwu5oJbZVONLIdHfG29J7rOvyEd6YPfKqhBdwHLKSuJ0Wg85SQ/MnTQuIGMOAKYjL+lRB+0+dY9WCB+aN8hNeqD2/uFbWNBV5AxqL/lJDxtSjQ+6WuHxTpByWTVwzGQoPTQ/fnNYtR+0o0YG0ZgWWUp3L7zbYu/hB1vbRw/hydbDg8tBi1Yy6rOvyFN6uHYqGGtE+ZOr9MD1JlRkNE5bI1vpofF4CvJUnrX0wETpYPbezSPouknW0gMH7WHkFI1pkbl0tg5dnNVTichdOk8bfzZoyp2d/KVXk7Op88vl7i9hRwHSQ7MYXRG6bMWBIqSn1J71w3xBIdKrnURrCzIMum5SivQ0sZoSbvOqJOmhi4otyHho3qAk6ZFjNTkkN9tRlvTAQiFDXA4o9S2NwqSH1nTsJa98KAPFSQ+sNtpNIR24JeVJD9t0oQvmzTfoKVF6YAJ7m3I6cEuKlE45+ZZ6B4EUFCr9qE0mSUve+TzXRIkhipUeuC5tjpQC7cSUKz1ce4kt+4ySpVfVqZC4qZDdXCNQtvSAwGxR0ZgWpUuvLnmVMpg8LPY2rxRI97rZS77NKxXSnUuSsW5znQIN0h1rORd+m1dapNsvav/Br4oLum6iRbrdNMwPXy65/1ajR3pVnbwwWHzgR6+8rUK5LunVUJCuiDRXS5RJP2L86PTDydqeET9++fL7B4VkPFqiTzqAdI1AukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hXyfy89l0B+7GqqAAAAAElFTkSuQmCC">
                            </image>
                        </defs>
                    </svg>
                    <span>Explore the Magento Metropolis!</span>
                    <svg class="cmsb82-drop-shadow-lg cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10" fill="none" height="24" viewbox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.7998 15.5999H15.5998V14.3999H13.7998V15.5999ZM15.5998 17.9999H13.7998V16.7999H15.5998V17.9999ZM13.7998 20.3999H15.5998V19.1999H13.7998V20.3999Z" fill="white"></path>
                        <path clip-rule="evenodd" d="M5.4 0L15 3.6V12H17.4C17.5591 12 17.7117 12.0632 17.8243 12.1757C17.9368 12.2883 18 12.4409 18 12.6V22.8H18.6C18.7591 22.8 18.9117 22.8632 19.0243 22.9757C19.1368 23.0883 19.2 23.2409 19.2 23.4C19.2 23.5591 19.1368 23.7117 19.0243 23.8243C18.9117 23.9368 18.7591 24 18.6 24H0.6C0.44087 24 0.288258 23.9368 0.175736 23.8243C0.0632142 23.7117 0 23.5591 0 23.4C0 23.2409 0.0632142 23.0883 0.175736 22.9757C0.288258 22.8632 0.44087 22.8 0.6 22.8H1.2V10.2C1.2 10.0409 1.26321 9.88826 1.37574 9.77574C1.48826 9.66321 1.64087 9.6 1.8 9.6H3V5.4H4.2V9.6H5.4V0ZM16.8 22.8H15.6V21.6H13.8V22.8H12.6V13.2H16.8V22.8ZM5.4 10.8H2.4V22.8H5.4V10.8ZM8.4 5.4H7.2V6.6H8.4V5.4ZM9.6 5.4H10.8V6.6H9.6V5.4ZM13.2 5.4H12V6.6H13.2V5.4ZM7.2 7.8H8.4V9H7.2V7.8ZM10.8 7.8H9.6V9H10.8V7.8ZM12 7.8H13.2V9H12V7.8ZM8.4 10.2H7.2V11.4H8.4V10.2ZM9.6 10.2H10.8V11.4H9.6V10.2ZM13.2 10.2H12V11.4H13.2V10.2ZM7.2 12.6H8.4V13.8H7.2V12.6ZM10.8 12.6H9.6V13.8H10.8V12.6ZM8.4 15H7.2V16.2H8.4V15ZM9.6 15H10.8V16.2H9.6V15ZM7.2 17.4H8.4V18.6H7.2V17.4ZM10.8 17.4H9.6V18.6H10.8V17.4ZM8.4 19.8H7.2V21H8.4V19.8ZM9.6 19.8H10.8V21H9.6V19.8Z" fill="white" fill-rule="evenodd"></path>
                    </svg>
                </div>
                <svg class="cmsb82-absolute cmsb82-left-0 cmsb82-bottom-0" fill="none" height="51" viewbox="0 0 435 51" width="435" xmlns="http://www.w3.org/2000/svg">
                    <path d="M521.149 66.6131V52.8942H518.576V49.1462H515.839V45.6486H506.218V49.1462H503.825V52.8084H502.489V39.4329H495.519V52.6368H491.445V45.5699H489.304V40.9636H484.482V45.4841H475.443V41.9864H465.053V44.9691H462.431V24.0116H451.869V39.7762H444.856V52.4651H440.523V49.7399H436.758V34.2328H431.074V47.9517H426.742V19.0691H424.6V14.5343L423.171 7.05972H421.777V0H421.058V7.05972H419.578L418.242 14.6774L418.234 14.7131V18.8975H416.524V46.5069H410.359V49.9116H408.254V41.0494H400.178V49.0604H395.895V57.4934H394.221V51.5281H391.484V35.5132H389.256V33.0455H384.686V35.5132H382.287V39.2612H378.902V34.2328H370.733V39.4329H365.258V43.095H363.066V38.1525H360.752V35.6848H355.155V38.0667H353.229V52.6368H350.614V38.7104H345.994V33.9825H338.722V41.1352H334.562V37.8164H323.317V60.4332H321.341V40.8777H318.388V25.4207H316.204V21.8372H314.156V18.1321H312.741V11.9736H312.022V18.1321H310.607V21.5797H309.069V25.4207H306.755V40.4986H304.01V27.3662L301.208 20.7572L298.413 27.495V35.8994H292.507V45.9919H290.021V25.4207H280.184V42.7946H277.231V57.1143H275.384V34.1041H273.2V30.5277H271.404V26.0573H268.113V30.399H266.187V34.1041H264.262V62.7364H261.388V29.1258H254.504V36.021H251.12V33.0884H245.214V26.1861H234.867V37.9451H232.373V29.2546H225.239V37.3013H222.745V26.0573H220.432V22.6025H214.453V26.0573H211.371V33.9825H209.007V26.5652L203.769 18.3324L198.718 26.2218L198.66 26.3076V29.8912H196.814V25.9285H189.42V28.103H187.954V24.0116H182.228V27.588H180.561V44.2037H178.966V32.1872H170.932V35.7707H161.434V38.3242H157.015V34.7478H153.551V30.5277H143.327V37.6876H141.609V34.7478H135.373V47.401H133.389V30.5277H130.824V20.8144H122.791V44.4612H120.169V23.7541H110.461V30.2703H103.276V34.4904H100.582V39.9836H98.2177V28.3533H87.8709V34.3616H85.2986V45.9919H81.6557V41.6502H79.4714V26.5652H72.3364V41.264H68.2264V50.212H65.9918V37.8164H59.3167V18.6471H47.5545V42.0293H44.4792V52.0002H42.7547V31.0427H36.0006V44.59H33.2558V29.7624H23.6779V37.4301H20.7247V50.9773H18.8781V47.1435H15.537V27.7167H4.42142V47.5297H1.67665V40.7561H-0.37833V37.5589H-11.3718V40.2411H-13.8076V64.3958H-21V83H525V66.6131H521.149Z" fill="#9B3205" fill-opacity="0.5"></path>
                </svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Magento.
            </p>
        </div>
    </div>
    <br>
    <hr>
    <style>
        .hyvaverse-teaser-shine {
            position: relative;
            overflow: hidden;
        }

        .hyvaverse-teaser-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: teaser-shine-move 6s infinite;
            pointer-events: none;
        }

        @keyframes teaser-shine-move {
            0% {
                left: -75%;
            }

            100% {
                left: 125%;
            }
        }
    </style>
</div></div></div>
</div><div data-content-type="text" data-appearance="default" data-element="main"><div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>About Magento Speed ROI</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-3 marker:text-[#3762a0] marker:text-2xl">
<li><strong>The 7% Rule:</strong> <br>A <strong>1-second page load delay</strong> can slash your conversion rate by a staggering <strong>7%</strong>, costing a &euro;1M store <strong>&euro;70,000 annually</strong>.</li>
<li><strong>Mobile Abandonment Crisis:</strong> <br>Over half (<strong>53%</strong>) of mobile customers leave if a site takes <strong>longer than 3 seconds to load - </strong>a critical failure point for modern e-commerce.</li>
<li><strong>From Milliseconds to Euros:</strong> <br>Our <strong>Page Speed ROI Calculator</strong> translates load time into tangible revenue, enabling data-driven decisions on performance investments.</li>
<li><strong>The Hyv&auml; Solution:</strong> <br>Migrating from the slow, default <strong>Luma theme</strong> to a high-performance <strong>Hyv&auml; Theme</strong> is the definitive way to reclaim lost revenue.</li>
</ul>
</div>
</div>
</div>
</div></div><div data-content-type="text" data-appearance="default" data-element="main"><div id="toc-summary" class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 md:pb-6 xl:pt-[120px] p-6 lg:p-10">
<div class="mx-auto mb-8 lg:absolute lg:top-[40%] lg:right-4 xl:right-[5%] 2xl:right-[10%] max-w-[180px] rounded-full shadow-xl border-2 border-white/50 overflow-hidden shadow-inner"><img id="U5NENKB" class="w-full h-auto p-2" src="https://www.jajuma.de/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="Hyv&auml;naut Introducing and explaining Magento ROI Insights"></div>
<h2 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">tl;dr</span><br>Quick Navigation &amp; Key Insights</h2>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="text-left mb-8 text-[#3762a0]">
<p class="text-lg lg:text-xl">For the time-crunched executive: <br>A <strong>slow Magento site</strong> actively <strong>harms your business</strong> by <strong>driving away customers and damaging your Google rankings</strong>. <br>The standard <strong>Luma theme</strong> is often the root cause, burdened by bloated, outdated technology. <br>This article provides a <strong>calculator to quantify your financial losses</strong> and outlines how migrating to a high-performance <a title="Magento Online Store Development and Partner" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Theme with JaJuMa</strong></a> is the most <strong>effective way to turn those losses into substantial gains</strong>.</p>
</div>
<div class="flex flex-col gap-8 text-lg lg:text-xl">
<ul class="text-base space-y-2">
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#unseen-tax"><strong>The Unseen Tax: How Every Millisecond of Delay Erodes Your Bottom Line</strong></a>
<ul class="text-sm space-y-1">
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#modern-shoppers-impatience">The Modern Shopper's Impatience: A Numbers Game You Can't Afford to Lose</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#beyond-bounce-rate">Beyond Bounce Rate: The Ripple Effect on Brand Trust and Customer Loyalty</a></li>
</ul>
</li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#roi-calculator"><strong>Stop Guessing, Start Calculating: Your Page Speed ROI Calculator</strong></a>
<ul class="text-sm space-y-1">
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#calculator-manual">How It Works: A Practical Guide to the Page Speed ROI Calculator</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#tale-of-two-stores">A Tale of Two Stores: Putting the Calculator into Practice</a></li>
</ul>
</li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#magento-luma-challenge"><strong>The Magento &amp; Luma Challenge: Why Your Store Is Inherently Slow</strong></a>
<ul class="text-sm space-y-1">
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#luma-legacy">The Luma Legacy: Bloated Code and Performance Bottlenecks</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#checkout-choke-point">The Checkout Choke-Point: How a Sluggish Magento Checkout Kills Conversions</a></li>
</ul>
</li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#hyva-solution"><strong>The Hyv&auml; Solution: From Red to Green, From Cost to Profit</strong></a>
<ul class="text-sm space-y-1">
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#built-for-speed">Built for Speed: How Hyv&auml; Rewrites the Rules of Magento Performance</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#compounding-roi">More Than Just Speed: The Compounding ROI of Hyv&auml; Development</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#case-in-point">Case in Point: Real-World Results from JaJuMa's Hyv&auml; Projects</a></li>
</ul>
</li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#roadmap"><strong>Your Roadmap to a High-Performance Store</strong></a>
<ul class="text-sm space-y-1">
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#step-1-audit">Step 1: The Expert Audit - Pinpointing Your Performance Drags</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#step-2-solution">Step 2: The Strategic Solution - From Luma Tuning to a Full Hyv&auml; Migration</a></li>
<li><a class="hover:text-white transition-colors duration-200 text-[#3762a0]" href="#step-3-partnership">Step 3: The Gold Standard Partnership - Why JaJuMa is Your Ideal Hyv&auml; Agency</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="unseen-tax">The Unseen Tax: <br>How Every Millisecond of Delay Erodes Your Bottom Line</h2>
<p>&nbsp;</p>
<p><strong>Slow load times should not be viewed as a mere technical inconvenience.</strong> <br>It is more accurate to frame them as a <strong>direct and recurring tax on your e-commerce operation</strong> - a tax on revenue, brand equity, and customer loyalty.<br><strong>Every millisecond of delay chips away at your profit margins.</strong> <br>This section will <strong>break down the hard numbers</strong>, establishing the universal, data-backed truth about the severe <strong>business consequences of poor page speed</strong>.</p>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
        .stat-value-dark {
            font-weight: 900;
            color: #fefce8; /* Light yellow for text on dark bg */
            text-shadow: 0 0 10px rgba(254, 252, 232, 0.5);
        }
        .stat-card-dark {
            background: linear-gradient(145deg, #2c5282, #1a3b5f);
            border: 1px solid #3762a0;
            color: #adcffb;
        }
        .stat-card-dark .kpi-title {
            color: #ffffff;
        }
        .stat-highlight-card-bad {
            background-color: #fef2f2; /* Light red */
            border: 1px solid #fecaca;
            border-radius: 0.75rem;
            padding: 1.5rem;
            text-align: center;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .text-stat-negative {
            color: #ef4444; /* Red for negative stats */
        }
        .text-stat-positive {
            color: #16a34a; /* Green for positive stats */
        }
        .brand-text-primary {
            color: #2c5282; /* Dark blue */
        }
        .brand-text-accent {
            color: #3762a0; /* Lighter blue */
        }
        /* Tooltip Styles */
        .tooltip-container {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
        .tooltip-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background-color: #d1d5db;
            color: #4b5563;
            font-size: 0.7rem;
            font-weight: bold;
            margin-left: 4px;
        }
        .tooltip-text {
            visibility: hidden;
            width: 220px;
            background-color: #1f2937;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 10;
            bottom: 125%;
            left: 50%;
            margin-left: -110px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.875rem;
            font-weight: normal;
        }
        .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #1f2937 transparent transparent transparent;
        }
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        /* Visual Break Style */
        .reward-card {
            background-color: #f0fdf4;
            position: relative;
            overflow: hidden;
        }
        .reward-card > .content-wrapper {
            position: relative;
            z-index: 1;
        }
        /* Style for SVG path animation */
        #escalation-path {
            transition: stroke-dashoffset 2s ease-in-out;
        }
    </style>
        <div class="container mx-auto">
        <!-- Main container with card styling -->
        <div class="flex flex-col gap-8 lg:gap-10 border border-gray-200 shadow-lg rounded-2xl bg-gradient-to-b from-[#cee2fd]/50 to-white p-6 lg:p-10">

            <!-- Header Section -->
            <header class="text-center">
                <h3 class="text-3xl md:text-4xl font-bold mb-4 brand-text-primary">The Modern Shopper's Impatience:<br>
                	A Numbers Game You Can't Afford to Lose</h3>
                <p class="text-lg text-gray-700 max-w-4xl mx-auto">
                In the current digital marketplace, user patience is a finite and rapidly depleting resource.<br>
                The expectation of instant gratification is the new norm, and the data paints a stark picture for businesses that fail to meet this standard.</p>
            </header>

            <div class="text-center mt-4">
                <h4 class="text-2xl font-bold brand-text-accent">Every Second Counts<br>
                <span class="text-md text-gray-600">How Load Time Impacts Conversions, Bounce, and UX</span></h4>
                
            </div>

            <!-- Key Statistics Section -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-4xl mx-auto w-full">
                <!-- Stat Card: Conversions -->
                <div class="stat-card-dark shadow-lg rounded-xl p-6 text-center transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
                    <div class="stat-value-dark text-5xl md:text-6xl animate-number" data-target="-7" data-suffix="%">0%</div>
                    <p class="kpi-title text-xl font-bold mt-3">Conversions <span class="tooltip-container"><span class="tooltip-icon">i</span><span class="tooltip-text">The percentage of users who take a desired action, such as making a purchase.</span></span></p>
                    <p class="mt-1 text-sm">1-second delay</p>
                </div>
                <!-- Stat Card: Bounce Rate (3s) -->
                <div class="stat-card-dark shadow-lg rounded-xl p-6 text-center transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
                    <div class="stat-value-dark text-5xl md:text-6xl animate-number" data-target="32" data-prefix="+" data-suffix="%">0%</div>
                    <p class="kpi-title text-xl font-bold mt-3">Bounce Rate <span class="tooltip-container"><span class="tooltip-icon">i</span><span class="tooltip-text">The percentage of visitors who navigate away from the site after viewing only one page.</span></span></p>
                    <p class="mt-1 text-sm">As load time increases from 1s → 3s</p>
                </div>
                <!-- Stat Card: User Satisfaction -->
                <div class="stat-card-dark shadow-lg rounded-xl p-6 text-center transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
                    <div class="stat-value-dark text-5xl md:text-6xl animate-number" data-target="-16" data-suffix="%">0%</div>
                    <p class="kpi-title text-xl font-bold mt-3">User Satisfaction</p>
                    <p class="mt-1 text-sm">From 1-second delay or 3s total load time</p>
                </div>
                <!-- Stat Card: Bounce Rate (10s) -->
                <div class="stat-card-dark shadow-lg rounded-xl p-6 text-center transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
                    <div class="stat-value-dark text-5xl md:text-6xl animate-number" data-target="123" data-prefix="+" data-suffix="%">0%</div>
                    <p class="kpi-title text-xl font-bold mt-3">Bounce Rate</p>
                    <p class="mt-1 text-sm">At 10s load time vs 1s</p>
                </div>
            </div>

            <div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="#roi-calculator" title="Page Speed ROI Calculator" class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512">
                                                <rect width="288" height="416" x="112" y="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" rx="32" ry="32"></rect>
		<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" d="M160.01 112H352v64H160.01z"></path>
		<circle cx="168" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="344" cy="248" r="24" fill="currentColor"></circle>
		<circle cx="168" cy="328" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="328" r="24" fill="currentColor"></circle>
		<circle cx="168" cy="408" r="24" fill="currentColor"></circle>
		<circle cx="256" cy="408" r="24" fill="currentColor"></circle>
		<rect width="48" height="128" x="320" y="304" fill="currentColor" rx="24" ry="24"></rect>
                                            </svg>
                                    Calculate Your Financial Impact Now
                                </a>
                            </div>
            
            <!-- Context and Deeper Dive Section -->
            <div class="space-y-8">
                <div class="bg-white/80 border border-gray-200 shadow-lg rounded-xl p-6 lg:p-8">
                    <div class="flex items-center gap-4 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 brand-text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="title-stopwatch">
                          <title id="title-stopwatch">Stopwatch icon</title>
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <h4 class="text-2xl font-bold brand-text-primary">The 3-Second Cliff Edge</h4>
                    </div>
                    <div class="text-gray-700 text-lg">
                        <p>The most critical benchmark is the <strong class="brand-text-accent">3-second rule</strong>.<br>
                        <a href="https://thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/" 
                    	class="underline hover:text-blue-600" rel="nofollow noopener" target="_blank"
                    	title="Mobile Page Speed Research by Google">Research from Google is unequivocal:</a></p>
                        <div class="stat-highlight-card-bad shadow-lg">
                            <div class="text-7xl lg:text-8xl font-black text-stat-negative animate-number" data-target="53" data-suffix="%">0%</div>
                            <p class="text-xl font-semibold brand-text-primary mt-2">of mobile visitors will abandon a website</p>
                        </div>
                        <p><b class="brand-text-accent">if it takes longer than three seconds to load</b>.<br>
                        This isn't a gradual drop-off; <b class="brand-text-accent">it's a cliff edge</b>.<br>
                        For more than half of your mobile audience, <b class="brand-text-accent">three seconds is the point of no return</b>.</p>
                    </div>
                </div>

                <div class="bg-white/80 border border-gray-200 shadow-lg rounded-xl p-6 lg:p-8">
                    <div class="flex items-center gap-4 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 brand-text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="title-escalation-chart">
                          <title id="title-escalation-chart">Escalation chart icon</title>
                          <path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                        </svg>
                        <h4 class="text-2xl font-bold brand-text-primary">The Escalating Cost of Delay</h4>
                    </div>
                    <div class="text-gray-700 text-lg">
                        <p><b class="brand-text-accent">The damage, however, begins almost instantly and compounds with each passing moment.</b><br>
                        A delay of just one second can reduce conversion rates by a staggering -7%.<br>
                        As that delay increases <b class="brand-text-accent">from one second to three</b>, the probability of 
                        <b class="brand-text-accent">a user bouncing</b> - leaving without any interaction - 
                        <b class="brand-text-accent">jumps by 32%</b>.<br>
                        Should that load time stretch to a frustrating <b class="brand-text-accent">10 seconds</b>, the 
                        <b class="brand-text-accent">bounce rate probability skyrockets by a catastrophic 123%</b>.</p>
                        
                        <!-- Visual Metaphor Graph -->
                        <div class="my-6 p-6 bg-red-50 border border-red-200 rounded-lg shadow-lg" id="graph-container">
                            <div class="relative h-48">
                                <!-- More dramatic curve -->
                                <svg class="absolute w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
                                    <path id="escalation-path" d="M 5 85 Q 40 80, 50 70 T 95 5" stroke="#ef4444" stroke-width="3" fill="none" stroke-linecap="round"/>
                                </svg>
                                <!-- Data Point 1 -->
                                <div class="absolute">
                                    <div class="w-4 h-4 bg-red-500 rounded-full border-2 border-white shadow"></div>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-32 text-center">
                                        <div class="font-bold text-2xl text-red-600 animate-number" data-target="32" data-prefix="+" data-suffix="%">0%</div>
                                        <div class="text-sm text-gray-600">at 3 seconds</div>
                                    </div>
                                </div>
                                <!-- Data Point 2 -->
                                <div class="absolute">
                                    <div class="w-4 h-4 bg-red-500 rounded-full border-2 border-white shadow"></div>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-32 text-center">
                                        <div class="font-bold text-2xl text-red-600 animate-number" data-target="123" data-prefix="+" data-suffix="%">0%</div>
                                        <div class="text-sm text-gray-600">at 10 seconds</div>
                                    </div>
                                </div>
                            </div>
                             <div class="flex justify-between text-xs text-gray-500 border-t border-gray-300 pt-2 mt-2">
                                <span>Faster</span>
                                <span>Slower Load Time →</span>
                            </div>
                        </div>

                        <p><b class="brand-text-accent">This demonstrates an escalating scale of financial loss</b>, where 
                        <b class="brand-text-accent">each second of delay</b> has a 
                        <b class="brand-text-accent">disproportionately larger negative impact</b> than the one before it.</p>
                    </div>
                </div>

                <div class="reward-card border border-green-200 shadow-lg rounded-xl p-6 lg:p-8">
                    <div class="content-wrapper">
                        <div class="flex items-center gap-4 mb-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="title-lightning-bolt">
                              <title id="title-lightning-bolt">Lightning bolt icon</title>
                              <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            <h4 class="text-2xl font-bold text-green-800">The Reward for Speed</h4>
                        </div>
                         <div class="text-gray-700 text-lg">
                            <p><b class="brand-text-accent">Conversely, the rewards for speed are just as dramatic.</b><br>
                            <a href="https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds-make-Millions-report.pdf" 
                    	class="underline hover:text-blue-600"rel="nofollow noopener" target="_blank"
                    	title="Page Speed Study by Deloitte">A landmark study by Deloitte and Google</a> revealed that a mere</p>
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center my-6">
                                <div class="text-center">
                                    <div class="text-7xl lg:text-8xl font-black text-stat-positive animate-number" data-target="0.1" data-suffix="s">0.0s</div>
                                    <p class="font-bold text-xl text-green-800 mt-2">Improvement in load time can boost:</p>
                                </div>
                                <div class="space-y-4">
                                    <div class="bg-green-200 border border-green-300 shadow-lg rounded-xl p-4 text-center">
                                        <div class="text-5xl font-black text-stat-positive animate-number" data-target="8.4" data-prefix="+" data-suffix="%">0.0%</div>
                                        <div class="font-semibold text-green-900 mt-1">Retail Conversions</div>
                                    </div>
                                     <div class="bg-green-200 border border-green-300 shadow-lg rounded-xl p-4 text-center">
                                        <div class="text-5xl font-black text-stat-positive animate-number" data-target="9.2" data-prefix="+" data-suffix="%">0.0%</div>
                                        <div class="font-semibold text-green-900 mt-1">Average Order Value</div>
                                    </div>
                                </div>
                            </div>
                            <p>This <b class="brand-text-accent">crucial finding proves</b> that even small, incremental 
                            <b class="brand-text-accent">performance gains</b>, the kind achieved through expert optimization, yield 
                            <b class="brand-text-accent">significant and measurable financial returns</b>.<br>
                            <b class="brand-text-accent">The battle for revenue is won or lost in milliseconds.</b></p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-yellow-50 border border-yellow-200 shadow-lg rounded-xl p-6 lg:p-8">
                    <div class="flex items-center gap-4 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="title-smartphone">
                          <title id="title-smartphone">Smartphone icon</title>
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                        </svg>
                        <h4 class="text-2xl font-bold text-yellow-500">The Mobile-First Reality Check</h4>
                    </div>
                    <div class="text-gray-700 text-lg">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch mb-6">
                            <div class="flex flex-col">
                                <p>This data reveals a critical vulnerability for most e-commerce businesses. 
                                <b class="brand-text-accent">Mobile commerce is the dominant channel</b>, accounting for approximately</p>
                                <div class="bg-yellow-100 border border-yellow-200 shadow-lg rounded-xl p-6 text-center my-4 flex-grow flex flex-col justify-center">
                                     <div class="text-7xl lg:text-8xl font-black text-yellow-500 animate-number" data-target="70" data-prefix="~" data-suffix="%">0%</div>
                                     <div class="text-xl font-semibold brand-text-primary">of all e-commerce sales</div>
                                     <div class="text-lg font-semibold text-gray-600 mt-2">and 65% of traffic.</div>
                                </div>
                            </div>
                             <div class="flex flex-col">
                                <p>Yet, <b class="brand-text-accent">mobile pages are</b>, on average, 
                                <b class="brand-text-accent">significantly slower</b> than their desktop counterparts, with average load times of</p><br>
                                <div class="bg-red-100 border border-red-200 shadow-lg rounded-xl p-6 text-center my-4 flex-grow flex flex-col justify-center">
                                     <div class="text-5xl font-black text-stat-negative animate-number" data-target="8.6" data-suffix=" seconds">0.0 seconds</div>
                                     <div class="text-lg font-semibold brand-text-primary mt-1">on mobile</div>
                                     <div class="text-sm text-gray-500 my-2">vs.</div>
                                     <div class="text-5xl font-black text-stat-negative animate-number" data-target="2.5" data-suffix=" seconds">0.0 seconds</div>
                                     <div class="text-lg font-semibold brand-text-primary mt-1">on desktop</div>
                                </div>
                            </div>
                        </div>
                        <p><b class="brand-text-accent">This creates a perfect storm of failure:</b><br>
                        The largest and <b class="brand-text-accent">most important segment</b> of the audience is consistently 
                        <b class="brand-text-accent">served the worst possible experience</b>, 
                        in the very context where their patience is at its absolute lowest.</p>
                    </div>
                </div>

                <div class="bg-blue-100 border border-blue-200 shadow-lg rounded-xl p-6 lg:p-8 text-center">
                     <p class="text-lg text-gray-800">A non-optimized mobile experience is therefore not just a minor weakness;<br>
                     it is arguably the <strong class="brand-text-accent">single greatest point of revenue leakage</strong> for any modern Magento store.<br>
                     This reality underscores the <strong class="brand-text-accent">urgent need for a mobile-first performance solution like <span class="tooltip-container">Hyvä<span class="tooltip-icon">i</span><span class="tooltip-text">A modern, high-performance frontend theme for Magento designed for speed and better developer experience.</span></span>.</strong></p>
                     <p class="text-lg font-semibold text-gray-600 mt-6">Don't let a slow site leak revenue.</p>
                     <p class="text-2xl font-bold brand-text-primary mt-2 mb-4">Is your store fast enough?</p>
                     <div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="#roi-calculator" title="Website Speed ROI Calculator"
                                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"
                                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path fill="currentColor" d="M28 6H18V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h10v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2M4 15h6.17l-2.58 2.59L9 19l5-5l-5-5l-1.41 1.41L10.17 13H4V4h12v20H4Zm12 13v-2a2 2 0 0 0 2-2V8h10v9h-6.17l2.58-2.59L23 13l-5 5l5 5l1.41-1.41L21.83 19H28v9Z" stroke-width="1" stroke="currentColor" />
                                    </svg>
                                    Find Out How You Compare
                                </a>
                      </div>
                </div>
            </div>

            <!-- Footer -->
            <footer class="text-center mt-4">
                <p class="text-sm text-gray-500">Data sourced from industry research by 
                    <a href="https://thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/" 
                    	class="underline hover:text-blue-600" rel="nofollow noopener" target="_blank"
                    	title="Mobile Page Speed Research by Google">Google</a>, 
                    <a href="https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds-make-Millions-report.pdf" 
                    	class="underline hover:text-blue-600"rel="nofollow noopener" target="_blank"
                    	title="Page Speed Study by Deloitte">Deloitte</a>, and others.</p>
            </footer>
        </div>
    </div>
    </div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
        .brand-text-primary {
            color: #2c5282;
        }
        .brand-text-accent {
            color: #3762a0;
        }
        .text-stat-negative {
            color: #ef4444;
        }
        .text-stat-positive {
            color: #16a34a;
        }
        .stat-highlight-card {
            border-radius: 0.75rem;
            padding: 1.5rem;
            text-align: center;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .stat-highlight-card-bad {
            background-color: #fee2e2; /* Darker Red: red-100 */
            border: 1px solid #fca5a5; /* Darker Red Border: red-300 */
        }
        .stat-highlight-card-good {
            background-color: #dcfce7; /* Darker Green: green-100 */
            border: 1px solid #86efac; /* Darker Green Border: green-300 */
        }
        /* Tooltip Styles */
        .tooltip-container {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
        .tooltip-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background-color: #d1d5db;
            color: #4b5563;
            font-size: 0.7rem;
            font-weight: bold;
            margin-left: 4px;
        }
        .tooltip-text {
            visibility: hidden;
            width: 220px;
            background-color: #1f2937;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 10;
            bottom: 125%;
            left: 50%;
            margin-left: -110px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.875rem;
            font-weight: normal;
        }
        .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #1f2937 transparent transparent transparent;
        }
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
    <div class="container mx-auto mt-10">
        <!-- Main container with card styling -->
        <div class="flex flex-col gap-8 lg:gap-10 border border-gray-200 shadow-lg rounded-2xl bg-gradient-to-b from-[#cee2fd]/50 to-white p-6 lg:p-10">

            <!-- Header Section -->
            <header class="text-center">
                <h3 class="text-3xl md:text-4xl font-bold mb-4 brand-text-primary">Beyond Bounce Rate:<br>
                	The Ripple Effect on Brand Trust and Customer Loyalty</h3>
                <p class="text-lg text-gray-700 max-w-4xl mx-auto">
                The consequences of a slow website extend far beyond the immediate loss of a sale. Poor performance inflicts long-term damage on brand perception and customer loyalty, creating a ripple effect that impacts future revenue streams.</p>
            </header>

            <!-- Content Section -->
            <div class="space-y-8">
                <div class="bg-red-50 border border-red-200 shadow-lg rounded-xl p-6 lg:p-8">
                    <div class="flex items-center gap-4 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="title-broken-link">
                          <title id="title-broken-link">Broken link icon</title>
                          <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                        </svg>
                        <h4 class="text-2xl font-bold text-red-700">A Single Negative Experience</h4>
                    </div>
                    <div class="text-gray-700 text-lg">
                        <p>A single negative experience has lasting repercussions. Data indicates that:</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
                            <div class="stat-highlight-card stat-highlight-card-bad shadow-lg">
                                <div class="text-7xl lg:text-8xl font-black text-stat-negative animate-number" data-target="79" data-suffix="%">0%</div>
                                <p class="text-xl font-semibold brand-text-primary mt-2">of shoppers are less likely to buy from that same site again</p>
                            </div>
                             <div class="stat-highlight-card stat-highlight-card-bad shadow-lg">
                                <div class="text-7xl lg:text-8xl font-black text-stat-negative animate-number" data-target="70" data-suffix="%+">0%</div>
                                <p class="text-xl font-semibold brand-text-primary mt-2">state slow loading times deter them from finalizing a transaction</p>
                            </div>
                        </div>
                        <p>This transforms a <b class="brand-text-accent">one-time bounce into a permanently lost customer</b>, effectively <b class="brand-text-accent">handing them over to faster competitors</b>. Furthermore, a slow site can prevent a purchase from ever being completed.</p>
                    </div>
                </div>

                <div class="bg-green-50 border border-green-200 shadow-lg rounded-xl p-6 lg:p-8">
                    <div class="flex items-center gap-4 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="title-shield">
                          <title id="title-shield">Shield icon</title>
                          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                        <h4 class="text-2xl font-bold text-green-800">Speed is a Tool for Building Loyalty</h4>
                    </div>
                     <div class="text-gray-700 text-lg">
                        <p>On the other hand, <b class="brand-text-accent">speed is a powerful tool for building brand equity</b>. 
                        An <a href="https://aicommerce.cloud/performance-impact-on-ecommerce-sales"
                        title="Why Performance matters: The impact on eCommerce sales" rel="nofollow noopener" target="_blank">Akamai study</a> found that:</p>
                         <div class="stat-highlight-card stat-highlight-card-good shadow-lg max-w-md mx-auto">
                            <div class="text-7xl lg:text-8xl font-black text-stat-positive animate-number" data-target="52" data-suffix="%">0%</div>
                            <p class="text-xl font-semibold brand-text-primary mt-2">of consumers believe fast loading times actively promote customer loyalty</p>
                        </div>
                        <p>A <b class="brand-text-accent">fast, responsive site</b> is perceived as <b class="brand-text-accent">professional, reliable, and trustworthy</b> - qualities that are essential when a user is deciding whether to entrust a business with their credit card information. A slow site breeds frustration and doubt, questioning the credibility of the entire operation.</p>
                    </div>
                </div>

                <div class="bg-blue-100 border border-blue-200 shadow-lg rounded-xl p-6 lg:p-8">
                    <div class="flex items-center gap-4 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 brand-text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="title-piggy-bank">
                            <title id="title-piggy-bank">Piggy bank icon</title>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-14L4 7m8 4v10M4 7v10l8 4" />
                        </svg>
                        <h4 class="text-2xl font-bold brand-text-primary">An Investment in Customer Lifetime Value</h4>
                    </div>
                    <div class="text-gray-700 text-lg">
                        <p>This evidence reframes the entire discussion around 
                        <a href="/en/jajuma-develop/performance-optimization-extensions" 
                        title="Magento & Hyvä Performance Optimization Extensions" target="_blank">
                        performance optimization</a>. It is not merely about maximizing the conversion rate of a single session. With...</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start my-6">
                            <div class="bg-red-100 border border-red-200 shadow-lg rounded-xl p-6 text-center">
                                <div class="text-6xl font-black text-stat-negative animate-number" data-target="80" data-suffix="%">0%</div>
                                <p class="text-lg font-semibold brand-text-primary mt-2">of shoppers unwilling to make a <b class="brand-text-accent">second</b> purchase from a slow site</p>
                            </div>
                             <div class="bg-green-200 border border-green-300 shadow-lg rounded-xl p-6 text-center">
                                <div class="text-6xl font-black text-stat-positive animate-number" data-target="40" data-suffix="%">0%</div>
                                <p class="text-lg font-semibold brand-text-primary mt-2">increase in likelihood of repeat purchases from speed improvements</p>
                            </div>
                        </div>
                        <p>...performance is fundamentally an investment in <b class="brand-text-accent">
                            <span class="tooltip-container">Customer Lifetime Value (CLV)
                                <span class="tooltip-icon">i</span>
                                <span class="tooltip-text">The total revenue a business can reasonably expect from a single customer account throughout the business relationship.</span>
                            </span>
                        </b>.</p>
                    </div>
                </div>

                <div class="bg-blue-200/50 border border-blue-200 shadow-lg rounded-xl p-6 lg:p-8 text-center">
                     <p class="text-lg text-gray-800">A fast site doesn't just convert a visitor once; <strong class="brand-text-accent">it creates a positive first impression that fosters trust and encourages them to return</strong>. This shifts the <strong class="brand-text-accent">
                        <span class="tooltip-container">return on investment (ROI)
                            <span class="tooltip-icon">i</span>
                            <span class="tooltip-text">A performance measure used to evaluate the efficiency or profitability of an investment.</span>
                        </span>
                     calculation</strong> from a one-time gain to a compounding, long-term asset, making the <strong class="brand-text-accent">investment in a high-performance frontend far more valuable than it initially appears</strong>.</p>
                     <p class="text-lg font-semibold text-gray-600 mt-6">Don't let a slow site cost you sales.</p>
						<p class="text-2xl font-bold brand-text-primary mt-2 mb-4">Is your shop fast enough?</p>
						<div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
								<a href="#roi-calculator" title="Website Speed ROI Calculator" class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
										<path fill="currentColor" d="M28 6H18V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h10v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2M4 15h6.17l-2.58 2.59L9 19l5-5l-5-5l-1.41 1.41L10.17 13H4V4h12v20H4Zm12 13v-2a2 2 0 0 0 2-2V8h10v9h-6.17l2.58-2.59L23 13l-5 5l5 5l1.41-1.41L21.83 19H28v9Z" stroke-width="1" stroke="currentColor"></path>
									</svg>
									Find out how you measure up
								</a>
						</div>
                </div>
            </div>

        </div>
    </div>
    </div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>&nbsp;</p>
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left"><caption class="caption-top text-base text-slate-700 font-medium px-4 py-2">Table showing the impact of page load speed on user behavior and conversion metrics, based on industry research.</caption>
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Load Time Delay / Improvement</th>
<th class="p-4 font-semibold">Impact on Conversions</th>
<th class="p-4 font-semibold">Impact on User Behavior</th>
<th class="p-4 font-semibold">Source</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">1 second</td>
<td class="p-4">-7%</td>
<td class="p-4">User satisfaction drops 16%</td>
<td class="p-4"><a class="underline hover:text-blue-600" title="Why Performance matters: The impact on eCommerce sales" href="https://aicommerce.cloud/performance-impact-on-ecommerce-sales" target="_blank" rel="nofollow noopener">Akamai</a>, <a class="underline hover:text-blue-600" title="Think Fast The Page Speed Report Stats &amp; Trends for Marketers" href="https://unbounce.com/page-speed-report/" target="_blank" rel="nofollow noopener">Unbounce</a></td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">1s to 3s</td>
<td class="p-4 ">&ndash;</td>
<td class="p-4">Bounce rate increases by 32%</td>
<td class="p-4"><a class="underline hover:text-blue-600" title="Mobile Page Speed Research by Google" href="https://thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/" target="_blank" rel="nofollow noopener">Google</a></td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">&gt; 3 seconds</td>
<td class="p-4">&ndash;</td>
<td class="p-4">53% of mobile users abandon site</td>
<td class="p-4"><a class="underline hover:text-blue-600" title="Mobile Page Speed Research by Google" href="https://thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/" target="_blank" rel="nofollow noopener">Google</a></td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">0.1s improvement</td>
<td class="p-4">+8.4%</td>
<td class="p-4">&ndash;</td>
<td class="p-4"><a class="underline hover:text-blue-600" title="Page Speed Study by Deloitte" href="https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds-make-Millions-report.pdf" target="_blank" rel="nofollow noopener">Deloitte/Google</a></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">2s faster load time</td>
<td class="p-4">&ndash;</td>
<td class="p-4">Shopping cart abandonment drops 20%</td>
<td class="p-4"><a class="underline hover:text-blue-600" title="Why Performance matters: The impact on eCommerce sales" href="https://aicommerce.cloud/performance-impact-on-ecommerce-sales" target="_blank" rel="nofollow noopener">Akamai</a></td>
</tr>
</tbody>
</table>
</div>
<!-- Summary Section -->
<div class="mt-8 lg:mt-10 text-xl text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200"><strong class="text-primary-dark">Summary:</strong> <strong class="text-slate-800">Milliseconds matter.</strong> <br>Even small delays in page load time dramatically reduce conversions, increase bounce rates, and damage user satisfaction - while small speed gains deliver meaningful uplifts in revenue and retention.</div>
</div>
<p><br><br></p></div><div data-content-type="text" data-appearance="default" data-element="main"><section id="roi-calculator">
<h2>Stop Guessing, Start Calculating:&nbsp;<br>Your Page Speed ROI Calculator</h2>
<br>
<p>The data clearly shows that <strong>a slow website costs money</strong>, but <strong>how much is it costing <em>your</em> business specifically?</strong> <br>It's time to move from general statistics to<strong> your specific situation</strong>. Instead of wondering about <strong>the financial impact, you can now quantify</strong> it. <br><strong>This interactive calculator</strong> is designed to empower you to <strong>translate abstract performance metrics</strong> into the concrete <strong>language of business: revenue, profit, and growth</strong>.</p>
<br>
<div>
<h4>Calculate Your Potential Revenue Lift</h4>
<p><strong>Enter your store's current metrics to see how improving page speed could increase your annual revenue.</strong></p>
<p></p><div class="widget block block-static-block">
    <style>.cmsb78-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb78-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb78-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb78-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb78-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb78-container {
max-width: 1536px
}
}
.cmsb78-visible {
visibility: visible
}
.cmsb78-fixed {
position: fixed
}
.cmsb78-absolute {
position: absolute
}
.cmsb78-relative {
position: relative
}
.cmsb78-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb78-my-2\.5 {
margin-top: 0.625rem;
margin-bottom: 0.625rem
}
.cmsb78-\!mb-0 {
margin-bottom: 0px !important
}
.cmsb78-\!mr-0 {
margin-right: 0px !important
}
.cmsb78-block {
display: block
}
.cmsb78-flex {
display: flex
}
.cmsb78-inline-flex {
display: inline-flex
}
.cmsb78-grid {
display: grid
}
.cmsb78-hidden {
display: none
}
.cmsb78-size-6 {
width: 1.5rem;
height: 1.5rem
}
.cmsb78-h-4 {
height: 1rem
}
.cmsb78-h-6 {
height: 1.5rem
}
.cmsb78-w-4 {
width: 1rem
}
.cmsb78-w-6 {
width: 1.5rem
}
.cmsb78-w-fit {
width: fit-content
}
.cmsb78-w-full {
width: 100%
}
.cmsb78-max-w-\[600px\] {
max-width: 600px
}
.cmsb78-flex-shrink {
flex-shrink: 1
}
.cmsb78-flex-shrink-0 {
flex-shrink: 0
}
.cmsb78-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb78-flex-col {
flex-direction: column
}
.cmsb78-flex-wrap {
flex-wrap: wrap
}
.cmsb78-items-center {
align-items: center
}
.cmsb78-justify-center {
justify-content: center
}
.cmsb78-justify-between {
justify-content: space-between
}
.cmsb78-gap-2 {
gap: 0.5rem
}
.cmsb78-gap-4 {
gap: 1rem
}
.cmsb78-rounded-2xl {
border-radius: 1rem
}
.cmsb78-rounded-lg {
border-radius: 0.5rem
}
.cmsb78-rounded-md {
border-radius: 0.375rem
}
.cmsb78-rounded-r-md {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem
}
.cmsb78-border {
border-width: 1px
}
.cmsb78-border-blue-200 {
--tw-border-opacity: 1;
border-color: rgb(191 219 254 / var(--tw-border-opacity))
}
.cmsb78-border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity))
}
.cmsb78-border-primary-light {
border-color: var(--border-primary-light)
}
.cmsb78-bg-primary {
background-color: var(--bg-primary)
}
.cmsb78-bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}
.cmsb78-from-\[\#cee2fd\] {
--tw-gradient-from: #cee2fd var(--tw-gradient-from-position);
--tw-gradient-to: rgb(206 226 253 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.cmsb78-to-white {
--tw-gradient-to: #fff var(--tw-gradient-to-position)
}
.cmsb78-p-4 {
padding: 1rem
}
.cmsb78-p-6 {
padding: 1.5rem
}
.cmsb78-px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem
}
.cmsb78-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb78-py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem
}
.cmsb78-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb78-text-center {
text-align: center
}
.cmsb78-text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.cmsb78-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb78-text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.cmsb78-font-bold {
font-weight: 700
}
.cmsb78-font-medium {
font-weight: 500
}
.cmsb78-text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity))
}
.cmsb78-text-primary {
color: var(--text-primary)
}
.cmsb78-text-primary-light {
color: var(--text-primary-light)
}
.cmsb78-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb78-underline {
text-decoration-line: underline
}
.cmsb78-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb78-shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb78-outline {
outline-style: solid
}
.cmsb78-filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb78-transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb78-duration-150 {
transition-duration: 150ms
}
.cmsb78-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb78-hover\:bg-primary-lighter:hover {
background-color: var(--bg-primary-lighter)
}
.cmsb78-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb78-focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb78-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
@media (min-width: 1024px) {
.cmsb78-lg\:p-10 {
padding: 2.5rem
}
}
@media (min-width: 1280px) {
.cmsb78-xl\:w-fit {
width: fit-content
}
.cmsb78-xl\:flex-row {
flex-direction: row
}
.cmsb78-xl\:justify-between {
justify-content: space-between
}
.cmsb78-xl\:gap-0 {
gap: 0px
}
}</style>
<style>#html-body [data-pb-style=GGSI33Y]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}</style><div data-content-type="row" data-appearance="full-bleed" data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="main" data-pb-style="GGSI33Y"><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    /* General Body and Reset Styles */
    :root {
        --brand-primary: #3762a0;
        --brand-secondary: #2c5282;
        --brand-light: #adcffb;
        --brand-accent: #93c5ff;
        --text-dark: #1f2937;
        --text-medium: #4b5563;
        --text-light: #6b7280;
        --bg-light-gray: #f9fafb;
        --border-color: #d1d5db;
        --success-dark: #16a34a;
        --success-light: #22c55e;
        --danger-dark: #dc2626;
        --danger-light: #ef4444;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    #capture-area {
        padding: 20px 0;
    }

    .roi-hidden {
        display: none;
    }

    .roi-header {
        position: relative;
    }

    .roi-header .container {
        text-align: center;
    }

    #pdf-logo {
        position: absolute;
        top: 2rem;
        left: 2rem;
        width: 8rem;
        height: 3rem;
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
        /* Controlled by JS */
    }

    .roi-header .roi-title {
        display: block;
        font-size: 2.5rem;
        line-height: 2.5rem;
        font-weight: 800;
        letter-spacing: -0.025em;
        margin: 0 0 0.5rem 0;
        color: var(--text-primary);
    }

    /* Main Content Layout */
    #roi-main-content {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 2rem;
        padding-top: 1rem;
        padding-bottom: 20px;
    }

    /* Form Styles */
    #impact-form>*:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    #impact-form input,
    #impact-form select {
        width: 100%;
    }

    #competitor-form {
        margin-top: 1.5rem;
    }

    #competitor-form input {
        width: 100%;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-label {
        display: flex;
        align-items: center;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .inputs-section .form-label {
        font-weight: 500;
    }

    .form-label svg {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.5rem;
    }

    .input-group {
        margin-top: 0.25rem;
        display: flex;
        border-radius: 0.5rem;
        box-shadow: var(--shadow-sm);
    }

    #user-domain {
        flex: 1 1 0%;
        min-width: 0;
        width: 100%;
        padding: 0.5rem 1rem;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
        margin: 0;
    }

    #fetch-status {
        font-size: 0.75rem;
        color: var(--text-light);
        margin-top: 0.25rem;
        height: 1rem;
    }

    #kpi-display>div {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .kpi-card {
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        background-color: var(--bg-light-gray);
    }

    .kpi-card h3 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
        margin-top: 0;
    }

    .kpi-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.875rem;
    }

    .kpi-item .label {
        color: var(--text-medium);
    }

    .kpi-item .value {
        font-weight: 700;
    }

    /* Mode Toggle Switch */
    .toggle-group {
        padding-top: 1rem;
        border-top: 1px solid #e5e7eb;
    }

    #mode-toggle {
        position: relative;
        display: inline-flex;
        flex-shrink: 0;
        height: 1.5rem;
        width: 2.75rem;
        border: 2px solid transparent;
        border-radius: 9999px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        background-color: #e5e7eb;
        /* Default off */
    }

    #mode-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(55, 98, 160, 0.5);
    }

    #mode-toggle span {
        pointer-events: none;
        display: inline-block;
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 9999px;
        background-color: white;
        box-shadow: var(--shadow-sm);
        transform: translateX(0);
        transition: transform 0.2s ease-in-out;
    }

    #mode-toggle.active {
        background-color: var(--brand-primary);
    }

    #mode-toggle.active span {
        transform: translateX(1.25rem);
    }

    .toggle-label {
        font-size: 0.875rem;
        transition: color 0.2s;
    }

    .toggle-label.active {
        color: var(--brand-primary);
        font-weight: 600;
    }

    .toggle-label.inactive {
        color: var(--text-light);
    }

    /* Tabs */
    .tabs-nav {
        border-bottom: 1px solid var(--border-color);
        display: flex;
    }

    .tabs-nav>*:not(:last-child) {
        margin-right: 1rem;
    }

    .tab-button {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.25rem;
        border-bottom: 2px solid transparent;
        font-weight: 500;
        font-size: 0.875rem;
        background: none;
        border-top: none;
        border-left: none;
        border-right: none;
        cursor: pointer;
        color: var(--text-light);
        transition: color 0.2s, border-color 0.2s;
    }

    .tab-button:hover {
        color: var(--text-medium);
        border-bottom-color: var(--border-color);
    }

    .tab-button.active {
        color: var(--brand-primary);
        border-bottom-color: var(--brand-primary);
    }

    .tab-button:focus-visible {
        outline: none;
        color: var(--brand-primary);
        border-bottom-color: var(--brand-primary);
    }

    /* Input Sections */
    .inputs-section {
        background-color: #eff6ff;
        border-left: 4px solid var(--brand-accent);
        padding: 1rem;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

    #data-inputs>div:not(:last-child) {
        margin-bottom: 1rem;
    }

    .slider-group {
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid #bfdbfe;
        /* border-blue-200 */
    }

    .slider-label {
        display: block;
        font-weight: 500;
    }

    .slider-label span {
        font-weight: 700;
        color: var(--brand-primary);
    }

    input[type=range] {
        width: 100%;
        height: 0.5rem;
        background-color: #e5e7eb;
        border-radius: 0.5rem;
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
        margin: 1rem 0 0.4rem;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 9999px;
        background: var(--brand-primary);
        cursor: pointer;
        margin-top: -0.2rem;
        box-shadow: var(--shadow-md);
        transition: background-color 0.2s;
    }

    input[type=range]::-moz-range-thumb {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 9999px;
        background: var(--brand-primary);
        cursor: pointer;
        box-shadow: var(--shadow-md);
        border: none;
    }

    input[type=range]:hover::-webkit-slider-thumb {
        background: var(--brand-secondary);
    }

    input[type=range]:hover::-moz-range-thumb {
        background: var(--brand-secondary);
    }

    /* Output Section */
    .output-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1.5rem;
    }

    .output-header h2 {
        font-size: 1.875rem;
        line-height: 2.25rem;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0;
    }

    #report-buttons {
        display: flex;
        align-items: center;
    }

    #report-buttons>*:not(:last-child) {
        margin-right: 0.5rem;
    }

    #report-content>*:not(:last-child) {
        margin-bottom: 20px;
    }

    .report-card {
        padding: 20px;
    }

    #report-content .report-card h3 {
        font-size: 20px;
        line-height: 28px;
        margin: 0;
    }

    .report-card-blue {
        background-color: #eff6ff;
    }

    .report-card-green {
        background-color: #f0fdf4;
    }

    .report-card-yellow {
        background-color: #fefce8;
    }

    .report-card h3 {
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 600;
        margin: 0 0 1rem;
        display: flex;
        align-items: center;
    }

    .report-card h3 svg {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.75rem;
    }

    #financial-impact-title {
        color: var(--text-dark);
    }

    #financial-impact-title svg {
        color: var(--brand-primary);
    }

    #financial-metrics,
    #roi-metrics {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1rem;
        text-align: center;
    }

    #roi-metrics {
        padding-top: 0;
        margin-bottom: 1rem;
    }

    .metric-box {
        display: flex;
        padding: 12px 15px;
        margin-bottom: 15px;
        gap: 10px;
        flex-direction: column;
        align-items: center;
        border-radius: 0.75rem;
        text-align: center;
        background-color: #ffffff;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
        transition-duration: 300ms;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    .metric-box p:first-child {
        font-size: 16px;
        margin: 0;
        font-weight: 700;
    }

    .metric-box p:last-child {
        margin-top: 0;
        font-weight: 700;
        margin-bottom: 0;
        font-size: 26px;
    }

    .metric-box .gain {
        font-size: 1.875rem;
        color: var(--success-dark);
    }

    .metric-box .loss {
        font-size: 1.875rem;
        color: var(--danger-dark);
    }

    .metric-box .total {
        font-size: 2.25rem;
        color: var(--brand-primary);
    }

    .chart-container {
        position: relative;
        height: 20rem;
        width: 100%;
    }

    #competitor-title {
        color: var(--brand-primary);
    }

    #competitor-output .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .competitor-card {
        padding: 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        background-color: white;
        box-shadow: var(--shadow-sm);
        margin-top: 1.5rem;
    }
    .competitor-card h4 {
        font-size: 16px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    .competitor-card .kpi-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1.5rem;
        font-size: 0.875rem;
        margin-top: 1rem;
    }
    .competitor-card .kpi-list-title {
        font-weight: 700;
        margin-bottom: 0.25rem;
        grid-column: span 2;
    }
    .competitor-card .kpi-device-col {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        border-radius: 10px;
        padding: 15px 20px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 /0.1);
    }
    .competitor-card .kpi-comparison {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.875rem;
    }
    .competitor-card .kpi-comparison .label {
        color: var(--text-medium);
    }
    .competitor-card .kpi-comparison .value {
        font-weight: 700;
    }
    .competitor-card .kpi-good,
    .kpi-card .kpi-good {
        color: var(--success-dark);
    }
    .competitor-card .kpi-needs-improvement,
    .kpi-card .kpi-needs-improvement {
        color: #f59e0b;
    }
    .competitor-card .kpi-poor,
    .kpi-card .kpi-poor {
        color: var(--danger-dark);
    }

    .pdf-hide {
        display: none !important;
    }

    .info-icon {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        cursor: help;
    }

    .info-icon.hide {
        display: none;
    }

    .info-tooltip {
        visibility: hidden;
        width: 240px;
        background-color: var(--text-dark);
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 50;
        bottom: 125%;
        left: 50%;
        margin-left: -120px;
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        font-size: 0.75rem;
        line-height: 1.25;
        font-weight: 400;
        transform: translateY(10px);
        a {
            font-weight: 700;
            color: #fff !important;
        }
    }

    .info-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--text-dark) transparent transparent transparent;
    }

    .info-icon:hover .info-tooltip {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    /* Responsive Styles */
    @media (min-width: 640px) {
        #financial-metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 768px) {
        .roi-header h1 {
            font-size: 3rem;
            line-height: 1;
        }

        #roi-metrics {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        #competitor-output .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        body:not(.blog-page) {
            .roi-header {
                padding: 4rem 0.5rem 2rem;
            }

            #roi-main-content {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }

            .form-column {
                grid-column: span 2 / span 2;
            }

            .output-column {
                grid-column: span 3 / span 3;
            }

            #competitor-output .grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .blog-page {
            #capture-area {
                background: #f0f8ff;
                padding: 30px 20px 0;
                border-radius: 24px;
                margin: 30px 0;
            }

            #roi-main-content {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 20px;

                input {
                    line-height: 1.4;
                }
            }

            /*#report-buttons {
                flex-direction: row;
                gap: 10px;
                box-shadow: none;
            }*/

            #share-report-btn,
            #pdf-report-btn
             {
                font-size: 14px;
                width: fit-content;
            }

            /*.output-header {
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 12px;
            }*/

            .form-column {
                grid-column: span 1 / span 1;
                padding: 16px;
                background-color: #fff;
            }

            .output-column {
                grid-column: span 2 / span 2;
                padding: 16px;
            }

            .form-label {
                font-size: 14px;
            }

            #financial-impact-title {
                margin-top: 0;
            }

            #impact-form {
                #kpi-display {
                    & > div {
                        grid-template-columns: repeat(1, 1fr);

                        h3 {
                            font-size: 16px;
                            margin: 0;
                        }
                    }
                }

                .toggle-group {
                    flex-direction: column;
                    gap: 20px;
                }
            }

            .metric-box {
                padding: 12px 5px;
                gap: 5px;

                p {
                    &:first-child {
                        font-size: 13px;
                    }
                    &:last-child {
                        font-size: 20px;
                        margin-bottom: 0;
                    }
                }
            }

            #output-section {
                background-color: #fff;
            }
        }

        .output-header {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 12px;
        }

        #report-buttons {
            flex-direction: row;
            gap: 10px;
            box-shadow: none;
        }

        #impact-form {
            #fetch-data-btn {
                border-radius: 6px;
                font-size: 14px;
                width: 100%;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }
            .input-group {
                flex-direction: column;
                gap: 10px;
                box-shadow: none;

                input {
                    border: 1px solid #bdbdbd;
                    border-radius: 0.5rem;
                }
            }
        }

        #competitor-form #fetch-competitors-btn {
            border-radius: 6px;
            font-size: 14px;
            width: 100%;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
    }

    /* Add these styles for the competitor pills */
    #competitor-pills-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .competitor-pill {
        display: inline-flex;
        align-items: center;
        background-color: #e0e7ff; /* A light blue */
        color: #3730a3; /* A dark blue text */
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .competitor-pill button {
        margin-left: 0.5rem;
        background: none;
        border: none;
        color: #4f46e5; /* A medium blue */
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    .competitor-pill button:hover {
        opacity: 1;
    }

    .footer-disclaimer {
        font-size: 0.75rem;
        color: #9ca3af;
        margin: 15px auto 0 !important;
        text-align: center;
    }

    .footer-disclaimer a {
        text-decoration: underline;
        color: inherit;
    }

    .footer-disclaimer a:hover {
        color: var(--brand-primary);
    }
</style>
<div id="capture-area" class="cmsb78-container cmsb78-mx-auto">
    <div class="roi-header">
        <div class="cmsb78-container cmsb78-text-center">
            <div id="pdf-logo" class="roi-hidden">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb78-size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z"></path>
                </svg>
            </div>
            <span class="roi-title">The True Cost of a Slow Website</span>
            <p class="cmsb78-text-primary-light cmsb78-text-center cmsb78-text-xl cmsb78-max-w-[600px] cmsb78-my-2.5 cmsb78-mx-auto">An interactive calculator to quantify the financial,
                competitive, and environmental impact of your site's
                performance.</p>
        </div>
    </div>

    <div id="roi-main-content" class="cmsb78-container">
        <div class="form-column cmsb78-border cmsb78-border-gray-200 cmsb78-shadow-md cmsb78-rounded-2xl cmsb78-to-white cmsb78-p-6 cmsb78-lg:p-10">
            <form id="impact-form">
                <div>
                    <label for="user-domain" class="form-label">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb78-w-6 cmsb78-h-6 cmsb78-flex-shrink-0">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"></path>
                        </svg>
                        Your Domain
                        <span class="info-icon"><svg xmlns="http://www.w3.org/2000/svg" class="cmsb78-h-4 cmsb78-w-4 cmsb78-text-gray-400" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="info-tooltip">Input exactly your domain</span></span>
                    </label>
                    <div class="input-group">
                        <input type="text" id="user-domain" placeholder="example.com" class="form-input">
                        <button type="submit" id="fetch-data-btn" class="cmsb78-inline-flex cmsb78-w-fit cmsb78-gap-2 cmsb78-items-center cmsb78-justify-center cmsb78-px-2 cmsb78-py-1 cmsb78-text-base cmsb78-font-medium cmsb78-rounded-r-md cmsb78-shadow-sm cmsb78-text-white cmsb78-bg-primary hover:bg-primary-dark cmsb78-focus:outline-none cmsb78-focus:ring-2 cmsb78-focus:ring-offset-2 focus:ring-primary-light cmsb78-transition cmsb78-ease-in-out cmsb78-duration-150">Fetch
                            Data</button>
                    </div>
                    <p id="fetch-status" class="fetch-status-text"></p>
                </div>

                <div id="kpi-display" class="roi-hidden"></div>

                <div class="toggle-group cmsb78-flex cmsb78-flex-col cmsb78-gap-2 cmsb78-xl:flex-row cmsb78-xl:justify-between">
                    <label class="form-label cmsb78-!mb-0">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb78-w-6 cmsb78-h-6 cmsb78-flex-shrink-0">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                        </svg>
                        Calculation Mode
                    </label>
                    <div class="cmsb78-flex cmsb78-gap-2 cmsb78-items-center">
                        <span id="simple-mode-label" class="toggle-label active">Simple</span>
                        <button type="button" id="mode-toggle" role="switch" aria-checked="false">
                            <span></span>
                        </button>
                        <span id="advanced-mode-label" class="toggle-label inactive">Advanced</span>
                    </div>
                </div>

                <div id="tabs-container" class="roi-hidden">
                    <nav class="tabs-nav">
                        <button id="tab-mobile" type="button" class="tab-button active">Mobile</button>
                        <button id="tab-desktop" type="button" class="tab-button">Desktop</button>
                    </nav>
                </div>

                <div id="financial-inputs">
                    <div class="inputs-section">
                        <div id="data-inputs"></div>
                        <div class="slider-group">
                            <label for="target-lcp-slider" class="slider-label">Target LCP: <span id="target-lcp-value">1.8s</span></label>
                            <input type="range" id="target-lcp-slider" min="0.5" max="4.0" step="0.1" value="1.8">
                        </div>
                    </div>
                </div>

                <div>
                    <label for="industry-select" class="form-label">Select Your Industry</label>
                    <select id="industry-select">
                        <option value="retail">Retail</option>
                        <option value="travel">Travel</option>
                        <option value="luxury">Luxury</option>
                        <option value="leadgen">Lead Generation</option>
                        <option value="general" selected>General / Other</option>
                    </select>
                </div>

                <div>
                    <label for="optimization-cost" class="form-label">Estimated Optimization Cost (&euro;)</label>
                    <input type="number" id="optimization-cost" value="5000" step="100">
                </div>

                <div>
                    <label for="traffic-growth-slider" class="slider-label">Projected Annual Traffic Growth: <span id="traffic-growth-value">10%</span></label>
                    <input type="range" id="traffic-growth-slider" min="0" max="100" step="1" value="10">
                </div>
            </form>
            <form id="competitor-form">
                <div>
                    <label for="competitors" class="form-label">Competitor Domains</label>
                    <div id="competitor-pills-container"></div>
                    <input type="text" id="competitors" placeholder="Add competitor domains...">
                    <button type="submit" id="fetch-competitors-btn" class="cmsb78-inline-flex cmsb78-w-fit cmsb78-gap-2 cmsb78-items-center cmsb78-justify-center cmsb78-px-2 cmsb78-py-1 cmsb78-text-base cmsb78-font-medium cmsb78-rounded-r-md cmsb78-shadow-sm cmsb78-text-white cmsb78-bg-primary hover:bg-primary-dark cmsb78-focus:outline-none cmsb78-focus:ring-2 cmsb78-focus:ring-offset-2 focus:ring-primary-light cmsb78-transition cmsb78-ease-in-out cmsb78-duration-150">Add &amp; Fetch Competitor Data</button>
                    <div>Input domains and click the button to add them to the benchmark.</div>
                </div>
            </form>
        </div>
        <div id="output-section" class="output-column roi-hidden cmsb78-border cmsb78-border-gray-200 cmsb78-shadow-md cmsb78-rounded-2xl cmsb78-to-white cmsb78-p-6 cmsb78-lg:p-10">
            <div class="output-header cmsb78-flex cmsb78-flex-col cmsb78-gap-4 cmsb78-xl:gap-0 cmsb78-xl:flex-row cmsb78-justify-between cmsb78-items-center">
                <span class="cmsb78-text-2xl cmsb78-font-bold">Performance Impact Analysis</span>
                <div id="report-buttons" class="cmsb78-flex cmsb78-flex-col cmsb78-xl:flex-row cmsb78-w-full cmsb78-xl:w-fit cmsb78-gap-2">
                    <button id="share-report-btn" class="cmsb78-inline-flex cmsb78-w-full cmsb78-xl:w-fit cmsb78-gap-2 cmsb78-items-center cmsb78-justify-center cmsb78-px-4 cmsb78-py-2 cmsb78-text-base cmsb78-font-medium cmsb78-rounded-md cmsb78-shadow-sm cmsb78-text-white cmsb78-bg-primary hover:bg-primary-dark cmsb78-focus:outline-none cmsb78-focus:ring-2 cmsb78-focus:ring-offset-2 focus:ring-primary-light cmsb78-transition cmsb78-ease-in-out cmsb78-duration-150 cmsb78-!mr-0">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb78-w-4 cmsb78-h-4 cmsb78-flex-shrink-0">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path>
                        </svg>
                        Share</button>
                    <button id="pdf-report-btn" class="cmsb78-inline-flex cmsb78-w-full cmsb78-xl:w-fit cmsb78-gap-2 cmsb78-items-center cmsb78-justify-center cmsb78-px-4 cmsb78-py-2 cmsb78-text-base cmsb78-font-medium cmsb78-rounded-md cmsb78-border cmsb78-border-primary-light cmsb78-text-primary cmsb78-hover:bg-primary-lighter cmsb78-focus:outline-none cmsb78-focus:ring-2 cmsb78-focus:ring-offset-2 focus:ring-primary-light cmsb78-transition cmsb78-ease-in-out cmsb78-duration-150">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb78-w-4 cmsb78-h-4 cmsb78-flex-shrink-0">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12 3 3m0 0 3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
                        </svg>

                        Download
                        PDF</button>
                </div>
            </div>

            <div id="report-content">
                <div class="report-card cmsb78-shadow-md cmsb78-rounded-lg cmsb78-bg-gradient-to-b cmsb78-from-[#cee2fd] cmsb78-to-white">
                    <h3 id="financial-impact-title">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                        Financial Impact
                    </h3>
                    <div id="financial-metrics"></div>
                    <div id="roi-metrics"></div>
                    <div class="chart-container"><canvas id="financial-chart"></canvas></div>
                    <div class="chart-container"><canvas id="projection-chart"></canvas></div>
                </div>

                <div id="competitor-output-container" class="report-card cmsb78-shadow-md cmsb78-rounded-lg report-card-blue">
                    <h3 id="competitor-title">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                        Competitive Benchmark
                    </h3>
                    <div id="competitor-output">
                        <p>Input domains in Competitor Domains to fetch data</p>
                    </div>
                </div>

                <div class="report-card report-card-green cmsb78-p-4 cmsb78-shadow-md cmsb78-rounded-lg">
                    <h3>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        Environmental Impact
                    </h3>
                    <p id="carbon-output">Calculating...</p>
                </div>

                <div class="report-card report-card-yellow cmsb78-p-4 cmsb78-shadow-md cmsb78-rounded-lg">
                    <h3>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                        Actionable Next Steps
                    </h3>
                    <p class="disclaimer">These recommendations are based on a one-time lab test. For continuous
                        monitoring and a complete understanding of real user experience, we recommend using a Real User
                        Monitoring (RUM) solution.</p>
                    <ul id="recommendations-output"></ul>
                </div>
            </div>
            <p class="footer-disclaimer">
                Model based on research from
                <a href="https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds-make-millions-report.pdf" target="_blank" rel="nofollow noopener noreferrer">Deloitte</a>,
                <a href="https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/" target="_blank" rel="nofollow noopener noreferrer">Google</a>, and
                <a href="https://www.akamai.com/newsroom/press-release/akamai-releases-spring-2017-state-of-online-retail-performance-report" target="_blank" rel="nofollow noopener noreferrer">Akamai</a>.
            </p>
        </div>
    </div>
</div>






</div></div></div>

</div>
<br><br></section></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
        /* Smooth transition for accordion body */
        .accordion-body {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .accordion-body > div {
            overflow: hidden;
        }
        .accordion-item.active > .accordion-body {
            grid-template-rows: 1fr;
        }

        /* Chevron icon styling */
        .chevron-icon {
            transition: transform 0.3s ease-in-out;
        }
        .accordion-item.active > .accordion-header .chevron-icon {
            transform: rotate(180deg);
        }

        /* Custom tooltip styling */
        .tooltip-container .tooltip-text {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s, visibility 0.3s;
        }

        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        
        /* Active state glow for main accordions */
        .main-accordion.active {
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
            --tw-ring-color: rgba(59, 130, 246, 0.5); /* blue-500 with 50% opacity */
            border-color: rgba(96, 165, 250, 0.5); /* blue-400 with 50% opacity */
        }
    </style>
    
    
<div id="calculator-manual" class="calculator-manual mx-auto">

    <h3>How It Works:<br>A Practical Guide to the Page Speed ROI Calculator</h3>
    <p>This guide provides a complete walkthrough of the calculator's features. Whether you want a quick overview or a deep, strategic analysis, you will find all the necessary information below.</p>

    <!-- Controls for Expand/Collapse All -->
    <div class="manual-controls flex items-center gap-4 my-6">
        <button id="expand-all-btn" class="btn btn-primary flex items-center gap-2 px-4 py-2 text-white font-semibold rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-50 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" x2="12" y1="8" y2="16"></line><line x1="8" x2="16" y1="12" y2="12"></line></svg>
            <span>Expand All</span>
        </button>
        <button id="collapse-all-btn" class="btn btn-secondary flex items-center gap-2 px-4 py-2 bg-slate-200 text-slate-700 font-semibold rounded-lg hover:bg-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="8" x2="16" y1="12" y2="12"></line></svg>
            <span>Collapse All</span>
        </button>
    </div>

    <!-- Accordion Items Container -->
    <div class="space-y-4">
        
        <!-- Accordion Item 1: How to Use -->
        <div id="manual-how-to" class="accordion-item main-accordion bg-white/30 backdrop-blur-xl rounded-3xl shadow-lg border border-slate-200/50 transition-all duration-300">
            <div class="accordion-header flex items-center justify-between w-full p-5 cursor-pointer hover:bg-slate-100/50 transition-colors duration-200 rounded-3xl">
                <div class="flex items-center gap-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 text-primary"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0.73 2.73l.15.1a2 2 0 0 1 0 2l-.15.08a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1 0-2l.15-.08a2 2 0 0 0.73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                    <h4>How to Use the Calculator: A Step-by-Step Guide</h4>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-icon text-slate-500"><path d="m6 9 6 6 6-6"></path></svg>
            </div>
            <div class="accordion-body">
                <div>
                    <div class="px-5 pb-5 text-slate-600">
                        <div class="border-t border-slate-200 pt-4 prose prose-slate max-w-none prose-strong:font-semibold">
                            <ol class="list-decimal list-outside space-y-3 pl-5">
                                <li><strong>Fetch Your Data (Optional):</strong><br>
                                	For a quick start, enter your store's domain and click <strong>"Fetch Data."</strong><br> 
                                	This automatically populates your site's real-world performance metrics from the public Chrome User Experience Report (CrUX).</li>
                                <li><strong>Enter Your Metrics Manually:</strong><br>
                                	All input fields are editable. You can manually enter or <b>adjust your LCP</b>, <b>monthly visitors</b>, <b>conversion rate</b>, and <b>average order value (AOV)</b> 
                                	to <b>model different scenarios</b> or use data from your own analytics tools.</li>
                                <li><strong>Choose Your Mode:</strong><br>
                                	Use the <strong>"Simple" vs. "Advanced"</strong> toggle. "Simple" mode provides a quick overview based on site-wide averages.<br> 
                                	For a <b>more precise analysis</b>, select <strong>"Advanced"</strong> to input separate metrics for Mobile and Desktop traffic - 
                                	this is highly recommended as <b>performance and user behavior often differ significantly across devices</b>.</li>
                                <li><strong>Set Your Goals & Investment:</strong><br>
                                	Use the sliders to define your <strong>"Target LCP"</strong> and your <strong>"Projected Annual Traffic Growth."</strong><br>
                                	Enter your <strong>"Estimated Optimization Cost"</strong> to see the full financial picture.</li>
                                <li><strong>Analyze Your Comprehensive Report:</strong><br>
                                	The calculator will instantly generate a <b>multi-faceted report</b> covering <b>financial impact</b>, <b>competitive standing</b>, and <b>environmental benefits</b>.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <!-- Accordion Item 2: Understanding Inputs -->
        <div id="manual-inputs" class="accordion-item main-accordion bg-white/30 backdrop-blur-xl rounded-3xl shadow-lg border border-slate-200/50 transition-all duration-300">
            <div class="accordion-header flex items-center justify-between w-full p-5 cursor-pointer hover:bg-slate-100/50 transition-colors duration-200 rounded-3xl">
                <div class="flex items-center gap-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 text-primary"><path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"></path><line x1="8" x2="8" y1="16" y2="16"></line><line x1="8" x2="8" y1="20" y2="20"></line><line x1="12" x2="12" y1="18" y2="18"></line><line x1="12" x2="12" y1="22" y2="22"></line><line x1="16" x2="16" y1="16" y2="16"></line><line x1="16" x2="16" y1="20" y2="20"></line></svg>
                    <h4>Understanding Your Inputs: Gathering the Right Data</h4>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-icon text-slate-500"><path d="m6 9 6 6 6-6"></path></svg>
            </div>
            <div class="accordion-body">
                <div>
                    <div class="px-5 pb-5 text-slate-600">
                        <div class="border-t border-slate-200 pt-4 prose prose-slate max-w-none prose-strong:font-semibold">
                            <p>The <b>accuracy of your ROI projection</b> depends on the <b>quality of your input data</b>.<br>
                            The following table details each input, explaining its significance and where you can typically locate the necessary information.</p>
                            <div class="overflow-x-auto -mx-5 sm:mx-0">
                                <table class="w-full text-sm text-left border-collapse">
                                    <thead class="text-xs text-slate-700 uppercase bg-slate-100/75">
                                        <tr>
                                            <th class="p-4 font-semibold">Metric Name</th>
                                            <th class="p-4 font-semibold">Definition</th>
                                            <th class="p-4 font-semibold">Where to Find It</th>
                                            <th class="p-4 font-semibold">Why It Matters for Your ROI</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white/50">
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Your Domain</strong></td><td class="p-4">The full root domain of your Magento store (e.g., yourstore.com).<br>Note: Use www or non-www version as indexed by Google!</td><td class="p-4">N/A</td><td class="p-4">This is used to fetch real-world performance data from the Chrome User Experience Report (CrUX)<span class="tooltip-container relative inline-flex items-center ml-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-400 cursor-help"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="16" y2="12"></line><line x1="12" x2="12.01" y1="8" y2="8"></line></svg><span class="tooltip-text absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-56 p-2 bg-slate-800 text-white text-xs rounded-md shadow-lg z-10">Public data collected from real-world Chrome users. Provides a baseline for web performance.</span></span>, providing a live, objective baseline for all calculations.</td></tr>
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Current LCP (s)</strong></td><td class="p-4">Largest Contentful Paint: Measures the time it takes for the largest visual element on the page to load. It is a core measure of user-perceived loading speed.<span class="tooltip-container relative inline-flex items-center ml-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-400 cursor-help"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="16" y2="12"></line><line x1="12" x2="12.01" y1="8" y2="8"></line></svg><span class="tooltip-text absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-56 p-2 bg-slate-800 text-white text-xs rounded-md shadow-lg z-10">A key Core Web Vital metric used by Google to evaluate page experience. A good LCP is under 2.5 seconds.</span></span></td><td class="p-4"><strong>Auto-populated</strong> by the "Fetch Data" button. Can be found manually in Google Search Console > Core Web Vitals.</td><td class="p-4">This is the single most critical input. The entire calculation hinges on the conversion uplift gained by improving this number, as established by extensive industry research.</td></tr>
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Monthly Visitors</strong></td><td class="p-4">The number of unique users visiting your site per month.</td><td class="p-4"><strong>Google Analytics 4:</strong> <code>Reports > Acquisition > Traffic acquisition</code>, filter for 'Users'.<br><strong>Magento Admin:</strong> <code>Reports > Statistics > Refresh Statistics</code>.</td><td class="p-4">Traffic volume determines the scale of your potential revenue gain. A small conversion rate improvement has a massive, compounding impact on high-traffic sites.</td></tr>
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Conversion Rate (%)</strong></td><td class="p-4">The percentage of visitors who complete a purchase.</td><td class="p-4"><strong>Google Analytics 4:</strong> <code>Reports > Monetization > Ecommerce purchases</code>, divide 'Conversions' by 'Sessions'.<br><strong>Magento Admin:</strong> <code>Reports > Business Intelligence > Conversion Rate</code>.</td><td class="p-4">This is a direct multiplier in the revenue calculation. Improving your conversion rate through better site speed is one of the most effective ways to grow revenue without increasing ad spend.</td></tr>
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Average Order Value (€)</strong></td><td class="p-4">The average monetary value of each order placed on your site.</td><td class="p-4"><strong>Google Analytics 4:</strong> <code>Reports > Monetization > Ecommerce purchases</code>, see 'Average purchase revenue'.<br><strong>Magento Admin:</strong> <code>Reports > Sales > Orders</code>.</td><td class="p-4">A higher AOV means each conversion recovered through speed improvements is significantly more valuable, directly accelerating your return on investment.</td></tr>
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Target LCP (s)</strong></td><td class="p-4">The performance goal you want to achieve. A target of &lt; 2.5s is 'Good' by Google's standards; &lt; 1.8s is considered excellent.</td><td class="p-4">User-defined via the slider. The default is set to an ambitious but achievable 1.8s.</td><td class="p-4">This allows you to model different scenarios. Setting a clear target shows the maximum potential of a performance project and forms the basis for the "what if" analysis.</td></tr>
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Estimated Optimization Cost (€)</strong></td><td class="p-4">The one-time investment for a performance optimization project, such as a migration to Hyvä Themes.</td><td class="p-4">Based on quotes or internal estimates. JaJuMa can provide a detailed quote after an initial consultation.</td><td class="p-4">This is the 'I' (Investment) in ROI. An accurate estimate is crucial for calculating the payback period and first-year return, providing a complete business case.</td></tr>
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Projected Annual Traffic Growth (%)</strong></td><td class="p-4">Your anticipated percentage increase in traffic over the next 12 months.</td><td class="p-4">Based on your business and marketing forecasts.</td><td class="p-4">This demonstrates the compounding effect of speed. A faster site not only converts existing traffic better but also amplifies the value of all future traffic growth, as visualized in the projection chart.</td></tr>
                                        <tr class="border-b border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Select Your Industry</strong></td><td class="p-4">Your primary e-commerce vertical (e.g., Retail, Travel, Luxury).</td><td class="p-4">N/A</td><td class="p-4">Different industries see different levels of conversion uplift from speed improvements. This selection tunes the calculation model using industry-specific data from the foundational Deloitte/Google study for greater accuracy.</td></tr>
                                        <tr class="border-b-0 border-slate-200"><td class="p-4 font-medium text-slate-900"><strong>Competitor Domains</strong></td><td class="p-4">The domains of one or more of your direct competitors, separated by commas.<br>Note: Use www or non-www version as indexed by Google!</td><td class="p-4">N/A</td><td class="p-4">This transforms the tool from an internal audit into a competitive intelligence platform, showing you exactly where you stand in your market and creating a data-driven case for action.</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Accordion Item 3: Interpreting Results -->
        <div id="manual-results" class="accordion-item main-accordion bg-white/30 backdrop-blur-xl rounded-3xl shadow-lg border border-slate-200/50 transition-all duration-300">
            <div class="accordion-header flex items-center justify-between w-full p-5 cursor-pointer hover:bg-slate-100/50 transition-colors duration-200 rounded-3xl">
                <div class="flex items-center gap-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 2048 2048" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 text-primary"><path fill="currentColor" d="M960 384q119 0 224 45t183 124t123 183t46 224q0 63-8 118t-25 105t-44 99t-64 100q-29 40-51 72t-36 64t-21 70t-7 89v179q0 40-15 75t-41 61t-61 41t-75 15H832q-40 0-75-15t-61-41t-41-61t-15-75v-180q0-51-7-88t-21-69t-36-65t-51-72q-37-51-63-99t-44-99t-26-106t-8-118q0-119 45-224t124-183t183-123t224-46m192 1472v-64H768v64q0 26 19 45t45 19h256q26 0 45-19t19-45m256-896q0-93-35-174t-96-143t-142-96t-175-35q-93 0-174 35t-143 96t-96 142t-35 175q0 89 18 153t47 114t61 94t61 92t48 108t21 143h384q1-83 20-142t48-108t61-92t61-94t47-115t19-153M960 256q-26 0-45-19t-19-45V64q0-26 19-45t45-19t45 19t19 45v128q0 26-19 45t-45 19M192 928H64q-26 0-45-19T0 864t19-45t45-19h128q26 0 45 19t19 45t-19 45t-45 19m53 261q26 0 45 19t19 46q0 20-11 35t-30 24q-11 5-30 13t-41 17t-40 15t-32 7q-26 0-45-19t-19-46q0-20 11-35t30-24q11-4 30-13t41-17t40-15t32-7m152-645q0 26-19 45t-45 19q-18 0-33-9l-109-67q-14-9-22-23t-9-32q0-26 19-45t45-19q16 0 33 10l110 66q14 8 22 23t8 32m83-368q0-26 19-45t45-19q17 0 32 9t24 24l62 112q8 14 8 30q0 27-19 46t-45 19q-17 0-32-9t-24-24l-62-112q-8-14-8-31m1376 624q26 0 45 19t19 45t-19 45t-45 19h-128q-26 0-45-19t-19-45t19-45t45-19zm2 501q0 26-19 45t-45 19q-11 0-30-6t-41-16t-40-17t-31-14q-18-8-29-24t-12-36q0-27 19-45t46-19q12 0 31 7t40 16t40 18t31 13q18 8 29 23t11 36m-271-693q-26 0-45-19t-19-45q0-17 8-32t22-23l110-66q17-10 33-10q26 0 45 19t19 45q0 17-8 31t-23 24l-109 67q-15 9-33 9m-337-321q0-16 8-30l62-112q8-15 23-24t33-9q26 0 45 19t19 45q0 17-8 31l-62 112q-8 15-23 24t-33 9q-26 0-45-19t-19-46" /></svg>
                    <h4>Interpreting Your Results: From Data to Decisions</h4>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-icon text-slate-500"><path d="m6 9 6 6 6-6"></path></svg>
            </div>
            <div class="accordion-body">
                <div>
                    <div class="px-5 pb-5 text-slate-600">
                        <div class="border-t border-slate-200 pt-4 prose prose-slate max-w-none prose-headings:font-semibold prose-strong:font-semibold">
                            <p>The output of the calculator is designed to translate complex data into a clear, actionable business narrative.</p>
                            <h5>The Financial Impact: Unlocking Hidden Revenue</h5>
                            <p>This section is the core of your business case, showing the direct link between speed and revenue.</p>
                            <ul class="list-disc list-outside space-y-2 pl-5">
                                <li><strong>Potential Monthly Gain:</strong> The additional revenue you could generate each month by hitting your target LCP.</li>
                                <li><strong>Revenue Lost per Month:</strong> The ongoing monthly cost of inaction, quantifying the urgency.</li>
                                <li><strong>Total Potential Gain:</strong> The aggregate annual revenue increase you can expect.</li>
                                <li><strong>Est. ROI (1st Year):</strong> This calculates the return on your optimization cost within the first year. An ROI of 500% means for every euro invested, you get five back in additional revenue.</li>
                                <li><strong>Payback Period:</strong> This answers the critical question: "How long until we break even?" A payback period of '3.5 mo' means your investment will pay for itself in just over a quarter.</li>
                            </ul>
                            <p><strong>Visualizations:</strong></p>
                            <ul class="list-disc list-outside space-y-2 pl-5">
                                <li><strong>Revenue Bar Chart:</strong> A powerful at-a-glance visual comparing your current monthly revenue (red) with your potential revenue after optimization (green). The gap is your opportunity.</li>
                                <li><strong>12-Month Projection Chart:</strong> This line chart demonstrates the compounding power of speed over time. It plots your projected revenue at your current performance (red line) against the projected revenue of the optimized site (green line), factoring in your anticipated traffic growth. As traffic increases, the revenue gap widens, proving that a faster site makes all future marketing efforts more profitable.</li>
                            </ul>
                            <h5>The Competitive Benchmark: Sizing Up the Competition</h5>
                            <p>This feature reframes performance from a technical chore into a strategic imperative. It uses public CrUX data to provide a direct, apples-to-apples comparison of your Core Web Vitals (LCP, INP, CLS) against your rivals. This data provides a powerful, external motivation to justify budget and prioritize performance as a key market differentiator.</p>
                            <h5>The Environmental Impact: A Faster, Greener Web</h5>
                            <p>This unique feature calculates the estimated reduction in your digital carbon footprint (in kg of CO2 per month) resulting from performance improvements. A faster, more efficient site uses less energy for data transfer and processing on user devices. This provides a tangible sustainability benefit that can be used in your company's Corporate Social Responsibility (CSR) reports, strengthening the business case with a "double bottom line" that is good for both profit and the planet.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Accordion Item 4: Methodology -->
        <div id="manual-methodology" class="accordion-item main-accordion bg-white/30 backdrop-blur-xl rounded-3xl shadow-lg border border-slate-200/50 transition-all duration-300">
            <div class="accordion-header flex items-center justify-between w-full p-5 cursor-pointer hover:bg-slate-100/50 transition-colors duration-200 rounded-3xl">
                <div class="flex items-center gap-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 text-primary"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" x2="8" y1="13" y2="13"></line><line x1="16" x2="8" y1="17" y2="17"></line><line x1="10" x2="8" y1="9" y2="9"></line></svg>
                    <h4>The Science Behind Your Revenue Projection: Our Methodology</h4>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-icon text-slate-500"><path d="m6 9 6 6 6-6"></path></svg>
            </div>
            <div class="accordion-body">
                <div>
                    <div class="px-5 pb-5 text-slate-600">
                        <div class="border-t border-slate-200 pt-4 prose prose-slate max-w-none prose-strong:font-semibold">
                            <p>The calculator's models are anchored in extensive, published research from industry leaders to ensure trustworthy projections.</p>
                            <p>The critical variable is the "Uplift Rate."<br>
                            This is not an arbitrary number. It is derived from the comprehensive Deloitte and Google study which found that a 
                            <b>0.1-second improvement in site speed yields an 8.4% lift in retail conversions</b>.<br>
                            By extrapolating this data-backed finding, the calculator provides a realistic projection of how speed improvements 
                            can directly translate into financial gains for your specific business.<br>
                            This transparent methodology demonstrates that the results are based on real-world performance data, not marketing hyperbole.</p>
                            <ul class="list-disc list-outside space-y-2 pl-5">
                                <li><strong>The Deloitte & Google Study:</strong> The core of the calculation model is the "Milliseconds Make Millions" study, which found a direct, causal link between site speed and business KPIs. The key finding is that a <strong>mere 0.1-second improvement in site speed can boost retail conversions by 8.4%</strong> and increase average order value by 9.2%. The calculator uses this data, adjusted by your selected industry, to project a realistic conversion uplift.</li>
                                <li><strong>The 7% Rule:</strong> The model also considers the long-standing principle that a <strong>1-second delay in page load time can decrease conversions by up to 7%</strong>, which helps validate the projections.</li>
                            </ul>
                            <p><strong>Disclaimer:</strong> These calculations provide a robust, data-driven estimate for strategic planning. Actual results will vary based on numerous factors unique to your business. This tool is designed to provide a strong directional forecast to build a business case for performance optimization.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Accordion Item 5: Next Steps -->
        <div id="manual-next-steps" class="accordion-item main-accordion bg-white/30 backdrop-blur-xl rounded-3xl shadow-lg border border-slate-200/50 transition-all duration-300">
            <div class="accordion-header flex items-center justify-between w-full p-5 cursor-pointer hover:bg-slate-100/50 transition-colors duration-200 rounded-3xl">
                <div class="flex items-center gap-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 text-primary"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" x2="4" y1="22" y2="15"></line></svg>
                    <h4>Your Path to a Faster, More Profitable Store</h4>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-icon text-slate-500"><path d="m6 9 6 6 6-6"></path></svg>
            </div>
            <div class="accordion-body">
                <div>
                    <div class="px-5 pb-5 text-slate-600">
                        <div class="border-t border-slate-200 pt-4 prose prose-slate max-w-none prose-headings:font-semibold prose-strong:font-semibold prose-a:text-primary hover:prose-a:text-blue-700">
                            <h5>Advanced Reporting: Sharing and Saving Your Analysis</h5>
                            <ul class="list-disc list-outside space-y-2 pl-5">
                                <li><strong>Share Your Report:</strong> Click the "Share" button to create a unique, private URL with your full report - including all inputs and fetched data - pre-loaded. This is perfect for sharing your findings with your team, CEO, or development agency for review.</li>
                                <li><strong>Download as PDF:</strong> For formal communication, the "Download PDF" feature creates a clean, professional document of your complete analysis, ideal for attaching to budget proposals, including in presentations, or archiving for future reference.</li>
                            </ul>
                            <h5>Actionable Next Steps: From Insight to Implementation</h5>
                            <p>Your calculator results provide the 'what' and the 'why'. The next step is the 'how'.</p>
                            <ol class="list-decimal list-outside space-y-3 pl-5">
                                <li><strong>Get a Professional Performance Audit:</strong> A professional performance audit will identify the specific bottlenecks causing slowness, resulting in a prioritized, actionable roadmap for improvement.</li>
                                <li><strong>Explore a Hyvä Themes Migration:</strong> For Magento stores seeking the ultimate in performance, a migration to Hyvä Themes is the industry-leading solution, directly addressing the root causes of poor Core Web Vitals scores. As a <strong>Hyvä Gold Partner, Technology Partner, and Core Contributor</strong>, JaJuMa possesses the deep expertise required to ensure a seamless and impactful transition.</li>
                                <li><strong>Contact Us for a Free Consultation:</strong> Your journey to a faster, more profitable store starts with a conversation. <a href="https://www.jajuma.de/en/contact" target="_blank" rel="noopener">Contact the JaJuMa team today</a> to discuss your results and receive a free, no-obligation consultation on how we can help you achieve your performance goals.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3 id="tale-of-two-stores">A Tale of Two Stores: Putting the Calculator into Practice</h3>
<p>&nbsp;</p>
<p>To illustrate the tangible impact of these calculations, consider two distinct e-commerce scenarios.</p>
<p>&nbsp;</p>
<p><strong>Scenario 1: "The Fashion Boutique"</strong></p>
<p>This B2C store has a solid brand but faces stiff competition. Their metrics are:</p>
<ul>
<li>Monthly Revenue: &euro;50,000</li>
<li>Conversion Rate: 1.5%</li>
<li>Average Order Value: &euro;120</li>
</ul>
<p>&nbsp;</p>
<p>They are suffering from a slow, image-heavy Luma theme. By investing in a performance overhaul that improves their average load time by 1.5 seconds, the calculator would project a <strong>substantial 70k+ figure increase in annual revenue</strong>. This demonstrates that even for a moderately sized business, the returns from performance optimization are transformative, funding further growth and marketing efforts.</p>
<p>&nbsp;</p>
<p><strong>Scenario 2: "The B2B Parts Supplier"</strong></p>
<p>This store operates in a niche B2B market with high-value transactions but a lower conversion rate. Their metrics are:</p>
<ul>
<li>Monthly Revenue: &euro;250,000</li>
<li>Conversion Rate: 0.8%</li>
<li>Average Order Value: &euro;800</li>
</ul>
<p>&nbsp;</p>
<p>Their site is clunky and difficult to navigate, especially on mobile. A 1.0-second improvement in load time, which simplifies the process for engineers in the field, would project a <strong>massive revenue gain</strong>. This scenario highlights that the value of speed is not limited to high-volume B2C. For B2B merchants, even a small increase in the number of converted orders can result in enormous financial benefits.</p></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h2>The Magento &amp; Luma Challenge: Why Your Store Is Inherently Slow</h2>
<p>&nbsp;</p>
<p>Now that the <strong>financial cost of slowness is clear</strong>, it's<strong> crucial to understand</strong> <strong><em>why</em> your Magento store is likely underperforming</strong>. <br>For many merchants, the <strong>problem is not a result of poor management</strong> but is inherent to the <strong>platform's default configuration </strong>and missing out on <a title="Top 10 Reasons Your Business Needs Magento: The Ultimate E-commerce Platform for Growth &amp; Flexibility" href="/en/jajuma-shop/top-10-reasons-for-magento" target="_blank" rel="noopener"><strong>leveraging the platforms power and flexibility</strong></a>.</p>
<p>&nbsp;</p>
<h3 id="luma-legacy">The Luma Legacy: Bloated Code and Performance Bottlenecks</h3></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="A3T5Q0J"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="NQDPW3W"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="K82JYIJ"><div data-content-type="text" data-appearance="default" data-element="main"><section>
<p>When Magento 2 was launched, the Luma theme was its standard-bearer.&nbsp;<br>Today, it represents a <strong>significant technical debt</strong>. It was built using a stack of technologies - including <strong>heavy libraries like KnockoutJS, RequireJS, and jQuery</strong> - that are now considered outdated and inefficient for modern web performance.&nbsp;</p>
<p>&nbsp;</p>
<p>A typical Luma-based page&nbsp;<strong>loads hundreds of individual JavaScript and CSS files</strong>, creating a <strong>traffic jam of requests</strong> that slows the entire experience to a crawl.</p>
<p>&nbsp;</p>
<p>In stark contrast, a&nbsp;<strong>modern <a title="Hyv&auml; Website" href="https://www.hyva.io" target="_blank" rel="nofollow noopener">Hyv&auml;</a> theme</strong> often loads <strong>just two resources</strong>. This fundamental <strong>architectural difference</strong> is the <strong>primary source of Magento's widespread performance problems.</strong></p>
</section></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="XJNT6PC"><figure class="md:ml-8 shadow-xl rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="BQA9UJ3"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/the-luma-legacy-bloated-code-and-performance-bottlenecks-vs-lean-hyva-blueprint.png" alt="A cluttered, bloated architectural blueprint representing Magento's Luma theme vs. a clean, streamlined and organized Hyv&auml; Architecture Blueprint " title="" data-element="desktop_image" data-pb-style="HYTYD67"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/the-luma-legacy-bloated-code-and-performance-bottlenecks-vs-lean-hyva-blueprint.png" alt="A cluttered, bloated architectural blueprint representing Magento's Luma theme vs. a clean, streamlined and organized Hyv&auml; Architecture Blueprint " title="" data-element="mobile_image" data-pb-style="N131O9C"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><section>
<p>&nbsp;</p>
<br>
<p><strong>This is not a niche opinion;</strong> it is a <strong>well-documented and widely discussed pain point</strong> within the Magento developer community. A search through technical forums reveals years of developer frustration with trying to optimize Luma, with common complaints about slow JavaScript loading and a general feeling of a <strong>"bloated" and "unresponsive" framework</strong>. This shared experience validates that a slow Luma site is the default state, not an exception.</p>
<br>
<p>This analysis leads to a <strong>crucial business realization</strong>. The default Luma theme, while having a license fee of &euro;0, carries a <strong>significant hidden cost</strong>. This <strong>"performance tax"</strong> is the <strong>sum of the annual revenue lost due to poor performance</strong> <em>plus</em> the high, ongoing development<strong> costs required to constantly battle its inherent slowness</strong>. For many merchants, this hidden tax can easily amount to tens or even hundreds of thousands of euros per year.</p>
<p>This powerfully reframes the decision to invest in a modern frontend. The modest <strong>license fee for a solution like Hyv&auml; is not a cost;</strong> it is a <strong>high-ROI investment</strong> to&nbsp;<em>eliminate</em> the crippling <strong>Luma performance tax</strong>. As Adobe is no longer investing in Luma's future, it is effectively a <strong><a tabindex="-1" href="https://www.jajuma.de/en/blog/magento-luma-frontend-deprecated-what-now-what-next-alternatives">deprecated technology</a></strong>, making a switch together with <strong><a tabindex="-1" title="Your Dedicated Magento &amp; Mage-OS Partner for Scalable, High-Performance eCommerce" href="/en/jajuma-shop/online-shop-with-magento-2" target="_blank" rel="noopener">a partner that truly understands Magento</a></strong>&nbsp;not just beneficial, but necessary for long-term success.</p>
<br>
<h3 id="checkout-choke-point">The Checkout Choke-Point: How a Sluggish Magento Checkout Kills Conversions</h3>
<br>
<p><strong>The checkout process is the final, most critical step in the customer journey</strong>, and it's where Luma's <strong>performance issues are most damaging</strong>.</p>
<p>Even a brand-new, out-of-the-box Magento installation can load <strong>over 270 JavaScript files on the checkout page alone</strong>. When third-party extensions for shipping, payments, and taxes are added, this number can easily swell,<strong> creating a significant performance bottleneck</strong>. Each script adds to the load time, and the cumulative effect can <strong>bring the checkout process to a crawl.</strong></p>
<p>&nbsp;</p>
<p><strong>A slow, multi-step checkout is a major cause of cart abandonment.</strong> <br>Every extra second of loading time between steps increases the likelihood that a customer will give up in frustration. <br><strong>Hyv&auml; Checkout, on the other hand, is a lightning-fast</strong>, single-page application that dramatically <strong>reduces friction and boosts completion rates</strong>.</p>
<p>&nbsp;</p>
<p><strong>This isn't just a minor improvement; it's a direct fix for one of the biggest revenue leaks in a standard Magento store:</strong></p>
</section></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="mt-4 text-left">
                                    <a href="/en/blog/hyva-checkout-guide"
                                        title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" target="_blank"
                                        class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 19a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/><path d="M13 17H6V3H4"/><path d="m6 5l14 1l-.575 4.022M14.5 13H6m15 2h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3H17m2 0v1m0-8v1"/></g>
                                        </svg>
                                        Explore The Hyvä Checkout Conversion Boost
                                    </a>
                                </div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3>The Developer Experience Drain: A Hidden Cost Multiplier</h3>
<p><strong>The problem with Luma extends beyond slow page loads for customers;</strong> <br>it creates a <strong>slow and frustrating experience</strong> for developers, which translates into a <strong>hidden tax on your business</strong>. <br>Luma's complex and bloated architecture makes <strong>development work slow, tedious, and prone to errors.</strong></p>
<p>This <strong>"Developer Experience Drain"</strong> has <strong>direct financial consequences</strong> for you, <strong>the merchant: </strong></p>
<ul>
<li><strong>Higher Development Costs:</strong><br>Simple feature implementations or bug fixes can take significantly longer, leading to higher agency fees and development costs.</li>
<li><strong>Slower Time-to-Market:</strong><br>The inefficiency of the Luma stack means new marketing initiatives, promotions, and features are delayed, causing you to miss market opportunities.</li>
<li><strong>Increased Total Cost of Ownership (TCO):</strong><br>The combined cost of lost revenue from poor performance and inflated development expenses means the TCO for a Luma-based store is dramatically higher than it appears.</li>
</ul>
<p><strong>Therefore, sticking with Luma isn't just a performance issue; it's a strategic handicap that impacts your budget and your ability to innovate.</strong></p></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h2>The Hyv&auml; Solution: From Red to Green, From Cost to Profit</h2>
<p><strong>If Luma is the problem, Hyv&auml; is the definitive solution. </strong><br>Introduced in 2021, Hyv&auml; Themes were <strong>built from the ground</strong> up to <strong>solve the exact performance and developer experience issues</strong> that plague the default Magento frontend. It is not a patch or an optimization trick; it is a <strong>complete, modern replacement</strong> that has become the <strong>new standard for high-performance Magento stores.</strong></p>
<p><strong><a title="Magento &amp; Hyv&auml; Migration Services" href="/en/jajuma-shop" target="_blank" rel="noopener">Migrating to Hyv&auml;</a> Themes</strong>. Hyv&auml; is not just an incremental improvement; it is a <strong>fundamental rethinking of the Magento frontend</strong>, designed specifically to solve the performance crisis and turn your store into a fast, profitable, and future-proof asset.</p>
<h3 id="built-for-speed">Built for Speed: How Hyv&auml; Rewrites the Rules of Magento Performance</h3>
<p>Hyv&auml; discards Luma's outdated baggage and replaces it with a <strong>modern, lightweight technology stack</strong> centered around&nbsp; <a title="AlpineJS Website" href="https://alpinejs.dev/" target="_blank" rel="nofollow noopener">Alpine.js</a> for interactivity and <a title="TailwindCSS Website" href="https://tailwindcss.com/" target="_blank" rel="nofollow noopener">Tailwind CSS</a> for styling. <br>This is not just a different choice of tools; it's a different philosophy, focused on sending the absolute minimum amount of code necessary to the browser. (For a deeper dive into how this technology works, you can <strong><a title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="https://www.jajuma.de/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">master Hyv&auml; UI with our detailed guide</a></strong>.)&nbsp;</p>
<p>This approach results in:</p>
<ul>
<li><strong>Radically Fewer Requests:</strong> <br>As mentioned, Hyv&auml; drastically reduces the number of files the browser needs to load, <strong>leading to lightning-fast render times</strong>.</li>
<li><strong>Optimized Core Web Vitals:</strong> <br>Hyv&auml; stores consistently achieve <strong>near-perfect scores on <a title="Core Web Vitals Definition by Google" href="https://web.dev/vitals/" target="_blank" rel="nofollow noopener">Google's Core Web Vitals (LCP, INP, CLS)</a></strong>, a critical factor for both user experience and SEO rankings.</li>
<li><strong>Superior Performance Out-of-the-Box:</strong> <br>While Luma requires extensive, costly optimization to even approach acceptable speeds, <strong>Hyv&auml; delivers exceptional performance from the very beginning.</strong></li>
</ul>
<p>For&nbsp;<strong>merchants looking to maximize their site's potential</strong>, our&nbsp;<strong><a title="Supercharge Your Magento 2 Performance: The Ultimate Guide To LCP Optimization (Luma + Hyv&auml;)" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener">in-depth guide on&nbsp;Core Web Vitals &amp; Largest Contentful Paint Optimization</a></strong> provides further <strong>expert insights</strong>.</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="A74TLRV"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="K6UAHCC"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="GWGVHMM"><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="mt-4 text-left">
                                    <a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes"
                                        title="Top 10 Reasons for Hyvä Themes" target="_blank"
                                        class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
                                        </svg>
                                        Explore The Hyvä Themes Benefits
                                    </a>
                                </div></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="SEH9KLY"><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="mt-4 text-left">
                                    <a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store"
                                        title="Hyvä Commerce: The Next Evolution for Your Magento Store?" target="_blank"
                                        class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48"
                                            stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                            <circle cx="24" cy="24" r="21.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.804 15.19a3.14 3.14 0 0 1 4.298 1.116a3.14 3.14 0 0 1 1.116-4.299a3.14 3.14 0 0 1-4.298-1.116a3.14 3.14 0 0 1-1.116 4.299M26.06 9.26c1.217 0 2.204.986 2.204 2.203c0-1.217.986-2.203 2.202-2.203a2.203 2.203 0 0 1-2.202-2.202A2.203 2.203 0 0 1 26.06 9.26m11.592 9.696a2.793 2.793 0 0 1 1.615 3.604a2.793 2.793 0 0 1 3.604-1.614a2.793 2.793 0 0 1-1.614-3.605a2.793 2.793 0 0 1-3.605 1.615M16.517 38.693a2.793 2.793 0 0 1 1.615 3.605a2.793 2.793 0 0 1 3.604-1.615a2.793 2.793 0 0 1-1.614-3.604a2.793 2.793 0 0 1-3.605 1.614M41.55 36.41a4.83 4.83 0 0 1-2.72-4.35c0 2.68-2.17 4.85-4.85 4.85c2.02 0 3.75 1.23 4.48 2.99M2.7 21.14A4.84 4.84 0 0 0 7.12 24c-1.97 0-3.66 1.17-4.42 2.86m17.645.918c1.777 1.78 3.015 4.217 3.84 6.359c.547 1.424 2.569 1.396 3.068-.046l5.865-16.928c.46-1.327-.811-2.6-2.139-2.142L14.043 20.86c-1.443.497-1.474 2.519-.051 3.069c2.14.827 4.576 2.069 6.353 3.849m-9.507 2.696l-.6 1.999m1.299-.7l-1.999-.599m10.779-24.16l.077 2.086m1.004-1.081l-2.085.077" stroke-width="1"/>
                                        </svg>
                                        Discover Hyvä Commerce
                                    </a>
                                </div></div></div></div></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="OM2WI66"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="ICLNULD"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="CFCG7JQ"><figure class="md:mr-8 shadow-xl rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="KKUC4O1"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/the-roi-of-hyva-development-luma-hyva-buckets.png" alt="A rusty Luma bucket with wholes is leaking an loosing euro coins vs. a new and shiny Hyv&auml; bucket full of collected coins" title="" data-element="desktop_image" data-pb-style="JOGTJF2"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/the-roi-of-hyva-development-luma-hyva-buckets.png" alt="A rusty Luma bucket with wholes is leaking an loosing euro coins vs. a new and shiny Hyv&auml; bucket full of collected coins" title="" data-element="mobile_image" data-pb-style="NUBMERN"></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="MNQOHLS"><div data-content-type="text" data-appearance="default" data-element="main"><h3 id="compounding-roi">More Than Just Speed: The Compounding ROI of Hyv&auml; Development</h3>
<p>&nbsp;The return on investment from a Hyv&auml; migration is a powerful, compounding effect that goes far beyond just reclaiming the revenue you calculated earlier. The business case for Hyv&auml; is built on three pillars:</p>
<ol>
<li><strong>Reclaimed Revenue:</strong> <br>Through <strong>superior speed and user experience</strong>, you directly <strong>increase conversion rates</strong> and <strong>average order value</strong>, turning performance losses into <strong>measurable profit.</strong></li>
<li><strong>Lower Total Cost of Ownership (TCO):</strong> <br>The <strong>clean, modern architecture</strong> of Hyv&auml; makes developers happier and more efficient. This translates to <strong>30-50% faster development times</strong>, lower agency fees, and <strong>reduced long-term maintenance costs</strong>. &nbsp;&nbsp;</li>
<li><strong>Increased Business Agility:</strong> <br>With a <strong>more <a title="Custom Magento &amp; Hyv&auml; Development" href="https://www.jajuma.de/en/jajuma-develop" target="_blank" rel="noopener">efficient development process</a></strong>, you can <strong>launch new features and adapt to market changes faster</strong> than your competitors, creating a <strong>significant strategic advantage.</strong></li>
</ol></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>Furthermore,</strong>&nbsp;Hyv&auml; is actively developed and supported by a vibrant community, it is a <strong>future-proof investment</strong>, unlike Luma, which is effectively a deprecated technology with no future investment from Adobe. This aligns with a forward-looking view on the <a tabindex="-1" title="Another View on the Future of Magento" href="https://www.jajuma.de/en/blog/yet-another-view-on-the-future-of-magento" target="_blank" rel="noopener"><strong>future of Magento</strong></a>.</p>
<section><br>
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left&gt; &lt;thead&gt; &lt;tr class=">
<tbody>
<tr>
<th class="p-4 font-semibold">Feature</th>
<th class="p-4 font-semibold">Luma (Default)</th>
<th class="p-4 font-semibold">Hyv&auml; Theme</th>
<th class="p-4 font-semibold custom-inset-shadow relative">Advantage Hyv&auml;</th>
</tr>
</tbody>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Performance</td>
<td class="p-4">Poor (40&ndash;60 PageSpeed)</td>
<td class="p-4">Excellent (90+ PageSpeed)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Better SEO, Conversions &amp; User Retention</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Technology</td>
<td class="p-4">jQuery, RequireJS</td>
<td class="p-4">Alpine.js, TailwindCSS</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Modern Stack, Easier Dev &amp; Maintenance</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Initial Cost</td>
<td class="p-4">Free</td>
<td class="p-4">&euro;1,000 License</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Investment Offsets Luma's "Performance Tax"</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Development Time</td>
<td class="p-4">High / Complex</td>
<td class="p-4">Low / Simplified (&minus;40%)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Lower Costs &amp; Faster Time-to-Market</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Core Web Vitals</td>
<td class="p-4">Fails / Needs heavy work</td>
<td class="p-4">Passes &ldquo;out of the box&rdquo;</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Outperforms in Google Rankings &amp; UX</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Future-Proof</td>
<td class="p-4">No, being deprecated</td>
<td class="p-4">Yes, actively developed</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Long-Term Viability &amp; Community Support</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 lg:mt-10 text-xl text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200"><strong class="text-primary-dark">Summary:</strong> While Luma may appear cost-free at first, <strong class="text-slate-800">Hyv&auml; delivers substantial business value</strong> through faster development, superior performance, and better long-term ROI.</div>
</div>
</section></div><div data-content-type="text" data-appearance="default" data-element="main"><section id="hyva-solution">
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 id="case-in-point">Case in Point: Real-World Results and from JaJuMa's Hyv&auml; Projects</h3>
<br>
<p><strong>The claims and impact of Hyv&auml;'s superiority are not theoretical;</strong> <br>Across the globe, merchants are seeing transformative results. JaJuMa's own project showcases, like our <strong><a tabindex="-1" href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma">our rapid build for a foo industry client</a></strong>, and a <strong><a tabindex="-1" href="https://www.jajuma.de/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success">project rescue that achieved light-speed in 60-days</a></strong>, showcase the power of a <a tabindex="-1" title="Hyv&auml; Store Development Services" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; migration</strong></a> and demonstrate our firsthand experience in delivering these outcomes.</p>
<p>&nbsp;</p>
<p>&nbsp;
    </p><div class="post-list-wrapper blog-widget-recent">
        <h3 class="title">JaJuMa Hyv&auml; Case-Studies and Showcases</h3>
        <ul class="post-list clearfix">
                                            <li class="post-holder post-holder-63">
                    <!-- post image -->
                    <div class="post-image">
                        <!-- img container -->
                        <div class="image-container relative block border-b-2 border-[#e5e7eb] flex-none overflow-hidden">
                            <img class="w-full object-fit feature-image" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Rosemarie-Schulz.jpg" alt="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp;amp; Success" loading="lazy">
                                                                                                                                                    <div class="w-full object-fit feature-image" data-original=""></div>
                                                                                        
                        </div>
                    </div>

                    <div class="post-header">
                        <div class="post-title-holder clearfix">
                            <div class="post-title">
                                <a class="post-item-link" href="https://www.jajuma.de/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success">
                                    60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success                                </a>
                            </div>
                        </div>

                        <div class="post-info clear">
                                                            <div class="item post-categories">
                                    <span class="label text-sm font-bold">Categories:</span>
                                                                            <a class="text-sm hover:text-primary transition-colors" title="JaJuMa-Shop" href="https://www.jajuma.de/en/blog/blog-shop">
                                            JaJuMa-Shop                                        </a>
                                                                                                        </div>
                                                    </div>

                        <div class="post-description clearfix">
                            <!-- post description -->
                            <div class="mt-2 line-clamp-3">
                                                                The world of ecommerce can sometimes feel like a roller coaster:
One moment your online store is buzzing with traffic and sales, the next it&rsquo;s down, leaving you in a state of panic.That&rsquo;s exactly what happened to one of our Magento clients:                            </div>
                        </div>
                    </div>

                    <div class="post-content">

                    </div>
                    <div class="post-footer">

                    </div>
                </li>

                                            <li class="post-holder post-holder-61">
                    <!-- post image -->
                    <div class="post-image">
                        <!-- img container -->
                        <div class="image-container relative block border-b-2 border-[#e5e7eb] flex-none overflow-hidden">
                            <img class="w-full object-fit feature-image" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Weihnachtsstollen.jpg" alt="A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp;amp; JaJuMa)" loading="lazy">
                                                                                                                                                    <div class="w-full object-fit feature-image" data-original=""></div>
                                                                                        
                        </div>
                    </div>

                    <div class="post-header">
                        <div class="post-title-holder clearfix">
                            <div class="post-title">
                                <a class="post-item-link" href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma">
                                    A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp; JaJuMa)                                </a>
                            </div>
                        </div>

                        <div class="post-info clear">
                                                            <div class="item post-categories">
                                    <span class="label text-sm font-bold">Categories:</span>
                                                                            <a class="text-sm hover:text-primary transition-colors" title="JaJuMa-Shop" href="https://www.jajuma.de/en/blog/blog-shop">
                                            JaJuMa-Shop                                        </a>
                                                                                                        </div>
                                                    </div>

                        <div class="post-description clearfix">
                            <!-- post description -->
                            <div class="mt-2 line-clamp-3">
                                                                Our delicious ecommerce recipe for a fast Magento launch starts with the finest ingredients: Magento, Hyv&auml;, and JaJuMa.
Magento provides the robust foundation, Hyv&auml; adds the speed and agility, and JaJuMa contributes the secret spices of expertise and optimization.                            </div>
                        </div>
                    </div>

                    <div class="post-content">

                    </div>
                    <div class="post-footer">

                    </div>
                </li>

                    </ul>
    </div>

</section>
<section><br>
<p>These experiences are mirrored across the industry. <br>Documented case studies report<strong> staggering business outcomes after a Hyv&auml; migration</strong>, including:</p>
</section></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200 mt-6 text-sm">
<table class="table-auto w-full text-left min-w-[800px]">
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
      <th class="p-4 font-semibold w-1/4">&nbsp;&#127963;&nbsp;Company / Industry</th>
      <th class="p-4 font-semibold w-1/4">&nbsp;&#128200;&nbsp;Key Result 1</th>
      <th class="p-4 font-semibold w-1/4">&nbsp;&#128176;&nbsp;Key Result 2</th>
      <th class="p-4 font-semibold w-1/4">&nbsp;&#9889;&nbsp;Key Result 3</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800 text-base">Nestlé</td>
<td class="p-4 text-base">+52% Q4 Sales</td>
<td class="p-4 text-base">+50% Web Performance</td>
<td class="p-4 text-base">+60% Sales Growth</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800 text-base">Läderach (Premium Chocolates)</td>
<td class="p-4 text-base">+47.8% Conversions</td>
<td class="p-4 text-base">+39% Revenue</td>
<td class="p-4 text-base">PageSpeed Score: 93 → 99</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800 text-base">Harmony Store (Fashion Retail)</td>
<td class="p-4 text-base">+32% Conversions</td>
<td class="p-4 text-base">+45% Mobile Transactions</td>
<td class="p-4 text-base">-68% Load Times</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800 text-base">Anonymous Retailer (B2C)</td>
<td class="p-4 text-base">+30% Revenue</td>
<td class="p-4 text-base">+47% Organic Conversion</td>
<td class="p-4 text-base">-10% Bounce Rate</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800 text-base">Classic Football Shirts</td>
<td class="p-4 text-base">2.5× Faster Site Speed</td>
<td class="p-4 text-base">+350% First Input Delay (FID) Improvement</td>
<td class="p-4 text-base">+45% Interaction to Next Paint (INP) Improvement</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4 text-base text-slate-700">These are not marginal gains; they are <strong>business-transforming results</strong> 
that prove the immense ROI of investing in a high-performance <strong>Hyvä frontend</strong>. <br>
For a complete breakdown of the business case and how your store can benefit, 
see our <a class="text-primary hover:underline" tabindex="-1" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">
Top 10 Reasons for Hyvä Themes</a> - your blueprint to a faster, more profitable e-commerce future.</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="mt-4 text-left">
                                    <a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes"
                                        title="Top 10 Reasons for Hyvä Themes" target="_blank"
                                        class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
                                        </svg>
                                        Top 10 Hyvä Themes Benefits
                                    </a>
                                </div></div><div data-content-type="text" data-appearance="default" data-element="main"><section id="roadmap">
<p>&nbsp;</p>
<h2>Your Roadmap to a High-Performance Store</h2>
<br>
<p><strong>You understand the problem, you've quantified your losses, and you've seen the proven solution.</strong> <br>The <strong>final step is taking action</strong>. JaJuMa provides a clear, <strong>strategic roadmap to guide you</strong> from your current performance bottlenecks <strong>to a future of profitability and growth</strong>.</p>
<h3 id="step-1-audit">Step 1: The Expert Performance &amp; Hyv&auml; Readiness Audit</h3>
<strong>The journey to a faster store begins with a precise diagnosis.</strong> <br>Our first step is a <strong><a title="Magento Performance Audit &amp; Optimization Services" href="/en/jajuma-develop/magento-performance-optimization" target="_blank" rel="noopener">comprehensive performance audit</a></strong> that goes <strong>beyond generic PageSpeed scores </strong>where our&nbsp;<strong><a title="The Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">expert Hyv&auml;nauts</a></strong> conduct a <strong>deep-dive analysis</strong> of your store's code, third-party extensions, server configuration, and Core Web Vitals. This allows us to <strong>pinpoint the exact sources of performance drain</strong> and create a <strong>personalized, data-driven roadmap for optimization </strong>that ensures that every euro invested in <strong>optimization yields the maximum possible return.</strong></section>
<section><br>
<p><strong>Don't guess where you're losing money. Let our experts conduct a deep-dive <a title="Magento Performance Optimization Audit" href="/en/jajuma-develop/magento-performance-optimization" target="_blank" rel="noopener">Magento performance audit</a>.</strong></p>
<div class="flex flex-col xl:flex-row justify-center items-center gap-4 mt-6"><a class="btn btn-primary flex xl:inline-flex w-full lg:w-fit items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150" title="Get Your Free Magento Performance Analysis" href="/en/jajuma-develop/magento-performance-optimization"> Get Your Free Performance Analysis </a> <a class="btn btn-secondary flex xl:inline-flex items-center justify-center w-full lg:w-fit px-6 py-3 text-base font-medium rounded-md border border-primary-light text-secondary hover:bg-primary-lighter focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150" title="Magento &amp; Hyv&auml; Performance Optimization Extensions" href="/en/jajuma-develop/performance-optimization-extensions"> Check Our Performance Optimization Extensions </a></div>
<h3 id="step-2-solution">Step 2: Choose Your Mission - Strategic Solutions</h3>
<p>With a clear <strong>diagnosis from the audit</strong>, the next step is <strong>to implement the right strategic solution</strong>. JaJuMa offers a <strong>spectrum of services tailored to your specific needs, budget, and business goals.</strong></p>
<p>Based on the audit, we'll recommend a strategic solution tailored to your specific business goals and budget:</p>
<ul>
<li><strong>For Immediate Lift:</strong> <br>If you're looking for quick wins, our <strong><a title="Performance Optimization Extensions for Magento and Hyv&auml;" href="/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">performance optimization extensions</a></strong> can tune your existing Luma or Hyv&auml; store. <br>We leverage <strong>powerful tools and techniques</strong> to address the most critical issues and <strong>deliver measurable improvements.</strong></li>
<li><strong>For a Full Transformation:</strong> <br>For merchants ready to eliminate technical debt and unlock maximum ROI, our <strong><a title="Hyv&auml; Migration and Store Development Services" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Migration and Store Development Services</a></strong> are the definitive solution. We <strong>expertly manage the entire process</strong> of moving from Luma<strong> to a high-performance Hyv&auml; frontend.</strong></li>
<li><strong>For New Stores:</strong> <br>Launching a new venture? Our <strong><a title="JaJuMa Takeoff - Magento &amp; Hyv&auml; Quick Launch Accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener">JaJuMa Takeoff</a></strong> program ensures you <strong>start on a future-proof, high-performance Hyv&auml; foundation</strong> from day one, avoiding the Luma legacy altogether.</li>
</ul>
<br>
<p>&nbsp;</p>
</section></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div
                                class="flex-1 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 items-center justify-evenly justify-items-center gap-4 p-4 lg:p-6 mt-6 rounded-2xl shadow-md bg-[#deecfd]">
                                <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"
                                    title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                                    <svg width="744" height="216" viewBox="0 0 744 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z"
                                            fill="#000938"></path>
                                        <path
                                            d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z"
                                            fill="#0CF292"></path>
                                        <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z"
                                            fill="#0CF292"></path>
                                        <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z"
                                            fill="#0CF292"></path>
                                        <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                                        <path
                                            d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z"
                                            fill="#0CF292"></path>
                                    </svg>
                                </a>
                                <a href="/en/jajuma-develop/hyva-extensions"
                                    title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                                    <svg width="744" height="216" viewBox="0 0 744 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <title>JaJuMa Hyva Technology Partner official badge</title>
                                        <rect width="744" height="216" rx="24" fill="#F6F7FF" />
                                        <rect width="193.5" height="216" fill="#0A23B9" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                                            fill="#14FFAF" />
                                        <path
                                            d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z"
                                            fill="#0A144B" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                                            fill="#0A144B" />
                                    </svg>
                                </a>
                                <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"
                                    title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                                    <svg width="732" height="216" viewBox="0 0 732 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <title>JaJuMa Hyva Contributor official badge</title>
                                        <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                                        <rect width="193.5" height="216" fill="#0A23B9"></rect>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                                            fill="#14FFAF"></path>
                                        <path
                                            d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z"
                                            fill="#0A144B">
                                        </path>
                                        <path
                                            d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z"
                                            fill="#0A144B">
                                        </path>
                                        <path
                                            d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z"
                                            fill="#0A144B"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                                            fill="#0A144B"></path>
                                    </svg>
                                </a>
                                <a href="https://commercemarketplace.adobe.com/partner/JaJuMa"
                                    title="Magento Extensions by JaJuMa on Magento Marketplace" target="_blank"
                                    rel="nofollow noopener">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="185" height="28"
                                        viewBox="0 0 168.231 25.325" class="w-auto h-auto">
                                        <title>JaJuMa Magento Marketplace Approved & Verified extension provider badge
                                        </title>
                                        <path d="M18.988 8.872v10.967l-2.715 1.563V10.448L9.485 6.525l-6.792 3.923.017 10.959L0 19.839V8.881l9.503-5.486zm-8.141
        12.53l-1.353.788-1.362-.779V10.448l-2.711 1.567.004 10.959 4.064 2.351 4.073-2.351V12.011l-2.715-1.567z"
                                            fill="#ee6524"></path>
                                        <text xml:space="preserve"
                                            transform="matrix(.264583 0 0 .264583 -16.773798 -10.986446)" font-size="53"
                                            font-family="sans-serif" fill="currentColor">
                                            <tspan x="146" y="115">Magento <tspan font-weight="600">Marketplace</tspan>
                                            </tspan>
                                        </text>
                                        <text xml:space="preserve" x="50" y="14" font-size="8" font-family="sans-serif"
                                            fill="currentColor">
                                            <tspan x="35" y="6">Approved by</tspan>
                                        </text>
                                    </svg>
                                </a>
                                <div class="flex items-center gap-2">
                                    <a href="/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes"
                                        title="JaJuMa-Shop | Mage-OS Demo-Shop">
                                        <img src="/media/wysiwyg/badges/mage-os-contributor-badge.svg" width="80"
                                            height="60" alt="Mage-OS Contributor Badge" loading="lazy">
                                    </a>
                                    <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"
                                        title="Magento Development Services - Magento Association Bronze Member Agency"
                                        target="_blank">
                                        <img src="/media/wysiwyg/badges/mams-brz-badge-full.svg" width="50" height="30"
                                            alt="Magento Association Bronze Member Badge" loading="lazy">
                                    </a>
                                </div>
                                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"
                                    title="Hyvä Certified Developers" target="_blank">
                                    <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="70"
                                        height="70" alt="Certified Hyvä Developers" loading="lazy" />
                                </a>

                            </div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3 id="step-3-partnership">Step 3: Launch with the Gold Standard Hyv&auml; Agency - Your JaJuMa Hyv&auml;nauts</h3>
<p><strong>Choosing the right partner is as critical as choosing the right technology.</strong> <br>As an official<strong><a tabindex="-1" title="Ourr Journey to Hyv&auml; Gold Partner, Technology Partner and Core Contributor" href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener">Hyv&auml; Gold Partner, Technology Partner &amp; Core Contributor</a></strong>, JaJuMa represents the pinnacle of expertise and commitment within the Hyv&auml; ecosystem. Our team of dedicated Hyv&auml;nauts combines years of <strong>deep Magento experience</strong> with a <strong>passion for performance</strong>, ensuring your project is not just completed, but masterfully executed to <strong>deliver maximum business value.</strong></p>
<p>&nbsp;</p>
<p><strong>Partner with the proven experts. <a tabindex="-1" href="https://www.jajuma.de/en/contact">Contact us today for a free consultation</a> and let's build a faster, more profitable Magento store together.</strong></p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="OCFSB4I"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="MM9ATLB"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="FN12C63"><div data-content-type="html" data-appearance="default" data-element="main" data-pb-style="JPM47CT" data-decoded="true"><p class="text-center"><strong>Ready for a complete transformation?</strong></p>
                     <div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Store Development Services"
                                    target="_blank"
                                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 400 400" class="w-6 h-6" width="25" height="25" role="img">
                                                <rect fill="#fff"></rect>
                                                <path d="M222.131 112.458L237.41 66.8783H290.403L275.043 112.458H222.131Z"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M158.026 174.716C172.966 162.84 191.165 155.37 211.659 155.37C253.609 155.37 294.409 182.196 294.409 250.953V336H240.776V250.953C240.776 215.516 223.929 202.107 200.933 202.107C181.969 202.107 168.181 213.026 160.516 224.517V336H106.692V115.336H74L91.2077 64H158.026V174.716ZM272.988 109.567L286.407 69.7565H239.485L226.132 109.567H272.988ZM235.338 64H294.409L277.112 115.336H218.13L235.338 64Z"></path>
                                                <title>Hyvä Logo</title>
                                            </svg>
                                    Explore our Hyvä Store Development Services
                                </a>
                      </div>
</div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="ENQICUB"><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><p class="text-center"><strong>Need a rapid launch with the power of Hyvä?</strong></p>
                     <div class="w-full mt-4 text-left flex-1 flex flex-col items-center justify-end">
                                <a href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff - Magento & Hyvä Rapid Launch Accelerator"
                                    target="_blank"
                                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit gap-2 items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                    <g fill="currentColor">
                                                        <path d="m240 91.64l-147.41 88a32 32 0 0 1-38-4.32L18.53 140a8 8 0 0 1 2.32-13.19l3.15-1.54L55.79 136L88 116.51L58.65 88a8 8 0 0 1 2.2-13.3L68 72l57.53 21.17l54.84-32.75a32 32 0 0 1 41 7.32Z" opacity="0.2"></path>
                                                        <path d="M176 216a8 8 0 0 1-8 8H24a8 8 0 0 1 0-16h144a8 8 0 0 1 8 8m71.86-122.85a8 8 0 0 1-3.76 5.39l-147.41 88a40.2 40.2 0 0 1-20.26 5.52a39.78 39.78 0 0 1-27.28-10.87l-.12-.12L13 145.8a16 16 0 0 1 4.49-26.21l3-1.47a8 8 0 0 1 6.08-.4l28.26 9.54L75 115.06L53.17 93.87A16 16 0 0 1 57.7 67.4l.32-.13l7.15-2.71a8 8 0 0 1 5.59 0l53.94 19.82l51.57-30.78a39.82 39.82 0 0 1 51.28 9.12l.12.15l18.64 23.89a8 8 0 0 1 1.55 6.39m-19.74-3.7l-13-16.67a23.88 23.88 0 0 0-30.68-5.42l-54.8 32.72a8.06 8.06 0 0 1-6.87.64L68 80.58l-4 1.53l.21.2l29.36 28.49a8 8 0 0 1-1.43 12.58l-32.21 19.49a8 8 0 0 1-6.7.73l-28.67-9.67l-.19.1l-.37.17a.7.7 0 0 1 .13.12l36 35.26a23.85 23.85 0 0 0 28.42 3.18Z"></path>
                                                    </g>
                                    </svg>
                                    Discover our JaJuMa Takeoff Service
                                </a>
                      </div></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><section id="faq">
<p>&nbsp;</p>
<h2 id="BJ0DY96">Frequently Asked Questions (FAQ)</h2>
<p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-263 .chevron::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkzIDcuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCAxMC41ODZsMy4yOTMtMy4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNGwtNCA0YTEgMSAwIDAxLTEuNDE0IDBsLTQtNGExIDEgMCAwMTAtMS40MTR6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PC9zdmc+Cg==);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-263 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 chevron">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>How much revenue is my slow website *really* costing me?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>The exact amount varies by business, but the impact is always significant. Industry studies consistently show that a 1-second delay in page load time can reduce conversions by anywhere from 7% to 20%. The most accurate way to understand the cost to your specific business is to use our Page Speed ROI Calculator above. It provides a personalized estimate based on your actual revenue, conversion rate, and average order value.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>Are Core Web Vitals still a major Google ranking factor in 2025?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>Absolutely. In 2025, Core Web Vitals (LCP, INP, and CLS) are more important than ever. Google has officially confirmed them as a direct ranking signal within its Page Experience algorithm. Achieving "Good" scores across all three vitals is crucial for SEO success, especially since Google uses mobile-first indexing, meaning your mobile site's performance is what primarily determines your rank. You can learn more in our comprehensive <a title="Ultimate Guide to LCP Optimization for Magento &amp; Hyv&auml;" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener">guide to LCP optimization</a></p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>Is migrating from Luma to Hyv&auml; a difficult or risky process?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>When managed by an experienced agency, a migration to Hyv&auml; is a strategic and low-risk process. It is not a full replatforming; your backend Magento logic, product data, orders, and most configurations remain intact. The process involves rebuilding the frontend (the theme) using Hyv&auml;'s modern technology. As a <strong><a title="JaJuMa Is Hyv&auml; Gold Partner, Technology Partner and Core Contributor" href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener">Hyv&auml; Gold Partner, Technology Partner and Core Contributor</a></strong>, JaJuMa has a proven, streamlined process to ensure a smooth and efficient transition with predictable outcomes. You can explore our <strong><a title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; services</a></strong> to see how we manage the process from start to finish.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>Can you guarantee a specific ROI if I switch to Hyv&auml;?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>While it is impossible to guarantee a specific ROI figure due to the many variables in e-commerce, the evidence supporting a significant positive return is overwhelming. Case studies from across the industry consistently show dramatic lifts in conversion rates, average order value, and overall revenue after a Hyv&auml; migration. Our Page Speed ROI Calculator provides a data-backed projection based on established research. Our commitment is to maximize your return by building the highest-performing store possible, leveraging our expertise to put your business in the best position for growth.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>What's the very first step I should take to improve my Magento store's speed?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>The best first step is to gain a clear and accurate understanding of your current performance landscape. A generic online tool can give you a score, but an expert audit will tell you *why* the score is what it is. <a title="Lets Get In Touch!" href="https://www.jajuma.de/en/contact" target="_blank" rel="noopener"><strong>Contact us</strong> for a free initial consultation</a>. We can discuss your specific challenges, review your store, and recommend the most effective path forward, which typically begins with a professional performance audit to create a data-driven action plan.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>What kind of ROI can I realistically expect from a performance project?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>The ROI can be substantial. The calculator provides a data-backed projection, and it is not uncommon for performance optimization projects, especially a migration to a modern frontend like Hyv&auml; Themes, to yield returns of several hundred percent in the first year.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-7">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="6">
                                <span>What is the difference between Lab Data and Real User Monitoring (RUM)?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-7">
                                <div class="accordion-item-body-content p-4">
                                    <p>The data fetched by this tool is &lt;strong&gt;Field Data&lt;/strong&gt; from the Chrome User Experience Report (CrUX), providing a consistent snapshot of performance KPIs for your domain as well as your competitor domains, as reported by real users during last 28 days.</p>
<p>&nbsp;</p>
<p>Additionally, the tool fetches &lt;strong&gt;Lab Data&lt;/strong&gt; from Google Page Speed, providing first actionable steps to improve your performance KPIs.</p>
<p>&nbsp;</p>
<p>This calculator is an excellent starting point for a strategic forecast, but for continuous, deep-dive analysis, a dedicated RUM solution is the professional standard.</p>
<p>&nbsp;&lt;strong&gt;Real User Monitoring (RUM)&lt;/strong&gt; collects data from your actual users similar to Google for its Chrome User Experience Report (CrUX), but provides insights in (near-) real time an allows more detailed analysis and breakdowns for truly targeted investments in performance optimization.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-8">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="7">
                                <span>Beyond LCP, what other technical factors should I focus on?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-8">
                                <div class="accordion-item-body-content p-4">
                                    <p>A holistic performance strategy also addresses Interaction to Next Paint (INP) for responsiveness, Cumulative Layout Shift (CLS) for visual stability, and Time to First Byte (TTFB) for server response time. A comprehensive performance audit is the best way to identify all optimization opportunities.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-9">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="8">
                                <span>What is the actual cost of a Hyv&auml; migration?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-9">
                                <div class="accordion-item-body-content p-4">
                                    <p>The Hyv&auml; theme itself requires a one-time license fee of &euro;1,000, which includes ongoing updates and access to their support community. The primary cost, however, is in the development and migration services. While this represents an upfront investment, the ROI is significant. Hyv&auml;'s modern architecture can reduce development time by 30-50%, leading to lower long-term maintenance and feature development costs compared to the constant struggle of optimizing a Luma-based site.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-10">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="9">
                                <span>Will my existing Magento extensions work with Hyv&auml;?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-10">
                                <div class="accordion-item-body-content p-4">
                                    <p>This is a common concern. Because Hyv&auml; removes Luma's outdated JavaScript libraries, extensions that rely heavily on them for their frontend functionality will not work out-of-the-box. However, the Hyv&auml; ecosystem is mature and growing rapidly. For many popular extensions, a compatible version already exists. For others, our expert developers can create a compatibility module to ensure seamless integration. Part of our audit process involves a thorough review of your current extensions to map out the most efficient path to full compatibility.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-11">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="10">
                                <span>Can't I just optimize my existing Luma theme?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-11">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes, you can, and we offer services to do just that. Optimizing a Luma theme can provide noticeable improvements by addressing "low-hanging fruit" like image compression, caching, and minification. However, it's important to view this as treating the symptoms, not curing the disease. No amount of optimization can fix the fundamental architectural bloat of Luma. A Hyv&auml; migration is the only way to truly eliminate the core performance bottleneck and achieve elite-level speed and efficiency. For more on Luma-specific tuning, see our <a title="Largest Contentful Paint and CWV Optimizaion Guide for Hyv&auml; and Luma" href="https://www.jajuma.de/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener">Luma Optimization Guide</a>.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-12">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="11">
                                <span>What are Core Web Vitals and why do they matter for sales?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-12">
                                <div class="accordion-item-body-content p-4">
                                    <p>Core Web Vitals (CWV) are a set of specific metrics Google uses to measure a user's real-world experience on a page. The three main vitals are Largest Contentful Paint (LCP - loading speed), Interaction to Next Paint (INP - interactivity), and Cumulative Layout Shift (CLS - visual stability). They matter for sales for two reasons:</p>
<ol>
<li>They are a direct ranking factor in Google's search algorithm, meaning better scores can lead to higher visibility and more organic traffic.</li>
<li>They are an excellent proxy for user experience. A site with good CWV scores is fast, responsive, and stable, which builds trust and reduces frustration, leading to higher conversion rates and lower cart abandonment.</li>
</ol>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-13">
                            <div class="accordion-item-header-263 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="12">
                                <span>Is Hyv&auml; a good choice for B2B eCommerce stores?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-13">
                                <div class="accordion-item-body-content p-4">
                                    <p>Absolutely. While some of the earliest B2B-specific modules for Magento had compatibility challenges, the Hyv&auml; ecosystem has matured significantly. The core benefits of Hyv&auml; - unmatched performance, superior user experience, and lower development overhead - are just as critical, if not more so, for B2B merchants who often deal with complex catalogs and sophisticated buyer journeys. JaJuMa has expertise in implementing Hyv&auml; for B2B use cases and can navigate any compatibility requirements to deliver a high-performance B2B platform.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    
<p>&nbsp;</p>
</section></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div></div></div>]]></description>
              <pubDate>Thu, 10 Jul 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa-Shop]]></category>
           </item>
       <item>
      <title>Hyvä Checkout: Boost Conversions with Hyvä Checkout</title>
      <link>https://www.jajuma.de/en/blog/hyva-checkout-guide</link>
      <guid>https://www.jajuma.de/en/blog/hyva-checkout-guide</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=ASXLVC2],#html-body [data-pb-style=GNCBYE6],#html-body [data-pb-style=HC00XRG],#html-body [data-pb-style=I62WL6I],#html-body [data-pb-style=IEYGRAQ],#html-body [data-pb-style=JB5EOXC],#html-body [data-pb-style=MM85U1W],#html-body [data-pb-style=N7OWSMB],#html-body [data-pb-style=U0TQFC7],#html-body [data-pb-style=WEODGRJ],#html-body [data-pb-style=XIDRTLR],#html-body [data-pb-style=Y2N1TQN]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=IA1C8LK],#html-body [data-pb-style=RUIITTI],#html-body [data-pb-style=SUFD501],#html-body [data-pb-style=UYDS1LR]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=A5SARU2],#html-body [data-pb-style=DPQG6B1],#html-body [data-pb-style=SB4PQAY],#html-body [data-pb-style=YOLKA21]{display:flex;width:100%}#html-body [data-pb-style=B95IRGQ],#html-body [data-pb-style=GVFTRRX],#html-body [data-pb-style=HPCCG1B],#html-body [data-pb-style=I49PHX6],#html-body [data-pb-style=IC03EVL],#html-body [data-pb-style=ME2GME0],#html-body [data-pb-style=RAX4ERT],#html-body [data-pb-style=X1TRFCY]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=B95IRGQ],#html-body [data-pb-style=GVFTRRX],#html-body [data-pb-style=IC03EVL],#html-body [data-pb-style=ME2GME0],#html-body [data-pb-style=X1TRFCY]{align-self:center}#html-body [data-pb-style=RU6KY8N]{border-style:none}#html-body [data-pb-style=K0IP5KG],#html-body [data-pb-style=N6HOGRW]{max-width:100%;height:auto}#html-body [data-pb-style=C96IWR5]{border-style:none}#html-body [data-pb-style=J0H3NUN],#html-body [data-pb-style=XAGA739]{max-width:100%;height:auto}#html-body [data-pb-style=XHM5VSP]{border-style:none}#html-body [data-pb-style=OFCRLAN],#html-body [data-pb-style=YYJBYJG]{max-width:100%;height:auto}#html-body [data-pb-style=D5HCULP]{border-style:none}#html-body [data-pb-style=BWU4PJO],#html-body [data-pb-style=TJUDE8C]{max-width:100%;height:auto}@media only screen and (max-width: 768px) { #html-body [data-pb-style=C96IWR5],#html-body [data-pb-style=D5HCULP],#html-body [data-pb-style=RU6KY8N],#html-body [data-pb-style=XHM5VSP]{border-style:none} }</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="HC00XRG"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="UYDS1LR"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="SB4PQAY"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="RAX4ERT"><div data-content-type="text" data-appearance="default" data-element="main"><p><a title="Learn More about Hyv&auml; in the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>Hyv&auml; Checkout</strong></a> is a high-performance, standalone replacement for <strong><a title="Magento Metropolis: Your Ultimate Guide to the World's Most Powerful Commerce Platform" href="/en/magento-metropolis-guide" target="_blank" rel="noopener">Magento's default checkout</a></strong>. It's engineered to be <strong>incredibly fast (up to 13x faster on mobile)</strong>, which directly reduces cart abandonment and increases sales.</p>
<p>For developers, it's a dream to work with, using modern tools like&nbsp;<strong>Alpine.js</strong> and <strong>Tailwind CSS</strong> to cut development time by <strong>30-50%</strong>.</p>
<p>For merchants, it means a&nbsp;<strong>higher conversion rate</strong>, better SEO through <strong>superior Core Web Vitals</strong>, and a <strong><a title="Magento Page Speed ROI Calculator: Quantify Your Lost Revenue &amp; Unlock Growth with Hyv&auml;" href="/en/blog/magento-page-speed-roi-calculator" target="_blank" rel="noopener">tangible return on investment</a></strong>.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="HPCCG1B"><figure class="md:ml-4 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="RU6KY8N"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hvya-checkout-definitive-guide-boost-your-conversions-with-magento.png" alt="Architectural overview of Hyv&auml; Checkout, showcasing its key components boosting Magento 2 conversions" title="" data-element="desktop_image" data-pb-style="N6HOGRW"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hvya-checkout-definitive-guide-boost-your-conversions-with-magento.png" alt="Architectural overview of Hyv&auml; Checkout, showcasing its key components boosting Magento 2 conversions" title="" data-element="mobile_image" data-pb-style="K0IP5KG"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>While it requires a license and the&nbsp;<strong>Hyv&auml; Theme</strong>, its benefits in performance, user experience, and development efficiency make it a <strong>strategic upgrade</strong> for any serious <strong><a tabindex="-1" title="JaJuMa-Shop | Your Online Shop with Magento 2" href="/en/jajuma-shop/online-shop-with-magento-2" target="_blank" rel="noopener">Magento store</a></strong>. Also <a tabindex="-1" title="Learn More about Hyv&auml; in the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>Check our central Hyv&auml;verse knowledge base</strong>&nbsp;</a>for more info on how to get the most out of the Hyv&auml; product suite.<br>As a <strong>certified Hyv&auml; Gold Partner</strong>, JaJuMa provides the expert implementation needed to unlock these benefits seamlessly.<br><br></p></div><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb82-absolute {
position: absolute
}
.cmsb82-relative {
position: relative
}
.cmsb82-bottom-0 {
bottom: 0px
}
.cmsb82-left-0 {
left: 0px
}
.cmsb82-z-\[1\] {
z-index: 1
}
.cmsb82-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb82-my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.cmsb82-ml-4 {
margin-left: 1rem
}
.cmsb82-flex {
display: flex
}
.cmsb82-inline-flex {
display: inline-flex
}
.cmsb82-grid {
display: grid
}
.cmsb82-hidden {
display: none
}
.cmsb82-h-10 {
height: 2.5rem
}
.cmsb82-h-auto {
height: auto
}
.cmsb82-w-10 {
width: 2.5rem
}
.cmsb82-w-8 {
width: 2rem
}
.cmsb82-flex-shrink-0 {
flex-shrink: 0
}
.cmsb82-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb82-flex-row {
flex-direction: row
}
.cmsb82-items-center {
align-items: center
}
.cmsb82-justify-center {
justify-content: center
}
.cmsb82-gap-2 {
gap: 0.5rem
}
.cmsb82-gap-8 {
gap: 2rem
}
.cmsb82-overflow-hidden {
overflow: hidden
}
.cmsb82-rounded-lg {
border-radius: 0.5rem
}
.cmsb82-\!bg-\[\#EE682F\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(238 104 47 / var(--tw-bg-opacity)) !important
}
.cmsb82-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb82-py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.cmsb82-pt-4 {
padding-top: 1rem
}
.cmsb82-text-center {
text-align: center
}
.cmsb82-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb82-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb82-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb82-font-bold {
font-weight: 700
}
.cmsb82-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb82-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb82-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb82-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb82-duration-300 {
transition-duration: 300ms
}
.cmsb82-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb82-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb82-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb82-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb82-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb82-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
@media (min-width: 640px) {
.cmsb82-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
}
@media (min-width: 1024px) {
.cmsb82-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb82-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.cmsb82-lg\:gap-4 {
gap: 1rem
}
.cmsb82-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb82-lg\:text-\[20px\] {
font-size: 20px
}
.cmsb82-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div data-cacheable="false">
    <hr>
    <p class="hyvaverse-main-cta-subtext cmsb82-text-center cmsb82-my-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
        Find all you need to know and more valuable insights about Hyv&auml; and Magento.<br>
        Expertly curated by JaJuMa:
        <br>
    </p>
    <div class="hyvaverse-main-cta-container cmsb82-text-center cmsb82-grid cmsb82-grid-cols-1 cmsb82-lg:grid-cols-2 cmsb82-gap-8">
        <div>

            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">        
                <span>&#128640;</span>
                <span>Launch the JaJuMa Hyv&auml;verse</span>
                <svg class="cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10 cmsb82-ml-4 cmsb82-lg:ml-6" height="210.000000pt" preserveaspectratio="xMidYMid meet" version="1.0" viewbox="0 0 245.000000 210.000000" width="245.000000pt" xmlns="http://www.w3.org/2000/svg">

                    <g fill="#402b05" stroke="none" transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)">
                        <path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
                        <path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
                        <path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
                        <path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
                        <path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
                        <path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
                        <path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
                    </g>
                </svg>
                </div>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Hyv&auml;.
            </p></div>
        <div>

            <a class="btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-white cmsb82-!bg-[#EE682F] cmsb82-overflow-hidden" href="/en/magento-metropolis-guide" title="Explore the Magento Metropolis!">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">
                    <svg class="cmsb82-drop-shadow-lg cmsb82-w-8 cmsb82-h-auto" fill="none" height="24" viewbox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect fill="url(#pattern0_413_38)" height="24" width="22"></rect>
                        <defs>
                            <pattern height="1" id="pattern0_413_38" patterncontentunits="objectBoundingBox" width="1">
                                <use transform="matrix(0.00329268 0 0 0.003 -0.317073 -0.311111)" xlink:href="#image0_413_38"></use>
                            </pattern>
                            <image height="500" id="image0_413_38" preserveaspectratio="none" width="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRFAAAA/////////v7+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v////////////7+///////////////////+///////////////////////+///////////////////////////+/////////////////////////////////v///////////v///v///////////////////////////////v///////////v///////////////v///v///v7+/v//ZZGWUAAAAFp0Uk5TAAUS/wwBBg8YAgMHGiMKCRMiHw0EERUIIRkdHBcQCxYOFB4gGyG6tv+yjO3//7E1h9uw/OSbTSnA8qA5i/GvuDFfyf/i9qmg9S9rZEpq6eJR5jjGKG0bIiAVGb/2kAAAFSlJREFUeJztnduPHEcVh3t2PbFnfVs7vq0vWSdxkFAkeCPhASFeyANISNz+zAghEA9IwAOKhABFQgSJWzAkcRKHODcnjoO9y86tZ7qnu+t2qs6pOr/vwXGSmZ6e/qarq06dOjWqgDpG3CcA0gPpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hWiVPpoNKr/9j/WM+FAm/QnOiWPD7cepD8XNnRJ3x76n8c/S3Ua3OiRfnJkvJl3Rh+nOBN2tEgfbdm97tRHcc9DBDqkHzu0f+3pD+OdhxA0SJ984fb6A4efSJaUL318yv1BXXgjX7z0k5/7vOvsPerzkETh0m37b5tM7lOehyzKlu7SgdvgMdlpSKNk6U+G9sNLfbSXK33nIcFBnigyOlus9NM0QdUiH+2FSj/+iOxQI7pDSaFI6Rc+ID1ccT26AqW7BuAsKEx7edIvxoir7L4f4aBslCb9bKyO14lPIx2YgcKkE/XZOymnjS9J+vhc3Eb4ybtRD5+OkqQPJkORUEisphjpEfrsXZz7b5KPiUsp0qN14NpceDfRB0WkDOnJlE/ZTtOmRKQE6eMn30v7gbk/2guQvpe+U515Yk320s/wBE2yDtFlLt0/HSqYjPvxWUufHHIuPrz8Qa6P9pylM7XsK3Kdas9Xul9uMzEns1z8lq30a+9wn8GMvTe5z8CDTKXvfsJ9BjXjx9lVNchTevypFReym3PNUbos5VMyG77lJ/2yxAucV4cuN+mM0ZhhLr3NfQb2ZCb9xh2iAx1brn8Z71LF0fN5tGcl/TrN3bSZ40j0W8pFe0bSiZYwHOtc43aO5KF87T8UR4lOPtJp+uz9/ewtkkuRhfZcpAetNK8Z7G2RLHOtzmxLHF00yUP6+IDkMKZnLpF22pV0EchBOlGiq03ewz5JKF367FsG0mketoeWjcUJkki67ORJ8dKDa4jMsS/8SjNI2Dku+NEuXDpRy+5249F8qG3TwoBs6TRtrXOEdLxF8lC+cZviKBGQLJ0ozu4VJ6OJCggN0cmVThSA8531JPrFiVwXIVY6TQpcSAt78w2KM7hKchRahEqnmTQPrQdGM8Ejb9QuUjpRAC48s4HoESOtjZconaaGCE27SvNo3/lcVPKkPOk0Uys7j6juLppho6g2Xpp0omgM6c5LV0nqEAiKzAqT/jTJdPR54vXqT5CMty+/J6WNFyWd5gEaY/E4jXYpITpB0id7/6Y4TJxtd8aXSYZvMvYEkiOdZpwWsQ4QSWR2LGHZpRjpJJf0+t2YI2KaIKGA3T2FSKe5zaMHQS5RFB3hXwMlQ/pTbxEcJEXJ3slxguWy3UnYCREhnWJq4wrF78YCilkB6iGlKxKknw/fFOnSh+nC2wQB+af+RXAe/giQThDnTBzkvBJ8p/K28PzSn70degSGnlFwqjRrUJZdenghEZacpOCuJ6d1bunBztnS0EKLEDPmzzFLD413cBZ3Co0tbLHNv/BKD5xIZa/nFRRGTDXI3IRXeljsVcD+t0GPdrbZF1bpQVuoCckpDxm1c30FTukht8l4i3/eYs7OVe9IC9fuvZzSAxp3Ibf5Au8vwvQ1GKX773wsrmqbdz1qHut80r1HPKdpFi/T4jnpyjO5zifdM7v97ANhKwcW+G04cPOf5CdiAZ90vwchfwZCL14Va1jadzbpXvFXcQ/zJh7aWUoXsEn3udFl9dm7cC89yfGduKR7VA8SqHzy8Oq9VtfENQuIYxtPLunON3qdJzF+tP/ZtKvMH4QdnZufwqUHDw5XkwiO8wnXSZL93chEem14PYrH/IRvZn+spWW6aWdowJiku12Xi+8vhkPtRyZfJsJmLaL12oQuDy890p1u9FUEY/NtTA/6rshS41SesW61GVJj5UtfLy7Q8TaOmi6dQ7NWoNB+yWP63y2PdIf5yMaqlc77J/lF6x6XbWTk2mZ8apFuPZxt5cb0XMekiUd980Sbld4tn+xapN+ynIJud9T6npQJFw/0Ppg6ns126+3TR5Z5pFs+0jcWJPZ3jxLtZz504heq+4etSI1Vxmz68Ixk6dN2z34uLkEr6VKRen46pyymBNPXIBIsfRrucCn7UY/mI+GW9HFxvgGwxTdNX5RErvTZc9qtvljMhtI55+Ox7dvST7TJlT67aK7LSKJpd1+zuGijzPWy9l93P50wxEqfB9bdV8BEqUbhs73EQrrFHHvyMZtY6fMr4bHsiX7hiF8dgqVK82gd0pevmI/Qveq30c6+TSZ+c7j1mRu/LKQvWATZPIv2EV5G772iIL2F8Tosw6/elRqJHu0BFWYgvYX1dfBfykyy6WnIAstapTElHtLnhEsnGL6FFUyoVRq/A6TPoZAeeDVDaw6sPtz0bSF9zvI6BFZtC4h7BJcthfQWpstQl80NLezi28Z7r0hcAektTJehnh8Plu41aif4VEjfwHQZ6nwzgjvOfddN/zXU60B6C9NlqCeeSCoFu0Vmg2qirAHpLRJLd6jpQ7QTW7Wu0pQODekzyKXbXlmafXVbH7h31/aViRAuneKZvmCvvdRwE5rdVResVJqm1CF9RgzpxiWPRFvCLVmpNCV8Q/qMONIHcxAnx4jLv6xUmhoQSJ8RS3r/BabrPGx+kunYOqQbw9oROnJLOiOzNHvtNVkd0vTL1SHd+PSMKL1r+EYTjWmxUmmaQID0GfUSoRjS25nm7nVirFipNE0VQvqMWjrNvtqbrF1nwqF5z0dA+hRjWnC96Nwn99iOycFncZ7lSyC9iQTp0VmpNP20dEg3BrjrHawgPQbCpZMGRtMC6a0PNS3Wr6VHGUylAdJbHwrp3a9MhHDpkcbQKVipND3NIH0GpEeFRbpxeFyHzKhylxhYfUfTCBXSZ0B6VFikG9et1NK914zys1JpijrrkG5ct1JLD99zmQ1Ib2KcO6urwpkrtogF0psYg6u1dM+drySwUmnKGUm+vTKLdONsZlnSTd83Sm2kIWRKrxMY97k3y/bHXnryHflkSq/LSKiQnrwiMKTHwl76CeqUXxPCpV93XXEqB3vpyfedkim9XlOuQnryXacgPRb20kkKYbkgU3rd4KmQnmiDghWQHgt76ck3nBIu/UTqYBUd9tIT7kAzR6b0uiaUCunJg+/CpZuKOAgG0ptAeu9LkyBTeh2jgvQYCJdus8WVUCC9CaT3vjQJwqXb7s8pEEhvAum9L02CTOn1xrqQHgNIjwWkN4H03pcmQab0ugDUtXcin0o8IL2JvfSryfcWJwPSm0B670uTAOmxgPQmRul1UjCkxwDSYwHpTSC996VJkCm9XugD6TGA9FhAehN76RkHZ9YWIEN6peROh/QmRun1im1IjwGkxwLSm0B6E0ifUl8wSI8BpMdirZIMpFeQ3gbSp0B6VGRKr68CpMcA0mMB6U3spZv2mxcMpDeB9CaQPgXSowLpsVgr/gnplYv086nr6tEB6U2ylX7uU9PWwCsgvUkc6Y+Nu4QEMi3yZ9w8sgbSm0SRvvemxd5fAey/PvuH9c7bkN4kSkduXncx2o68yyXzkO5JFOnLCqtRgnir+n7W0tequEN6FUl6vRtEhDbeQaDPeyB9in/zPv8r7cZe2+tddkj3JLb0arJHF9Q53G6UKoV0T6JIrzfwm2Hc78+W9gYrkO5JAukWO/7ZsLnTBqR7EmWcfqy9ja1pX1sLOnZMg3RP0kgP1t65SZ619LqwAqTPiCK9c3+EgFm6y3c6/zOke5JOuvfGnT3K40hPvdmqcOnP3rY+aN9OKMcOu//7IP27ZllLXxvdQ3qVWHpVnXHd4XBodzxI9ySx9OoJt4fmhaHoPaR7klq6eQvzNQzb3UK6J+mlVztX7PrxFz8ybCsA6X6Ybzsf6effC/3Uymb/ekj3g0f60bU1fdlDi98Fhmx+cEk3XP2LVkWNIN0PB+kOwRkb6dXZ+73/a9su0TVG7B3Sp9TSHYr8W0nvbeNP2I7lY+TIQfqUWvrxR0Mva2ApvbMfv/ux9WW3lu5QfkSD9ImxIa2lm19aYyt986C9cfYurKU7VIyE9CmrC2Z9jd12IZ/sLFKln7nzhdsVtz2h9SAgpLtJt7eeaOt5y/OZrPcYId1RunWymyzpDY+Q7tSRq+zXrIiSftCYz4V0V+m2PfiOdKkYWElvzdNBurN0yzQIQdLbjQ6ku0u3G7jJkb4R6IH0yqXe+xKLVYlipG/O1EF6ZXHhNvOVzK2DEOnLxbNrGJddQPqUrp64aWJUhvSNNsr8FqRAz5l0ToYNv02C9O6MSkifYn4udl+GwZXn/NK7f6oW4SVIn9F3Gfbu9r6FPTjTl2plzglQId18GaZVgzrpH73Zz7IF0Sd9t3cljf9PPBYs0i3qcvVfh76b3SbBjYAehf2J0+aAYqKf6woW6RY//qEFB09vjooqXun9t7lNBRxzCi4xUqUPNnmdS5BPxyom1qTr1IdyrQK/ahTESm8XlmjSEY5nkz608q26eM98SCXSbWq9DYepNpanPXuXSfrged60GFIkGmuuwSPdat7McAO0rv6teyl778/9ffGv48F6tMblFVOsE3HJ4JFuNytt6ODMu8XLy/+l+ynH6c9V848dfgjZFa9MHXmXLX14zfARz5wYjUZ/mf/9+b+mjMg9V82sD/qyXSmb/JHOJd2ygvb+G8N3wclbo9Gf5n/96mtJpZ88+rndvT3wOuvF0b1xqHgwSbdOcj0wPf1f+MP8n6mkv/j76Z9fG43+PBhWtF+lkf5GFy+9e7JynckXXx+9Un35/O/SSP/mb6d/fuPVQeUupS8USXeoA2McgJ88uu+q/yWS/pXXqm/9elHwvw+XQmYDwbxocEl3uNXNF2a8e3N39Mc0V++l0Z1rvxkcVjisv6s4+u6M0m+4LCAztoH7z49+ab/sLYTvjl4d7nm5/JorltadT7rjxelJUBDHFccQEYdzRukORSZmDIa4heC8X5Rd9Qtq+KQ7VPlakHwK0hH3b2QcmsSBT7rVZEST058y9HpsmZzoLS3ayxnrXd5IYZTu2uWZwnNn2OC1lQTLE51XunPN1iN2jlPt00GK3+4h/WWH48Ipvbrm042xrAKVlNNeDdAVig1HfGCV7tPAV/K0d+fsmWFq3LmlO5ZnXnLpbeLzCMJ352e+3y6vdMeQ5Yqn/0F7Hv4MLL8YxpQsEBFm6Z4NfMUTs+7A+/yfsi+LSA63dI+AxhIBsRpv5amy9Lvhln5k/Ts/93wrW0dogWePZAbrubNLr8Yvbf/M972cbfxAbWEj1+m2gvWBX3q18+3RT33fy9cbcpsabsL5PJ8iQHpVfX/0E+/38gRmfYfmM4x5f7ERIX38vdf+5v3m8x8mb+Mtc3l7SL+4oY0I6UcN3gsv+795eMUBPXZrGHoYXhKTBiHSqwsv/sL/zUlnYcJ2ZufIg9xAinSf6fU10t0//kPzIwxZtKmQIz1o2JuqH+8ddJ3B3oNbIEi65164NfHjHWEtO9fs+SaipLvs3tFB5LIEk2Mho8Obd/ijxktkSQ8dDcUctNvWne9GVA6ANOmBcY9omYZhLTt3CK6FPOmBHeSOgrwEBA3NJcwHNpAoPbCNp29JfVM95shbpSFSumWxlj6os6lKGJo3ECrdM1N2CeXo6FzQsbjn/DsRKz1ovpruMWos0D+InKF5A7nSq2r3k4A3kwzaw+IGyWu+2iJZeuA1D+7QjbeDJm35p1D7EC3dqpzuAGEP1LDnS/o6kPYIl350v4TcbQGF/8OGjVfuysjQ7ka89MARk29gNizoKi0a0yID6WEh0MljDwFhT5VRUCwnATlID5zGds+TvhUSKmcqNOBCHtIDn7Bura1NifZ++vf1kEMm0gOzqVxmYYK6ECJS4IxkI70anwu5oJbZVONLIdHfG29J7rOvyEd6YPfKqhBdwHLKSuJ0Wg85SQ/MnTQuIGMOAKYjL+lRB+0+dY9WCB+aN8hNeqD2/uFbWNBV5AxqL/lJDxtSjQ+6WuHxTpByWTVwzGQoPTQ/fnNYtR+0o0YG0ZgWWUp3L7zbYu/hB1vbRw/hydbDg8tBi1Yy6rOvyFN6uHYqGGtE+ZOr9MD1JlRkNE5bI1vpofF4CvJUnrX0wETpYPbezSPouknW0gMH7WHkFI1pkbl0tg5dnNVTichdOk8bfzZoyp2d/KVXk7Op88vl7i9hRwHSQ7MYXRG6bMWBIqSn1J71w3xBIdKrnURrCzIMum5SivQ0sZoSbvOqJOmhi4otyHho3qAk6ZFjNTkkN9tRlvTAQiFDXA4o9S2NwqSH1nTsJa98KAPFSQ+sNtpNIR24JeVJD9t0oQvmzTfoKVF6YAJ7m3I6cEuKlE45+ZZ6B4EUFCr9qE0mSUve+TzXRIkhipUeuC5tjpQC7cSUKz1ce4kt+4ySpVfVqZC4qZDdXCNQtvSAwGxR0ZgWpUuvLnmVMpg8LPY2rxRI97rZS77NKxXSnUuSsW5znQIN0h1rORd+m1dapNsvav/Br4oLum6iRbrdNMwPXy65/1ajR3pVnbwwWHzgR6+8rUK5LunVUJCuiDRXS5RJP2L86PTDydqeET9++fL7B4VkPFqiTzqAdI1AukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hXyfy89l0B+7GqqAAAAAElFTkSuQmCC">
                            </image>
                        </defs>
                    </svg>
                    <span>Explore the Magento Metropolis!</span>
                    <svg class="cmsb82-drop-shadow-lg cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10" fill="none" height="24" viewbox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.7998 15.5999H15.5998V14.3999H13.7998V15.5999ZM15.5998 17.9999H13.7998V16.7999H15.5998V17.9999ZM13.7998 20.3999H15.5998V19.1999H13.7998V20.3999Z" fill="white"></path>
                        <path clip-rule="evenodd" d="M5.4 0L15 3.6V12H17.4C17.5591 12 17.7117 12.0632 17.8243 12.1757C17.9368 12.2883 18 12.4409 18 12.6V22.8H18.6C18.7591 22.8 18.9117 22.8632 19.0243 22.9757C19.1368 23.0883 19.2 23.2409 19.2 23.4C19.2 23.5591 19.1368 23.7117 19.0243 23.8243C18.9117 23.9368 18.7591 24 18.6 24H0.6C0.44087 24 0.288258 23.9368 0.175736 23.8243C0.0632142 23.7117 0 23.5591 0 23.4C0 23.2409 0.0632142 23.0883 0.175736 22.9757C0.288258 22.8632 0.44087 22.8 0.6 22.8H1.2V10.2C1.2 10.0409 1.26321 9.88826 1.37574 9.77574C1.48826 9.66321 1.64087 9.6 1.8 9.6H3V5.4H4.2V9.6H5.4V0ZM16.8 22.8H15.6V21.6H13.8V22.8H12.6V13.2H16.8V22.8ZM5.4 10.8H2.4V22.8H5.4V10.8ZM8.4 5.4H7.2V6.6H8.4V5.4ZM9.6 5.4H10.8V6.6H9.6V5.4ZM13.2 5.4H12V6.6H13.2V5.4ZM7.2 7.8H8.4V9H7.2V7.8ZM10.8 7.8H9.6V9H10.8V7.8ZM12 7.8H13.2V9H12V7.8ZM8.4 10.2H7.2V11.4H8.4V10.2ZM9.6 10.2H10.8V11.4H9.6V10.2ZM13.2 10.2H12V11.4H13.2V10.2ZM7.2 12.6H8.4V13.8H7.2V12.6ZM10.8 12.6H9.6V13.8H10.8V12.6ZM8.4 15H7.2V16.2H8.4V15ZM9.6 15H10.8V16.2H9.6V15ZM7.2 17.4H8.4V18.6H7.2V17.4ZM10.8 17.4H9.6V18.6H10.8V17.4ZM8.4 19.8H7.2V21H8.4V19.8ZM9.6 19.8H10.8V21H9.6V19.8Z" fill="white" fill-rule="evenodd"></path>
                    </svg>
                </div>
                <svg class="cmsb82-absolute cmsb82-left-0 cmsb82-bottom-0" fill="none" height="51" viewbox="0 0 435 51" width="435" xmlns="http://www.w3.org/2000/svg">
                    <path d="M521.149 66.6131V52.8942H518.576V49.1462H515.839V45.6486H506.218V49.1462H503.825V52.8084H502.489V39.4329H495.519V52.6368H491.445V45.5699H489.304V40.9636H484.482V45.4841H475.443V41.9864H465.053V44.9691H462.431V24.0116H451.869V39.7762H444.856V52.4651H440.523V49.7399H436.758V34.2328H431.074V47.9517H426.742V19.0691H424.6V14.5343L423.171 7.05972H421.777V0H421.058V7.05972H419.578L418.242 14.6774L418.234 14.7131V18.8975H416.524V46.5069H410.359V49.9116H408.254V41.0494H400.178V49.0604H395.895V57.4934H394.221V51.5281H391.484V35.5132H389.256V33.0455H384.686V35.5132H382.287V39.2612H378.902V34.2328H370.733V39.4329H365.258V43.095H363.066V38.1525H360.752V35.6848H355.155V38.0667H353.229V52.6368H350.614V38.7104H345.994V33.9825H338.722V41.1352H334.562V37.8164H323.317V60.4332H321.341V40.8777H318.388V25.4207H316.204V21.8372H314.156V18.1321H312.741V11.9736H312.022V18.1321H310.607V21.5797H309.069V25.4207H306.755V40.4986H304.01V27.3662L301.208 20.7572L298.413 27.495V35.8994H292.507V45.9919H290.021V25.4207H280.184V42.7946H277.231V57.1143H275.384V34.1041H273.2V30.5277H271.404V26.0573H268.113V30.399H266.187V34.1041H264.262V62.7364H261.388V29.1258H254.504V36.021H251.12V33.0884H245.214V26.1861H234.867V37.9451H232.373V29.2546H225.239V37.3013H222.745V26.0573H220.432V22.6025H214.453V26.0573H211.371V33.9825H209.007V26.5652L203.769 18.3324L198.718 26.2218L198.66 26.3076V29.8912H196.814V25.9285H189.42V28.103H187.954V24.0116H182.228V27.588H180.561V44.2037H178.966V32.1872H170.932V35.7707H161.434V38.3242H157.015V34.7478H153.551V30.5277H143.327V37.6876H141.609V34.7478H135.373V47.401H133.389V30.5277H130.824V20.8144H122.791V44.4612H120.169V23.7541H110.461V30.2703H103.276V34.4904H100.582V39.9836H98.2177V28.3533H87.8709V34.3616H85.2986V45.9919H81.6557V41.6502H79.4714V26.5652H72.3364V41.264H68.2264V50.212H65.9918V37.8164H59.3167V18.6471H47.5545V42.0293H44.4792V52.0002H42.7547V31.0427H36.0006V44.59H33.2558V29.7624H23.6779V37.4301H20.7247V50.9773H18.8781V47.1435H15.537V27.7167H4.42142V47.5297H1.67665V40.7561H-0.37833V37.5589H-11.3718V40.2411H-13.8076V64.3958H-21V83H525V66.6131H521.149Z" fill="#9B3205" fill-opacity="0.5"></path>
                </svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Magento.
            </p>
        </div>
    </div>
    <br>
    <hr>
    <style>
        .hyvaverse-teaser-shine {
            position: relative;
            overflow: hidden;
        }

        .hyvaverse-teaser-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: teaser-shine-move 6s infinite;
            pointer-events: none;
        }

        @keyframes teaser-shine-move {
            0% {
                left: -75%;
            }

            100% {
                left: 125%;
            }
        }
    </style>
</div></div></div>
</div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="toc-summary" class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 md:pb-6 xl:pt-[120px] p-6 lg:p-10">
            <div
                class="mx-auto mb-8 lg:absolute lg:top-[40%] lg:right-4 xl:right-[5%] 2xl:right-[10%] max-w-[180px] rounded-full shadow-xl border-2 border-white/50 overflow-hidden shadow-inner">
                <img src="https://www.jajuma.de/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png"
                    alt="Hyvänaut Introducing and explaining Hyvä UI" class="w-full h-auto p-2">
            </div>
            <div
                class="absolute left-1/2 md:left-[calc(100%-240px)] -translate-x-1/2 md:translate-x-0 bottom-[-5px] w-[200px] animate-appear animate-delay-[6.5s] animate-ease-in">
            </div>
            <h2
                class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">tl;dr</span><br>Your Fast-Track to Understanding Hyvä Checkout
            </h2>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-lg lg:text-xl"
               >
                <ul class="text-base space-y-1">
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#introduction"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Fixing the Most Expensive Page</b></a></span>
                        <span>in E-Commerce</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#section-1"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>The Performance Revolution:</b></a></span>
                        <span>Quantifying the Hyvä Speed Advantage</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#section-2"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Deconstructing Hyvä Checkout:</b></a></span>
                        <span>The Architecture & Developer Experience</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#section-3"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>A Feature-by-Feature Breakdown</b></a></span>
                        <span>for Merchants and Customers</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#section-4"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>The Ultimate Showdown:</b></a></span>
                        <span>Hyvä Checkout vs. Magento Luma</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#ssection-5"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Implementation and Customization:</b></a></span>
                        <span>A Practical Guide</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#section-6"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Navigating the Ecosystem:</b></a></span>
                        <span>Integrations, Compatibility, and the Hyvä Suite</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#section-7"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Security</b></a></span>
                        <span>and The Road Ahead</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#section-8"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Evidence of Impact:</b></a></span>
                        <span>Real-World Case Studies and Results</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#section-9"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Finding Your Hyvä Expert:</b></a></span>
                        <span>Why Partner with JaJuMa</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#conclusion"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Conclusion: Strategic Recommendations</b></a></span>
                        <span>for Your Business</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#checklist"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Your Hyvä Checkout Migration </b></a></span>
                        <span>Checklist</span>
                    </li>
                    <li>
                        <span class="w-full xl:w-1/2 inline-block"><a href="#faq"
                                class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Frequently Asked Questions (FAQ)</b></a></span>
                        <span>about Hyvä Checkout</span>
                    </li>
                </ul>
				<p><b>Hyvä Checkout is a high-performance replacement for Magento's default checkout</b>, engineered to be incredibly fast to reduce cart abandonment 
				and significantly boost sales. As a <b>strategic upgrade</b> that simplifies development and delivers a <b>powerful ROI</b> through <b>higher conversion rates</b>, 
				<b>partnering with a certified expert like JaJuMa is key to unlocking its full potential</b>.</p>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="U0TQFC7"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="introduction">Fixing the Most Expensive Page in E-Commerce</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Introduction</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>The Problem:</strong> The checkout page is critical, yet high abandonment rates (around 70%) cause trillions in lost revenue annually.</li>
<li><strong>The Cause:</strong> Key reasons for abandonment are slow speed, complex processes, and forced account creation.</li>
<li><strong>Magento's Challenge:</strong> The default Luma checkout is slow, bloated with outdated technology, and difficult to customize.</li>
<li><strong>The Solution:</strong> Hyv&auml; Checkout is a complete, performance-focused rebuild designed to fix these core issues, increase conversions, and simplify development.</li>
</ul>
</div>
</div>
</div>
</div>
<p>In the vast and competitive landscape of digital commerce, <strong>no single page carries more financial weight than the checkout</strong>. It is the final, critical step where a browser becomes a buyer, and where trillions of dollars in potential revenue are either captured or lost. The statistics paint a stark picture: across the industry, the <strong>average shopping cart abandonment rate hovers around a staggering 70%</strong>. This isn't a minor leak; it's a deluge of lost opportunity, with studies estimating the <strong>value of abandoned merchandise at over $6.5 trillion annually</strong>.</p>
<p>&nbsp;</p>
<p id="G726JWF">The primary reasons cited by customers for this exodus are not mysterious; they are fundamental flaws in the user experience. Research consistently shows that <strong>excessively long or complicated checkout processes cause up to 22% of users to leave</strong>, while <strong>being forced to create an account deters another 24% to 37%</strong>. Compounding these issues is <strong>slow website performance, a proven conversion killer</strong> that frustrates users and erodes trust.</p>
<p>&nbsp;</p>
<p>For years, the Magento 2 ecosystem has grappled with this challenge, largely due to its default Luma frontend. While robust, the <strong>Luma checkout is notoriously complex, slow, and difficult for developers to customize</strong>. Its architecture is built upon heavy, outdated technologies like Knockout.js and RequireJS, which contribute to significant code bloat, slow page loads, and a frustrating development cycle. This has created a major bottleneck at the most crucial point of the sales funnel.</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="SUFD501"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="A5SARU2"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="I49PHX6"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>Into this environment enters <strong><a title="Hyv&auml; Checkout - Official Page" href="https://www.hyva.io/hyva-checkout.html" target="_blank" rel="nofollow noopener">Hyv&auml; Checkout</a>, a solution representing a fundamental paradigm shift</strong>. It is a <strong>complete, ground-up rebuild of Magento's most critical page</strong>, designed as a <strong>standalone module that must be purchased separately from the <a title="Learn More about Hyv&auml; in the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">foundational Hyv&auml; Theme</a></strong>. Its creation was guided by two clear objectives: to <strong>deliver revolutionary speed for merchants and profound simplicity for developers</strong>. This is not merely a new "skin"; it is a <strong>strategic weapon aimed directly at the highest-impact area of any e-commerce operation</strong>.</p>
<p>&nbsp;</p>
<p>Adopting Hyv&auml; Checkout is a&nbsp;<strong>strategic de-risking of a Magento business</strong>. The <strong>quantifiable financial drains identified in checkout abandonment studies - process complexity, slow speed, forced registration - are the very risks that Hyv&auml; Checkout is engineered to neutralize</strong>.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="IC03EVL"><figure class="md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="C96IWR5"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-checkout-screen.png" alt="Hyv&auml; Checkout: Desktop and Mobile Layout as well as Payment Integrations visualized" title="" data-element="desktop_image" data-pb-style="J0H3NUN"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-checkout-screen.png" alt="Hyv&auml; Checkout: Desktop and Mobile Layout as well as Payment Integrations visualized" title="" data-element="mobile_image" data-pb-style="XAGA739"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>Its <strong>streamlined one-step layout and prominent guest checkout option are direct countermeasures</strong> to the most common and costly points of failure. This reframes the investment as a calculated initiative focused on revenue recovery and <strong>transforming the checkout from a liability into a high-performance, competitive asset</strong>.</p>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="ASXLVC2"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-1">The Performance Revolution:<br>Quantifying the Hyv&auml; Speed Advantage</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Performance</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Revolutionary Speed: </strong>Hyv&auml; Checkout is up to 13x faster than Luma on mobile devices, with sub-one-second load times being common.</li>
<li><strong>Direct Revenue Impact: </strong>Faster pages reduce cart abandonment and can increase conversions by 7% for every second saved.</li>
<li><strong>SEO Advantage: </strong>Hyv&auml; sites consistently score 90+ on Core Web Vitals, a direct Google ranking factor, giving them a significant edge in organic search.</li>
<li><strong>Proven Results: </strong>Case studies confirm massive performance gains, including a 67.5% increase in checkout conversion rates after switching.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>Performance is the cornerstone of the <a title="Hyv&auml; Website" href="https://www.hyva.io/" target="_blank" rel="nofollow noopener">Hyv&auml;</a> value proposition</strong>. The most widely cited benchmark is that <strong>Hyv&auml; Checkout can be up to 13 times faster on mobile devices</strong> (tested on a fast 3G connection) compared to the standard Magento Luma checkout. This dramatic speed increase results from a <strong>lightweight architecture, a minimized JavaScript library, and modern frameworks like Tailwind CSS</strong>. For many merchants, this means an <strong>out-of-the-box page load time of less than one second</strong>.</p>
<p>&nbsp;</p>
<p>This raw speed has a <strong>direct and measurable impact on revenue</strong>. Industry research establishes a clear correlation between page load time and user behavior, with one study indicating that a <strong>mere one-second delay can result in a 7% decrease in conversions</strong>. By drastically reducing load times, Hyv&auml; Checkout directly addresses this, leading to <strong>lower bounce rates, reduced cart abandonment, and a significant uplift in sales</strong>.</p>
<p>&nbsp;</p>
<p>Beyond load times, Hyv&auml;'s performance dominance is evident in its <strong>Core Web Vitals (CWV) scores</strong>. Hyv&auml;-powered sites consistently achieve <strong>Google Lighthouse and PageSpeed scores of 90 and above</strong>, often out of the box. An extensive analysis revealed that <strong>over 50% of Hyv&auml; stores achieve a "good" CWV score</strong>, dwarfing the 19% of standard Magento frontends that meet the same criteria. This <strong>superior performance is a direct ranking factor for Google</strong>, providing a powerful and sustainable SEO advantage.</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="RUIITTI"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="YOLKA21"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="X1TRFCY"><figure class="shadow-xl md:mr-4 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="XHM5VSP"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Hyva-Checkout-The-Performance-Revolution-Quantifying-the-Hyva-Speed_Advantage.png" alt="The Performance Revolution: Visualized Quantification of the Hyv&auml; Checkout Speed Advantage compared to Luma Checkout" title="" data-element="desktop_image" data-pb-style="OFCRLAN"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Hyva-Checkout-The-Performance-Revolution-Quantifying-the-Hyva-Speed_Advantage.png" alt="The Performance Revolution: Visualized Quantification of the Hyv&auml; Checkout Speed Advantage compared to Luma Checkout" title="" data-element="mobile_image" data-pb-style="YYJBYJG"></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="ME2GME0"><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>The real-world impact is validated across numerous case studies:</strong></p>
<ul>
<li>One implementation saw <strong>checkout page load time plummet from 16.25 seconds to a brisk 2.83 seconds</strong>.</li>
<li>Another merchant experienced a <strong>2.5x improvement in their overall Page Speed score</strong> after migrating to Hyv&auml;.</li>
<li>A detailed performance audit showed a merchant's <strong>checkout page score jumping from 53 to 90</strong>.</li>
<li>In a controlled A/B test, Hyv&auml; Checkout led to a <strong>remarkable 67.5% increase in the checkout conversion rate</strong>.</li>
</ul></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>The <strong id="ND4MMH7">financial return from this performance is a compounding loop of value</strong>. Better speed increases conversions from existing traffic. Superior CWV scores boost SEO, driving more organic traffic. This leads to higher customer satisfaction and lifetime value, creating a <strong>virtuous cycle of growth</strong>.</p>
<p>&nbsp;</p>
<div class="p-6 pl-12 font-mono"><span class="text-[100px] h-5 block relative top-[55px] -left-[50px]">"</span>
<h3 class="text-lg font-semibold mt-4"><u>JaJuMa's Expert Take:</u><br>Performance is Non-Negotiable</h3>
<p class="border-l border-gray-300 pl-6 mt-4">As a <a title="JaJuMa Is Hyv&auml; Gold Partner, Technology Partner &amp; Core Contributor" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener"><strong>Hyv&auml; Gold Partner, Technology Partner &amp; Core Contributor</strong></a>, we've seen firsthand that performance isn't just a technical metric; <strong>it's a core business strategy</strong>.<br>The <strong>speed of Hyv&auml; Checkout</strong> is its most compelling feature because it delivers an immediate and measurable ROI. <br>When we implement Hyv&auml; for our clients, we're not just building a faster site - we're engineering <strong>a more profitable one</strong>.<br><strong>The data is clear: speed sells, and Hyv&auml; delivers speed in a way that Luma simply cannot match</strong>&nbsp;_</p>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="XIDRTLR"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-2">Deconstructing Hyv&auml; Checkout:<br>The Architecture &amp; Developer Experience</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Architecture</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Modern Stack:</strong> Hyv&auml; replaces Luma's outdated stack (Knockout.js, RequireJS) with modern, lightweight tools: Magewire, Alpine.js, and Tailwind CSS.</li>
<li><strong>Drastic Simplification:</strong> This results in a massive reduction in code bloat, with pages being significantly smaller and requiring far fewer server requests.</li>
<li><strong>Developer-Friendly:</strong> The new stack is easier to learn, use, and maintain, making developers more productive and happier.</li>
<li><strong>Faster Development:</strong> Customizations are 30-50% faster than on Luma, leading to lower costs and quicker project delivery.</li>
</ul>
</div>
</div>
</div>
</div>
<p>The <strong>performance and flexibility of Hyv&auml; Checkout</strong> are rooted in a <strong>complete departure from the legacy technology</strong> that underpins Magento's Luma theme. <br>This "great departure" involves removing outdated libraries like RequireJS, Knockout.js, and most of jQuery. This single act is the primary driver behind the <strong>dramatic reduction in complexity</strong> and bloat, resulting in pages that are up to 80% lighter and require 98% fewer HTTP requests.</p>
<p>&nbsp;</p>
<p>In place of this legacy stack, Hyv&auml; Checkout is built upon a <strong>modern, lightweight, and efficient</strong> set of technologies:</p>
<ul>
<li><strong><a title="Magewire Github" href="https://github.com/magewirephp/magewire" target="_blank" rel="nofollow noopener">Magewire</a>:<br></strong>This is the <strong>technological heart of Hyv&auml; Checkout</strong>. Magewire is a PHP-driven technology that moves most of the application logic to the backend. This allows Magento developers, who are predominantly PHP specialists, to work in a familiar environment. They can build and customize checkout components using standard Magento constructs, drastically reducing the learning curve and the need for complex client-side JavaScript.</li>
<li><strong><a title="AlpineJS Website" href="https://alpinejs.dev/" target="_blank" rel="nofollow noopener">Alpine.js</a></strong><strong>:<br>For necessary frontend interactivity</strong>, Hyv&auml; employs Alpine.js. It is a minimal and reactive JavaScript framework designed to provide dynamic functionality without the immense overhead of larger libraries.</li>
<li><strong><a title="TailwindCSS Website" href="https://tailwindcss.com/" target="_blank" rel="nofollow noopener">Tailwind CSS</a>:<br>Styling is handled by Tailwind CSS</strong>, a utility-first CSS framework. This allows developers to build and style components rapidly and directly within their PHTML templates, eliminating the need to maintain massive, monolithic CSS files. The result is a cleaner workflow and stylesheets that can be up to 90% smaller.</li>
</ul>
<p>This strategic combination delivers<strong> the "Developer Dividend" - a revolution in productivity</strong>. The simplified codebase is far easier to understand, maintain, and debug. This leads to a tangible&nbsp;<strong>30-50% reduction in development time </strong>compared to Luma, a saving that translates directly to lower project costs and a faster time-to-market. Developers consistently report a more enjoyable and rewarding experience, as they can focus on creating business value instead of battling an outdated framework.</p>
<p>&nbsp;</p>
<div class="p-6 pl-12 font-mono"><span class="text-[100px] h-5 block relative top-[55px] -left-[50px]">"</span>
<h3 class="text-lg font-semibold mt-4"><u>JaJuMa's Expert Take:</u><br>Empowering Developers to Deliver Value</h3>
<p class="border-l border-gray-300 pl-6 mt-4"><strong>The developer experience with Hyv&auml; is transformative.</strong> <br>At JaJuMa, <a title="Certified Hyv&auml; Developers" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener"><strong>our certified developers</strong></a> can build and customize features for our clients in a fraction of the time it would take on Luma. The modern stack isn't just about making developers happy; <strong>it's about efficiency and agility</strong>. We can respond to market changes, roll out new features, and optimize the user experience faster, <strong>giving our clients a crucial competitive edge</strong>. <strong>Magewire, in particular, is a game-changer</strong>, as it allows our PHP-focused team to build highly interactive frontends without a steep JavaScript learning curve&nbsp;_</p>
</div>
<p>&nbsp;</p></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-3">A Feature-by-Feature Breakdown for Merchants and Customers</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Features</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Streamlined Flow:</strong> Offers flexible one-page and multi-column layouts that can be configured in the admin to optimize conversions.</li>
<li><strong>Friction Reduction:</strong> Includes a prominent guest checkout and smart form validation to eliminate common user frustrations.</li>
<li><strong>Enhanced Functionality:</strong> Supports order comments and a wide array of major payment gateways like Stripe, PayPal, and Adyen.</li>
<li><strong>Mobile-First:</strong> Provides a flawless responsive experience and allows for a completely separate, optimized checkout flow for mobile users.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>Hyv&auml; Checkout's superior architecture translates directly into a suite of features designed to optimize the user journey and eliminate friction.</strong></p>
<p>&nbsp;</p>
<p><strong>Streamlined Layouts &amp; Flow</strong></p>
<ul>
<li><strong>One-Step/Single-Page Checkout:<br></strong>This <strong>core feature</strong> consolidates all necessary fields onto a single, streamlined page, reducing cognitive load and clicks.</li>
<li><strong>Flexible Layout Options:<br></strong>Merchants can<strong> easily switch</strong> between a default 2-column layout or a more consolidated 3-column one-page layout directly from the Magento admin, allowing for A/B testing to find the <strong>highest-converting flow</strong>.</li>
</ul>
<p><strong>Reducing Customer Friction</strong></p>
<ul>
<li><strong>Prominent Guest Checkout:<br></strong>Hyv&auml; provides a clear,<strong> easy-to-use guest checkout option</strong>, addressing a major reason for cart abandonment.</li>
<li><strong>Intuitive Forms &amp; Validation:<br></strong>Features like address validation and <strong>field autocorrect provide real-time feedback</strong>, preventing user frustration and ensuring data accuracy.</li>
</ul></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="IA1C8LK"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="DPQG6B1"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="B95IRGQ"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p><strong>Enhanced Communication &amp; Functionality</strong></p>
<ul>
<li><strong>Order Comments Field:<br></strong>A <strong>simple but effective feature</strong> allowing customers to add special instructions or gift messages, improving communication and fulfillment efficiency.</li>
<li><strong>Seamless Payment Integrations:<br></strong>Hyv&auml; supports a <strong>vast and growing list of popular payment gateways</strong>, including <strong>Stripe, PayPal, Adyen, Braintree, Mollie, and Klarna</strong>, ensuring customers can use a method they trust.</li>
</ul>
<p><strong>Mobile-First Optimization</strong></p>
<ul>
<li><strong>Inherently Responsive Design:<br></strong>The entire checkout is<strong> </strong>built to <strong>adapt flawlessly across all devices</strong>, from phones to desktops.</li>
<li><strong>Dedicated Mobile Layouts:<br></strong>Merchants can configure a <strong>completely different</strong>, multi-step checkout flow specifically <strong>for mobile devices</strong> to make navigation on smaller screens even easier. This ensures <strong>every visitor receives the most optimized journey possible</strong>.</li>
</ul></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="GVFTRRX"><figure class="shadow-xl md:ml-4 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="D5HCULP"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Hyva-Checkout-Feature-Breakdown-for-Merchants-Customers.png" alt="Hyv&auml; Checkout Infographic: Feature Breakdown for Merchants Customers" title="" data-element="desktop_image" data-pb-style="TJUDE8C"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Hyva-Checkout-Feature-Breakdown-for-Merchants-Customers.png" alt="Hyv&auml; Checkout Infographic: Feature Breakdown for Merchants Customers" title="" data-element="mobile_image" data-pb-style="BWU4PJO"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-4">The Ultimate Showdown:<br>Hyv&auml; Checkout vs. Magento Luma</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Hyv&auml; vs. Luma</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Performance:</strong> Hyv&auml; is vastly superior in speed and Core Web Vitals. Luma is slow and requires expensive optimization.</li>
<li><strong>Technology:</strong> Hyv&auml; uses a modern, developer-friendly stack. Luma relies on outdated, complex technology.</li>
<li><strong>Cost &amp; ROI:</strong> Hyv&auml; has an upfront license fee but delivers high ROI through lower development costs and higher conversions. Luma is "free" but incurs significant hidden costs.</li>
<li><strong>Compatibility:</strong> Luma's main advantage is its out-of-the-box compatibility with all Magento extensions. Hyv&auml; requires specific compatibility modules, making an extension audit a critical first step.</li>
</ul>
</div>
</div>
</div>
</div>
<p>A direct comparison between Hyv&auml; Checkout and the standard Magento Luma checkout reveals <strong>fundamental differences in philosophy, technology, and business impact</strong>.</p>
<p>&nbsp;</p>
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left &gt; &lt;thead&gt; &lt;tr class=" border="1"><caption>Table comparing the key differences between Hyv&auml; Checkout and Magento Luma, highlighting performance, technology, and cost.</caption>
<tbody>
<tr>
<th class="p-4 font-semibold">Aspect</th>
<th class="p-4 font-semibold bg-sky-100 text-sky-900 shadow-inner">Hyv&auml; Checkout</th>
<th class="p-4 font-semibold">Luma Checkout</th>
</tr>
</tbody>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Performance</td>
<td class="p-4 bg-sky-50 text-sky-900 font-medium">&#9989; Exceptionally fast (up to 13x faster on mobile); superior Core Web Vitals (90+ scores common) out of the box.</td>
<td class="p-4">&#10060; Notoriously slow due to code bloat; requires significant, costly optimization to improve performance.</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Technology Stack</td>
<td class="p-4 bg-sky-50 text-sky-900 font-medium">&#9989; Modern and lightweight: Magewire (PHP-driven logic), Alpine.js (minimal JS), Tailwind CSS (utility-first CSS).</td>
<td class="p-4">&#10060; Outdated and heavy: Knockout.js, RequireJS, extensive jQuery, complex LESS/CSS structure.</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Developer Experience</td>
<td class="p-4 bg-sky-50 text-sky-900 font-medium">&#9989; Simplified, clean, and logical codebase. Praised as developer-friendly, enabling rapid customization and easier maintenance.</td>
<td class="p-4">&#10060; Complex, cumbersome, and frustrating. Steep learning curve; even small changes can be time-consuming and difficult.</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">User Experience</td>
<td class="p-4 bg-sky-50 text-sky-900 font-medium">&#9989; Streamlined, intuitive, and mobile-first. Designed to minimize friction and guide users to completion.</td>
<td class="p-4">&#10060; Functional but can be clunky and overwhelming. The multi-step process can lead to higher user frustration and abandonment.</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Customization</td>
<td class="p-4 bg-sky-50 text-sky-900 font-medium">&#9989; Highly flexible. Layouts (1-step/2-step) are configurable from the admin. Styling is rapid with Tailwind CSS.</td>
<td class="p-4">&#10060; Highly customizable but technically challenging. Lacks out-of-the-box layout flexibility; changes require deep developer expertise.</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Extension Compatibility</td>
<td class="p-4 bg-sky-50 text-sky-900 font-medium">&#9989; Requires specific compatibility modules. Not all third-party extensions are supported, which is a key migration consideration.</td>
<td class="p-4">&#9989; Its primary advantage. Compatible with the vast majority of Magento extensions without modification.</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Cost Model</td>
<td class="p-4 bg-sky-50 text-sky-900 font-medium">&#9989; Requires upfront license fees (&euro;1,000 for Hyv&auml; Theme, &euro;1,000 for Hyv&auml; Checkout) plus an annual support subscription.</td>
<td class="p-4">&#10060; "Free" with Magento installation, but incurs significant hidden costs in development, optimization, and lost sales.</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Long-Term ROI</td>
<td class="p-4 bg-sky-50 text-sky-900 font-medium">&#9989; High. Driven by lower development/maintenance costs, faster time-to-market, and increased conversion rates.</td>
<td class="p-4">&#10060; Lower. Hindered by high maintenance costs, slow development, and performance-related revenue loss.</td>
</tr>
</tbody>
</table>
</div>
<!-- Summary Section -->
<div class="mt-8 lg:mt-10 text-xl text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200"><strong class="text-primary-dark">Summary:</strong> <strong class="text-slate-800">Hyv&auml; Checkout consistently outperforms Luma Checkout</strong> across performance, user experience, and developer efficiency - making it the smart choice for merchants focused on speed, usability, and ROI.</div>
</div>
<p>&nbsp;</p>
<div class="p-6 pl-12 font-mono"><span class="text-[100px] h-5 block relative top-[55px] -left-[50px]">"</span>
<h3 class="text-lg font-semibold mt-4"><u>JaJuMa's Expert Take:</u><br>Focusing on Total Cost of Ownership</h3>
<p class="border-l border-gray-300 pl-6 mt-4"><strong>When clients compare Hyv&auml; and Luma, we encourage them to look beyond the initial license fee and consider the Total Cost of Ownership (TCO).</strong> <br>Luma might seem "free," but it comes with immense hidden costs in slow development, frustrating maintenance, and lost revenue from poor performance. <br>Hyv&auml;'s upfront cost is an <strong>investment that pays for itself</strong> through dramatically lower development expenses and a direct, measurable lift in conversions. <br>We help our clients understand that<strong> choosing Hyv&auml; is a strategic financial decision that yields a far greater long-term ROI</strong>&nbsp;_</p>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="GNCBYE6"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-5">Implementation and Customization:<br>A Practical Guide</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Implementation</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Prerequisites:</strong> A successful install requires specific Magento, PHP, and Hyv&auml; Themes versions.</li>
<li><strong>Licensing:</strong> Hyv&auml; Checkout is a separate &euro;1,000 license and requires a &euro;250 annual subscription for updates after the first year.</li>
<li><strong>Installation:</strong> The process is a standard Magento module installation via Composer, followed by configuration in the admin.</li>
<li><strong>Customization:</strong> Styling is done efficiently with Tailwind CSS, and adding new fields or logic is handled cleanly with Magewire components, making the process logical and fast for developers.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>Implementing and tailoring <a title="Hyv&auml; Checkout Documentation" href="https://docs.hyva.io/checkout/index.html" target="_blank" rel="nofollow noopener">Hyv&auml; Checkout</a> requires a clear understanding of its prerequisites, installation, and customization methods.</strong></p>
<p>&nbsp;</p>
<h3>Prerequisites &amp; Licensing</h3>
<div class="mx-6">
<h4 class="!text-xl">System Requirements:<br><span class="!text-base font-normal">A successful implementation requires a specific technical environment.</span></h4>
<br>
<p>The latest Hyv&auml; Checkout versions (1.3.0+) have <strong>strict requirements for security and performance</strong>:</p>
<ul>
<li><strong>Magento Version:</strong> 2.4.4-p9 or higher.</li>
<li><strong>PHP Version:</strong> 8.1, 8.2, or 8.3.</li>
<li><strong>Hyv&auml; Themes Version:</strong> 1.3.12 or newer.</li>
<li><strong><a title="TailwindCSS Website" href="https://tailwindcss.com/" target="_blank" rel="nofollow noopener">Tailwind CSS</a>:</strong> Must use the Just-In-Time (JIT) compiler mode.</li>
</ul>
<h4 class="!text-xl">Licensing &amp; Cost:<br><span class="!text-base font-normal">The pricing model is a key part of project planning.</span></h4>
<ul>
<li><strong>Separate Licenses:</strong> Hyv&auml; Checkout requires its own license, separate from the <a title="JaJuMa-Shop | Top 10 Reasons for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Theme</a> license.</li>
<li><strong>License Fees:</strong> The standard one-time license fee is &euro;1,000 for Hyv&auml; Themes and another &euro;1,000 for Hyv&auml; Checkout.</li>
<li><strong>Support &amp; Updates Plan:</strong> After the first year, a recurring annual fee of &euro;250 is required for ongoing support, security patches, and new features.</li>
<li><strong><a title="Hyv&auml; Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" target="_blank" rel="noopener">Hyv&auml; Commerce</a></strong> Alternatively Hyv&auml; Ceckout is also included in a <a title="Hyv&auml; Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" target="_blank" rel="noopener">Hyv&auml; Commerce</a> license.</li>
<li><strong>Agency Licensing:</strong> Agencies must purchase a separate plan for each client project.</li>
</ul>
</div>
<p>&nbsp;</p>
<h3>Installation Walkthrough</h3>
<p>The installation is straightforward for developers familiar with Composer :</p>
<ol>
<li><strong>Retrieve License Keys</strong> and configure Composer.</li>
<li><strong>Require the Package</strong> via the Composer command: <code>composer require hyva-themes/magento2-hyva-checkout</code>.</li>
<li><strong>Disable HTML Minification</strong> (recommended) to prevent conflicts.</li>
<li><strong>Run Setup Upgrade</strong>: <code>bin/magento setup:upgrade</code>.</li>
<li><strong>Generate Styles</strong> using your theme's Tailwind build process.</li>
<li><strong>Enable in Admin</strong>: Navigate to Stores &gt; Configuration &gt; Hyv&auml; Themes &gt; Checkout, switch the "Checkout" dropdown to "Hyv&auml; Default," and save.</li>
</ol>
<p>&nbsp;</p>
<h3>Customization Deep Dive</h3>
<ul>
<li><strong>Styling with Tailwind CSS:</strong> The visual appearance is easily customized by adding or modifying utility classes in the PHTML template files. For major changes, core CSS files can be excluded via the <code>postcss.config.js</code> file.</li>
<li><strong>Adding Custom Fields:</strong> This common task highlights the power of Magewire. It involves defining the field in layout XML, creating a PHP Magewire component to handle the logic, and creating a PHTML template to render the field.</li>
<li><strong>Configuring Mobile Experience:</strong> Merchants can precisely define which devices receive the dedicated mobile layout by customizing the user agent regular expression in the admin panel.</li>
</ul>
<p>&nbsp;</p>
<div class="p-6 pl-12 font-mono"><span class="text-[100px] h-5 block relative top-[55px] -left-[50px]">"</span>
<h3 class="text-lg font-semibold mt-4"><u>JaJuMa's Expert Take:</u><br>A Smooth Implementation is Key</h3>
<p class="border-l border-gray-300 pl-6 mt-4"><strong>A successful Hyv&auml; Checkout implementation goes beyond just running commands.</strong><br>At JaJuMa, our process begins with a thorough audit of your system requirements and extension compatibility. <strong>We ensure a seamless installation and configuration</strong>, leveraging our <strong>deep expertise in Tailwind CSS and Magewire</strong> to customize the checkout to your exact brand and functional needs.<br>Our goal is to make the<strong> transition smooth, efficient, and free of surprises</strong>, so you can start <strong>reaping the benefits of a faster checkout immediately</strong>&nbsp;_</p>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="Y2N1TQN"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-6">Navigating the Ecosystem:<br>Integrations, Compatibility, and the Hyv&auml; Suite</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Ecosystem</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Core Integrations:</strong> Hyv&auml; supports most major payment gateways (PayPal, Stripe, etc.) and shipping carriers (DHL, UPS, etc.).</li>
<li><strong>The Compatibility Hurdle:</strong> Standard Magento extensions are not compatible by default and require specific modules. An extension audit is a mandatory first step.</li>
<li><strong>Community Support:</strong> A public integration tracker helps monitor the rapidly growing list of compatible extensions.</li>
<li><strong>Product Family:</strong> Hyv&auml; Checkout is part of a larger suite, including the foundational Hyv&auml; Theme, Hyv&auml; UI, Hyv&auml; Enterprise, and the all-in-one Hyv&auml; Commerce.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>A checkout solution is only as effective as its ability to integrate with the broader e-commerce ecosystem.</strong> <br>Understanding this landscape is critical for any team planning a migration.</p>
<p>&nbsp;</p>
<h3>The Integration Landscape</h3>
<p>Hyv&auml; Checkout supports a <strong>wide range of essential services</strong> through native integrations and compatibility modules.</p>
<ul>
<li><strong>Payment Gateways:<br></strong>To ensure a frictionless experience, Hyv&auml; supports a comprehensive list of popular providers, including <strong>PayPal, Stripe, Braintree, Adyen, and Mollie</strong>, as well as Magento's native offline methods. <br><a title="Hyv&auml; Checkout Payment Integrations" href="https://docs.hyva.io/checkout/hyva-checkout/integrations/available-payment-methods.html" target="_blank" rel="nofollow noopener">(Check the available payment integrations here)</a></li>
<li><strong>Shipping Methods:<br></strong>The checkout seamlessly integrates with Magento's native shipping methods. Compatibility modules are available for major carriers like <strong>DHL, FedEx, UPS, and USPS. <br><a title="Hyv&auml; Checkout Shipping Integrations" href="https://docs.hyva.io/checkout/hyva-checkout/integrations/available-shipping-methods.html" target="_blank" rel="nofollow noopener">(Check the available shipping integrations here)</a></strong></li>
</ul>
<p>&nbsp;</p>
<h3>The Extension Compatibility Challenge</h3>
<p>This is the single most critical technical consideration. Because Hyv&auml; was built from scratch, <strong>standard Magento extensions that modify the checkout do not work out-of-the-box.</strong> <br>This is a fundamental consequence of leaving Luma's legacy architecture behind.<br>Merchants must conduct a thorough audit of their <strong>existing extensions</strong>. Any essential module will <strong>require a Hyv&auml;-compatible version</strong>.<br>The Hyv&auml; community maintains a <a title="Checkout Integration Tracker" href="https://gitlab.hyva.io/hyva-public/checkout-integration-tracker/-/boards/87" target="_blank" rel="nofollow noopener">public Checkout Integration Tracker</a> to provide transparency on the compatibility status of hundreds of modules.<br>The <strong><a title="Explore the expanding Hyv&auml; Ecosystem in our Hyv&auml;verse Guide" href="/en/hyvaverse-guide" target="_blank" rel="noopener">Hyv&auml; ecosystem is expanding rapidly</a></strong>, with over 1000 extensions now compatible with the broader Hyv&auml; Theme.</p>
<p>&nbsp;</p>
<h3>Situating Checkout within the Hyv&auml; Product Suite</h3>
<p><a title="Join The Hyv&auml;verse &amp; Benefit from a modern Magento" href="/en/hyvaverse-guide" target="_blank" rel="noopener">Hyv&auml; Checkout is part of a larger, interconnected family of products</a> designed to modernize Magento:</p>
<ul>
<li><strong><a title="JaJuMa-Shop | Top 10 Reasons for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Themes</a>:</strong> The foundational product. Hyv&auml; Checkout requires a store to be running on the Hyv&auml; Themes frontend.</li>
<li><strong><a title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">Hyv&auml; UI</a>:</strong> A free library of pre-built, accessible UI components (sliders, accordions, etc.) that accelerates custom development.</li>
<li><strong>Hyv&auml; Enterprise:</strong> An add-on for Adobe Commerce users, providing compatibility for B2B features, Adobe Sensei, and Live Search.</li>
<li><strong><a title="Hyv&auml; Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" target="_blank" rel="noopener">Hyv&auml; Commerce</a>:</strong> The newest all-in-one subscription product, bundling the Theme, Checkout, and UI with powerful new backend enhancements like a modern CMS with live preview and an integrated image editor.</li>
</ul>
<p>&nbsp;</p>
<div class="p-6 pl-12 font-mono"><span class="text-[100px] h-5 block relative top-[55px] -left-[50px]">"</span>
<h3 class="text-lg font-semibold mt-4"><u>JaJuMa's Expert Take:</u><br>Navigating Compatibility with Confidence</h3>
<p class="border-l border-gray-300 pl-6 mt-4"><strong>The extension compatibility challenge is real, but it's a manageable one with the right partner.</strong><br>At JaJuMa, our migration process always starts with a comprehensive extension audit. We identify critical modules, check their status in the official tracker, and leverage our <a title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">development expertise</a> to create custom compatibility solutions when needed. The growing ecosystem is a sign of Hyv&auml;'s maturity.<br><strong>We guide our clients through this process, ensuring that their transition to Hyv&auml; is smooth and that no critical functionality is lost.</strong>&nbsp;_</p>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="N7OWSMB"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-7">Security and The Road Ahead</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Security &amp; Roadmap</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>PCI DSS 4.0 Ready:</strong> Hyv&auml; Checkout is being built to comply with the strict new PCI DSS 4.0 standards, which become mandatory in 2025.</li>
<li><strong>Strict CSP:</strong> It enforces a strict Content Security Policy (CSP), a key requirement that protects against common script-injection attacks.</li>
<li><strong>Future Features:</strong> The public roadmap includes support for key functionalities like "Pickup In Store" (MSI), reCAPTCHA, and saved payments (Vault).</li>
<li><strong>Enterprise Focus:</strong> Many upcoming features are aimed at achieving full compatibility with Adobe Commerce, signaling a strong push into the enterprise market.</li>
</ul>
</div>
</div>
</div>
</div>
<p>In an era of increasing data privacy regulation, a platform's approach to security is a critical measure of its viability. Hyv&auml; Checkout is being developed with a forward-looking perspective on security, particularly concerning the forthcoming <a title="PCI Security Standards Council" href="https://www.pcisecuritystandards.org/" target="_blank" rel="nofollow noopener"><strong>PCI DSS 4.0 standards</strong></a>.</p>
<p>&nbsp;</p>
<h3>Fortifying the Fort: PCI DSS 4.0 and Content Security Policy (CSP)</h3>
<p>A crucial development for e-commerce is the introduction of the Payment Card Industry Data Security Standard (PCI DSS) version 4.0. A key requirement, mandatory after March 31, 2025, is the implementation of a strict <strong>Content Security Policy (CSP)</strong> on all payment pages.</p>
<p><br><strong>Hyv&auml; is proactively</strong> engineering its checkout to be fully compliant, <strong>providing a significant security advantage</strong>. The core of this effort involves:</p>
<ul>
<li><strong>Enforcing Strict CSP:<br></strong>Hyv&auml; Checkout enforces a strict CSP that disables unsafe-inline and unsafe-eval policies, which are common vectors for Cross-Site Scripting (XSS) attacks.</li>
<li><strong>Nonce-Based Authorization:<br></strong>All inline scripts on the checkout page must be authorized with a unique, randomly generated token (nonce) to ensure only legitimate scripts are executed.</li>
<li><strong>Preventing Dynamic Injection:<br></strong>Under the strict CSP model, all scripts must be present in the page's source code when initially loaded, preventing the dynamic injection of unauthorized code.</li>
</ul>
<p>By building these protections directly into the architecture, Hyv&auml; ensures its merchants will be compliant with PCI DSS 4.0 ahead of the deadline, safeguarding data and protecting businesses from penalties .</p>
<p>&nbsp;</p>
<h3>The Future Roadmap: What's Next for Hyv&auml; Checkout</h3>
<p><strong>The development of Hyv&auml; Checkout is ongoing</strong>, with a public roadmap signaling a clear strategic direction focused on expanding features, improving accessibility, and deepening Adobe Commerce integration.<br>Planned Features (6+ Months Horizon):</p>
<ul>
<li id="KBYU3YB"><strong>MSI - Pickup In Store:<br></strong>Full compatibility for Magento's Multi-Source Inventory "Pickup In Store" functionality, enabling BOPIS for omnichannel retailers.</li>
<li><strong>reCAPTCHA Integration:<br></strong>Compatibility with Magento's native reCAPTCHA to reduce spam and bot activity.<br>(Our <a title="Honey Spam Anti-Spam module for Hyv&auml; Theme &amp; Checkout" href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" rel="noopener"><strong>Honey Spam Anti-Spam module</strong></a> is already compatible with Hyv&auml; Checkout and ready to <strong>protect your entire store against spam and bots</strong>. <strong>GDPR compliant</strong> and <strong>without any impact on performance</strong> by loading no additional ressources.)</li>
<li><strong>Vault (Stored Payments):<br></strong>Support for Magento's Vault, allowing customers to securely save payment details for faster repeat purchases.</li>
<li><strong>Adobe Commerce Customer Custom Attributes:<br></strong>Support for capturing custom customer attributes on the checkout page for Adobe Commerce users.</li>
<li><strong>Accessibility (WCAG) Compliance:<br></strong>Bringing the same level of Web Content Accessibility Guidelines (WCAG) compliance from the Hyv&auml; Theme to the Checkout is a high-priority item on the roadmap.</li>
</ul>
<p>&nbsp;</p>
<div class="p-6 pl-12 font-mono"><span class="text-[100px] h-5 block relative top-[55px] -left-[50px]">"</span>
<h3 class="text-lg font-semibold mt-4"><u>JaJuMa's Expert Take:</u><br>Proactive Security is Future-Proofing</h3>
<p class="border-l border-gray-300 pl-6 mt-4"><strong>Security is not an afterthought; it's a foundational requirement.</strong><br>Hyv&auml;'s proactive approach to PCI DSS 4.0 and CSP compliance is a major benefit for our clients. By partnering with JaJuMa to implement Hyv&auml; Checkout, merchants are not just getting a faster checkout today - they are <strong>future-proofing their store against upcoming security mandates.</strong><br><strong>This protects their customers, their reputation, and their bottom line, providing invaluable peace of mind.</strong>&nbsp;_</p>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="I62WL6I"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-8">Evidence of Impact:<br>Real-World Case Studies and Results</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Case Studies</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Proven ROI:</strong> Real-world case studies show significant and rapid returns on investment after implementing Hyv&auml; Checkout.</li>
<li><strong>Conversion Uplift:</strong> Merchants consistently report dramatic increases in conversion rates, with one A/B test showing a 67.5% lift.</li>
<li><strong>Revenue Growth:</strong> Higher conversions and increased order values directly translate to substantial revenue growth, with some seeing gains as high as 61%.</li>
<li><strong>Broad Impact:</strong> The benefits extend beyond conversions to include massive improvements in page speed, SEO traffic, and user engagement metrics.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>The true measure of Hyv&auml; Checkout's value lies in tangible, real-world results.</strong><br>A growing body of case studies provides powerful, quantitative <strong>evidence of its transformative impact</strong>.</p>
<ul>
<li><strong>Barr Display:</strong> This B2B retailer reported a <strong>+20% increase in Average Order Value (AOV)</strong>, a <strong>-30% reduction in cart abandonment</strong>, and a <strong>+16% overall increase in revenue </strong>after implementation.</li>
<li><strong>SDS London Ltd:</strong> This merchant went live in just a few days and, within four months, saw a <strong>+28% increase in their conversion rate</strong> and a <strong>+61% increase in revenue</strong>.</li>
<li><strong>Bedre N&aelig;tter:</strong> A direct A/B test proved Hyv&auml; Checkout's superiority, resulting in a <strong>67.5% increase in their checkout conversion rate </strong>compared to the previous year.</li>
<li><strong>Classic Football Shirts:</strong> As part of a site-wide Hyv&auml; migration, this retailer saw its overall Page Speed score improve by <strong>2.5 times</strong>, with the checkout page load time dropping dramatically.</li>
</ul>
<p><strong>These examples are part of a broader trend.</strong> Across numerous implementations, merchants switching to Hyv&auml; consistently report a <strong>15-30% increase in conversion rates.<br></strong>This is often accompanied by significant growth in organic traffic, driven by the SEO benefits of a faster site.</p>
<p>The following table aggregates the most <strong>compelling quantitative results</strong>, providing undeniable <strong>proof of the checkout's business impact</strong>.</p>
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200 my-8">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">Table summarizing Hyv&auml; Checkout case-study and showcase results
<table class="table-auto w-full text-sm text-left" border="1">
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Merchant</th>
<th class="p-4 font-semibold">Business Type</th>
<th class="p-4 font-semibold">Key Result 1</th>
<th class="p-4 font-semibold">Key Result 2</th>
<th class="p-4 font-semibold">Key Result 3</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4"><strong>Barr Display</strong></td>
<td class="p-4">B2B</td>
<td class="p-4">+16% Revenue</td>
<td class="p-4">+20% AOV</td>
<td class="p-4">-30% Cart Abandonment</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4"><strong>SDS London Ltd</strong></td>
<td class="p-4">B2C/B2B</td>
<td class="p-4">+61% Revenue</td>
<td class="p-4">+28% Conversion Rate</td>
<td class="p-4">-</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4"><strong>Bedre N&aelig;tter</strong></td>
<td class="p-4">B2C</td>
<td class="p-4">+67.5% Checkout Conversion</td>
<td class="p-4">A/B Tested Winner</td>
<td class="p-4">&nbsp;</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4"><strong>L&auml;derach</strong></td>
<td class="p-4">B2C</td>
<td class="p-4">+39% Revenue</td>
<td class="p-4">+47.8% Conversions</td>
<td class="p-4">93-99 PageSpeed Scores</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4"><strong>JYSK</strong></td>
<td class="p-4">B2C</td>
<td class="p-4">+20.1% Checkout Conversion</td>
<td class="p-4">+43.8% Transactions</td>
<td class="p-4">+58% Unique Purchases</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4"><strong>Huissteden</strong></td>
<td class="p-4">B2C</td>
<td class="p-4">+31% Conversion Rate</td>
<td class="p-4">+42% Organic Traffic</td>
<td class="p-4">+870% Page Load Speed</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4"><strong>Anonymous Merchant</strong></td>
<td class="p-4">B2C</td>
<td class="p-4">75% Avg. Performance Gain</td>
<td class="p-4">Checkout Score: 53 &rarr; 90</td>
<td class="p-4">SEO Score: 84 &rarr; 99</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4"><strong>Classic Football Shirts</strong></td>
<td class="p-4">B2C</td>
<td class="p-4">2.5x Page Speed Score</td>
<td class="p-4">350% FID Improvement</td>
<td class="p-4">Checkout Load Time Drop</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="MM85U1W"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="section-9">Finding Your Hyv&auml; Expert:<br>Why Partner with JaJuMa</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Finding an Expert</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>Specialized Skills Required:</strong> Hyv&auml; implementation requires deep expertise in its specific tech stack (Magewire, Alpine.js, Tailwind CSS) and Magento's core .</li>
<li><strong>Certification Matters:</strong> The official Hyv&auml; Partner program vets agencies for quality and expertise. <strong>JaJuMa is a certified Hyv&auml; Gold Partner,</strong> representing the top tier of the ecosystem.</li>
<li><strong>Why JaJuMa:</strong> Partnering with JaJuMa ensures your project is handled by certified experts with a proven track record of success and a deep understanding of the <a tabindex="-1" title="Learn More about Hyv&auml; in the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">entire Hyv&auml;verse</a>.</li>
<li><strong>Strategic Partnership:</strong> We offer end-to-end services, from planning and migration to custom development and optimization, ensuring you achieve the maximum possible ROI from your Hyv&auml; investment.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>Successfully implementing Hyv&auml; Checkout and the broader Hyv&auml; suite requires more than general Magento knowledge;</strong><br>it demands <strong>specific expertise</strong>.<br>For merchants, identifying and <strong>partnering with the right talent</strong> is the <strong>most critical step toward realizing the platform's full potential</strong>.</p>
<p>&nbsp;</p>
<h3>Why a Certified Partner is Essential</h3>
<p>The <strong>unique technology stack of Hyv&auml;</strong> means you <strong>need a team</strong> that is not just familiar with it, but <strong>deeply proficient</strong>. A <strong>top-tier Hyv&auml; partner</strong> possesses a specific blend of skills:</p>
<ul>
<li><strong><a tabindex="-1" title="JaJuMa-Shop | Customized Magento &amp; Hyv&auml; Shop-Solutions" href="/en/jajuma-shop" target="_blank" rel="noopener">Mastery of Magento 2:</a><br></strong>Deep knowledge of Magento's core architecture remains essential.</li>
<li><strong><a tabindex="-1" title="Explore our Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">Proficiency in the Hyv&auml; Stack:</a><br><a tabindex="-1" title="Hyv&auml; Theme Extensions for Magento 2 | JaJuMa-Develop" href="/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener">Proven, hands-on experience</a></strong> with <strong><a tabindex="-1" title="AlpineJS Website" href="https://alpinejs.dev/" target="_blank" rel="nofollow noopener">Alpine.js</a>, Tailwind CSS</strong>, and especially <a tabindex="-1" title="Magewire Github" href="https://github.com/magewirephp/magewire" target="_blank" rel="nofollow noopener"><strong>Magewire</strong></a> is non-negotiable.</li>
<li><strong><a tabindex="-1" title="Performance Optimization Extensions" href="/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">Performance Optimization Obsession</a>:<br></strong>A true expert knows how to maintain high performance, not just achieve it out of the box.</li>
<li><strong><a tabindex="-1" title="Expert Custom Magento &amp; Hyv&auml; Development: Crafting Your High-Performance eCommerce Future" href="/en/jajuma-develop" target="_blank" rel="noopener">Extension Integration Expertise:</a><br></strong>The ability to audit extensions, identify compatibility issues, and confidently develop compatibility modules is a critical skill for any real-world project.</li>
<li><strong><a tabindex="-1" title="More than 4 years experience as Hyv&auml; Early Adopter" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener">Strong Problem-Solving Skills:</a><br></strong>The ability to efficiently debug issues within the Hyv&auml; stack is crucial for long-term support .</li>
</ul>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div
                                class="flex-1 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 items-center justify-evenly justify-items-center gap-4 p-4 lg:p-6 mt-6 rounded-2xl shadow-md bg-[#deecfd]">
                                <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"
                                    title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                                    <svg width="744" height="216" viewBox="0 0 744 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z"
                                            fill="#000938"></path>
                                        <path
                                            d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z"
                                            fill="#0CF292"></path>
                                        <path
                                            d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z"
                                            fill="#0CF292"></path>
                                        <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z"
                                            fill="#0CF292"></path>
                                        <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z"
                                            fill="#0CF292"></path>
                                        <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                                        <path
                                            d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z"
                                            fill="#0CF292"></path>
                                    </svg>
                                </a>
                                <a href="/en/jajuma-develop/hyva-extensions"
                                    title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                                    <svg width="744" height="216" viewBox="0 0 744 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <title>JaJuMa Hyva Technology Partner official badge</title>
                                        <rect width="744" height="216" rx="24" fill="#F6F7FF" />
                                        <rect width="193.5" height="216" fill="#0A23B9" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                                            fill="#14FFAF" />
                                        <path
                                            d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z"
                                            fill="#0A144B" />
                                        <path
                                            d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z"
                                            fill="#0A144B" />
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                                            fill="#0A144B" />
                                    </svg>
                                </a>
                                <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"
                                    title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                                    <svg width="732" height="216" viewBox="0 0 732 216" fill="none"
                                        class="w-44 h-auto rounded" xmlns="http://www.w3.org/2000/svg">
                                        <title>JaJuMa Hyva Contributor official badge</title>
                                        <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                                        <rect width="193.5" height="216" fill="#0A23B9"></rect>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                                            fill="#14FFAF"></path>
                                        <path
                                            d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z"
                                            fill="#0A144B">
                                        </path>
                                        <path
                                            d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z"
                                            fill="#0A144B">
                                        </path>
                                        <path
                                            d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z"
                                            fill="#0A144B"></path>
                                        <path
                                            d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z"
                                            fill="#0A144B"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                                            fill="#0A144B"></path>
                                    </svg>
                                </a>
                                <a href="https://commercemarketplace.adobe.com/partner/JaJuMa"
                                    title="Magento Extensions by JaJuMa on Magento Marketplace" target="_blank"
                                    rel="nofollow noopener">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="185" height="28"
                                        viewBox="0 0 168.231 25.325" class="w-auto h-auto">
                                        <title>JaJuMa Magento Marketplace Approved & Verified extension provider badge
                                        </title>
                                        <path d="M18.988 8.872v10.967l-2.715 1.563V10.448L9.485 6.525l-6.792 3.923.017 10.959L0 19.839V8.881l9.503-5.486zm-8.141
        12.53l-1.353.788-1.362-.779V10.448l-2.711 1.567.004 10.959 4.064 2.351 4.073-2.351V12.011l-2.715-1.567z"
                                            fill="#ee6524"></path>
                                        <text xml:space="preserve"
                                            transform="matrix(.264583 0 0 .264583 -16.773798 -10.986446)" font-size="53"
                                            font-family="sans-serif" fill="currentColor">
                                            <tspan x="146" y="115">Magento <tspan font-weight="600">Marketplace</tspan>
                                            </tspan>
                                        </text>
                                        <text xml:space="preserve" x="50" y="14" font-size="8" font-family="sans-serif"
                                            fill="currentColor">
                                            <tspan x="35" y="6">Approved by</tspan>
                                        </text>
                                    </svg>
                                </a>
                                <div class="flex items-center gap-2">
                                    <a href="/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes"
                                        title="JaJuMa-Shop | Mage-OS Demo-Shop">
                                        <img src="/media/wysiwyg/badges/mage-os-contributor-badge.svg" width="80"
                                            height="60" alt="Mage-OS Contributor Badge" loading="lazy">
                                    </a>
                                    <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"
                                        title="Magento Development Services - Magento Association Bronze Member Agency"
                                        target="_blank">
                                        <img src="/media/wysiwyg/badges/mams-brz-badge-full.svg" width="50" height="30"
                                            alt="Magento Association Bronze Member Badge" loading="lazy">
                                    </a>
                                </div>
                                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"
                                    title="Hyvä Certified Developers" target="_blank">
                                    <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="70"
                                        height="70" alt="Certified Hyvä Developers" loading="lazy" />
                                </a>

                            </div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3>JaJuMa: Your Gold-Standard Hyv&auml; Partner</h3>
<p>While there are many agencies in the ecosystem, choosing a <strong>partner with proven, certified expertise</strong> is the safest and most effective path to success.<br><strong>JaJuMa is an official Hyv&auml; Gold Partner, Technology Partner, Core Contributor with Certified Associate Hyv&auml; Developers</strong>, certifications awarded by the Hyv&auml; team to agencies demonstrating the <strong>highest level of expertise, project success, and contribution to the community.</strong></p>
<p><br>When you partner with JaJuMa, you are choosing:</p>
<p><a tabindex="-1" title="JaJuMa Is Hyv&auml; Gold Partner" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"><img src="/media/wysiwyg/badges/hyva-gold-partner-badge.svg" alt="Hyv&auml; Gold Partner Agency - Official Partner Badge" width="312" height="224"></a></p>
<ul>
<li><strong>Certified Expertise:<br></strong>Our team includes <strong>developers with official Hyv&auml; certifications</strong>, ensuring your project is built according to the <strong>highest standards</strong> and <strong>best practices</strong>. We are not just users of Hyv&auml;; <a title="Explore the Hyv&auml; Ecosystem in our Hyv&auml;verse Guide" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>we are recognized experts within its core ecosystem</strong></a>.</li>
<li><strong>Proven Track Record:<br></strong>We have a portfolio of <strong>successful Hyv&auml; implementations</strong> that <strong><a title="A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp; JaJuMa)" href="/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" target="_blank" rel="noopener">showcase our ability to deliver tangible result</a>s</strong>, from <strong><a title="Showcase: 60 Days On Hyv&auml; - Project Rescue To Lightspeed" href="/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success" target="_blank" rel="noopener">dramatic performance improvements</a></strong> to significant conversion rate uplifts.</li>
<li><strong>Holistic Approach:<br></strong>As <strong><a title="Our Journey as Hyv&auml;nauts - Hyv&auml; Gold &amp; Technology Partner, Core Contributor and Certified Developers" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener">"Hyv&auml;nauts"</a></strong> navigating the <strong><a title="Learn More about Hyv&auml; in the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">entire Hyv&auml;verse</a></strong>, we see Hyv&auml; Checkout not as an isolated module, but as a key component of a<strong> <a title="Supercharge Your Magento 2 Performance: The Ultimate Guide To LCP Optimization (Luma + Hyv&auml;)" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener">holistic performance strategy</a></strong>. We provide <strong>end-to-end services</strong>, from initial consultation and <strong><a title="Hyv&auml; Migration &amp; Project Development Services" href="/en/jajuma-shop" target="_blank" rel="noopener">migration planning</a></strong> to <strong><a title="Custom Hyv&auml; Development Services" href="/en/jajuma-develop" target="_blank" rel="noopener">custom development</a></strong> and <strong><a title="More about Real User Monitoring (RUM) for Magento 2" href="/en/jajuma-develop/magento-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">ongoing optimization</a></strong>.</li>
<li><strong>A Strategic Partner:<br></strong>We don't just build websites; <strong>we build business solutions</strong>. Our process begins with understanding your goals and challenges, allowing us to <a title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>tailor a Hyv&auml; implementation that delivers maximum impact</strong></a> and a <a title="Magento Page Speed ROI Calculator: Quantify Your Lost Revenue &amp; Unlock Growth with Hyv&auml;" href="/en/blog/magento-page-speed-roi-calculator" target="_blank" rel="noopener"><strong>strong, measurable ROI</strong></a>.</li>
</ul>
<p><strong>Choosing the right agency is the single most important decision in your Hyv&auml; journey.<br>By selecting JaJuMa, a certified Hyv&auml; Gold Partner, you de-risk your investment and ensure your project is in the hands of proven experts dedicated to unlocking the full power of the Hyv&auml; platform.</strong></p>
<p>&nbsp;</p>
<p>
    </p><div class="post-list-wrapper blog-widget-recent">
        <h3 class="title"></h3>
        <ul class="post-list clearfix">
                                            <li class="post-holder post-holder-63">
                    <!-- post image -->
                    <div class="post-image">
                        <!-- img container -->
                        <div class="image-container relative block border-b-2 border-[#e5e7eb] flex-none overflow-hidden">
                            <img class="w-full object-fit feature-image" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Rosemarie-Schulz.jpg" alt="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp;amp; Success" loading="lazy">
                                                                                                                                                    <div class="w-full object-fit feature-image" data-original=""></div>
                                                                                        
                        </div>
                    </div>

                    <div class="post-header">
                        <div class="post-title-holder clearfix">
                            <div class="post-title">
                                <a class="post-item-link" href="https://www.jajuma.de/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success">
                                    60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success                                </a>
                            </div>
                        </div>

                        <div class="post-info clear">
                                                            <div class="item post-categories">
                                    <span class="label text-sm font-bold">Categories:</span>
                                                                            <a class="text-sm hover:text-primary transition-colors" title="JaJuMa-Shop" href="https://www.jajuma.de/en/blog/blog-shop">
                                            JaJuMa-Shop                                        </a>
                                                                                                        </div>
                                                    </div>

                        <div class="post-description clearfix">
                            <!-- post description -->
                            <div class="mt-2 line-clamp-3">
                                                                The world of ecommerce can sometimes feel like a roller coaster:
One moment your online store is buzzing with traffic and sales, the next it&rsquo;s down, leaving you in a state of panic.That&rsquo;s exactly what happened to one of our Magento clients:                            </div>
                        </div>
                    </div>

                    <div class="post-content">

                    </div>
                    <div class="post-footer">

                    </div>
                </li>

                                            <li class="post-holder post-holder-61">
                    <!-- post image -->
                    <div class="post-image">
                        <!-- img container -->
                        <div class="image-container relative block border-b-2 border-[#e5e7eb] flex-none overflow-hidden">
                            <img class="w-full object-fit feature-image" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Weihnachtsstollen.jpg" alt="A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp;amp; JaJuMa)" loading="lazy">
                                                                                                                                                    <div class="w-full object-fit feature-image" data-original=""></div>
                                                                                        
                        </div>
                    </div>

                    <div class="post-header">
                        <div class="post-title-holder clearfix">
                            <div class="post-title">
                                <a class="post-item-link" href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma">
                                    A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp; JaJuMa)                                </a>
                            </div>
                        </div>

                        <div class="post-info clear">
                                                            <div class="item post-categories">
                                    <span class="label text-sm font-bold">Categories:</span>
                                                                            <a class="text-sm hover:text-primary transition-colors" title="JaJuMa-Shop" href="https://www.jajuma.de/en/blog/blog-shop">
                                            JaJuMa-Shop                                        </a>
                                                                                                        </div>
                                                    </div>

                        <div class="post-description clearfix">
                            <!-- post description -->
                            <div class="mt-2 line-clamp-3">
                                                                Our delicious ecommerce recipe for a fast Magento launch starts with the finest ingredients: Magento, Hyv&auml;, and JaJuMa.
Magento provides the robust foundation, Hyv&auml; adds the speed and agility, and JaJuMa contributes the secret spices of expertise and optimization.                            </div>
                        </div>
                    </div>

                    <div class="post-content">

                    </div>
                    <div class="post-footer">

                    </div>
                </li>

                                            <li class="post-holder post-holder-67">
                    <!-- post image -->
                    <div class="post-image">
                        <!-- img container -->
                        <div class="image-container relative block border-b-2 border-[#e5e7eb] flex-none overflow-hidden">
                            <img class="w-full object-fit feature-image" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Supercharge-Your-Magento-2-Store-Luma-Hyva-The-Ultimate-_Guide-to-LCP-Optimization.png" alt="Supercharge Your Magento 2 Performance: The Ultimate Guide To LCP Optimization (Luma + Hyv&auml;)" loading="lazy">
                                                                                                                                                    <div class="w-full object-fit feature-image" data-original=""></div>
                                                                                        
                        </div>
                    </div>

                    <div class="post-header">
                        <div class="post-title-holder clearfix">
                            <div class="post-title">
                                <a class="post-item-link" href="https://www.jajuma.de/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization">
                                    Supercharge Your Magento 2 Performance: The Ultimate Guide To LCP Optimization (Luma + Hyv&auml;)                                </a>
                            </div>
                        </div>

                        <div class="post-info clear">
                                                            <div class="item post-categories">
                                    <span class="label text-sm font-bold">Categories:</span>
                                                                            <a class="text-sm hover:text-primary transition-colors" title="JaJuMa-Develop" href="https://www.jajuma.de/en/blog/blog-develop">
                                            JaJuMa-Develop                                        </a>
                                                                                                        </div>
                                                    </div>

                        <div class="post-description clearfix">
                            <!-- post description -->
                            <div class="mt-2 line-clamp-3">
                                                                For Magento 2 stores owners performance is a constant challenge. Truly excelling requires a deep understanding of key performance metrics, and among these, Largest Contentful Paint (LCP) stands out as a critical factor.                            </div>
                        </div>
                    </div>

                    <div class="post-content">

                    </div>
                    <div class="post-footer">

                    </div>
                </li>

                    </ul>
    </div>
</div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="IEYGRAQ"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h2 id="section-conclusion">Conclusion:<br>Strategic Recommendations for Your Business</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Conclusion</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li><strong>For Merchants:</strong> Hyv&auml; Checkout is a strategic investment in revenue growth. The proven lift in conversions and sales typically delivers a rapid and powerful ROI.</li>
<li><strong>For Developers:</strong> Hyv&auml; offers a modern, efficient, and more enjoyable development experience with a manageable learning curve, making it a smart career move.</li>
<li><strong>For Agencies:</strong> Specializing in Hyv&auml; provides a strong competitive advantage, offering clients a clear solution to major Magento pain points.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>The evidence leads to a clear conclusion:</strong><br>Hyv&auml; Checkout is not just an alternative to Magento's Luma checkout; it is a <strong>superior solution</strong> engineered to <strong>solve the most critical performance, user experience, and development challenges</strong> facing merchants today.</p>
<p>&nbsp;</p>
<h3>For Merchants</h3>
<p><strong>The decision to implement Hyv&auml; Checkout is a direct investment in customer experience and revenue growth.</strong><br>The data overwhelmingly demonstrates a <strong>powerful and rapid ROI</strong>, driven by <strong>higher conversion rates</strong>, <strong>lower cart abandonment</strong>, and <strong>improved SEO performance</strong>.<br>The primary considerations are the upfront license fees and the investment required for extension compatibility.<br>However, when weighed against the projected revenue uplift from a 15-30% (or greater) increase in conversions, <strong>the business case is compelling</strong>.</p>
<p>&nbsp;</p>
<h3>For Developers</h3>
<p><strong>For the Magento development community, Hyv&auml; represents the most significant and positive evolution of frontend development in years.</strong><br>Embracing its <strong>modern stack</strong> is a valuable career investment. It offers a <strong>more efficient, enjoyable</strong>, and productive way to build Magento stores, allowing developers to deliver superior results in less time. The learning curve is manageable, as <strong>Hyv&auml; intelligently leverages existing PHP and Magento knowledge</strong>.</p>
<h3>For Agencies</h3>
<p>Hyv&auml; Checkout is a powerful competitive differentiator. Hyv&auml; Checkout and Hyv&auml; in general allows an agency to offer clients a clear, data-backed solution to Magento's most persistent performance problems.</p>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="flex flex-col xl:flex-row justify-center items-center gap-4 my-16">
                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Discuss Your Hyvä Checkout Project with JaJuMa"
                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                        stroke="currentColor" class="w-5 h-5 mr-2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
                    </svg>
                    Discuss Your Hyvä Project with JaJuMa
                </a>
                <a href="/en/hyvaverse-guide" title="Explore Our Hyväverse"
                    class="btn btn-secondary flex xl:inline-flex items-center justify-center w-full lg:w-fit px-6 py-3 text-base font-medium rounded-md border border-primary-light text-primary hover:bg-primary-lighter focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                    Explore Our Hyväverse
                </a>
            </div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="WEODGRJ"><div data-content-type="text" data-appearance="default" data-element="main"><section id="checklist" class="mx-auto px-4">
<div class="bg-white border border-gray-200 rounded-3xl shadow-md p-8">
<h2 class="text-3xl font-bold text-gray-800 mb-2">Your Hyv&auml; Checkout Migration Checklist</h2>
<p class="text-lg text-gray-600 mb-6">Migrating to Hyv&auml; Checkout is a strategic project. Use this checklist to ensure a smooth and successful transition.</p>
<ol class="list-decimal list-inside space-y-6 text-gray-900 text-lg">
<li>
<div class="inline-flex items-baseline gap-2"><span class="text-xl">&#9744;</span>
<h3 class="text-xl font-semibold">Confirm System Requirements</h3>
</div>
<ul class="mt-2 text-base text-gray-700 space-y-1">
<li>Verify your Magento version is 2.4.4-p9 or higher.</li>
<li>Ensure your PHP version is 8.1 or higher.</li>
<li>Confirm you are running Hyv&auml; Themes 1.3.12 or newer.</li>
</ul>
</li>
<li>
<div class="inline-flex items-baseline gap-2"><span class="text-xl">&#9744;</span>
<h3 class="text-xl font-semibold">Budget for Licensing</h3>
</div>
<ul class="mt-2 text-base text-gray-700 space-y-1">
<li>Allocate &euro;1,000 for the one-time Hyv&auml; Themes license.</li>
<li>Allocate &euro;1,000 for the one-time Hyv&auml; Checkout license.</li>
<li>Budget for the &euro;250 annual support and update plan for Hyv&auml; Checkout (starts after year one).<br>OR</li>
<li>Allocate Buget for Hyv&auml; Commerce license/annual support and update plan.</li>
</ul>
</li>
<li>
<div class="inline-flex items-baseline gap-2"><span class="text-xl">&#9744;</span>
<h3 class="text-xl font-semibold">Conduct a Full Extension Audit</h3>
</div>
<ul class="mt-2 text-base text-gray-700 space-y-1">
<li>Create a complete list of all third-party extensions currently installed.</li>
<li>Identify which extensions are "must-haves" for your business operations.</li>
<li>Check the <a class="text-blue-600 hover:underline" title="Check the official Hyv&auml; Checkout Integration Tracker" href="https://www.hyva.io/hyva-checkout.html" target="_blank" rel="nofollow noopener">official Hyv&auml; Checkout Integration Tracker</a> for compatibility status.</li>
<li>Plan for alternatives or custom development for incompatible extensions.</li>
</ul>
</li>
<li>
<div class="inline-flex items-baseline gap-2"><span class="text-xl">&#9744;</span>
<h3 class="text-xl font-semibold">Select a Certified Hyv&auml; Partner</h3>
</div>
<ul class="mt-2 text-base text-gray-700 space-y-1">
<li>Engage an official Hyv&auml; Partner, like JaJuMa.</li>
<li>Discuss audit findings and define project scope.</li>
</ul>
</li>
<li>
<div class="inline-flex items-baseline gap-2"><span class="text-xl">&#9744;</span>
<h3 class="text-xl font-semibold">Plan the Implementation &amp; Customization</h3>
</div>
<ul class="mt-2 text-base text-gray-700 space-y-1">
<li>Plan the installation and configuration steps.</li>
<li>Define any needed customizations (e.g., fields, styling, mobile flow).</li>
</ul>
</li>
<li>
<div class="inline-flex items-baseline gap-2"><span class="text-xl">&#9744;</span>
<h3 class="text-xl font-semibold">Execute and Test Thoroughly</h3>
</div>
<ul class="mt-2 text-base text-gray-700 space-y-1">
<li>Install on a staging environment first.</li>
<li>Test checkout flow, payments, and shipping methods.</li>
<li>Perform user acceptance testing (UAT).</li>
</ul>
</li>
<li>
<div class="inline-flex items-baseline gap-2"><span class="text-xl">&#9744;</span>
<h3 class="text-xl font-semibold">Go Live and Monitor</h3>
</div>
<ul class="mt-2 text-base text-gray-700 space-y-1">
<li>Go live during a low-traffic period.</li>
<li>Monitor performance, conversion rates, and error logs closely post-launch.</li>
</ul>
</li>
</ol>
<p>&nbsp;</p>
</div>
</section></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="JB5EOXC"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="faq">Frequently Asked Questions (FAQ)</h2>
<p>&nbsp;</p>
<p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-625 .chevron::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkzIDcuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCAxMC41ODZsMy4yOTMtMy4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNGwtNCA0YTEgMSAwIDAxLTEuNDE0IDBsLTQtNGExIDEgMCAwMTAtMS40MTR6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PC9zdmc+Cg==);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-625 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 chevron">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-625 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>Is Hyv&auml; Checkout included with the Hyv&auml; Theme license?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>No. Hyv&auml; Checkout is a separate, standalone product and requires its own license. You must have a Hyv&auml; Themes license to use it, but they are purchased separately. The standard cost is &euro;1,000 for the theme and another &euro;1,000 for the checkout.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-625 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>Will all my existing Magento extensions work with Hyv&auml; Checkout?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>No, not automatically. Because Hyv&auml; Checkout is a complete rebuild with a modern tech stack, standard Magento extensions that modify the checkout will not work out-of-the-box. They require a specific compatibility module. It is essential to conduct an audit of your extensions before migrating.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-625 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>What is the main advantage of Hyv&auml; Checkout over the default Luma checkout?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>Performance. Hyv&auml; Checkout is dramatically faster, especially on mobile devices (up to 13x faster). This superior speed leads to better Core Web Vitals, improved SEO, lower cart abandonment, and higher conversion rates. It is also significantly easier and faster for developers to customize.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-625 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>Can I customize the look and feel of Hyv&auml; Checkout?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes, absolutely. Hyv&auml; Checkout is highly customizable. Developers can easily change the styling using the Tailwind CSS framework. Merchants also have the flexibility to choose between different layouts (e.g., one-step vs. two-step) and even create a completely different flow for mobile users, all from the Magento admin panel.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-625 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>Is Hyv&auml; Checkout secure and PCI compliant?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p dir="ltr">Yes. Hyv&auml; Checkout is being built to comply with the latest PCI DSS 4.0 standards, which become mandatory in 2025. It enforces a strict Content Security Policy (CSP) to protect against common attacks, ensuring customer data is handled securely.</p>
<p>&nbsp;</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-625 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>What happens if I don't renew the annual support plan for Hyv&auml; Checkout?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>The support and updates plan (&euro;250/year after the first year) is required to receive new features, security patches, performance enhancements, and new integrations. If you don't renew, you can continue to use the version you have, but you will not receive any further updates.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    </div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div></div></div>]]></description>
              <pubDate>Wed, 18 Jun 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa-Shop]]></category>
           </item>
       <item>
      <title>Hyvä Commerce: The Ultimate Guide to Magento&#039;s Next Evolution (Powered by JaJuMa Expertise)</title>
      <link>https://www.jajuma.de/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store</link>
      <guid>https://www.jajuma.de/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=CQABFAP],#html-body [data-pb-style=RUCNB6E]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=RUCNB6E]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=CQABFAP]{align-self:stretch}#html-body [data-pb-style=G39RKGI]{display:flex;width:100%}#html-body [data-pb-style=G29JAMT],#html-body [data-pb-style=S55MQL4]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=Y77A0U5]{border-style:none}#html-body [data-pb-style=JQ8D0WO],#html-body [data-pb-style=R1HHQ1C]{max-width:100%;height:auto}#html-body [data-pb-style=LJF5568],#html-body [data-pb-style=RJGXCGG],#html-body [data-pb-style=ST8DWO5],#html-body [data-pb-style=UU3J31T]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=XFKYTS2]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=JEGO3FB]{display:flex;width:100%}#html-body [data-pb-style=J5HEU0H],#html-body [data-pb-style=UOW0RJ2]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=J5HEU0H]{align-self:center}#html-body [data-pb-style=CXQPH82]{border-style:none}#html-body [data-pb-style=IBTIP2Q],#html-body [data-pb-style=SQR04FN]{max-width:100%;height:auto}#html-body [data-pb-style=C14N9XX],#html-body [data-pb-style=DRS3BJR],#html-body [data-pb-style=GMN30VS],#html-body [data-pb-style=OWBVQ8M],#html-body [data-pb-style=P2H4ANY],#html-body [data-pb-style=WDYIURK],#html-body [data-pb-style=XRNC4O6],#html-body [data-pb-style=YTGPXDQ]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}@media only screen and (max-width: 768px) { #html-body [data-pb-style=CXQPH82],#html-body [data-pb-style=Y77A0U5]{border-style:none} }</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="RUCNB6E"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="CQABFAP"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="G39RKGI"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="S55MQL4"><div data-content-type="text" data-appearance="default" data-element="main"><p>Is your <strong><a title="JaJuMa-Shop | Your Online Shop with Magento 2" href="/en/jajuma-shop/online-shop-with-magento-2" target="_blank" rel="noopener">Magento 2 store</a></strong> struggling with the performance limitations of Luma, a cumbersome admin experience, or content management that feels a decade old? You're not alone. Many <strong><a title="Magento Metropolis: The Ultimate Guide to Magento | JaJuMa" href="/en/magento-metropolis-guide" target="_blank" rel="noopener">Magento</a></strong> Open Source merchants and developers are seeking a robust path to modernize their platform without the complexities of a full replatform.</p>
<p>&nbsp;</p>
<p>Enter <a title="Hyv&auml; Commerce Product Page" href="https://www.hyva.io/hyva-commerce.html" target="_blank" rel="nofollow noopener"><strong>Hyv&auml; Commerce:</strong></a>&nbsp;a new, comprehensive <strong>product suite </strong>from the creators of the acclaimed Hyv&auml; Theme<strong> designed to be the next evolution for your Magento store</strong> (Open Source and Adobe Commerce),<strong> </strong>by providing significantly enhanced<strong> store performance</strong>, <strong>backend usability</strong>, and <strong>content management</strong>.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="G29JAMT"><figure class="md:ml-4 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="Y77A0U5"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hvya-commerce-the-next-evolution-for-your-magnto-store.png" alt="Architectural overview of Hyv&auml; Commerce, showcasing its key components enhancing Magento 2 for performance and usability" title="" data-element="desktop_image" data-pb-style="JQ8D0WO"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hvya-commerce-the-next-evolution-for-your-magnto-store.png" alt="Architectural overview of Hyv&auml; Commerce, showcasing its key components enhancing Magento 2 for performance and usability" title="" data-element="mobile_image" data-pb-style="R1HHQ1C"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p><strong>Hyv&auml; Commerce strategically bundles</strong> the renowned <strong><a title="Top 10 Reasons for Hyv&auml; Themes" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Theme</a></strong>, the streamlined <a title="Hyv&auml; Checkout: Boost Conversions with Hyv&auml; Checkout" href="/en/blog/hyva-checkout-guide" target="_blank" rel="noopener"><strong>Hyv&auml; Checkout</strong></a>, and the versatile <strong><a title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">Hyv&auml; UI</a></strong> component library with a suite of <strong>powerful admin-side and content management features features.</strong> These include a modern <strong>CMS</strong> with live preview, a customizable <strong>admin dashboard</strong>, an integrated <strong>image editor</strong>, and advanced <strong>media optimization</strong> tools.</p>
<p>&nbsp;</p>
<p>This transformative suite aims to&nbsp;<strong>simplify store management</strong>, dramatically <strong>accelerate development</strong>, <strong>conquer&nbsp;Core Web Vitals</strong>, and ultimately <strong>boost your conversion rates.</strong> It offers a <strong>compelling, future-proof <a title="Magento Metropolis: The Ultimate Guide to Magento | JaJuMa" href="/en/magento-metropolis-guide">modernization path for all Magento merchants</a>.</strong><br><strong><a title="JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener">As an official Hyv&auml; Gold Partner, Technology Partner and active Core Contributor</a></strong>, JaJuMa isn't just observing this evolution - <strong>we're helping to shape it</strong>. This definitive guide, <strong><a title="Learn More about Hyv&auml; in the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">part of our central Hyv&auml;verse knowledge base</a></strong>, draws upon our deep, hands-on expertise. We provide expert Hyv&auml; Commerce implementation, develop custom<strong> <a title="Hyv&auml; Extensions" href="/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener">extensions</a></strong> (like our <a title="Ultimate Image &amp; Media Optimization For Magento" href="/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a> and <a title="More about Power Toys for Magento 2" href="/en/jajuma-develop/magento-extensions/power-toys-for-magento-2" target="_blank" rel="noopener">Power Toys</a> that often preempt features on the official <a title="official Hyv&auml; roadmap" href="https://www.hyva.io/blog/news/hyva-roadmap-2025.html" target="_blank" rel="nofollow noopener">Hyv&auml; Commerce roadmap</a>), and offer tailored <strong><a title="JaJuMa Hyv&auml; Services" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; services</a> to ensure you maximize every benefit Hyv&auml; Commerce has to offer.<br>Dive in to discover how.</strong></p>
<p>&nbsp;</p></div><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb82-absolute {
position: absolute
}
.cmsb82-relative {
position: relative
}
.cmsb82-bottom-0 {
bottom: 0px
}
.cmsb82-left-0 {
left: 0px
}
.cmsb82-z-\[1\] {
z-index: 1
}
.cmsb82-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb82-my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.cmsb82-ml-4 {
margin-left: 1rem
}
.cmsb82-flex {
display: flex
}
.cmsb82-inline-flex {
display: inline-flex
}
.cmsb82-grid {
display: grid
}
.cmsb82-hidden {
display: none
}
.cmsb82-h-10 {
height: 2.5rem
}
.cmsb82-h-auto {
height: auto
}
.cmsb82-w-10 {
width: 2.5rem
}
.cmsb82-w-8 {
width: 2rem
}
.cmsb82-flex-shrink-0 {
flex-shrink: 0
}
.cmsb82-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb82-flex-row {
flex-direction: row
}
.cmsb82-items-center {
align-items: center
}
.cmsb82-justify-center {
justify-content: center
}
.cmsb82-gap-2 {
gap: 0.5rem
}
.cmsb82-gap-8 {
gap: 2rem
}
.cmsb82-overflow-hidden {
overflow: hidden
}
.cmsb82-rounded-lg {
border-radius: 0.5rem
}
.cmsb82-\!bg-\[\#EE682F\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(238 104 47 / var(--tw-bg-opacity)) !important
}
.cmsb82-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb82-py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.cmsb82-pt-4 {
padding-top: 1rem
}
.cmsb82-text-center {
text-align: center
}
.cmsb82-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb82-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb82-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb82-font-bold {
font-weight: 700
}
.cmsb82-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb82-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb82-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb82-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb82-duration-300 {
transition-duration: 300ms
}
.cmsb82-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb82-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb82-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb82-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb82-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb82-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
@media (min-width: 640px) {
.cmsb82-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
}
@media (min-width: 1024px) {
.cmsb82-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb82-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.cmsb82-lg\:gap-4 {
gap: 1rem
}
.cmsb82-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb82-lg\:text-\[20px\] {
font-size: 20px
}
.cmsb82-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div data-cacheable="false">
    <hr>
    <p class="hyvaverse-main-cta-subtext cmsb82-text-center cmsb82-my-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
        Find all you need to know and more valuable insights about Hyv&auml; and Magento.<br>
        Expertly curated by JaJuMa:
        <br>
    </p>
    <div class="hyvaverse-main-cta-container cmsb82-text-center cmsb82-grid cmsb82-grid-cols-1 cmsb82-lg:grid-cols-2 cmsb82-gap-8">
        <div>

            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">        
                <span>&#128640;</span>
                <span>Launch the JaJuMa Hyv&auml;verse</span>
                <svg class="cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10 cmsb82-ml-4 cmsb82-lg:ml-6" height="210.000000pt" preserveaspectratio="xMidYMid meet" version="1.0" viewbox="0 0 245.000000 210.000000" width="245.000000pt" xmlns="http://www.w3.org/2000/svg">

                    <g fill="#402b05" stroke="none" transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)">
                        <path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
                        <path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
                        <path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
                        <path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
                        <path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
                        <path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
                        <path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
                    </g>
                </svg>
                </div>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Hyv&auml;.
            </p></div>
        <div>

            <a class="btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-white cmsb82-!bg-[#EE682F] cmsb82-overflow-hidden" href="/en/magento-metropolis-guide" title="Explore the Magento Metropolis!">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">
                    <svg class="cmsb82-drop-shadow-lg cmsb82-w-8 cmsb82-h-auto" fill="none" height="24" viewbox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect fill="url(#pattern0_413_38)" height="24" width="22"></rect>
                        <defs>
                            <pattern height="1" id="pattern0_413_38" patterncontentunits="objectBoundingBox" width="1">
                                <use transform="matrix(0.00329268 0 0 0.003 -0.317073 -0.311111)" xlink:href="#image0_413_38"></use>
                            </pattern>
                            <image height="500" id="image0_413_38" preserveaspectratio="none" width="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRFAAAA/////////v7+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v////////////7+///////////////////+///////////////////////+///////////////////////////+/////////////////////////////////v///////////v///v///////////////////////////////v///////////v///////////////v///v///v7+/v//ZZGWUAAAAFp0Uk5TAAUS/wwBBg8YAgMHGiMKCRMiHw0EERUIIRkdHBcQCxYOFB4gGyG6tv+yjO3//7E1h9uw/OSbTSnA8qA5i/GvuDFfyf/i9qmg9S9rZEpq6eJR5jjGKG0bIiAVGb/2kAAAFSlJREFUeJztnduPHEcVh3t2PbFnfVs7vq0vWSdxkFAkeCPhASFeyANISNz+zAghEA9IwAOKhABFQgSJWzAkcRKHODcnjoO9y86tZ7qnu+t2qs6pOr/vwXGSmZ6e/qarq06dOjWqgDpG3CcA0gPpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hWiVPpoNKr/9j/WM+FAm/QnOiWPD7cepD8XNnRJ3x76n8c/S3Ua3OiRfnJkvJl3Rh+nOBN2tEgfbdm97tRHcc9DBDqkHzu0f+3pD+OdhxA0SJ984fb6A4efSJaUL318yv1BXXgjX7z0k5/7vOvsPerzkETh0m37b5tM7lOehyzKlu7SgdvgMdlpSKNk6U+G9sNLfbSXK33nIcFBnigyOlus9NM0QdUiH+2FSj/+iOxQI7pDSaFI6Rc+ID1ccT26AqW7BuAsKEx7edIvxoir7L4f4aBslCb9bKyO14lPIx2YgcKkE/XZOymnjS9J+vhc3Eb4ybtRD5+OkqQPJkORUEisphjpEfrsXZz7b5KPiUsp0qN14NpceDfRB0WkDOnJlE/ZTtOmRKQE6eMn30v7gbk/2guQvpe+U515Yk320s/wBE2yDtFlLt0/HSqYjPvxWUufHHIuPrz8Qa6P9pylM7XsK3Kdas9Xul9uMzEns1z8lq30a+9wn8GMvTe5z8CDTKXvfsJ9BjXjx9lVNchTevypFReym3PNUbos5VMyG77lJ/2yxAucV4cuN+mM0ZhhLr3NfQb2ZCb9xh2iAx1brn8Z71LF0fN5tGcl/TrN3bSZ40j0W8pFe0bSiZYwHOtc43aO5KF87T8UR4lOPtJp+uz9/ewtkkuRhfZcpAetNK8Z7G2RLHOtzmxLHF00yUP6+IDkMKZnLpF22pV0EchBOlGiq03ewz5JKF367FsG0mketoeWjcUJkki67ORJ8dKDa4jMsS/8SjNI2Dku+NEuXDpRy+5249F8qG3TwoBs6TRtrXOEdLxF8lC+cZviKBGQLJ0ozu4VJ6OJCggN0cmVThSA8531JPrFiVwXIVY6TQpcSAt78w2KM7hKchRahEqnmTQPrQdGM8Ejb9QuUjpRAC48s4HoESOtjZconaaGCE27SvNo3/lcVPKkPOk0Uys7j6juLppho6g2Xpp0omgM6c5LV0nqEAiKzAqT/jTJdPR54vXqT5CMty+/J6WNFyWd5gEaY/E4jXYpITpB0id7/6Y4TJxtd8aXSYZvMvYEkiOdZpwWsQ4QSWR2LGHZpRjpJJf0+t2YI2KaIKGA3T2FSKe5zaMHQS5RFB3hXwMlQ/pTbxEcJEXJ3slxguWy3UnYCREhnWJq4wrF78YCilkB6iGlKxKknw/fFOnSh+nC2wQB+af+RXAe/giQThDnTBzkvBJ8p/K28PzSn70degSGnlFwqjRrUJZdenghEZacpOCuJ6d1bunBztnS0EKLEDPmzzFLD413cBZ3Co0tbLHNv/BKD5xIZa/nFRRGTDXI3IRXeljsVcD+t0GPdrbZF1bpQVuoCckpDxm1c30FTukht8l4i3/eYs7OVe9IC9fuvZzSAxp3Ibf5Au8vwvQ1GKX773wsrmqbdz1qHut80r1HPKdpFi/T4jnpyjO5zifdM7v97ANhKwcW+G04cPOf5CdiAZ90vwchfwZCL14Va1jadzbpXvFXcQ/zJh7aWUoXsEn3udFl9dm7cC89yfGduKR7VA8SqHzy8Oq9VtfENQuIYxtPLunON3qdJzF+tP/ZtKvMH4QdnZufwqUHDw5XkwiO8wnXSZL93chEem14PYrH/IRvZn+spWW6aWdowJiku12Xi+8vhkPtRyZfJsJmLaL12oQuDy890p1u9FUEY/NtTA/6rshS41SesW61GVJj5UtfLy7Q8TaOmi6dQ7NWoNB+yWP63y2PdIf5yMaqlc77J/lF6x6XbWTk2mZ8apFuPZxt5cb0XMekiUd980Sbld4tn+xapN+ynIJud9T6npQJFw/0Ppg6ns126+3TR5Z5pFs+0jcWJPZ3jxLtZz504heq+4etSI1Vxmz68Ixk6dN2z34uLkEr6VKRen46pyymBNPXIBIsfRrucCn7UY/mI+GW9HFxvgGwxTdNX5RErvTZc9qtvljMhtI55+Ox7dvST7TJlT67aK7LSKJpd1+zuGijzPWy9l93P50wxEqfB9bdV8BEqUbhs73EQrrFHHvyMZtY6fMr4bHsiX7hiF8dgqVK82gd0pevmI/Qveq30c6+TSZ+c7j1mRu/LKQvWATZPIv2EV5G772iIL2F8Tosw6/elRqJHu0BFWYgvYX1dfBfykyy6WnIAstapTElHtLnhEsnGL6FFUyoVRq/A6TPoZAeeDVDaw6sPtz0bSF9zvI6BFZtC4h7BJcthfQWpstQl80NLezi28Z7r0hcAektTJehnh8Plu41aif4VEjfwHQZ6nwzgjvOfddN/zXU60B6C9NlqCeeSCoFu0Vmg2qirAHpLRJLd6jpQ7QTW7Wu0pQODekzyKXbXlmafXVbH7h31/aViRAuneKZvmCvvdRwE5rdVResVJqm1CF9RgzpxiWPRFvCLVmpNCV8Q/qMONIHcxAnx4jLv6xUmhoQSJ8RS3r/BabrPGx+kunYOqQbw9oROnJLOiOzNHvtNVkd0vTL1SHd+PSMKL1r+EYTjWmxUmmaQID0GfUSoRjS25nm7nVirFipNE0VQvqMWjrNvtqbrF1nwqF5z0dA+hRjWnC96Nwn99iOycFncZ7lSyC9iQTp0VmpNP20dEg3BrjrHawgPQbCpZMGRtMC6a0PNS3Wr6VHGUylAdJbHwrp3a9MhHDpkcbQKVipND3NIH0GpEeFRbpxeFyHzKhylxhYfUfTCBXSZ0B6VFikG9et1NK914zys1JpijrrkG5ct1JLD99zmQ1Ib2KcO6urwpkrtogF0psYg6u1dM+drySwUmnKGUm+vTKLdONsZlnSTd83Sm2kIWRKrxMY97k3y/bHXnryHflkSq/LSKiQnrwiMKTHwl76CeqUXxPCpV93XXEqB3vpyfedkim9XlOuQnryXacgPRb20kkKYbkgU3rd4KmQnmiDghWQHgt76ck3nBIu/UTqYBUd9tIT7kAzR6b0uiaUCunJg+/CpZuKOAgG0ptAeu9LkyBTeh2jgvQYCJdus8WVUCC9CaT3vjQJwqXb7s8pEEhvAum9L02CTOn1xrqQHgNIjwWkN4H03pcmQab0ugDUtXcin0o8IL2JvfSryfcWJwPSm0B670uTAOmxgPQmRul1UjCkxwDSYwHpTSC996VJkCm9XugD6TGA9FhAehN76RkHZ9YWIEN6peROh/QmRun1im1IjwGkxwLSm0B6E0ifUl8wSI8BpMdirZIMpFeQ3gbSp0B6VGRKr68CpMcA0mMB6U3spZv2mxcMpDeB9CaQPgXSowLpsVgr/gnplYv086nr6tEB6U2ylX7uU9PWwCsgvUkc6Y+Nu4QEMi3yZ9w8sgbSm0SRvvemxd5fAey/PvuH9c7bkN4kSkduXncx2o68yyXzkO5JFOnLCqtRgnir+n7W0tequEN6FUl6vRtEhDbeQaDPeyB9in/zPv8r7cZe2+tddkj3JLb0arJHF9Q53G6UKoV0T6JIrzfwm2Hc78+W9gYrkO5JAukWO/7ZsLnTBqR7EmWcfqy9ja1pX1sLOnZMg3RP0kgP1t65SZ619LqwAqTPiCK9c3+EgFm6y3c6/zOke5JOuvfGnT3K40hPvdmqcOnP3rY+aN9OKMcOu//7IP27ZllLXxvdQ3qVWHpVnXHd4XBodzxI9ySx9OoJt4fmhaHoPaR7klq6eQvzNQzb3UK6J+mlVztX7PrxFz8ybCsA6X6Ybzsf6effC/3Uymb/ekj3g0f60bU1fdlDi98Fhmx+cEk3XP2LVkWNIN0PB+kOwRkb6dXZ+73/a9su0TVG7B3Sp9TSHYr8W0nvbeNP2I7lY+TIQfqUWvrxR0Mva2ApvbMfv/ux9WW3lu5QfkSD9ImxIa2lm19aYyt986C9cfYurKU7VIyE9CmrC2Z9jd12IZ/sLFKln7nzhdsVtz2h9SAgpLtJt7eeaOt5y/OZrPcYId1RunWymyzpDY+Q7tSRq+zXrIiSftCYz4V0V+m2PfiOdKkYWElvzdNBurN0yzQIQdLbjQ6ku0u3G7jJkb4R6IH0yqXe+xKLVYlipG/O1EF6ZXHhNvOVzK2DEOnLxbNrGJddQPqUrp64aWJUhvSNNsr8FqRAz5l0ToYNv02C9O6MSkifYn4udl+GwZXn/NK7f6oW4SVIn9F3Gfbu9r6FPTjTl2plzglQId18GaZVgzrpH73Zz7IF0Sd9t3cljf9PPBYs0i3qcvVfh76b3SbBjYAehf2J0+aAYqKf6woW6RY//qEFB09vjooqXun9t7lNBRxzCi4xUqUPNnmdS5BPxyom1qTr1IdyrQK/ahTESm8XlmjSEY5nkz608q26eM98SCXSbWq9DYepNpanPXuXSfrged60GFIkGmuuwSPdat7McAO0rv6teyl778/9ffGv48F6tMblFVOsE3HJ4JFuNytt6ODMu8XLy/+l+ynH6c9V848dfgjZFa9MHXmXLX14zfARz5wYjUZ/mf/9+b+mjMg9V82sD/qyXSmb/JHOJd2ygvb+G8N3wclbo9Gf5n/96mtJpZ88+rndvT3wOuvF0b1xqHgwSbdOcj0wPf1f+MP8n6mkv/j76Z9fG43+PBhWtF+lkf5GFy+9e7JynckXXx+9Un35/O/SSP/mb6d/fuPVQeUupS8USXeoA2McgJ88uu+q/yWS/pXXqm/9elHwvw+XQmYDwbxocEl3uNXNF2a8e3N39Mc0V++l0Z1rvxkcVjisv6s4+u6M0m+4LCAztoH7z49+ab/sLYTvjl4d7nm5/JorltadT7rjxelJUBDHFccQEYdzRukORSZmDIa4heC8X5Rd9Qtq+KQ7VPlakHwK0hH3b2QcmsSBT7rVZEST058y9HpsmZzoLS3ayxnrXd5IYZTu2uWZwnNn2OC1lQTLE51XunPN1iN2jlPt00GK3+4h/WWH48Ipvbrm042xrAKVlNNeDdAVig1HfGCV7tPAV/K0d+fsmWFq3LmlO5ZnXnLpbeLzCMJ352e+3y6vdMeQ5Yqn/0F7Hv4MLL8YxpQsEBFm6Z4NfMUTs+7A+/yfsi+LSA63dI+AxhIBsRpv5amy9Lvhln5k/Ts/93wrW0dogWePZAbrubNLr8Yvbf/M972cbfxAbWEj1+m2gvWBX3q18+3RT33fy9cbcpsabsL5PJ8iQHpVfX/0E+/38gRmfYfmM4x5f7ERIX38vdf+5v3m8x8mb+Mtc3l7SL+4oY0I6UcN3gsv+795eMUBPXZrGHoYXhKTBiHSqwsv/sL/zUlnYcJ2ZufIg9xAinSf6fU10t0//kPzIwxZtKmQIz1o2JuqH+8ddJ3B3oNbIEi65164NfHjHWEtO9fs+SaipLvs3tFB5LIEk2Mho8Obd/ijxktkSQ8dDcUctNvWne9GVA6ANOmBcY9omYZhLTt3CK6FPOmBHeSOgrwEBA3NJcwHNpAoPbCNp29JfVM95shbpSFSumWxlj6os6lKGJo3ECrdM1N2CeXo6FzQsbjn/DsRKz1ovpruMWos0D+InKF5A7nSq2r3k4A3kwzaw+IGyWu+2iJZeuA1D+7QjbeDJm35p1D7EC3dqpzuAGEP1LDnS/o6kPYIl350v4TcbQGF/8OGjVfuysjQ7ka89MARk29gNizoKi0a0yID6WEh0MljDwFhT5VRUCwnATlID5zGds+TvhUSKmcqNOBCHtIDn7Bura1NifZ++vf1kEMm0gOzqVxmYYK6ECJS4IxkI70anwu5oJbZVONLIdHfG29J7rOvyEd6YPfKqhBdwHLKSuJ0Wg85SQ/MnTQuIGMOAKYjL+lRB+0+dY9WCB+aN8hNeqD2/uFbWNBV5AxqL/lJDxtSjQ+6WuHxTpByWTVwzGQoPTQ/fnNYtR+0o0YG0ZgWWUp3L7zbYu/hB1vbRw/hydbDg8tBi1Yy6rOvyFN6uHYqGGtE+ZOr9MD1JlRkNE5bI1vpofF4CvJUnrX0wETpYPbezSPouknW0gMH7WHkFI1pkbl0tg5dnNVTichdOk8bfzZoyp2d/KVXk7Op88vl7i9hRwHSQ7MYXRG6bMWBIqSn1J71w3xBIdKrnURrCzIMum5SivQ0sZoSbvOqJOmhi4otyHho3qAk6ZFjNTkkN9tRlvTAQiFDXA4o9S2NwqSH1nTsJa98KAPFSQ+sNtpNIR24JeVJD9t0oQvmzTfoKVF6YAJ7m3I6cEuKlE45+ZZ6B4EUFCr9qE0mSUve+TzXRIkhipUeuC5tjpQC7cSUKz1ce4kt+4ySpVfVqZC4qZDdXCNQtvSAwGxR0ZgWpUuvLnmVMpg8LPY2rxRI97rZS77NKxXSnUuSsW5znQIN0h1rORd+m1dapNsvav/Br4oLum6iRbrdNMwPXy65/1ajR3pVnbwwWHzgR6+8rUK5LunVUJCuiDRXS5RJP2L86PTDydqeET9++fL7B4VkPFqiTzqAdI1AukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hXyfy89l0B+7GqqAAAAAElFTkSuQmCC">
                            </image>
                        </defs>
                    </svg>
                    <span>Explore the Magento Metropolis!</span>
                    <svg class="cmsb82-drop-shadow-lg cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10" fill="none" height="24" viewbox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.7998 15.5999H15.5998V14.3999H13.7998V15.5999ZM15.5998 17.9999H13.7998V16.7999H15.5998V17.9999ZM13.7998 20.3999H15.5998V19.1999H13.7998V20.3999Z" fill="white"></path>
                        <path clip-rule="evenodd" d="M5.4 0L15 3.6V12H17.4C17.5591 12 17.7117 12.0632 17.8243 12.1757C17.9368 12.2883 18 12.4409 18 12.6V22.8H18.6C18.7591 22.8 18.9117 22.8632 19.0243 22.9757C19.1368 23.0883 19.2 23.2409 19.2 23.4C19.2 23.5591 19.1368 23.7117 19.0243 23.8243C18.9117 23.9368 18.7591 24 18.6 24H0.6C0.44087 24 0.288258 23.9368 0.175736 23.8243C0.0632142 23.7117 0 23.5591 0 23.4C0 23.2409 0.0632142 23.0883 0.175736 22.9757C0.288258 22.8632 0.44087 22.8 0.6 22.8H1.2V10.2C1.2 10.0409 1.26321 9.88826 1.37574 9.77574C1.48826 9.66321 1.64087 9.6 1.8 9.6H3V5.4H4.2V9.6H5.4V0ZM16.8 22.8H15.6V21.6H13.8V22.8H12.6V13.2H16.8V22.8ZM5.4 10.8H2.4V22.8H5.4V10.8ZM8.4 5.4H7.2V6.6H8.4V5.4ZM9.6 5.4H10.8V6.6H9.6V5.4ZM13.2 5.4H12V6.6H13.2V5.4ZM7.2 7.8H8.4V9H7.2V7.8ZM10.8 7.8H9.6V9H10.8V7.8ZM12 7.8H13.2V9H12V7.8ZM8.4 10.2H7.2V11.4H8.4V10.2ZM9.6 10.2H10.8V11.4H9.6V10.2ZM13.2 10.2H12V11.4H13.2V10.2ZM7.2 12.6H8.4V13.8H7.2V12.6ZM10.8 12.6H9.6V13.8H10.8V12.6ZM8.4 15H7.2V16.2H8.4V15ZM9.6 15H10.8V16.2H9.6V15ZM7.2 17.4H8.4V18.6H7.2V17.4ZM10.8 17.4H9.6V18.6H10.8V17.4ZM8.4 19.8H7.2V21H8.4V19.8ZM9.6 19.8H10.8V21H9.6V19.8Z" fill="white" fill-rule="evenodd"></path>
                    </svg>
                </div>
                <svg class="cmsb82-absolute cmsb82-left-0 cmsb82-bottom-0" fill="none" height="51" viewbox="0 0 435 51" width="435" xmlns="http://www.w3.org/2000/svg">
                    <path d="M521.149 66.6131V52.8942H518.576V49.1462H515.839V45.6486H506.218V49.1462H503.825V52.8084H502.489V39.4329H495.519V52.6368H491.445V45.5699H489.304V40.9636H484.482V45.4841H475.443V41.9864H465.053V44.9691H462.431V24.0116H451.869V39.7762H444.856V52.4651H440.523V49.7399H436.758V34.2328H431.074V47.9517H426.742V19.0691H424.6V14.5343L423.171 7.05972H421.777V0H421.058V7.05972H419.578L418.242 14.6774L418.234 14.7131V18.8975H416.524V46.5069H410.359V49.9116H408.254V41.0494H400.178V49.0604H395.895V57.4934H394.221V51.5281H391.484V35.5132H389.256V33.0455H384.686V35.5132H382.287V39.2612H378.902V34.2328H370.733V39.4329H365.258V43.095H363.066V38.1525H360.752V35.6848H355.155V38.0667H353.229V52.6368H350.614V38.7104H345.994V33.9825H338.722V41.1352H334.562V37.8164H323.317V60.4332H321.341V40.8777H318.388V25.4207H316.204V21.8372H314.156V18.1321H312.741V11.9736H312.022V18.1321H310.607V21.5797H309.069V25.4207H306.755V40.4986H304.01V27.3662L301.208 20.7572L298.413 27.495V35.8994H292.507V45.9919H290.021V25.4207H280.184V42.7946H277.231V57.1143H275.384V34.1041H273.2V30.5277H271.404V26.0573H268.113V30.399H266.187V34.1041H264.262V62.7364H261.388V29.1258H254.504V36.021H251.12V33.0884H245.214V26.1861H234.867V37.9451H232.373V29.2546H225.239V37.3013H222.745V26.0573H220.432V22.6025H214.453V26.0573H211.371V33.9825H209.007V26.5652L203.769 18.3324L198.718 26.2218L198.66 26.3076V29.8912H196.814V25.9285H189.42V28.103H187.954V24.0116H182.228V27.588H180.561V44.2037H178.966V32.1872H170.932V35.7707H161.434V38.3242H157.015V34.7478H153.551V30.5277H143.327V37.6876H141.609V34.7478H135.373V47.401H133.389V30.5277H130.824V20.8144H122.791V44.4612H120.169V23.7541H110.461V30.2703H103.276V34.4904H100.582V39.9836H98.2177V28.3533H87.8709V34.3616H85.2986V45.9919H81.6557V41.6502H79.4714V26.5652H72.3364V41.264H68.2264V50.212H65.9918V37.8164H59.3167V18.6471H47.5545V42.0293H44.4792V52.0002H42.7547V31.0427H36.0006V44.59H33.2558V29.7624H23.6779V37.4301H20.7247V50.9773H18.8781V47.1435H15.537V27.7167H4.42142V47.5297H1.67665V40.7561H-0.37833V37.5589H-11.3718V40.2411H-13.8076V64.3958H-21V83H525V66.6131H521.149Z" fill="#9B3205" fill-opacity="0.5"></path>
                </svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Magento.
            </p>
        </div>
    </div>
    <br>
    <hr>
    <style>
        .hyvaverse-teaser-shine {
            position: relative;
            overflow: hidden;
        }

        .hyvaverse-teaser-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: teaser-shine-move 6s infinite;
            pointer-events: none;
        }

        @keyframes teaser-shine-move {
            0% {
                left: -75%;
            }

            100% {
                left: 125%;
            }
        }
    </style>
</div></div></div>
</div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="toc-summary" class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 md:pb-6 xl:pt-[120px] p-6 lg:p-10">
            <div
                class="mx-auto mb-8 lg:absolute lg:top-[40%] lg:right-4 xl:right-[5%] 2xl:right-[10%] max-w-[180px] rounded-full shadow-xl border-2 border-white/50 overflow-hidden shadow-inner">
                <img src="https://www.jajuma.de/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="Hyvänaut Introducing and explaining Hyvä UI" class="w-full h-auto p-2">
            </div>
            <div
                class="absolute left-1/2 md:left-[calc(100%-240px)] -translate-x-1/2 md:translate-x-0 bottom-[-5px] w-[200px] animate-appear animate-delay-[6.5s] animate-ease-in">
            </div>
            <h2 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">tl;dr</span><br>Quick Navigation & Key Insights 
            </h2>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="text-left mb-8">
                <p class="text-lg lg:text-xl">
                    Pressed for time?  
                    <br>Here’s a quick overview of what this comprehensive guide covers, with direct links to each key section:
                </p>
            </div>

            <div class="flex flex-col gap-8 text-lg lg:text-xl"
               >
                <ul class="text-base space-y-1">
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#introduction" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Introduction:</b></a></span>
        <span>Navigating the Magento Landscape in 2025</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#what-is-hyva-commerce" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>What Exactly is Hyvä Commerce?</b></a></span>
        <span>The Big Picture & Its Core Philosophy</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#unpacking-the-suite" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Unpacking the Suite:</b></a></span>
        <span>A Deep Dive into Hyvä Theme, Checkout, CMS, Admin Tools & More</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#why-hyva-is-a-game-changer" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Why Hyvä Commerce is a Game-Changer</b></a></span>
        <span>for Merchants, Developers & Agencies</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#hyva-vs-the-rest" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Hyvä Commerce vs. The Rest:</b></a></span>
        <span>Understanding Your Options</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#roadmap" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>The Future is Bright:</b></a></span>
        <span>The Hyvä Commerce Roadmap (2025 & Beyond)</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#is-hyva-the-right-fit" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Is Hyvä Commerce the Right Fit</b></a></span>
        <span>for Your E-commerce Business?</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#getting-started" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Getting Started with Hyvä Commerce:</b></a></span>
        <span>Licensing & Upgrade Paths</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#why-jajuma" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Why JaJuMa is Your Ideal Partner</b></a></span>
        <span>for Hyvä Commerce Success</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#conclusion" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Conclusion:</b></a></span>
        <span>Is Hyvä Commerce Right for Your Magento Store?</span>
    </li>
    <li>
        <span class="w-full xl:w-1/2 inline-block"><a href="#faq" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Frequently Asked Questions (FAQ)</b></a></span>
        <span>about Hyvä Commerce</span>
    </li>
</ul>

            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="UU3J31T"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="introduction">Introduction: Navigating the Magento Landscape in 2025</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="SVG Image"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Introduction</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Magento's power is often hindered by Luma's performance and admin complexity.</li>
<li>Hyv&auml; Commerce emerges as a timely, holistic solution, enhancing Magento's frontend speed, backend efficiency, and content management.</li>
<li>It addresses concerns about Magento Open Source's future and the potential Luma deprecation.</li>
</ul>
</div>
</div>
</div>
</div>
<p><a tabindex="-1" title="Magento - Official Adobe Website" href="https://business.adobe.com/products/magento/magento-commerce.html" target="_blank" rel="nofollow noopener"><strong>Magento</strong></a> has long been celebrated for its <a title="JaJuMa-Shop | Top 10 Reasons and Benefits for Magento" href="/en/jajuma-shop/top-10-reasons-for-magento" target="_blank" rel="noopener"><strong>robust power and unparalleled flexibility</strong></a>, forming the <strong>backbone of countless successful e-commerce businesses.</strong><br>However, as the digital landscape evolves, merchants and developers alike encounter persistent challenges.<br>Performance bottlenecks, particularly with the traditional <strong>Luma frontend</strong>, can severely impact user experience, Core Web Vitals, and conversion rates. Development can often feel complex and costly, and the out-of-the-box admin experience, while functional, hasn't always kept pace with modern usability expectations.&nbsp;<br><strong>Magento merchants</strong> are continually seeking ways to <strong>simplify their daily operations </strong>and <strong>accelerate the delivery of new features and improvements</strong>.</p>
<p><br>In this dynamic environment, the name <strong>"Hyv&auml;" has become synonymous with a new era of Magento performance and modernization</strong>. It represents a significant leap forward, addressing many of the platform's inherent complexities. But what if you could <strong>elevate your Magento experience even further</strong>, transforming not just the frontend speed but also the <strong>backend efficiency and content management capabilities</strong>, all without the daunting prospect of a full replatform?</p>
<p><img id="AJBEIRC" class="rounded-3xl shadow-xl overflow-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hvya-commerce-cms-concept-teaser-image.png" alt="Visual representation of the Hyv&auml; Commerce CMS Concept for Magento, showcasing a modern content editing interface" width="1264" height="800"><br>This is precisely where <strong>Hyv&auml; Commerce enters the picture</strong>. It&rsquo;s poised as the definitive answer for businesses looking to unlock a&nbsp;<strong>significantly enhanced, holistic Magento experience</strong>.&nbsp;<br>The introduction of Hyv&auml; Commerce is particularly timely. Concerns have been voiced within the Magento ecosystem regarding the <strong><a tabindex="-1" title="Yet Another View On The Future Of Magento" href="/en/blog/yet-another-view-on-the-future-of-magento" target="_blank" rel="noopener">platform's future direction</a></strong>, especially concerning support for Open Source users. &nbsp;As Adobe increasingly tailors Adobe Commerce towards large enterprise clients, a potential gap emerges for small to medium-sized businesses (SMBs) that rely on Magento's inherent strengths but may feel underserved by the focus on higher-tier solutions.<br>Furthermore, with strong indications that <strong><a tabindex="-1" title="The Magento Luma Frontend Will Be Deprecated And No Longer Under Development - What Now? What to do? What Are The Alternatives?" href="/en/blog/magento-luma-frontend-deprecated-what-now-what-next-alternatives" target="_blank" rel="noopener">Magento's default Luma theme may be deprecated in the future</a></strong>, the need for a viable, future-proof alternative becomes even more pressing.<br><strong>Hyv&auml; Commerce steps directly into this evolving landscape</strong>, offering a comprehensive suite of <strong>tools and enhancements designed to modernize Magento Open Source</strong>, making it <strong>more competitive, sustainable, and user-friendly for a broad range of merchants.</strong></p>
<p><br>As <strong>long-standing pioneers in the Magento and Hyv&auml; space</strong>, and as <strong>official Hyv&auml; Gold Partner, Technology Partner, and Core Contributor</strong>, JaJuMa has been not only keenly observing but also <a tabindex="-1" title="JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener"><strong>actively contributing to this evolution</strong></a>.<br>This definitive guide distills everything <strong>merchants</strong>, <strong>developers</strong>, and <strong>e-commerce decision-makers</strong> need to <strong>understand about Hyv&auml; Commerce</strong>:&nbsp;<br>its core <strong>components</strong>, its transformative <strong>benefits</strong>, its exciting future <strong>roadmap</strong>, and, crucially, <strong>how to leverage this powerful suite with JaJuMa</strong>&nbsp;for unparalleled <strong>e-commerce success</strong>.</p>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="LJF5568"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="what-is-hyva-commerce">What Exactly is Hyv&auml; Commerce? The Big Picture</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>What Exactly is Hyv&auml; Commerce?</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Hyv&auml; Commerce is a comprehensive Magento 2 suite (not just a theme update), bundling Hyv&auml; Theme, Checkout, and UI with new admin/content features..</li>
<li>It aims for faster, easier store management and superior UX, embodying the "Hyv&auml; Way" of simplicity and performance.</li>
<li>Built on Magento's strengths, it supports gradual adoption and PageBuilder compatibility.</li>
</ul>
</div>
</div>
</div>
</div>
<p>To truly understand its transformative impact, it&rsquo;s crucial to grasp <strong>what Hyv&auml; Commerce is - and what it isn&rsquo;t</strong>.<br>It&rsquo;s far more than just an iteration of the already popular Hyv&auml; Theme; it's a <strong>holistic enhancement for the entire Magento platform</strong>.</p>
<h3>Defining Hyv&auml; Commerce: A Comprehensive Suite, Not Just a Theme</h3>
<p><strong>Hyv&auml; Commerce is a new, integrated product suite</strong> meticulously <strong>built on the foundations of Magento 2</strong>, compatible with both Magento Open Source and Adobe Commerce. <br>It strategically combines the <strong>proven strengths of existing Hyv&auml; products</strong> with a host of <strong>new functionalities</strong> designed to revolutionize how stores are built, managed, and experienced.</p>
<p>At its core, <strong>Hyv&auml; Commerce includes</strong> the <strong><a title="JaJuMa-Shop | Top 10 Reasons &amp; Benefits for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">renowned Hyv&auml; Theme</a></strong>, the <strong>streamlined Hyv&auml; Checkout</strong>, and the <strong><a title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">versatile Hyv&auml; UI library</a> </strong>-&nbsp;with a host of <strong>powerful new functionalities.</strong> These additions are specifically designed to revolutionize the admin experience, content management, and overall store operational capabilities..</p>
<p><br>The overarching goal, as stated by Hyv&auml;, is clear: to&nbsp;<strong>empower merchants and developers</strong> "to build and manage your stores faster and easier and provide a better end-user experience", while also aiming "to maximise the power and scalability of the Magento Open Source platform".&nbsp;</p>
<p>This isn't merely about patching existing issues; it's about providing a significant upgrade to both the frontend and backend user experience, making Magento feel more agile and contemporary without sacrificing its core robustness. This "revitalization layer" can substantially extend the lifespan and appeal of Magento stores, offering a compelling alternative to expensive and disruptive replatforming projects.</p>
<h3>The Core Philosophy: Embracing The "Hyv&auml; Way"</h3>
<p>Hyv&auml; Commerce is imbued with the distinct "Hyv&auml; Way" - a philosophy centered on <strong>simplicity</strong>, exceptional <strong>performance</strong>, an outstanding <strong>developer experience</strong> (DX), and a superior <strong>user experience</strong> (UX). &nbsp;It's about stripping away unnecessary complexity (often associated with Magento's Luma frontend) and <strong>focusing on what truly matters</strong> for e-commerce success.&nbsp;</p>
<p>As the Hyv&auml; team puts it, the suite is <strong>"Built from the ground up to ensure the best user experience and developer experience, The Hyv&auml; Way"</strong>.<br>This philosophy is underpinned by core values such as fairness, excellence, and a genuine concern for people's well-being, which translates into products that are not only powerful but also a pleasure to work with.</p>
<h3>Built on Magento's Strengths, Modernizing The Entire Experience</h3>
<p>A key aspect of <strong>Hyv&auml; Commerce</strong> is that it <strong>leverages and builds upon Magento's well-established strengths</strong>: its <strong>robust</strong> architecture, battle-tested <strong>reliability</strong>, and inherent <strong>resilience</strong>. It is not intended as a replacement for Magento's core engine but rather as <strong>a sophisticated enhancement layer&nbsp;</strong>that "extends what's already there".</p>
<p>&nbsp;</p>
<p><strong>Hyv&auml; Commerce "extends what's already there"</strong>, ensuring it <strong>integrates smoothly with existing Magento setups</strong> and supports a gradual adoption process if needed. Importantly for many existing Magento users, the standard Magento PageBuilder remains fully supported and can be used alongside the new Hyv&auml; CMS tools, offering flexibility during transition. This approach addresses potential concerns about compatibility or losing the foundational power that Magento is known for, positioning Hyv&auml; Commerce as an evolution that enhances, rather than disrupts.</p></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>To further clarify the distinction, the following table outlines the core differences between Hyv&auml; Theme and the broader Hyv&auml; Commerce suite:</p>
<p>&nbsp;</p>
<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left" border="1"><caption>Table 1: Hyv&auml; Theme vs. Hyv&auml; Commerce: Core Distinctions</caption>
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Aspect</th>
<th class="p-4 font-semibold">Hyv&auml; Theme</th>
<th class="p-4 font-semibold">Hyv&auml; Commerce</th>
<th class="p-4 font-semibold custom-inset-shadow relative">Advantage Hyv&auml; Commerce</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Scope</td>
<td class="p-4">Frontend-focused (Storefront + Dev UX)</td>
<td class="p-4">Full-suite enhancement (Frontend + Admin)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Broader Impact Across Magento Stack</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Included Tools</td>
<td class="p-4">TailwindCSS, AlpineJS, Hyv&auml; Theme</td>
<td class="p-4">All of Hyv&auml; Theme + Hyv&auml; Checkout, CMS, Admin UX</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; All-in-One Suite for Commerce Success</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Target Users</td>
<td class="p-4">Frontend Developers</td>
<td class="p-4">Developers &amp; Merchants</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Empowers Both Technical &amp; Business Teams</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Customization Power</td>
<td class="p-4">High (on storefront)</td>
<td class="p-4">High (storefront + admin + CMS)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Greater Flexibility &amp; Feature Control</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Merchant Usability</td>
<td class="p-4">Depends on standard Magento admin</td>
<td class="p-4">Enhanced via Hyv&auml; CMS, Dashboard, Media tools</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Friendlier Admin Experience</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Performance</td>
<td class="p-4">Excellent on frontend</td>
<td class="p-4">Excellent (frontend) + faster workflows (admin)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Total Performance Optimization</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">License Model</td>
<td class="p-4">One-time (~&euro;1,000)</td>
<td class="p-4">Annual (~&euro;2,500-&euro;3,000)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Higher cost, but broader ROI potential</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Best For</td>
<td class="p-4">Fast, modern frontend builds</td>
<td class="p-4">Brands seeking all-in-one Magento modernization</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Holistic eCommerce Platform Transformation</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 lg:mt-10 text-xl text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200"><strong class="text-primary-dark">This distinction is crucial:</strong> While Hyv&auml; Theme revolutionizes the frontend, Hyv&auml; Commerce takes a more encompassing approach, aiming to optimize the entire operational lifecycle of a Magento store - offering a next-generation platform for both developers and merchants, enhancing everything from content creation to admin workflows.</div>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="RJGXCGG"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="unpacking-the-suite">Unpacking the Suite: What's Inside Hyv&auml; Commerce?</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Unpacking the Suite</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Hyv&auml; Commerce bundles foundational Hyv&auml; Theme, Checkout, and UI for top frontend performance and development speed.</li>
<li>Exclusive new admin/content tools (CMS with live preview version control, customizable dashboard with actionable insights, integrated image editor, and advanced media optimization) revolutionize backend efficiency and usability.</li>
<li>These enhancements directly address Magento admin pain points points like slow content editing, lack of real-time previews, cumbersome media management, and a dated admin interface, boosting overall productivity and competitiveness.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>Hyv&auml; Commerce is a feature-rich suite designed to provide a holistic improvement to the Magento experience.</strong><br>It bundles <strong>essential, market-proven Hyv&auml; tools</strong> and introduces <strong>powerful new capabilities exclusive to the Commerce suite</strong>, especially for <strong>backend administration</strong> and <strong>content management</strong>.</p>
<h3>The Foundation: Included Hyv&auml; Staples (Already Valued by Thousands)</h3>
<p>At its heart, Hyv&auml; Commerce incorporates the foundational elements that have already made Hyv&auml; a game-changer for Magento performance:</p>
<ol>
<li><strong>Hyv&auml; Theme:</strong><img src="/media/wysiwyg/jajuma-shop/hyva-theme-logo.svg" alt="Hyv&auml; Theme Logo"><br>This is the <a tabindex="-1" title="JaJuMa-Shop | Top 10 Reasons for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">renowned lightweight and ultrafast Magento frontend replacement</a>.<br>Engineered with Tailwind CSS and Alpine.js, it enhances developer experience (DX), significantly&nbsp;<strong>reduces time-to-market</strong>, and delivers dramatic boosts<strong> </strong><strong> in storefront performance and Core Web Vitals</strong>, moving away from Luma's outdated JavaScript libraries. A &euro;1,000 value, included in your Hyv&auml; Commerce subscription.</li>
<li><strong>Hyv&auml; Checkout:</strong><img src="/media/wysiwyg/jajuma-shop/hyva-checkout-logo.svg" alt="Hyv&auml; Checkout Logo"><br>An <strong>optimized</strong>, developer-friendly <strong>checkout solution</strong> built with Magewire, AlpineJS, and Tailwind CSS that integrates seamlessly with Hyv&auml; Theme. It offers <strong>faster load times</strong> (13x faster on mobile than Luma checkout) and <strong>highly customizable</strong> one-step or multi-step workflows, <strong>enhancing conversions</strong> at the most critical point by simplifying a traditionally complex Magento process. Typically a separate subscription or &euro;1,000 license, included in Hyv&auml; Commerce.</li>
<li><strong>Hyv&auml; UI:</strong><img src="/media/wysiwyg/jajuma-shop/hyva-ui-logo.svg" alt="Hyv&auml; UI Logo"><br><strong><a tabindex="-1" title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">A comprehensive library of pre-built, <em>functional</em> UI components</a></strong>, based on Tailwind CSS,&nbsp; packaged with Hyv&auml; Theme.<br>It includes elements like navigation menus, product galleries, headers, footers, sliders, and accordions, all with integrated Alpine.js logic for interactivity. This significantly <strong>accelerates custom design and development by providing ready-to-use building blocks</strong>, reducing the repetitive coding often required in Luma. Included free with Hyv&auml; Theme, and thus with Hyv&auml; Commerce.</li>
</ol>
<h3><strong>NEW &amp; Exclusive to Hyv&auml; Commerce: The Admin &amp; Content Game-Changers</strong></h3>
<p>Beyond these foundational elements, <strong>Hyv&auml; Commerce introduces a suite of new features</strong> focused&nbsp;&nbsp;primarily on <strong>transforming the Magento admin panel</strong> and <strong>content management capabilities</strong>.</p>
<p>These are the key differentiators that establish Hyv&auml; Commerce as a distinct and more comprehensive offering:</p>
<h4>The All-New Hyv&auml; CMS: A Modern Content Editing Experience</h4>
<p>This is <strong>arguably the most anticipated feature</strong>.<br><strong>Hyv&auml; CMS</strong> is a completely <strong>redesigned</strong>, high-performance <strong>content editor</strong> built to address common frustrations with traditional Magento content tools like Page Builder.<br>Key features include:</p>
<p><img class="rounded-3xl shadow-xl overflow-hidden" src="/media/wysiwyg/Blog/shop/hyva-cms.png" alt="Hyv&auml; CMS interface showcasing live preview and content element management for Magento" width="632" height="400"></p>
<ul>
<li><strong>Live Preview:</strong><br>Instantly see how content changes will appear on the frontend across different devices, store views, or languages, all without needing to save and refresh the page.<br>This offers a massive workflow improvement for content creators, eliminating the tedious save-and-refresh cycle common with Magento's traditional PageBuilder and dramatically speeding up content iteration. Click any area of the preview to jump to the editor.</li>
<li><strong>Simplified/Lightweight Content Types:</strong><br>Content structures can be defined efficiently, (e.g., using a single JSON file), making content modeling more straightforward and performant than the often complex configurations in standard Magento CMS.<br>Reusable components and flexible content blocks enhance consistency and reduce repetitive work.</li>
<li><strong>Drafts &amp; Version Control:</strong><br>Safely save work in progress without publishing it live and easily revert to previous versions of pages or CMS blocks - providing a safety net and workflow improvement often missing or clunky in default Magento.</li>
<li><strong>User-Friendly Interface:</strong><br>While not a direct replacement for Magento's PageBuilder (both can run in parallel, allowing teams to choose the best tool for the job), Hyv&auml; CMS offers a more intuitive experience, potentially including drag-and-drop functionality for content blocks, making it easier for non-technical users to manage content without extensive training.</li>
<li><strong>Extensibility &amp; Scheduled Publishing:</strong><br>Designed for developer customization and includes features like scheduled content publishing , allowing for more sophisticated content strategies and easier campaign management.</li>
</ul>
<p><strong>Benefit for Merchants &amp; Marketers:<br></strong>Faster, more intuitive content creation and management, reducing reliance on developers for everyday tasks and enabling greater marketing agility compared to the standard Magento CMS or Page Builder experience.</p>
<p>&nbsp;</p>
<p><strong>The JaJuMa Angle:</strong> <br>Having developed numerous extensions to enhance Magento's PageBuilder, such as our <a tabindex="-1" title="git 4 Page Builder by JaJuMa" href="/en/jajuma-develop/magento-extensions/git-4-page-builder-extension-for-magento-2" target="_blank" rel="noopener">git 4 Page Builder</a> for version control, a <a tabindex="-1" title="Page Builder Quick Save Power Toy for Magento 2" href="/en/jajuma-develop/magento-power-toys-extensions/page-builder-quick-save-power-toy-for-magento-2" target="_blank" rel="noopener">Page Builder Quick Save Button</a>&nbsp; to shortcut the typical tedious save-and-refresh cycle, the <a tabindex="-1" title="Syntax Highlighter 4 Page Builder by JaJuMa" href="/en/jajuma-develop/magento-extensions/syntax-highlighter-4-page-builder-extension-for-magento-2" target="_blank" rel="noopener">Syntax Highlighter</a> for improved code editing within PageBuilder, a <a tabindex="-1" title="More about Responsive GDPR Video Widget for Magento 2" href="/en/jajuma-develop/magento-extensions/video-widget-gdpr-extension-for-magento-2" target="_blank" rel="noopener">Video Wiget</a> and a <a tabindex="-1" title="More about Hyv&auml; FAQ Widget for Magento 2 with Hyv&auml; Theme" href="/en/jajuma-develop/magento-extensions/hyva-faq-widget-extension-for-hyva-themes" target="_blank" rel="noopener">FAQ Widget</a>. <br>We understand the pain points of Magento content management intimately. While our tools make PageBuilder significantly more workable, the introduction of Hyv&auml; CMS by the Hyv&auml; team is a welcome innovation, promising a more inherently streamlined and performant content editing future for the Magento ecosystem.</p>
<h4>Revamped Admin Dashboard: Customizable, Insightful, and User-Specific</h4>
<p>Hyv&auml; Commerce introduces a modern, customizable, <strong>widget-based admin dashboard</strong>, moving away from the static nature of the default Magento dashboard.<br>Features include:</p>
<p><img class="rounded-3xl shadow-xl overflow-hidden" src="/media/wysiwyg/Blog/shop/hyva-commerce-admin-dashboard.png" alt="Hyv&auml; Commerce Admin Dashboard with customizable widgets for Magento" width="632" height="400"></p>
<ul>
<li><strong>Personalization &amp; Dynamic Widgets:</strong><br>Individual user control over dashboard layout, drag-and-drop rearrangement of widgets, multi-store insights, and time-based reporting - allowing users to tailor their dashboard to their specific roles and priorities, unlike the one-size-fits-all default Magento dashboard.</li>
<li><strong>Actionable Data &amp; Quick Actions:</strong><br>Initial widgets include tracking for Core Web Vitals (CrUX data), Cart Conversion Rate analysis, and quick links to common tasks like catalog and content creation - providing immediate insights and shortcuts that save time compared to navigating multiple Magento admin menus. Future plans include sales/marketing data widgets and ACL-based permissions.</li>
<li><strong>Site Health Checklist:</strong> Real-time overview of critical system components like cache and indexing status - offering proactive monitoring that can be more accessible than Magento's standard system messages..</li>
</ul>
<p><strong>Benefit for Admins &amp; Decision Makers:</strong>&nbsp;<br>At-a-glance insights into store performance and health, streamlined workflows, and a more personalized and efficient backend experience, reducing the "admin fatigue" often associated with Magento.</p>
<p>&nbsp;</p>
<p><strong>The JaJuMa Angle:<br></strong>While the new Hyv&auml; Admin Dashboard is a significant step up, JaJuMa's suite of free <a tabindex="-1" title="More About Power Toys for Magento 2" href="/en/jajuma-develop/magento-extensions/power-toys-for-magento-2" target="_blank" rel="noopener">Power Toys </a>offers complementary, ubiquitous admin enhancements. <br>Tools like Quick Reindex, Cache Management, and dashboard-like reports (including for Real User and Performance Monitoring via our <a tabindex="-1" title="Get It Now - Real User Monitoring (RUM) Power Toy for Magento 2" href="/en/jajuma-develop/magento-power-toys-extensions/real-user-monitoring-rum-power-toy-for-magento-2" target="_blank" rel="noopener">Real User Monitoring Power Toy,</a> quick access to <a tabindex="-1" title="ChatGPT Power Toy For Magento &amp; Hyv&auml;" href="/en/jajuma-develop/magento-power-toys-extensions/chat-gpt-power-toy-for-magento-2" target="_blank" rel="noopener">ChatGPT</a>, <a tabindex="-1" title="Image Optimization Reports Power Toy For Magento 2" href="/en/jajuma-develop/magento-power-toys-extensions/image-optimization-reports-power-toy-for-magento-2" target="_blank" rel="noopener">Media Optimization Status</a>, <a tabindex="-1" title="Get It Now - Honey Spam Power Toy for Magento 2" href="/en/jajuma-develop/magento-power-toys-extensions/honey-spam-power-toy-for-magento-2" target="_blank" rel="noopener">Spam-</a> and <a tabindex="-1" title="Get It Now - Matomo Reports Power Toy for Magento 2" href="/en/jajuma-develop/magento-power-toys-extensions/matomo-reports-power-toy-for-magento-2" target="_blank" rel="noopener">Analytics </a>Reporting, valuable quick actions as e. g. a <a tabindex="-1" title="Configuration Manager Toy: Allows to check and update Magento configurations quickly and conveniently from anywhere." href="/en/jajuma-develop/magento-power-toys-extensions/config-manager-power-toy-for-magento-2" target="_blank" rel="noopener">Configuration Manager</a> and many more tools and helpers) are available for admins anywhere throughout the backend AND frontend, providing an even more pervasive command center.</p>
<h4>Integrated Image Editor: Quick Edits, No External Tools</h4>
<p>A significant time-saver, Hyv&auml; Commerce will feature a built-in image editor, powered by Filerobot, directly within the Magento admin.<br>This allows for:</p>
<p><img class="rounded-3xl shadow-xl overflow-hidden" src="/media/wysiwyg/Blog/shop/hyva-commerce-image-editor.png" alt="Hyv&auml; Commerce Image Editor interface within Magento admin" width="632" height="400"></p>
<ul>
<li><strong>Direct Editing:<br></strong>Perform common image manipulations like resizing, cropping, applying filters, adding annotations, adjusting quality (brightness, contrast, hue, saturation, blur), and adding text without needing external tools like Photoshop - streamlining the workflow for content creators who previously had to download, edit, and re-upload images.</li>
<li><strong>Non-Destructive Edits:<br></strong>Originals are preserved with automatic backups, allowing for easy reversibility - reducing the risk of accidentally overwriting original assets, a common concern with manual image editing.</li>
<li><strong>Seamless Integration:<br></strong>Integrated into the Magento media gallery and supports all CMS-managed content - making it a natural part of the content creation process rather than a separate, disjointed step.</li>
</ul>
<p><strong>Benefit for Content Teams:</strong><br>Drastically reduces time spent on image preparation and updates, streamlining content workflows and empowering users to make quick visual adjustments without specialized software.</p>
<h4>Advanced Media Optimization: Storefront-Wide Performance Boost</h4>
<p>To further enhance site speed and SEO, Hyv&auml; Commerce includes native <strong>media optimization tools</strong>.<br>These tools aim to:</p>
<p><img class="rounded-3xl shadow-xl overflow-hidden" src="/media/wysiwyg/Blog/shop/hyva-commerce-media-optimisation.png" alt="Hyv&auml; Commerce Media Optimization concept for Magento stores" width="632" height="400"></p>
<ul>
<li><strong>Automate Optimization:</strong><br>Provide automatic image resizing based on usage context (categories, CMS components), compression, and quality adjustments - solving the common Magento issue of serving oversized images that slow down page loads.</li>
<li><strong>Modern Format Support:</strong><br>Convert images to next-generation formats like WebP, with AVIF support planned, for superior compression and quality compared to older formats like JPEG, directly impacting load times.</li>
<li><strong>Comprehensive Control:</strong><br>Features include Command Line Interface (CLI)-based optimization, auto-optimization, resize-by-declarations (XML/JSON), queue-based optimization, and full storefront image standardization. Integration with CDNs is also envisioned - offering developers and admins robust tools to manage media efficiently at scale, a frequent challenge in large Magento catalogs.</li>
</ul>
<p><strong>Benefit for Performance &amp; SEO:</strong> <br>Significantly improves site speed and Core Web Vitals by serving optimized images, directly impacting SEO and user experience without complex manual effort or reliance on multiple third-party image optimization modules which can sometimes conflict.</p>
<p>&nbsp;</p>
<p><strong>The JaJuMa Angle: </strong><strong>JaJuMa Leads the Way in Magento 2 Image Optimization</strong></p>
<p>At JaJuMa, we've been pioneers in Magento 2 image optimization. We introduced the first WebP image solution for Magento 2 back in 2018, followed by the first AVIF image integration in 2021.<br>Today, our <a tabindex="-1" title="Ultimate Image &amp; Media Optimization For Magento" href="/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener"><strong>Ultimate Image Optimizer</strong></a> extension delivers a comprehensive, all-in-one media optimization solution - designed to help your <strong>Hyv&auml; Commerce</strong> store achieve top-tier visual performance from day one.</p>
<p>Our solution not only aligns with but goes beyond the official Hyv&auml; Commerce roadmap, providing these advanced capabilities, <strong>including full AVIF support</strong>, optimization <strong>on-the-fly, via CLI or by cron job</strong>, <strong>High-Resolution/Retina, Responsive images as well as Low Quality Previews (LQIP)</strong>, sophisticated <a tabindex="-1" title="Ultimate Guide to LCP Optimization" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener"><strong>LCP image prioritization</strong></a>, <strong>SEO optimized image names and <code>alt</code>-texts</strong>, media <strong>optimization statistics</strong> and much more. It offers the <strong>most advanced and feature-rich image optimization available for Magento 2</strong>, enhancing <strong>site speed</strong>, <strong>user experience (UX)</strong>, and <strong>SEO performance</strong> like no other.</p>
<p>&nbsp;</p>
<h4>Refreshed Admin Theme: A Modern Backend Look &amp; Feel</h4>
<p>The Magento <strong>admin panel itself receives a visual overhaul</strong>, designed to be cleaner, more modern, and more intuitive to navigate. This aims to improve the daily working experience for all admin users, making Magento feel less dated and more aligned with contemporary web application design, addressing a long-standing complaint about Magento's backend UI. Merchants can choose between Hyv&auml; Commerce or default Magento/Adobe Commerce branding and even upload custom logos.</p>
<p>&nbsp;</p>
<p><strong>Benefit for Admin Users:</strong>&nbsp;<br>A more pleasant, efficient, and less intimidating backend, improving productivity and reducing the learning curve often associated with the traditional Magento admin panel.</p>
<p>These new features systematically target long-standing criticisms regarding Magento's admin experience and content management capabilities. By introducing a more user-friendly CMS, a customizable dashboard, an integrated image editor, and a visually refreshed admin theme, <strong>Hyv&auml; is actively working to make Magento itself more competitive and enjoyable to use.</strong></p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="ST8DWO5"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="why-hyva-is-a-game-changer">Why Hyv&auml; Commerce is a Game-Changer for Magento Users</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Why Hyv&auml; Commerce is a Game-Changer</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Merchants gain blazing-fast performance (better SEO, conversions), simplified content management, and potential TCO reduction.</li>
<li>Developers &amp; Agencies benefit from superior DX, 30-50% faster TTM, a modern stack, and easier maintenance.</li>
<li>Overall, Hyv&auml; Commerce boosts team productivity, store profitability, and future-readiness.</li>
</ul>
</div>
</div>
</div>
</div>
<p>The powerful features packed into Hyv&auml; Commerce translate into <strong>significant, tangible benefits</strong> for everyone involved with a Magento store - from <strong>merchants</strong> and their internal teams to <strong>developers</strong> and creative <strong>agencies</strong>. It's not just about new tools; it's about transforming how Magento stores operate and perform.</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="XFKYTS2"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="JEGO3FB"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="UOW0RJ2"><div data-content-type="text" data-appearance="default" data-element="main"><h3>Why Hyv&auml; Commerce is a Game-Changer For Merchants:</h3>
<ul>
<li><strong>Blazing-Fast Store Performance &amp; Superior Core Web Vitals:</strong><br>The combination of Hyv&auml; Theme's inherently lean architecture and the new Advanced Media Optimization tools within Hyv&auml; Commerce is engineered to deliver exceptional website speed. This directly results in passing Google's Core Web Vitals (CWV) with flying colors. Faster websites lead to higher SEO rankings, lower bounce rates, and an overall better brand perception. Vodafone, for instance, reported an 8% sales increase following a 31% LCP improvement after adopting Hyv&auml;.</li>
<li><strong>Enhanced User Experience (UX) &amp; Higher Conversion Rates:</strong><br>Speed is a cornerstone of good UX. When pages load quickly and navigation is intuitive (thanks to Hyv&auml; Theme and UI), the customer journey becomes smoother, impacting engagement and boosting sales. Real-world examples show conversion rate increases of 10-25% (some even 20-40% on mobile) after Hyv&auml; implementation. The streamlined Hyv&auml; Checkout further reduces cart abandonment.</li>
<li><strong>Simplified Content Management &amp; Marketing Agility:</strong><br>The new Hyv&auml; CMS and integrated Image Editor empower marketing teams to update content and launch campaigns more quickly, often without heavy developer reliance. This agility allows businesses to respond faster to market trends.</li>
<li><strong>Potentially Lower Total Cost of Ownership (TCO):<br></strong>Efficiency gains from faster development (30-50% faster than Luma), easier maintenance due to a cleaner codebase, and reduced need for certain third-party extensions can lead to overall cost savings.</li>
<li><strong>Merchant Teams' Happiness &amp; Productivity:</strong><br>A more intuitive admin interface (refreshed theme, customizable dashboard) and better tools lead to less frustration and increased productivity for the e-commerce team.</li>
</ul></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="J5HEU0H"><figure class="md:ml-4 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="CXQPH82"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Hyva-Commerce-Benefits-For-Merchants.png" alt="Infographic summarizing key benefits of Hyv&auml; Commerce for merchants, including speed, UX, SEO, and TCO reduction." title="" data-element="desktop_image" data-pb-style="IBTIP2Q"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Hyva-Commerce-Benefits-For-Merchants.png" alt="Infographic summarizing key benefits of Hyv&auml; Commerce for merchants, including speed, UX, SEO, and TCO reduction." title="" data-element="mobile_image" data-pb-style="SQR04FN"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><h3>Why Hyv&auml; Commerce is a Game-Changer For Developers &amp; Agencies:</h3>
<ul>
<li><strong>Improved Developer Experience (DX) &amp; Faster Time-to-Market:</strong><br>Hyv&auml;'s modern stack (<a title="AlpineJS Website" href="https://alpinejs.dev/" target="_blank" rel="nofollow noopener">Alpine.js</a>, <a title="TailwindCSS Website" href="https://tailwindcss.com/" target="_blank" rel="nofollow noopener">Tailwind CSS</a>) and reduced complexity result in significantly faster development cycles, often 30-50% faster than Luma builds.<br>The Hyv&auml; UI library further accelerates frontend work.</li>
<li><strong>Modern, Lean Tech Stack:</strong><br>Working with Alpine.js and Tailwind CSS, and Magewire (for Hyv&auml; Checkout) is more efficient and enjoyable for developers compared to Magento's older default stack.</li>
<li><strong>Reduced Complexity &amp; Easier Maintenance:</strong><br>A cleaner codebase makes Hyv&auml; Commerce sites easier to maintain, debug, and upgrade, lowering technical debt.</li>
<li><strong>Greater Flexibility and Extensibility:</strong><br>Hyv&auml; Commerce is designed for customization, integrating with existing Magento functionalities and a vast ecosystem of compatible extensions (over 1000+).<br>The new Hyv&auml; CMS is also designed for developer extensibility.</li>
</ul>
<p>These developer experience improvements translate directly into <strong>tangible business advantages: faster, higher-quality builds, quicker TTM, and lower operational costs.</strong></p>
<p>&nbsp;</p></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left" border="1"><caption>Table 2: Hyv&auml; Commerce Feature &amp; Benefit Matrix</caption>
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Hyv&auml; Commerce Feature</th>
<th class="p-4 font-semibold">Brief Description</th>
<th class="p-4 font-semibold">Benefit for Merchants</th>
<th class="p-4 font-semibold custom-inset-shadow relative">Benefit for Developers/Agencies</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">New Hyv&auml; CMS</td>
<td class="p-4">Modern content editor with live preview, version control, simplified content types.</td>
<td class="p-4">Faster, easier content updates by marketing teams; reduced reliance on developers.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Intuitive, faster CMS with easy extensibility</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Revamped Admin Dashboard</td>
<td class="p-4">Customizable, widget-based dashboard with user controls &amp; insightful data (CWV).</td>
<td class="p-4">At-a-glance insights into store health; improved operational efficiency.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Custom widgets &amp; tailored data for clients</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Integrated Image Editor</td>
<td class="p-4">Built-in Filerobot editor for quick image edits (resize, crop, filters, text) in admin.</td>
<td class="p-4">Significant time savings for content creators; reduced need for external tools.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Faster asset workflows &amp; internal tooling</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Advanced Media Optimization</td>
<td class="p-4">Auto image resizing, format conversion (WebP, AVIF planned), compression, CLI tools.</td>
<td class="p-4">Improved site speed, better CWV scores, enhanced SEO; automated optimization.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Best practices with less dev effort</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Refreshed Admin Theme</td>
<td class="p-4">Visual overhaul of Magento admin panel for a cleaner, modern, and intuitive UI.</td>
<td class="p-4">Improved daily working experience; makes Magento feel contemporary.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">More intuitive for clients to manage</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Included Hyv&auml; Theme</td>
<td class="p-4">Lightweight, ultrafast Magento frontend (Alpine.js, Tailwind CSS).</td>
<td class="p-4">Drastically improved speed, SEO, conversions; superior mobile experience.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Modern stack = faster builds &amp; happier devs</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Included Hyv&auml; Checkout</td>
<td class="p-4">Optimized, developer-friendly, and customizable checkout solution.</td>
<td class="p-4">Faster, reliable checkout reducing cart abandonment, higher conversions.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Easier than customizing Luma&rsquo;s checkout</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Included Hyv&auml; UI</td>
<td class="p-4">Library of pre-built, Tailwind CSS-based UI components for rapid and consistent design.</td>
<td class="p-4">Faster TTM for designs/features; consistent, professional look.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Reusable design system = dev velocity boost</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 lg:mt-10 text-xl text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200"><strong class="text-primary-dark">Summary:</strong> Hyv&auml; Commerce is more than just a theme - it's a full-stack upgrade for Magento.<br><strong class="text-slate-800">Merchants benefit from faster workflows and better UX</strong>, while <strong class="text-slate-800">agencies gain tools to accelerate development and deliver excellence</strong>.</div>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="P2H4ANY"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="hyva-vs-the-rest">Hyv&auml; Commerce vs. The Rest: Understanding Your Options</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Hyv&auml; Commerce vs. The Rest</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Hyv&auml; Commerce is a full suite (Theme, Checkout, UI + new admin tools) via annual subscription, distinct from standalone one-time Theme purchases.</li>
<li>It works with Magento Open Source &amp; Adobe Commerce; Hyv&auml; Enterprise is an additional add-on for specific Adobe Commerce features (B2B, Sensei).</li>
<li>The new Hyv&auml; CMS complements (not replaces) PageBuilder, offering a faster, often more intuitive alternative for content tasks.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong><a title="Your Full Guide About The Hyv&auml; Ecosystem: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">The Hyv&auml; ecosystem</a> is rapidly evolving, offering several powerful solutions for Magento.</strong><br><strong>Understanding how Hyv&auml; Commerce fits</strong> alongside other Hyv&auml; products and existing Magento tools is <strong>key to making the right strategic decision for your store.</strong></p>
<h3>Hyv&auml; Commerce vs. Standalone Hyv&auml; Theme / Checkout / UI</h3>
<p><strong>Hyv&auml; Commerce is the most comprehensive offering.</strong><br>It includes <strong><a title="JaJuMa-Shop | Top 10 Reasons for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Theme</a>, Hyv&auml; Checkout, and <a title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">Hyv&auml; UI</a></strong> as foundational components. The crucial distinction is that Hyv&auml; Commerce then adds all the new admin-side features - such as the modern <strong>Hyv&auml; CMS</strong>, the revamped <strong>Admin Dashboard</strong>, the integrated <strong>Image Editor</strong>, and Advanced <strong>Media Optimization</strong> tools. Furthermore, <strong>Hyv&auml; Commerce operates on an annual subscription model, </strong>which bundles these elements and provides ongoing updates and support.</p>
<p>In contrast, the standalone Hyv&auml; Theme is typically available as a one-time purchase (around &euro;1,000). Hyv&auml; Checkout, if purchased separately, also has its own subscription or one-time fee with limited support. <strong>Hyv&auml; Commerce essentially bundles these core frontend elements</strong> and significantly <strong>expands the offering with backend enhancements</strong>, <strong>simplifying the licensing for users who want the complete, integrated suite and continous innovation</strong>.</p>
<h3>Hyv&auml; Commerce vs. Hyv&auml; Enterprise</h3>
<p><strong>Hyv&auml; Enterprise is a specialized add-on</strong> specifically designed to ensure <strong>compatibility with Adobe Commerce-specific features</strong>.<br>These include functionalities like the B2B suite, Adobe Sensei Product Recommendations, and Adobe Live Search.</p>
<p><strong>Hyv&auml; Commerce itself is compatible with both Magento Open Source and Adobe Commerce</strong>. However, if a merchant is using <strong>Adobe Commerce</strong> and <strong>requires</strong> support for these particular Adobe-native enterprise modules, they would need to license both Hyv&auml; Commerce and the <strong>Hyv&auml; Enterprise add-on</strong>. For Magento Open Source users, or Adobe Commerce users not leveraging those specific enterprise modules, Hyv&auml; Commerce alone is sufficient.</p>
<h3>How Hyv&auml; Commerce Complements (or offers an alternative to) Magento PageBuilder</h3>
<p id="LLFSURT">The new <strong>Hyv&auml; CMS</strong> introduced with Hyv&auml; Commerce <strong>is not a direct, one-for-one replacement for Magento's existing PageBuilder </strong>that forces an immediate switch.<br>Instead, the <strong>two can run in parallel</strong> initially, and content teams can choose which editor is most appropriate for specific pages or content blocks.<br>However, for many common content creation tasks, especially those involving simpler content types or requiring rapid updates with live previews, Hyv&auml; CMS is presented as a significant improvement in terms of speed, ease of use, and modern functionality. PageBuilder may still be preferred for highly complex, visually rich layouts that it was originally designed for, but many users will find Hyv&auml; CMS a more agile and intuitive alternative for daily content operations.</p>
<p>&nbsp;</p></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left" border="1"><caption id="U15KQLP">Table 3: Hyv&auml; Product Suite Comparison</caption>
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Aspect/Feature</th>
<th class="p-4 font-semibold">Hyv&auml; Theme<br>(Standalone)</th>
<th class="p-4 font-semibold">Hyv&auml; Checkout<br>(Standalone)</th>
<th class="p-4 font-semibold">Hyv&auml; UI<br>(Part of Theme)</th>
<th class="p-4 font-semibold">Hyv&auml; Enterprise</th>
<th class="p-4 font-semibold custom-inset-shadow relative">Hyv&auml; Commerce</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Core Offering</td>
<td class="p-4">High-performance frontend theme</td>
<td class="p-4">Optimized checkout solution</td>
<td class="p-4">Library of UI components</td>
<td class="p-4">Support for Adobe Commerce-specific features (B2B, Sensei, etc.)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Full suite: Theme, Checkout, UI, CMS, Dashboard &amp; Media Tools</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Key Included Components</td>
<td class="p-4">Theme files, Hyv&auml; UI library</td>
<td class="p-4">Checkout module</td>
<td class="p-4">Tailwind CSS components</td>
<td class="p-4">Compatibility modules for Adobe Commerce features</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">All Hyv&auml; features bundled together</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Primary Target User/Need</td>
<td class="p-4">Fast, modern frontend</td>
<td class="p-4">Improved checkout</td>
<td class="p-4">Speed up custom UI creation</td>
<td class="p-4">Adobe Commerce users needing specific Adobe features</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Holistic performance &amp; backend usability upgrade</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Licensing Model</td>
<td class="p-4">One-Time Purchase (e.g., &euro;1,000)</td>
<td class="p-4">Subscription</td>
<td class="p-4">Included with Theme</td>
<td class="p-4">Add-on Subscription (requires Hyv&auml; Theme or Commerce)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Annual Subscription (e.g., &euro;2,500 - &euro;3,000)</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Admin Enhancements (CMS, etc.)</td>
<td class="p-4">No</td>
<td class="p-4">No</td>
<td class="p-4">No</td>
<td class="p-4">No (focus is on frontend compatibility for Adobe features)</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Yes - Exclusive to Hyv&auml; Commerce</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 lg:mt-10 text-xl text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200"><strong class="text-primary-dark">Summary:</strong> <strong class="text-slate-800">Hyv&auml; Commerce is the complete Magento experience - </strong>uniting frontend speed, checkout optimization, and backend enhancements into one powerful, modern package.</div>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="WDYIURK"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="roadmap">The Future is Bright: The Hyv&auml; Commerce Roadmap (2025 &amp; Beyond)</h2>
<div class="container mx-auto my-12">
<div class="text-white rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>The Hyv&auml; Commerce Roadmap</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="grid gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl ml-5">
<li>Hyv&auml; Commerce has a dynamic roadmap; Early Access delivers core CMS, Admin Dashboard, Image Editor, and Media Optimization.</li>
<li>Near-term (1-6 months from Feb 2025) expands these features (AVIF, more widgets) and adds merchandising/menu tools.</li>
<li>Longer-term (6+ months from Feb 2025) includes advanced CMS hierarchy, customer segmentation, and enhanced navigation, powered by partnerships like Mollie.</li>
</ul>
</div>
</div>
</div>
</div>
<p>Hyv&auml; Commerce is an <strong>actively evolving platform</strong> with an <a tabindex="-1" title="Official Hyv&auml; Roadmap" href="https://www.hyva.io/blog/news/hyva-roadmap-2025.html" target="_blank" rel="nofollow noopener"> <strong>ambitious roadmap</strong> </a>, signaling a <strong>long-term commitment to innovation</strong> and <strong>Magento support</strong>. This <strong>forward-looking approach</strong> helps <strong>future-proof your investment</strong>. Always refer to the <a tabindex="-1" title="Official Hyv&auml; Roadmap" href="https://www.hyva.io/blog/news/hyva-roadmap-2025.html" target="_blank" rel="nofollow noopener"> <strong>official Hyv&auml; Product Roadmap</strong> </a> for the latest updates.</p>
<h3>Current Focus (1 - 3 Months)</h3>
<p>The immediate focus for Hyv&auml; Commerce delivers core enhancements for instant value::</p>
<ul>
<li><strong>Hyv&auml; CMS:</strong> Content Scheduling, Page Builder Content Import, Content Translations, and additional components like Marquee &amp; Video.</li>
<li><strong>Admin Dashboard:</strong> Launch of the widget-based framework with initial widgets for Core Web Vitals, Cart Conversion, and more.</li>
<li><strong>Advanced Media Optimization:</strong> Automated resizing and conversion for images, including animated GIFs, and optimization for legacy content.</li>
<li><strong>Category Merchandising:</strong> Introduction of a visual product merchandising tool with drag-and-drop controls.</li>
<li><strong>Linked Products:</strong> Ability to display linked product variations (e.g., different colors) on PLPs and PDPs with unique, SEO-friendly URLs.</li>
</ul>
<h3>What's Next? (3 - 6 Months)</h3>
<ul>
<li><strong>Hyv&auml; CMS Enhancements:</strong> Pre-built templates from Hyv&auml; UI and the ability to manage product/category attribute content via the CMS.</li>
<li><strong>Admin Dashboard Expansion:</strong> Widget search, ACL permissions, and new widgets for Marketing, Sales, and System Health.</li>
<li><strong>Media Optimization:</strong> Support for queue-based resizing/conversion and CLI commands for bulk operations.</li>
<li><strong>Menu Builder:</strong> A powerful, CMS-driven tool for creating all types of menus (mega, drill-down) with mixed content, separate mobile/desktop views, and scheduling.</li>
</ul>
<h3>Looking Ahead (6+ Months)</h3>
<ul>
<li><strong>CMS Page Hierarchy:</strong> Parent/child structure with SEO-friendly URLs.</li>
<li><strong>Advanced Merchandising:</strong> Rule-based category population and the ability to pin specific products within automated categories.</li>
<li><strong>Customer Segmentation:</strong> Create and manage customer segments based on behavior, and tailor CMS and Menu content accordingly.</li>
<li><strong>Email Template Framework:</strong> A user-friendly, customizable transactional email system.</li>
<li><strong>Layered Navigation:</strong> Advanced filtering by multiple options per attribute, and by stock, new, and sale status.</li>
<li><strong>Social/Simplified Login:</strong> Apple/Google login and one-time email code support.</li>
<li><strong>Media Optimization:</strong> Support for the modern and highly performant libvips image processing library.</li>
</ul>
<h3>The Impact of Strategic Partnerships (e.g., Mollie)</h3>
<p>The development and growth of Hyv&auml; Commerce are also being fueled by strategic partnerships. A notable example is the collaboration with <strong><a tabindex="-1" title="Mollie Website" href="https://www.mollie.com/" target="_blank" rel="nofollow noopener">Mollie</a></strong>, a leading payment service provider.</p>
<p>This partnership is more than just financial backing; it's a strategic alliance aimed at addressing broader Magento ecosystem concerns, specifically focusing on the needs of small and mid-market (SMB) merchants.<br>The collaboration aims to provide a clear solution based on innovation, enhance the checkout experience with first-party support for Mollie payments within Hyv&auml; Checkout, and help Hyv&auml; scale its operations while importantly allowing Hyv&auml; to remain a fully independent company.</p>
<p><strong>This type of partnership signals Hyv&auml;'s commitment to building a robust and supportive ecosystem around Hyv&auml; Commerce, making it a more attractive and turnkey solution for merchants.</strong></p>
<p>&nbsp;</p></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left" border="1"><caption>Table 4: Hyv&auml; Commerce Roadmap Highlights</caption>
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Development Phase</th>
<th class="p-4 font-semibold custom-inset-shadow relative">Key Features / Enhancements</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Current Focus / Early Access</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">Hyv&auml; CMS (live preview), Revamped Admin Dashboard (widgets, CrUX data), Integrated Image Editor, Media Optimization (WebP), Refreshed Admin Theme</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Next: 1-6 Months</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">More Admin Widgets (sales, marketing), ACL support, AVIF support, Category Merchandising, Linked Products Tool, Menu Builder</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Planned: 6+ Months</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">CMS Page Hierarchy, Customer Segmentation, Email Templates, Layered Nav Upgrades, Social/Simplified Login, Multi-View Dashboards, Queue-Based Media Optimization</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 lg:mt-10 text-xl text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200"><strong class="text-primary-dark">Summary:</strong> <strong class="text-slate-800">Hyv&auml; is actively expanding its ecosystem - </strong>delivering consistent innovation across both frontend and backend Magento experiences.</div>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="XRNC4O6"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="is-hyva-the-right-fit">Is Hyv&auml; Commerce the Right Fit for Your E-commerce Business?</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Is Hyv&auml; Commerce the Right Fit?</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Ideal for Magento Open Source users, existing Hyv&auml; adopters, and businesses prioritizing performance, lower dev costs, and modern UX.</li>
<li>Perfect for Luma replatforming, new store builds, content-heavy sites, and growth-focused merchants.</li>
<li>Key considerations include content migration strategies (especially from PageBuilder) and third-party extension compatibility.</li>
</ul>
</div>
</div>
</div>
</div>
<p>Hyv&auml; Commerce is designed with a <strong>broad range of Magento users in mind</strong>, but its <strong>benefits will resonate particularly strongly with certain merchant profiles</strong> and in specific use cases.<br>Understanding who stands to gain the most can <strong>help businesses make an informed decision about adoption</strong>.</p>
<h3>Ideal Merchant &amp; Business Profiles For Hyv&auml; Commerce:</h3>
<ul>
<li>
<p><strong>Magento Open Source Merchants:</strong><br>This is a primary target group. Businesses using Magento Open Source who feel the platform's native feature development has slowed, or who are seeking a more modern, performant experience without the cost of Adobe Commerce, will find Hyv&auml; Commerce particularly appealing. <br>It offers a path to revitalization without needing to migrate to a different e-commerce platform.</p>
</li>
<li>
<p><strong>Existing Hyv&auml; Theme or Hyv&auml; Checkout Users:</strong><br>For merchants already leveraging the speed of Hyv&auml; Themes or the efficiency of Hyv&auml; Checkout, moving to the full Hyv&auml; Commerce suite is a natural and seamless progression.</p>
</li>
<li>
<p><strong>Businesses Prioritizing Performance &amp; User Experience:</strong><br>Any e-commerce operation struggling with slow load times on a Luma-based site, or those aiming to achieve and maintain excellent Core Web Vitals scores, will see significant advantages.</p>
</li>
<li>
<p><strong>Merchants Seeking Lower Development &amp; Maintenance Costs:</strong><br>The streamlined development process (30-50% faster) and reduced complexity inherent in the Hyv&auml; stack can lead to considerable savings in both initial build costs and ongoing maintenance.</p>
</li>
<li>
<p><strong>Startups and New Store Launches:</strong><br>For businesses launching new e-commerce ventures, building on Hyv&auml; Commerce from day one ensures a modern, fast, and efficient foundation. <strong><a tabindex="-1" title="JaJuMa Takeoff - Fixed price Hyv&auml; Quick Launch Accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener">JaJuMa's Takeoff package</a></strong>, for example, is specifically designed for such scenarios, offering a rapid and budget-friendly entry point to a high-performance Hyv&auml; store.</p>
</li>
<li>
<p><strong>Agencies Seeking Efficient Client Solutions:</strong><br>E-commerce agencies looking for more efficient ways to build and manage high-performance Magento stores for their clients will also find Hyv&auml; Commerce beneficial, particularly with the new CMS and admin tools empowering both developers and content teams.</p>
</li>
</ul>
<h3>Key Use Cases &amp; Scenarios For Hyv&auml; Commerce:</h3>
<ul>
<li><strong>Replatforming from Luma or Other Legacy Frontends:</strong><br>Migrating an existing Magento 2 store from the Luma theme (or another older frontend) to Hyv&auml; Commerce can unlock dramatic improvements in site speed, user experience, and SEO rankings.</li>
<li><strong>New Magento Store Builds:</strong><br>When commissioning a new Magento store, opting for Hyv&auml; Commerce ensures the site is built on a future-proof, high-performance architecture from the outset.</li>
<li><strong>Stores with Complex Content Needs:</strong><br>Businesses that rely heavily on content marketing, rich product descriptions, or frequently updated promotional content will benefit significantly from the capabilities of the new Hyv&auml; CMS.</li>
<li><strong>Businesses Aiming for Aggressive Growth:</strong><br>The scalability, performance, and efficient management tools offered by Hyv&auml; Commerce are well-suited for companies with ambitious growth plans.</li>
<li><strong>Merchants Focused on SEO and Organic Traffic:</strong><br>The inherent speed, excellent Core Web Vitals, and clean code structure of Hyv&auml; provide a strong foundation for SEO success.</li>
</ul>
<h3>Considerations for Transition:</h3>
<ul>
<li><strong>Migration of Existing Content:</strong><br>For stores heavily reliant on Magento's PageBuilder or with extensive custom content types, a well-defined migration strategy will be necessary.&nbsp;
<p>While Hyv&auml; CMS can run alongside PageBuilder, transitioning content to leverage the new CMS fully requires planning.<span> Expert partners like JaJuMa specialize in managing such content migrations smoothly.</span></p>
</li>
<li><strong>Third-Party Extension Compatibility:</strong><br>The Hyv&auml; ecosystem has a rapidly growing number of compatible extensions (over 1000), and Hyv&auml; itself is working on expanding module compatibility. However, a thorough audit of existing third-party modules is crucial. For any modules not yet compatible, solutions may involve finding alternatives, awaiting compatibility updates, or custom development. JaJuMa offers expert <strong><a title="Custom Hyv&auml; Development &amp; Compatibility" href="/en/jajuma-develop" target="_blank" rel="noopener">Hyv&auml; compatibility services and custom Hyv&auml; extension development</a></strong> to address these needs.</li>
<li><strong>"Early Access" Status &amp; Expert Guidance:</strong> <br>While robust and rapidly evolving, Hyv&auml; Commerce is still in its "Early Access" phase.<br>The scalability, performance, and efficient management tools offered by Hyv&auml; Commerce are well-suited for companies with ambitious growth plans.<br>Successfully navigating this requires a partner with deep, proven Hyv&auml; expertise. JaJuMa's early adoption and core contributions ensure we can maximize benefits and mitigate any early-stage challenges.</li>
</ul>
<p><strong>The introduction of backend enhancements through Hyv&auml; Commerce significantly broadens Hyv&auml;'s appeal.</strong><br>Merchants whose primary pain points extend beyond frontend speed to include admin usability, content management, or media handling now have even more <a title="Find all you need to know about the Hyv&auml; Ecosystem: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>compelling reasons to consider the Hyv&auml; ecosystem</strong></a>.</p>
<p>&nbsp;</p>
<p><strong>The introduction of backend enhancements through Hyv&auml; Commerce significantly broadens Hyv&auml;'s appeal.</strong> <br><strong>Merchants whose primary pain points extend beyond frontend speed</strong> to include admin usability, content management, or media handling now have even <strong>more compelling reasons to consider the Hyv&auml; ecosystem</strong>. <br><strong>The well-defined upgrade path for existing Hyv&auml; users is a smart strategy</strong>, encouraging deeper adoption. <br>Nevertheless, the <strong>potential complexities underscore the value of partnering with an experienced agency like JaJuMa to de-risk and streamline the adoption process.</strong></p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="YTGPXDQ"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="getting-started">Getting Started with Hyv&auml; Commerce: Licensing &amp; Upgrade Paths</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Getting Started with Hyv&auml; Commerce</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Hyv&auml; Commerce uses an annual subscription (approx. &euro;2,500-&euro;3,000/year), including all core components, new features, updates, and support.</li>
<li>Existing Hyv&auml; Theme/Checkout users get a seamless, fair upgrade with cashback/trade-in options.</li>
<li>The upgrade involves minimal technical effort, as initial Commerce features are admin-focused.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>Transitioning to Hyv&auml; Commerce is designed to be a manageable process, whether for existing Hyv&auml; users or those new to the ecosystem.</strong><br>Hyv&auml; has placed considerable emphasis on <strong>making the upgrade path smooth and financially viable</strong>.</p>
<h3>Pricing Model Explained: Comprehensive Value</h3>
<p><strong>Hyv&auml; Commerce is offered as an annual subscription</strong> with the standard pricing of &euro;3,000 per year. &nbsp;(It's always advisable to check the official <a tabindex="-1" title="Hyva.io website" href="https://www.hyva.io/hyva-commerce.html" target="_blank" rel="nofollow noopener">Hyva.io website</a> for the most current pricing information, as these figures can change.)</p>
<p><strong>This annual subscription is comprehensive and includes:</strong></p>
<ul>
<li>Access to the Hyv&auml; Commerce codebase.</li>
<li>Licenses for Hyv&auml; Theme and Hv&auml; Checkout (a combined value of ~&euro;2,000 if purchased standalone) and the Hyv&auml; UI component library (included with Hyv&auml; Theme).</li>
<li>All the new and exclusive Hyv&auml; Commerce features (CMS, Dashboard, Image Editor, Media Optimization, Admin Theme refresh).</li>
<li>Frequent updates with new features, improvements, and integrations as they are released according to the roadmap.</li>
<li>Dedicated support from the Hyv&auml; team and access to the private Hyv&auml; community Slack channel, a valuable resource for help, discussion, and networking.</li>
<li><a tabindex="-1" title="Hyv&auml; Commerce documentation" href="https://docs.hyva.io/hyva-commerce/index.html" target="_blank" rel="nofollow noopener">Access to online documentation</a>.</li>
</ul>
<h3><br>Seamless Upgrade for Existing Hyv&auml; Theme &amp; Checkout Licensees</h3>
<p>A <strong>significant advantage</strong> and a <strong>testament to Hyv&auml;'s community focus</strong> is the smooth and financially <strong>considerate upgrade path for existing customers</strong>.<br>Hyv&auml; has ensured that <strong>early adopters of Hyv&auml; Theme and/or Hyv&auml; Checkout are not penalized</strong> when moving to the more comprehensive Hyv&auml; Commerce suite.</p>
<ul>
<li><strong>Cashback Offer:</strong><br>Users who have already purchased Hyv&auml; Theme (&euro;1,000 ) and/or Hyv&auml; Checkout (&euro;1,000 ) licenses can trade them in for a credit that is applied towards their Hyv&auml; Commerce subscription fee. &nbsp;This effectively means they get value back for their previous purchases.</li>
<li><strong>No Financial or Functional Loss:</strong><br>This system is designed to ensure that users experience no financial or functional loss when deciding to adopt the extra features offered by Hyv&auml; Commerce.</li>
<li><strong>Minimal Technical Effort:</strong><br>From a technical standpoint, the upgrade process itself is expected to require minimal effort, especially as many of the initial Hyv&auml; Commerce features are focused on the admin panel and do not directly affect the live storefront code in a disruptive way.</li>
</ul>
<p>This generous upgrade path fosters immense goodwill, significantly lowers the barrier to entry for Hyv&auml; Commerce, and actively encourages users to transition to the new subscription model.</p>
<p>&nbsp;</p>
<h3>Adobe Commerce Considerations:</h3>
<p><strong>Hyv&auml; Commerce is fully compatible with Adobe Commerce.</strong><br>However, <strong>to leverage Adobe Commerce-specific features</strong> such as the B2B Suite, Live Search, and Product Recommendations with Hyv&auml;'s performance benefits, an <strong>additional Hyv&auml; Enterprise license will be required</strong> alongside the Hyv&auml; Commerce subscription.</p>
<p>Hyv&auml; Enterprise itself will continue to be maintained, supported, and updated to align with the latest Adobe offerings, ensuring that <strong>Adobe Commerce users can also benefit from the Hyv&auml; ecosystem</strong>. &nbsp;This tiered approach allows Hyv&auml; to cater effectively to both the Magento Open Source market and the more complex needs of Adobe Commerce users.</p>
<h3>Key Steps in Planning Your Transition with JaJuMa:</h3>
<p>Regardless of your starting point, a successful transition to Hyv&auml; Commerce involves careful planning.<br>JaJuMa guides you through:</p>
<ul>
<li><strong>Feasibility Study &amp; ROI Analysis:</strong><br>Understand the specific benefits and potential return on investment for the business. JaJuMa offers specialized <strong><a tabindex="-1" title="Hyv&auml; Strategy &amp; Consulting services" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Strategy &amp; Consulting services</a></strong> that include feasibility studies.</li>
<li><strong>Technical Audit:</strong><br>A thorough assessment of your current Magento setup, including all third-party extensions, custom code, and integrations, is essential.</li>
<li><strong>Migration Planning:</strong><br>Develop a detailed plan for data and content migration. As noted, stores heavily using PageBuilder may require specific migration work for content to be compatible with the new Hyv&auml; CMS. Similarly, a plan for ensuring all necessary third-party modules are Hyv&auml;-compatible is crucial.<br>JaJuMa provides expert <strong><a tabindex="-1" title="JaJuMa Luma to Hyv&auml; Migration" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Luma to Hyv&auml; migration services</a></strong>.</li>
<li><strong>Choosing the Right Partner:</strong><br>The expertise of your implementation partner is paramount. <br>As <strong>Official Hyv&auml; Gold Partners, Technology Partners, and Core Contributors</strong>, JaJuMa can navigate complexities, ensure best practices, and <strong>maximize the benefits of Hyv&auml; Commerce for your store</strong>.</li>
</ul>
<p><strong>Hyv&auml;'s pricing philosophy for Hyv&auml; Commerce is to make it "affordable for as many merchants as possible".</strong><br>This commitment to accessibility, combined with the thoughtful upgrade paths, aims to encourage broad adoption.</p>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="GMN30VS"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="why-jajuma">Why JaJuMa is Your Ideal Partner for Hyv&auml; Commerce Success</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Why JaJuMa for Hyv&auml; Commerce</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>JaJuMa offers unparalleled "Triple Hyv&auml; Partnership" expertise (Gold, Tech, Core Contributor) and a proven track record.</li>
<li>Proprietary extensions (Ultimate Image Optimizer, Power Toys) provide a "Hyv&auml; Commerce Plus" experience, often preempting roadmap features.</li>
<li>Comprehensive services, from strategy and custom development to the "JaJuMa Takeoff" package, ensure tailored, high-performance solutions.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>Choosing the right technology is only half the equation;</strong> selecting <strong>the right implementation partner is equally critical</strong> to unlocking the <strong>full potential of Hyv&auml; Commerce.</strong><br><strong>JaJuMa stands out as a premier partner</strong>, bringing a <strong>unique combination of deep expertise</strong>, <strong>innovative solutions</strong>, and a <strong>proven track record within the Magento and Hyv&auml; ecosystems.</strong><br><a tabindex="-1" title="JaJuMa Is Hyv&auml; Gold Partner" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"><img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-gold-partner-badge.svg" alt="Hyv&auml; Gold Partner Agency - Official Partner Badge" width="312" height="224"></a></p>
<h3>Our Unparalleled Expertise: The JaJuMa "Triple Hyv&auml; Partnership"</h3>
<p><strong><a title="Learn how to leverage the full potential of Hyv&auml; in our JaJuMa Hyv&auml;verse knowledge base" href="/en/hyvaverse-guide" target="_blank" rel="noopener">JaJuMa's credentials in the Hyv&auml; ecosystem</a> provide you with unparalleled assurance:</strong></p>
<ul>
<li><strong>Official Hyv&auml; Gold Partner:</strong><br>This <strong>prestigious status</strong> is a direct endorsement from Hyv&auml;, recognizing JaJuMa's <strong>high level of expertise</strong>, <strong>successful implementations</strong>, and <strong>contributions to the Hyv&auml; community</strong>.</li>
<li id="E3KHHYV"><strong>Official Hyv&auml; Technology Partner &amp; Core Contributor:</strong><br>Beyond partnership, JaJuMa is<strong> actively involved as a Technology Partner</strong> and <strong>has made Core Contributions</strong> to the Hyv&auml; Theme itself. This signifies a <strong>foundational understanding of Hyv&auml;'s architecture and philosophy from the inside out</strong>.<br>JaJuMa was, in fact, the <strong>first Magento extension provider to offer official Hyv&auml; compatibility</strong> for its products.</li>
<li><strong>Pioneering Early Adopters &amp; Proven Journey:</strong><br><strong>JaJuMa embarked on its Hyv&auml; journey early on (since April 2021)</strong>, accumulating <strong>years of dedicated experience and innovation.</strong> We even created the @hyvanaut Twitterbot, a testament to our enthusiasm and engagement.&nbsp;</li>
</ul>
<p><strong>These accolades aren't just badges; they represent a deep, verified expertise that translates into higher quality solutions and smoother project execution for our clients.</strong></p>
<p><a title="JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener"><strong>Read all about our Hyv&auml; Journey and "Triple Crown"</strong></a></p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="flex-1 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 items-center justify-evenly justify-items-center gap-4 my-8">
          	
            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" 
          		title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
            <svg width="744" height="216" viewBox="0 0 744 216" fill="none" class="w-44 h-auto rounded"
              xmlns="http://www.w3.org/2000/svg">
              <title>JaJuMa Hyva Technology Partner official badge</title>
              <rect width="744" height="216" rx="24" fill="#F6F7FF" />
              <rect width="193.5" height="216" fill="#0A23B9" />
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                fill="#14FFAF" />
              <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z"
                fill="#0A144B" />
              <path
                d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z"
                fill="#0A144B" />
              <path
                d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z"
                fill="#0A144B" />
              <path
                d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z"
                fill="#0A144B" />
              <path
                d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z"
                fill="#0A144B" />
              <path
                d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z"
                fill="#0A144B" />
              <path
                d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z"
                fill="#0A144B" />
              <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z"
                fill="#0A144B" />
              <path
                d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z"
                fill="#0A144B" />
              <path
                d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z"
                fill="#0A144B" />
              <path
                d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z"
                fill="#0A144B" />
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                fill="#0A144B" />
            </svg>
            </a>
            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" 
          		title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
            <svg width="732" height="216" viewBox="0 0 732 216" fill="none" class="w-44 h-auto rounded"
              xmlns="http://www.w3.org/2000/svg">
              <title>JaJuMa Hyva Contributor official badge</title>
              <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
              <rect width="193.5" height="216" fill="#0A23B9"></rect>
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z"
                fill="#14FFAF"></path>
              <path
                d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z"
                fill="#0A144B"></path>
              <path
                d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z"
                fill="#0A144B"></path>
              <path
                d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z"
                fill="#0A144B"></path>
              <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
              </path>
              <path
                d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z"
                fill="#0A144B"></path>
              <path
                d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z"
                fill="#0A144B"></path>
              <path
                d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z"
                fill="#0A144B"></path>
              <path
                d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z"
                fill="#0A144B"></path>
              <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
              </path>
              <path
                d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z"
                fill="#0A144B"></path>
              <path
                d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z"
                fill="#0A144B"></path>
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z"
                fill="#0A144B"></path>
            </svg>
            </a>
            <a href="/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes" title="JaJuMa-Shop | Mage-OS Demo-Shop">
				<img src="/media/wysiwyg/badges/mage-os-contributor-badge.svg" width="80" height="60" alt="Mage-OS Contributor Badge" loading="lazy">
			</a>
			<a href="/en/jajuma-shop" title="JaJuMa-Shop | Customized Shop-Solutions" target="_blank">
				<img src="/media/wysiwyg/badges/mams-brz-badge-full.svg" width="50" height="30" alt="Magento Association Bronze Member Badge" loading="lazy">
			</a>
            </div></div><div data-content-type="text" data-appearance="default" data-element="main"><h3>Proven Track Record &amp; Deep Hyv&auml; Knowledge in Action</h3>
<p><strong>Our theoretical knowledge is backed by a strong portfolio of successful Hyv&auml; projects.</strong><br>We've helped numerous businesses transform their Magento stores, achieving remarkable performance gains and rapid development timelines.<br><strong>Key Case studies</strong>&nbsp;include</p>
<ul>
<li>The <a tabindex="-1" title="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success" href="/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success" target="_blank" rel="noopener"><strong>"Project Rescue Accelerated to Light Speed"</strong></a> for Rosemarie Schulz,<br>which saw <strong>dramatic improvements in Core Web Vitals (CLS to 0.0, LCP to 0.8s) on a cost-effective server</strong>, and</li>
<li>The <strong><a tabindex="-1" title="A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp; JaJuMa)" href="/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" target="_blank" rel="noopener">"Baking a Super-Fast Magento Store in Weeks"</a></strong> for Stollen Store,<br>which <strong>launched in under four weeks on a limited budget</strong>, <strong>showcase our ability to deliver tangible results</strong>.&nbsp;</li>
</ul>
<p><strong>We understand the common pain points of Magento users and precisely how Hyv&auml;, and now Hyv&auml; Commerce, provides effective solutions.</strong></p>
<h3>JaJuMa's Hyv&auml; Extensions: Supercharging Your Hyv&auml; Commerce Store</h3>
<p><strong>&nbsp;</strong></p>
<p><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODUiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNjguMjMxIDI1LjMyNSIgY2xhc3M9InctYXV0byBoLWF1dG8iIHN0eWxlPSJjb2xvcjogIzNjM2MzYzsiPg0KICAgICAgICAgICAgICA8dGl0bGU+SmFKdU1hIE1hZ2VudG8gTWFya2V0cGxhY2UgQXBwcm92ZWQgJmFtcDsgVmVyaWZpZWQgZXh0ZW5zaW9uIHByb3ZpZGVyIGJhZGdlPC90aXRsZT4NCiAgICAgICAgICAgICAgPHBhdGggZD0iTTE4Ljk4OCA4Ljg3MnYxMC45NjdsLTIuNzE1IDEuNTYzVjEwLjQ0OEw5LjQ4NSA2LjUyNWwtNi43OTIgMy45MjMuMDE3IDEwLjk1OUwwIDE5LjgzOVY4Ljg4MWw5LjUwMy01LjQ4NnptLTguMTQxDQogICAgICAgIDEyLjUzbC0xLjM1My43ODgtMS4zNjItLjc3OVYxMC40NDhsLTIuNzExIDEuNTY3LjAwNCAxMC45NTkgNC4wNjQgMi4zNTEgNC4wNzMtMi4zNTFWMTIuMDExbC0yLjcxNS0xLjU2N3oiIGZpbGw9IiNlZTY1MjQiPjwvcGF0aD4NCiAgICAgICAgICAgICAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdHJhbnNmb3JtPSJtYXRyaXgoLjI2NDU4MyAwIDAgLjI2NDU4MyAtMTYuNzczNzk4IC0xMC45ODY0NDYpIiBmb250LXNpemU9IjUzIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iY3VycmVudENvbG9yIj4NCiAgICAgICAgICAgICAgICA8dHNwYW4geD0iMTQ2IiB5PSIxMTUiPk1hZ2VudG8gPHRzcGFuIGZvbnQtd2VpZ2h0PSI2MDAiPk1hcmtldHBsYWNlPC90c3Bhbj4NCiAgICAgICAgICAgICAgICA8L3RzcGFuPg0KICAgICAgICAgICAgICA8L3RleHQ+DQogICAgICAgICAgICAgIDx0ZXh0IHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjUwIiB5PSIxNCIgZm9udC1zaXplPSI4IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iY3VycmVudENvbG9yIj4NCiAgICAgICAgICAgICAgICA8dHNwYW4geD0iMzUiIHk9IjYiPkFwcHJvdmVkIGJ5PC90c3Bhbj4NCiAgICAgICAgICAgICAgPC90ZXh0Pg0KICAgICAgICAgICAgPC9zdmc+" alt="Approved by Magento Marketplace"></p>
<p><strong>While Hyv&auml; Commerce offers a wealth of out-of-the-box features, JaJuMa has developed an extensive suite of proprietary <a tabindex="-1" title="Hyv&auml; Theme Extensions for Magento 2 | JaJuMa-Develop" href="/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener">Hyv&auml;-compatible and Magento Marketplaced approved extensions</a>&nbsp;that can further enhance and customize your Hyv&auml; Commerce setup.</strong><br>These extensions often pioneer features ahead of the official roadmap and cover a wide range of needs:</p>
<ul>
<li>
<p><strong>Performance Optimization:</strong><br>Our flagship <a tabindex="-1" title="More about Ultimate Image Optimizer for Magento 2" href="/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a> (with advanced AVIF support ), <a tabindex="-1" title="More about Hyv&auml; Inline CSS for Magento 2 with Hyv&auml; Themes" href="/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Inline CSS</a> (for eliminating render-blocking CSS ), <a tabindex="-1" title="More about Back/Forward Cache (bfcache) for Magento 2" href="/en/jajuma-develop/magento-extensions/back-forward-cache-extension-for-magento-2" target="_blank" rel="noopener">Back/Forward Cache</a>, <a tabindex="-1" title="More about Smart Speculation Rules for Magento 2" href="/en/jajuma-develop/magento-extensions/smart-speculations-rules-extension-for-magento-2" target="_blank" rel="noopener">Smart Speculation Rules</a>, and <a tabindex="-1" title="More about Page Preload for Magento 2" href="/en/jajuma-develop/magento-extensions/page-preload-extension-for-magento-2" target="_blank" rel="noopener">Page Preload</a> extensions &nbsp;are <strong>designed to push your site's speed beyond standard capabilities</strong>.<br><strong>JaJuMa's Ultimate Image Optimizer, for instance, already delivers comprehensive media optimization capabilities that meet and exceed those outlined in the Hyv&auml;</strong><br>It could be said that <strong>Hyv&auml; is following JaJuMa's lead in this crucial area of performance enhancement</strong>, as we provide a complete, all-around media optimization solution today.</p>
</li>
<li>
<p><strong>SEO &amp; UX Enhancements:</strong><br>Extensions for tasks like <a tabindex="-1" title="More about PRG Pattern Link Masking for Magento 2" href="/en/jajuma-develop/magento-extensions/prg-pattern-link-masking-for-magento-2" target="_blank" rel="noopener">PRG Pattern Link Masking</a>, <a tabindex="-1" title="More about Customer Satisfaction Feedback for Magento 2" href="/en/jajuma-develop/magento-extensions/customer-satisfaction-feedback-extension-for-magento-2" target="_blank" rel="noopener">Customer Satisfaction Feedback</a>, and <a tabindex="-1" title="More about Auto Select Options for Magento 2" href="/en/jajuma-develop/magento-extensions/auto-select-options-extension-for-magento-2" target="_blank" rel="noopener">Auto Select Options</a>. &nbsp; &nbsp;</p>
</li>
<li>
<p><strong>Admin &amp; Marketing Tools:</strong><br>Our popular <a tabindex="-1" title="More about Matomo Analytics for Magento 2" href="/en/jajuma-develop/magento-extensions/matomo-analytics-extension-for-magento-2" target="_blank" rel="noopener">Matomo Analytics integration</a> offers privacy-focused, <strong>advanced analytics</strong>. <br>The unique <a tabindex="-1" title="More About Category Grids Callouts f&uuml;r Magento 2" href="/en/jajuma-develop/magento-extensions/category-grid-callouts-extension-for-magento-2" target="_blank" rel="noopener">Category Grid Callouts</a> extension allows injecting attention grabbing callouts and teasers into category grids.<br>Furthermore, while Hyv&auml; Commerce introduces a revamped Admin Dashboard, JaJuMa's <a tabindex="-1" title="More about Power Toys for Magento 2" href="/en/jajuma-develop/magento-extensions/power-toys-for-magento-2" target="_blank" rel="noopener">suite of "Power Toys"</a> already provides a <strong>highly effective alternative and enhancement</strong> to the standard admin experience, offering quick actions and dashboard-like reporting functions ubiquitously throughout the backend and even frontend.<br>These tools offer a <strong>new UI paradigm for Admins, enabling quick actions, access to dashboard-like reporting functions</strong> (such as for Core Web Vitals, sales data via Matomo, or image optimization reports), and convenient bookmarks.<br>Crucially, these <strong>Power Toys are available to administrators not just within a specific dashboard section but ubiquitously throughout the Magento backend and can even extend their utility to the frontend</strong>, offering a more <strong>pervasive and immediate command center for streamlined admin tasks</strong>.</p>
</li>
</ul>
<p><strong>These extensions are not just add-ons; they are innovations that deliver a "Hyv&auml; Commerce Plus" experience.</strong></p>
<h3>Services Tailored for Your Hyv&auml; Commerce Journey</h3>
<p>JaJuMa offers a comprehensive range of services to support you at every stage of your Hyv&auml; Commerce adoption:</p>
<ul>
<li><a tabindex="-1" title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>Custom Hyv&auml; Commerce Development &amp; Migration:</strong></a><br>Whether building a brand-new store or migrating an existing one, our team has the expertise to delivers bespoke solutions. &nbsp; &nbsp;</li>
<li><a tabindex="-1" title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"><strong>Advanced Performance Optimization Services:</strong></a><br><a tabindex="-1" title="Ultimate Guide to LCP Optimization" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener">Leveraging our deep performance optimization expertise and proprietary tools</a> (like our own <strong><a tabindex="-1" title="Real User Error &amp; Performance Monitoring For Magento 2 &amp; Hyv&auml;" href="/en/jajuma-develop/magento-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">Real User Monitoring solution</a></strong>).</li>
</ul>
<h3>The JaJuMa Takeoff Package: High-Performance Hyv&auml;, Fast &amp; Affordable</h3>
<p>For a rapid, budget-friendly entry (under &euro;5,000), the <strong><a tabindex="-1" title="JaJuMa Takeoff - Fixed price Hyv&auml; Quick Launch Accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener">JaJuMa Takeoff package</a></strong> provides a complete, expertly configured Magento Hyv&auml; store foundation.<br>It includes official Hyv&auml; Theme &amp; Checkout licenses (&euro;2,000 value), JaJuMa's expert setup, exclusive no-code Hyv&auml; UI Manager and Style Manager, Speed Boost suite, and admin tools.</p>
<h3>Experience the JaJuMa Difference: Explore Our Hyv&auml; Demo Shop</h3>
<p>Witness the speed and modern UI/UX of a JaJuMa-implemented Hyv&auml; store in our <strong><a tabindex="-1" title="JaJuMa-Shop | Demo-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">interactive Hyv&auml; Demo Shop</a></strong> (frontend and backend).</p>
<p>&nbsp;</p></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left" border="1"><caption>JaJuMa's Hyv&auml; Commerce Solutions: Expertise &amp; Innovation at a Glance</caption>
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">JaJuMa Offering / Service</th>
<th class="p-4 font-semibold">Key Features / Benefits</th>
<th class="p-4 font-semibold custom-inset-shadow relative">Why It Matters for Your Hyv&auml; Commerce Project</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800"><a title="JaJuMa Is Hyv&auml; Gold Partner, Tech Partner &amp; Core Contributor" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener">Triple Hyv&auml; Partnership</a></td>
<td class="p-4">Deepest expertise, early access, ability to influence Hyv&auml;'s direction, core code contributions.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Ensures cutting-edge, best-practice implementation and insights</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800"><a title="Hyv&auml; Theme Extensions for Magento 2 | JaJuMa-Develop" href="/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener">Proprietary Hyv&auml; Extensions</a></td>
<td class="p-4">Unique performance enhancements (Inline CSS, Image Optimizer), advanced admin tools (Power Toys).</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Achieve a competitive edge with optimizations not available elsewhere</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800"><a title="JaJuMa Takeoff - Fixed price Hyv&auml; Quick Launch Accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener">JaJuMa Takeoff Package</a></td>
<td class="p-4">Affordable (&lt;&euro;5k), rapid Hyv&auml; foundation, includes licenses &amp; exclusive no-code UI/Style Managers, Speed Boost.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Fast-track your launch with a high-performance, turnkey setup</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800"><a title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Comprehensive Hyv&auml; Store Development &amp; Maintenance Services</a></td>
<td class="p-4">From crafting bespoke, end-to-end Hyv&auml; e-commerce solutions and replatforming to ongoing maintenance and optimization</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Leverage our 100% Magento &amp; Hyv&auml; Focused "Hyv&auml;naut" expertise</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800"><a title="Custom Hyv&auml; Development &amp; Compatibility" href="/en/jajuma-develop" target="_blank" rel="noopener">Custom Hyv&auml; Development &amp; Compatibility</a></td>
<td class="p-4">Bespoke custom features, seamless integration, expert resolution of module conflicts.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Tailored solutions ensure full compatibility and functionality</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800"><a title="Hyv&auml; Performance Optimization" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Advanced Performance Optimization</a></td>
<td class="p-4">Proprietary RUM tool, deep-dive audits, focus on all CWV, advanced caching.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Maximize speed, improve SEO, and boost user satisfaction</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800"><a title="JaJuMa-Shop | Demo-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Interactive Hyv&auml; Demo Shop</a></td>
<td class="p-4">Live frontend and backend Magento 2 Hyv&auml; experience.</td>
<td class="p-4 bg-gray-100 font-semibold custom-inset-shadow relative text-primary-dark">&#9989; Experience Hyv&auml; in action and see JaJuMa's quality firsthand</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 lg:mt-10 text-xl text-center text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200"><strong class="text-primary-dark">Summary:</strong> <strong class="text-slate-800">JaJuMa is the most experienced and innovative Hyv&auml; partner - </strong>offering exclusive tools, services, and unmatched value for merchants aiming to succeed with Hyv&auml; Commerce.</div>
</div>
<p>&nbsp;</p></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="OWBVQ8M"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="future-is-componentized">Outperform the Competition: How JaJuMa Leverages Hyv&auml; Commerce to Drive Your Growth</h2>
<p>Adopting Hyv&auml; Commerce with JaJuMa isn't just about new technology; it's about achieving <strong>tangible business outcomes</strong>&nbsp;that drive your growth and help you outperform the competition.</p>
<ul>
<li><strong>Achieving Top Google Rankings:</strong><br>Site speed and Core Web Vitals are significant SEO ranking factors.<br>Hyv&auml; Themes, a core part of Hyv&auml; Commerce, excel here, with over 50% of Hyv&auml; stores hitting Google's CWV benchmarks.<br>JaJuMa enhances this with specialized optimization services and proprietary extensions like <strong><a title="Hyv&auml; Inline CSS Extension" href="/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Inline CSS</a>,</strong> our <strong><a title="Ultimate Image Optimizer" href="/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a></strong>&nbsp;and the<strong> <a title="Real User, Error &amp; Performance Monitoring for Hyv&auml; and Magento" href="/en/jajuma-develop/magento-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">first and only Hyv&auml;/Magento dedicated Real User Monitoring solution</a></strong>. <br>Upcoming Hyv&auml; Commerce features like CMS Page Hierarchy will further bolster your SEO capabilities.</li>
<li><strong>Establishing Unquestionable Authority:</strong><br>A fast, flawlessly performing website, built on a modern stack, signals credibility and professionalism to your customers.<br>JaJuMa's meticulous implementation, adherence to best practices, and our own contributions to the Hyv&auml; ecosystem (as Core Contributors) JaJuMa's meticulous implementation and own contributions to the Hyv&auml; ecosystem solidify this authority.</li>
<li><strong>Driving Conversions and Sales:</strong><br>Site speed directly impacts sales (e.g., Vodafone's 8% increase with LCP improvement). Faster load times reduce bounce rates.<br>The superior UX of Hyv&auml; Themes and UI, plus the efficient Hyv&auml; Checkout (all included in Hyv&auml; Commerce), positively impact conversion funnels and reduce cart abandonment, leading to incrased revenue.</li>
<li><strong>Competitive Edge through JaJuMa's Unique Approach:</strong><br><strong>When you partner with JaJuMa for your Hyv&auml; Commerce implementation, you benefit</strong> from an <strong>added layer of optimization</strong> and <strong>unique functionalities</strong> derived from our proprietary tools and <a title="Visit the JaJuMa Hyv&auml;verse for a deep-dive on our Hyv&auml; Solutions, Performance Guides, and Expert Insights" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>deep Hyv&auml;-specific expertise</strong></a>. <br><strong>This ensures a tailored solution that competitors will find difficult to replicate, giving you a distinct advantage in the marketplace.</strong></li>
</ul></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="DRS3BJR"><div data-content-type="text" data-appearance="default" data-element="main"><h2>Your Journey with JaJuMa: Partnership for Peak Performance (Getting Started)</h2>
<p><strong>Ready to embark on your Hyv&auml; Commerce journey and transform your Magento store?</strong><br>JaJuMa offers several <strong>clear pathways to</strong> get started, ensuring <strong>a strategic and successful adoption</strong>:</p>
<ul>
<li><strong>Personalized Consultation:</strong><br><a title="Lets Discuss your Goals and Project" href="#contact-content">Contact JaJuMa today</a> to discuss your specific business goals and how Hyv&auml; Commerce, expertly implemented by our team, can provide effective solutions.<br>We'll help you understand the potential ROI for your unique situation.</li>
<li><strong>Experience Hyv&auml; Live: Explore Our Demo Shop:</strong><br>Seeing is believing. <a title="JaJuMa-Shop | Demo-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Experience a JaJuMa-implemented Hyv&auml; store firsthand (frontend and backend)</a> to witness the speed, modern UI/UX, and enhanced admin capabilities.</li>
<li><strong>Strategic Planning: Request a Hyv&auml; Feasibility Study &amp; ROI Analysis:</strong> <br>For businesses seeking a detailed assessment, our <a title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Strategy &amp; Consulting services</a> include in-depth feasibility studies and ROI projections tailored to your Hyv&auml; Commerce project.</li>
</ul>
<p>Explore our comprehensive Hyv&auml; solutions:</p>
<ul>
<li><a title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Comprehensive Hyv&auml; Services</a></li>
<li><a title="JaJuMa Takeoff - Fixed price Hyv&auml; Quick Launch Accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener">JaJuMa Takeoff Package</a></li>
<li><a title="Custom Hyv&auml; Development" href="/en/jajuma-develop" target="_blank" rel="noopener">Custom Hyv&auml; Development &amp; Extension Creation</a></li>
</ul>
<p><strong>JaJuMa emphasizes a partnership approach, acting as your strategic ally dedicated to achieving and maintaining peak performance and long-term e-commerce success with Hyv&auml; Commerce.</strong></p></div><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="conclusion">Conclusion: Is Hyv&auml; Commerce Right for Your Magento Store?</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>Conclusion</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Hyv&auml; Commerce offers transformative speed, modern UX/DX, improved admin capabilities, and simplified content management for Magento.</li>
<li>It's compelling for Magento Open Source merchants, Hyv&auml; Theme users, agencies, and SMBs wanting Magento's power without enterprise complexity.</li>
<li>Weigh subscription costs against ROI from higher conversions, lower dev/maintenance costs, and improved team productivity.</li>
<li>Partnering with an expert like JaJuMa is key to maximizing Hyv&auml; Commerce benefits.</li>
</ul>
</div>
</div>
</div>
</div>
<p><strong>Hyv&auml; Commerce represents a significant and exciting evolution for the Magento platform.</strong><br>It delivers on the <strong>promise of transformative speed</strong>, a <strong>modern user and developer experience</strong>, vastly <strong>improved admin capabilities</strong>, and <strong>simplified content management</strong>. <strong>For Magento Open Source merchants</strong> seeking a contemporary, high-performance platform, for development teams already leveraging the benefits of Hyv&auml; Themes, for agencies looking for more intuitive and faster ways to manage client content, and particularly for small to medium-sized businesses wanting to maximize Magento's power without enterprise-level complexity, <strong>Hyv&auml; Commerce presents a compelling and future-proof proposition</strong>.</p>
<p><br><strong>While it involves an annual subscription, this investment should be weighed against the substantial potential ROI:</strong><br>increased conversion rates driven by superior performance and UX, lower development and maintenance costs due to enhanced efficiency and a cleaner codebase, and improved productivity and satisfaction for merchant teams.</p>
<p>The inclusion of Hyv&auml; Theme and Checkout licenses within the Commerce subscription further enhances its value. &nbsp;</p>
<p>Ultimately, <strong>Hyv&auml; Commerce is a bold step towards "making merchants' lives easier"</strong> &nbsp;and, as some have suggested, offering potentially <strong>"the best version of Magento the world has ever seen"</strong>.<br>It <strong>addresses key challenges</strong>, builds on <strong>proven strengths</strong>, and provides a <strong>clear, innovative path forward for Magento stores</strong> looking to thrive in 2025 and beyond.</p>
<p><br><strong>If you're ready to elevate your Magento store to new heights of performance, usability and efficiency, Hyv&auml; Commerce - implemented and expertly tailored by JaJuMa - is be the game-changing solution you've been waiting for.</strong></p>
<p><br><strong>Don't let your Magento store fall behind.<br>Contact JaJuMa today! to discuss your Hyv&auml; Commerce project and receive a prsonalized consultation!</strong></p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="flex flex-col xl:flex-row justify-center items-center gap-4 my-16">
                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Discuss Your Hyvä Project with JaJuMa"
                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                        stroke="currentColor" class="w-5 h-5 mr-2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
                    </svg>
                    Discuss Your Hyvä Project with JaJuMa
                </a>
                <a href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="Explore Our Hyvä TakeOff Package"
                    class="btn btn-secondary flex xl:inline-flex items-center justify-center w-full lg:w-fit px-6 py-3 text-base font-medium rounded-md border border-primary-light text-primary hover:bg-primary-lighter focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                    Explore Our Hyvä TakeOff Package
                </a>
            </div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="C14N9XX"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="faq">Frequently Asked Questions (FAQ) about Hyv&auml; Commerce</h2>
<div class="container mx-auto">
<div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
<div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
<div class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBjb2xvcj0iIzkzYzVmZiI+PHBhdGggZD0iTTE5IDkuNjJjMCAyLjU4LTEuMjcgNC41NjUtMy4yMDIgNS44NzJjLS40NS4zMDQtLjY3NS40NTYtLjc4Ni42M2MtLjExLjE3Mi0uMTQ5LjQtLjIyNC44NTRsLS4wNi4zNTNjLS4xMzIuNzk4LS4xOTkgMS4xOTctLjQ3OSAxLjQzNHMtLjY4NC4yMzctMS40OTMuMjM3aC0yLjYxMmMtLjgwOSAwLTEuMjEzIDAtMS40OTMtLjIzN3MtLjM0Ni0uNjM2LS40OC0xLjQzNGwtLjA1OC0uMzUzYy0uMDc2LS40NTMtLjExMy0uNjgtLjIyMy0uODUycy0uMzM2LS4zMjYtLjc4Ny0uNjM0QzUuMTkyIDE0LjE4MyA0IDEyLjE5OSA0IDkuNjJDNCA1LjQxMyA3LjM1OCAyIDExLjUgMmE3LjQgNy40IDAgMCAxIDEuNS4xNTIiPjwvcGF0aD48cGF0aCBkPSJtMTYuNSAybC4yNTguNjk3Yy4zMzguOTE0LjUwNyAxLjM3MS44NCAxLjcwNGMuMzM0LjMzNC43OTEuNTAzIDEuNzA1Ljg0MUwyMCA1LjVsLS42OTcuMjU4Yy0uOTE0LjMzOC0xLjM3MS41MDctMS43MDQuODRjLS4zMzQuMzM0LS41MDMuNzkxLS44NDEgMS43MDVMMTYuNSA5bC0uMjU4LS42OTdjLS4zMzgtLjkxNC0uNTA3LTEuMzcxLS44NC0xLjcwNGMtLjMzNC0uMzM0LS43OTEtLjUwMy0xLjcwNS0uODQxTDEzIDUuNWwuNjk3LS4yNThjLjkxNC0uMzM4IDEuMzcxLS41MDcgMS43MDQtLjg0Yy4zMzQtLjMzNC41MDMtLjc5MS44NDEtMS43MDV6bS0zIDE3djFjMCAuOTQzIDAgMS40MTQtLjI5MyAxLjcwN1MxMi40NDMgMjIgMTEuNSAyMnMtMS40MTQgMC0xLjcwNy0uMjkzUzkuNSAyMC45NDMgOS41IDIwdi0xIj48L3BhdGg+PC9nPjwvc3ZnPg==" alt="Key Takeaways Icon"></div>
<h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]"><span class="text-[#93c5ff]">Key Takeaways</span><br>FAQ</h3>
</div>
<div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
<div class="flex flex-col gap-8 text-xl">
<ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
<li>Hyv&auml; Theme is frontend; Commerce is a full suite (Theme, Checkout, UI + new backend/admin tools via subscription).</li>
<li>Existing Theme/Checkout licenses can be traded for credit towards Hyv&auml; Commerce subscription.</li>
<li>Hyv&auml; Commerce works with Adobe Commerce; Hyv&auml; Enterprise add-on needed for specific Adobe B2B/Commerce features.</li>
<li>New Commerce features (not in Theme): Hyv&auml; CMS, Admin Dashboard, Image Editor, Media Optimization, refreshed Admin Theme.</li>
<li>Hyv&auml; CMS complements, not replaces, PageBuilder; both can run in parallel.</li>
</ul>
</div>
</div>
</div>
</div>
<p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-733 .chevron::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkzIDcuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCAxMC41ODZsMy4yOTMtMy4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNGwtNCA0YTEgMSAwIDAxLTEuNDE0IDBsLTQtNGExIDEgMCAwMTAtMS40MTR6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PC9zdmc+Cg==);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-733 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 chevron">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>What's the main difference between Hyv&auml; Theme and Hyv&auml; Commerce?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; Theme is primarily a <strong>frontend replacement</strong> for Magento's Luma theme, focused on delivering exceptional storefront performance and a modern developer experience using technologies like Alpine.js and Tailwind CSS. Its core philosophy is to solve Luma's frontend bloat and speed issues. It includes the <a title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">Hyv&auml; UI library for pre-built components.</a></p>
<p>Hyv&auml; Commerce, on the other hand, is a <strong>comprehensive product suite</strong> that includes Hyv&auml; Theme, Hyv&auml; Checkout, and <a title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">Hyv&auml; UI</a>, but significantly expands into the <strong>backend and admin experience</strong>. Its philosophy is a holistic enhancement of the entire Magento platform, aiming to simplify store management and improve operational efficiency. It adds powerful new tools like the Hyv&auml; CMS with live preview, a revamped Admin Dashboard, integrated Media Optimization, and an Image Editor, all under an annual subscription model. Think of Hyv&auml; Theme as the high-performance engine and chassis; Hyv&auml; Commerce adds the advanced cockpit, control systems, and operational tools for the entire vehicle.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>I already have a Hyv&auml; Theme license. How do I upgrade to Hyv&auml; Commerce?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; has confirmed a "smooth upgrade path" for existing customers of Hyv&auml; Theme and/or Hyv&auml; Checkout. This involves a cashback offer or credit system where the value of your previous licenses can be applied towards the Hyv&auml; Commerce annual subscription fee, ensuring no financial or functional loss. <br>The process is designed to be fair and encourage adoption of the full suite.<br>It's best to contact Hyv&auml; directly or an official partner like JaJuMa for the specific details applicable to your situation.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>Will Hyv&auml; Commerce work with my Adobe Commerce store?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes, Hyv&auml; Commerce is compatible with Adobe Commerce. However, to ensure full compatibility and leverage Adobe Commerce-specific features (such as the B2B suite, Adobe Sensei Product Recommendations, or Adobe Live Search) alongside Hyv&auml;'s performance benefits, you will typically also need the <strong>Hyv&auml; Enterprise add-on</strong> in addition to your Hyv&auml; Commerce subscription. Hyv&auml; Enterprise will continue to be maintained and supported for this purpose.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>What are the key new features in Hyv&auml; Commerce that aren't in the standard Hyv&auml; Theme offering?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>The standard Hyv&auml; Theme offering focuses on frontend performance and developer experience. Hyv&auml; Commerce builds upon this by adding a suite of powerful <strong>new backend and admin-focused features</strong>. These exclusive additions include:</p>
<ul>
<li>The <strong>new Hyv&auml; CMS</strong> with live preview, version control, and reusable components - solving the often clunky and slow Magento Page Builder experience.</li>
<li>A customizable, widget-based <strong>Admin Dashboard</strong> for better insights and efficiency - addressing the lack of actionable, at-a-glance data in the default Magento admin.</li>
<li>An <strong>integrated Image Editor</strong> (powered by Filerobot) for quick in-admin edits - removing the need to use external software for basic image manipulations.</li>
<li><strong>Advanced Media Optimization</strong> tools for automated image improvements (WebP/AVIF support) - tackling the common issue of unoptimized images slowing down Magento sites.</li>
<li>A <strong>refreshed Admin Theme</strong> for a more modern and intuitive backend look and feel - improving the daily usability for admin teams.</li>
</ul>
<p>Essentially, Hyv&auml; Commerce extends the benefits of Hyv&auml; beyond the storefront to significantly improve how merchants manage their entire Magento operation.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>Is Hyv&auml; Commerce replacing Magento's PageBuilder?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>No, the new Hyv&auml; CMS introduced with Hyv&auml; Commerce is not an immediate, forced replacement for Magento's existing PageBuilder. Both systems can run in parallel, especially during a transition period, allowing content teams to choose the most appropriate editor for specific pages or content blocks. However, Hyv&auml; CMS is designed to offer a significantly more intuitive, faster, and modern content management experience for many common tasks compared to the traditional PageBuilder, which many users find cumbersome and slow. Over time, many users may find Hyv&auml; CMS to be their preferred tool for most content operations due to its enhanced workflow and live preview capabilities.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>How much does Hyv&auml; Commerce cost?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; Commerce is offered as an annual subscription. The General Availability license is priced at &euro;3,000 per year. This annual subscription is comprehensive and includes access to the Hyv&auml; Commerce codebase, licenses for Hyv&auml; Theme and Hyv&auml; Checkout (which would otherwise be separate costs), all new and exclusive Hyv&auml; Commerce features (CMS, Dashboard, etc.), frequent updates, dedicated support from the Hyv&auml; team, and access to the private Hyv&auml; community Slack channel. For the most current and specific pricing, it's always best to check the <a title="Official Hyv&auml; Commerce Page" href="https://www.hyva.io/hyva-commerce.html" target="_blank" rel="nofollow noopener">official Hyva.io website</a> or consult an official partner like JaJuMa.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-7">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="6">
                                <span>How does JaJuMa enhance a standard Hyv&auml; Commerce implementation?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-7">
                                <div class="accordion-item-body-content p-4">
                                    <p>JaJuMa enhances a standard Hyv&auml; Commerce implementation through several key advantages:</p>
<ul>
<li>Unparalleled Expertise: As an <strong>Official Hyv&auml; Gold Partner, Technology Partner, and active Core Contributor</strong> (the "Triple Hyv&auml; Partnership" ), we possess the deepest understanding of the Hyv&auml; ecosystem, often gaining early access to new developments.</li>
<li><strong>Proprietary Hyv&auml; Extensions:</strong> We've developed a suite of <a title="Hyv&auml; Theme Extensions for Magento 2 | JaJuMa-Develop" href="/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener">exclusive Hyv&auml;-first extensions</a> that complement and often preempt features on the official Hyv&auml; Commerce roadmap. This includes our <a title="Ultimate Image &amp; Media Optimization For Magento" href="/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a> for advanced media handling and our <a title="More about Power Toys for Magento 2" href="/en/jajuma-develop/magento-extensions/power-toys-for-magento-2" target="_blank" rel="noopener">Power Toys suite</a> for enhanced admin UI and productivity.</li>
<li><strong>Advanced Performance Optimization:</strong> We go beyond standard Hyv&auml; setups, leveraging our <a title="Ultimate Guide to LCP Optimization" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener">deep performance optimization expertise</a> and unique tools like our <a title="Real User Error &amp; Performance Monitoring For Magento 2 &amp; Hyv&auml;" href="/en/jajuma-develop/magento-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">Real User Monitoring (RUM) solution</a> to ensure your store achieves peak speed and Core Web Vitals.</li>
<li><strong>Custom Development &amp; Strategic Consulting:</strong> We offer <a title="Custom Hyv&auml; Development" href="/en/jajuma-develop" target="_blank" rel="noopener">tailored development services</a> to meet unique business needs and <a title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">strategic consulting</a> to help you maximize your Hyv&auml; Commerce investment. Our <a title="JaJuMa Takeoff - Fixed price Hyv&auml; Quick Launch Accelerator" href="/en/jajuma-takeoff" target="_blank" rel="noopener">JaJuMa Takeoff package</a> also provides a rapid, affordable foundation for new Hyv&auml; Commerce stores.</li>
</ul>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-8">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="7">
                                <span>What is Hyv&auml; UI and is it included in Hyv&auml; Commerce?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-8">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; UI is a comprehensive library of pre-built, ready-to-use frontend components (like headers, footers, product galleries, sliders, etc.) specifically designed for Hyv&auml; Themes. These components are fully functional, including Alpine.js logic for interactivity, and are styled with Tailwind CSS. The main purpose of Hyv&auml; UI is to significantly accelerate frontend development, reduce custom coding for common elements (a pain point when building themes from scratch), and ensure a consistent, high-quality user experience.</p>
<p>Yes, Hyv&auml; UI is included free of charge with a Hyv&auml; Theme license , and since Hyv&auml; Theme is a core part of the Hyv&auml; Commerce suite, Hyv&auml; UI is therefore included when you subscribe to Hyv&auml; Commerce. You can learn more in our detailed guide: <a title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" target="_blank" rel="noopener">Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores</a>.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-9">
                            <div class="accordion-item-header-733 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="8">
                                <span>Is Hyv&auml; Commerce suitable for B2B stores?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-9">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; Commerce itself, being built on Magento Open Source and including Hyv&auml; Theme, can serve as a foundation for B2B stores. Hyv&auml; Theme is compatible with B2B functionalities. However, for businesses that require the specific, advanced B2B features native to Adobe Commerce (like company accounts, shared catalogs, quote engines), you would typically need the Hyv&auml; Enterprise add-on in conjunction with Hyv&auml; Commerce to ensure full compatibility and optimal performance of those Adobe-specific B2B modules. JaJuMa has experience implementing robust B2B solutions with Hyv&auml; and can advise on the best approach for your specific B2B requirements.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    </div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div></div></div>]]></description>
              <pubDate>Mon, 09 Jun 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa-Shop]]></category>
           </item>
       <item>
      <title>Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)</title>
      <link>https://www.jajuma.de/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it</link>
      <guid>https://www.jajuma.de/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=D4OHPT6],#html-body [data-pb-style=N07BEJ5]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=N07BEJ5]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=D4OHPT6]{align-self:stretch}#html-body [data-pb-style=GT1DGMN]{display:flex;width:100%}#html-body [data-pb-style=P3LMFBH],#html-body [data-pb-style=RGALPXT]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=D5ROKW3]{border-style:none}#html-body [data-pb-style=NJW9T52],#html-body [data-pb-style=SSXWRWH]{max-width:100%;height:auto}#html-body [data-pb-style=GCL5H54],#html-body [data-pb-style=OQI2NNQ],#html-body [data-pb-style=QDBG2NU],#html-body [data-pb-style=WS1DXFB]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=IRYMBLP]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=EYFT1LS]{display:flex;width:100%}#html-body [data-pb-style=C8MNED7],#html-body [data-pb-style=D89QCR8]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=C8MNED7]{align-self:center}#html-body [data-pb-style=IC5C5C8]{border-style:none}#html-body [data-pb-style=EEMQU24],#html-body [data-pb-style=K3DCCU7]{max-width:100%;height:auto}#html-body [data-pb-style=OYHXRM5]{text-align:center;border-style:none}#html-body [data-pb-style=EF093FN],#html-body [data-pb-style=TMBRY4R]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=REIS2HC]{text-align:center;border-style:none}#html-body [data-pb-style=O6X8S8F],#html-body [data-pb-style=S7DNBKX]{max-width:100%;height:auto}#html-body [data-pb-style=WCWJ5CI]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=GG1CN53]{display:flex;width:100%}#html-body [data-pb-style=CXWYIIO],#html-body [data-pb-style=HXE34P9]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:center}#html-body [data-pb-style=MLLIDRV]{border-style:none}#html-body [data-pb-style=HL6CVEH],#html-body [data-pb-style=MKC3QUI]{max-width:100%;height:auto}#html-body [data-pb-style=Q54QAF9]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=QOYHTPA]{display:flex;width:100%}#html-body [data-pb-style=QDBQXH0]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:center}#html-body [data-pb-style=FEL1JYG]{border-style:none}#html-body [data-pb-style=WGW0LC6],#html-body [data-pb-style=YPVDOA3]{max-width:100%;height:auto}#html-body [data-pb-style=N1BOCW2]{justify-content:flex-start;display:flex;flex-direction:column;width:50%;align-self:stretch}#html-body [data-pb-style=BVNG6IV],#html-body [data-pb-style=DGWMM91],#html-body [data-pb-style=N1BOCW2],#html-body [data-pb-style=UMAUSOB]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=DGWMM91],#html-body [data-pb-style=UMAUSOB]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=BVNG6IV]{align-self:stretch}#html-body [data-pb-style=OTBD5SW]{display:flex;width:100%}#html-body [data-pb-style=KXCYX2M]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:41.6667%;align-self:center}#html-body [data-pb-style=QPFVUIR]{border-style:none}#html-body [data-pb-style=FDHERKB],#html-body [data-pb-style=HQQWM2R]{max-width:100%;height:auto}#html-body [data-pb-style=JGDHNNQ]{width:58.3333%;align-self:stretch}#html-body [data-pb-style=JGDHNNQ],#html-body [data-pb-style=NCP5WEQ],#html-body [data-pb-style=TDCF77J],#html-body [data-pb-style=YNAH5TK]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=ECCY8TT]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=BBGT69D]{display:flex;width:100%}#html-body [data-pb-style=J8I7FXQ],#html-body [data-pb-style=U9IPUI4]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:58.3333%;align-self:center}#html-body [data-pb-style=J8I7FXQ]{width:41.6667%}#html-body [data-pb-style=V4XEMI1]{border-style:none}#html-body [data-pb-style=IXKXSEH],#html-body [data-pb-style=SIH2NFI]{max-width:100%;height:auto}#html-body [data-pb-style=DR4IQ4M],#html-body [data-pb-style=HU98N1C],#html-body [data-pb-style=R3D8367]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}@media only screen and (max-width: 768px) { #html-body [data-pb-style=D5ROKW3],#html-body [data-pb-style=FEL1JYG],#html-body [data-pb-style=IC5C5C8],#html-body [data-pb-style=MLLIDRV],#html-body [data-pb-style=OYHXRM5],#html-body [data-pb-style=QPFVUIR],#html-body [data-pb-style=REIS2HC],#html-body [data-pb-style=V4XEMI1]{border-style:none} }</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="N07BEJ5"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="D4OHPT6"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="GT1DGMN"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="P3LMFBH"><div data-content-type="text" data-appearance="default" data-element="main"><p>In the dynamic world of Magento e-commerce, <a title="Revolutionary frontend for Magento 2" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Themes</strong></a> have truly revolutionized frontend development. They've set new benchmarks Magento 2, delivering breathtaking performance, an enhanced developer experience, and a refreshing alternative to the complexities of the traditional Luma theme. As you explore the<a title="Learn More about Hyv&auml; in the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong> JaJuMa Hyv&auml;verse, our central Hyv&auml; knowlede base</strong></a>, you'll quickly see why it's a game-changer that makes <strong><a title="Your Ultimate Guide to Magento, the World's Most Powerful Commerce Platform" href="/en/magento-metropolis-guide" target="_blank" rel="noopener">Magento</a></strong> even better.</p>
<p>If <a title="Hyv&auml; Themes" href="https://www.hyva.io/" rel="nofollow noopener">Hyv&auml; Themes</a> are the high-performance engine, then&nbsp;<a title="Hyv&auml; UI" href="https://www.hyva.io/hyva-ui.html" rel="nofollow noopener"><strong>Hyv&auml; UI</strong></a> is the precision-engineered toolkit that empowers you to build the sleek, functional, and user-friendly vehicle around it - achieving this faster and more efficiently than ever before.</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="RGALPXT"><figure class="md:ml-4 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="D5ROKW3"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-what-is-it-and-why-is-it-a-game-changer-for-your-magento-hyva-store_1_.png" alt="Architectural illustration of Hyv&auml; UI components accelerating Magento frontend development." title="" data-element="desktop_image" data-pb-style="NJW9T52"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-what-is-it-and-why-is-it-a-game-changer-for-your-magento-hyva-store_1_.png" alt="Architectural illustration of Hyv&auml; UI components accelerating Magento frontend development." title="" data-element="mobile_image" data-pb-style="SSXWRWH"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p><strong>But what exactly <em>is</em> Hyv&auml; UI?</strong> Is it merely a library of pre-styled templates, or does it offer something more profound? For&nbsp;<strong>Magento merchants, developers, and agencies</strong> aiming to maximize their Hyv&auml; investment,&nbsp;<strong>a deep understanding of Hyv&auml; UI is crucial</strong>. It&rsquo;s the key to unlocking <strong>significantly faster development timelines</strong>, substantial <strong>cost savings</strong>, and consistently <a title="JaJuMa-Shop | Customized Shop-Solutions" href="/en/jajuma-shop"><strong>superior user experiences for your Magento store</strong></a>.</p>
<p>&nbsp;</p>
<p><a tabindex="-1" title="Official Hyv&auml; Gold Partner Agency, Technology Partner and Core Contributor" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener"><strong>As JaJuMa, official Hyv&auml; Gold Partner, Tech Partner and active Core Contributor</strong></a>, we've been deeply embedded in the Hyv&auml; ecosystem since its earliest days. We haven't just witnessed its evolution; we've actively shaped it. This <strong>comprehensive guide</strong>, drawing from our <strong>extensive hands-on experience</strong>, will <strong>demystify Hyv&auml; UI</strong>, explore its <strong>powerful features</strong>, demonstrate how, with JaJuMa's expertise,&nbsp; it can become a <a title="JaJuMa-Shop | Online Store with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>cornerstone of your high-performance Hyv&auml; development strategy</strong></a>.</p>
<p>&nbsp;</p></div><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb82-absolute {
position: absolute
}
.cmsb82-relative {
position: relative
}
.cmsb82-bottom-0 {
bottom: 0px
}
.cmsb82-left-0 {
left: 0px
}
.cmsb82-z-\[1\] {
z-index: 1
}
.cmsb82-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb82-my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.cmsb82-ml-4 {
margin-left: 1rem
}
.cmsb82-flex {
display: flex
}
.cmsb82-inline-flex {
display: inline-flex
}
.cmsb82-grid {
display: grid
}
.cmsb82-hidden {
display: none
}
.cmsb82-h-10 {
height: 2.5rem
}
.cmsb82-h-auto {
height: auto
}
.cmsb82-w-10 {
width: 2.5rem
}
.cmsb82-w-8 {
width: 2rem
}
.cmsb82-flex-shrink-0 {
flex-shrink: 0
}
.cmsb82-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb82-flex-row {
flex-direction: row
}
.cmsb82-items-center {
align-items: center
}
.cmsb82-justify-center {
justify-content: center
}
.cmsb82-gap-2 {
gap: 0.5rem
}
.cmsb82-gap-8 {
gap: 2rem
}
.cmsb82-overflow-hidden {
overflow: hidden
}
.cmsb82-rounded-lg {
border-radius: 0.5rem
}
.cmsb82-\!bg-\[\#EE682F\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(238 104 47 / var(--tw-bg-opacity)) !important
}
.cmsb82-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb82-py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.cmsb82-pt-4 {
padding-top: 1rem
}
.cmsb82-text-center {
text-align: center
}
.cmsb82-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb82-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb82-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb82-font-bold {
font-weight: 700
}
.cmsb82-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb82-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb82-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb82-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb82-duration-300 {
transition-duration: 300ms
}
.cmsb82-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb82-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb82-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb82-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb82-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb82-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
@media (min-width: 640px) {
.cmsb82-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
}
@media (min-width: 1024px) {
.cmsb82-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb82-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.cmsb82-lg\:gap-4 {
gap: 1rem
}
.cmsb82-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb82-lg\:text-\[20px\] {
font-size: 20px
}
.cmsb82-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div data-cacheable="false">
    <hr>
    <p class="hyvaverse-main-cta-subtext cmsb82-text-center cmsb82-my-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
        Find all you need to know and more valuable insights about Hyv&auml; and Magento.<br>
        Expertly curated by JaJuMa:
        <br>
    </p>
    <div class="hyvaverse-main-cta-container cmsb82-text-center cmsb82-grid cmsb82-grid-cols-1 cmsb82-lg:grid-cols-2 cmsb82-gap-8">
        <div>

            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">        
                <span>&#128640;</span>
                <span>Launch the JaJuMa Hyv&auml;verse</span>
                <svg class="cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10 cmsb82-ml-4 cmsb82-lg:ml-6" height="210.000000pt" preserveaspectratio="xMidYMid meet" version="1.0" viewbox="0 0 245.000000 210.000000" width="245.000000pt" xmlns="http://www.w3.org/2000/svg">

                    <g fill="#402b05" stroke="none" transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)">
                        <path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
                        <path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
                        <path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
                        <path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
                        <path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
                        <path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
                        <path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
                    </g>
                </svg>
                </div>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Hyv&auml;.
            </p></div>
        <div>

            <a class="btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-white cmsb82-!bg-[#EE682F] cmsb82-overflow-hidden" href="/en/magento-metropolis-guide" title="Explore the Magento Metropolis!">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">
                    <svg class="cmsb82-drop-shadow-lg cmsb82-w-8 cmsb82-h-auto" fill="none" height="24" viewbox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect fill="url(#pattern0_413_38)" height="24" width="22"></rect>
                        <defs>
                            <pattern height="1" id="pattern0_413_38" patterncontentunits="objectBoundingBox" width="1">
                                <use transform="matrix(0.00329268 0 0 0.003 -0.317073 -0.311111)" xlink:href="#image0_413_38"></use>
                            </pattern>
                            <image height="500" id="image0_413_38" preserveaspectratio="none" width="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRFAAAA/////////v7+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v////////////7+///////////////////+///////////////////////+///////////////////////////+/////////////////////////////////v///////////v///v///////////////////////////////v///////////v///////////////v///v///v7+/v//ZZGWUAAAAFp0Uk5TAAUS/wwBBg8YAgMHGiMKCRMiHw0EERUIIRkdHBcQCxYOFB4gGyG6tv+yjO3//7E1h9uw/OSbTSnA8qA5i/GvuDFfyf/i9qmg9S9rZEpq6eJR5jjGKG0bIiAVGb/2kAAAFSlJREFUeJztnduPHEcVh3t2PbFnfVs7vq0vWSdxkFAkeCPhASFeyANISNz+zAghEA9IwAOKhABFQgSJWzAkcRKHODcnjoO9y86tZ7qnu+t2qs6pOr/vwXGSmZ6e/qarq06dOjWqgDpG3CcA0gPpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hWiVPpoNKr/9j/WM+FAm/QnOiWPD7cepD8XNnRJ3x76n8c/S3Ua3OiRfnJkvJl3Rh+nOBN2tEgfbdm97tRHcc9DBDqkHzu0f+3pD+OdhxA0SJ984fb6A4efSJaUL318yv1BXXgjX7z0k5/7vOvsPerzkETh0m37b5tM7lOehyzKlu7SgdvgMdlpSKNk6U+G9sNLfbSXK33nIcFBnigyOlus9NM0QdUiH+2FSj/+iOxQI7pDSaFI6Rc+ID1ccT26AqW7BuAsKEx7edIvxoir7L4f4aBslCb9bKyO14lPIx2YgcKkE/XZOymnjS9J+vhc3Eb4ybtRD5+OkqQPJkORUEisphjpEfrsXZz7b5KPiUsp0qN14NpceDfRB0WkDOnJlE/ZTtOmRKQE6eMn30v7gbk/2guQvpe+U515Yk320s/wBE2yDtFlLt0/HSqYjPvxWUufHHIuPrz8Qa6P9pylM7XsK3Kdas9Xul9uMzEns1z8lq30a+9wn8GMvTe5z8CDTKXvfsJ9BjXjx9lVNchTevypFReym3PNUbos5VMyG77lJ/2yxAucV4cuN+mM0ZhhLr3NfQb2ZCb9xh2iAx1brn8Z71LF0fN5tGcl/TrN3bSZ40j0W8pFe0bSiZYwHOtc43aO5KF87T8UR4lOPtJp+uz9/ewtkkuRhfZcpAetNK8Z7G2RLHOtzmxLHF00yUP6+IDkMKZnLpF22pV0EchBOlGiq03ewz5JKF367FsG0mketoeWjcUJkki67ORJ8dKDa4jMsS/8SjNI2Dku+NEuXDpRy+5249F8qG3TwoBs6TRtrXOEdLxF8lC+cZviKBGQLJ0ozu4VJ6OJCggN0cmVThSA8531JPrFiVwXIVY6TQpcSAt78w2KM7hKchRahEqnmTQPrQdGM8Ejb9QuUjpRAC48s4HoESOtjZconaaGCE27SvNo3/lcVPKkPOk0Uys7j6juLppho6g2Xpp0omgM6c5LV0nqEAiKzAqT/jTJdPR54vXqT5CMty+/J6WNFyWd5gEaY/E4jXYpITpB0id7/6Y4TJxtd8aXSYZvMvYEkiOdZpwWsQ4QSWR2LGHZpRjpJJf0+t2YI2KaIKGA3T2FSKe5zaMHQS5RFB3hXwMlQ/pTbxEcJEXJ3slxguWy3UnYCREhnWJq4wrF78YCilkB6iGlKxKknw/fFOnSh+nC2wQB+af+RXAe/giQThDnTBzkvBJ8p/K28PzSn70degSGnlFwqjRrUJZdenghEZacpOCuJ6d1bunBztnS0EKLEDPmzzFLD413cBZ3Co0tbLHNv/BKD5xIZa/nFRRGTDXI3IRXeljsVcD+t0GPdrbZF1bpQVuoCckpDxm1c30FTukht8l4i3/eYs7OVe9IC9fuvZzSAxp3Ibf5Au8vwvQ1GKX773wsrmqbdz1qHut80r1HPKdpFi/T4jnpyjO5zifdM7v97ANhKwcW+G04cPOf5CdiAZ90vwchfwZCL14Va1jadzbpXvFXcQ/zJh7aWUoXsEn3udFl9dm7cC89yfGduKR7VA8SqHzy8Oq9VtfENQuIYxtPLunON3qdJzF+tP/ZtKvMH4QdnZufwqUHDw5XkwiO8wnXSZL93chEem14PYrH/IRvZn+spWW6aWdowJiku12Xi+8vhkPtRyZfJsJmLaL12oQuDy890p1u9FUEY/NtTA/6rshS41SesW61GVJj5UtfLy7Q8TaOmi6dQ7NWoNB+yWP63y2PdIf5yMaqlc77J/lF6x6XbWTk2mZ8apFuPZxt5cb0XMekiUd980Sbld4tn+xapN+ynIJud9T6npQJFw/0Ppg6ns126+3TR5Z5pFs+0jcWJPZ3jxLtZz504heq+4etSI1Vxmz68Ixk6dN2z34uLkEr6VKRen46pyymBNPXIBIsfRrucCn7UY/mI+GW9HFxvgGwxTdNX5RErvTZc9qtvljMhtI55+Ox7dvST7TJlT67aK7LSKJpd1+zuGijzPWy9l93P50wxEqfB9bdV8BEqUbhs73EQrrFHHvyMZtY6fMr4bHsiX7hiF8dgqVK82gd0pevmI/Qveq30c6+TSZ+c7j1mRu/LKQvWATZPIv2EV5G772iIL2F8Tosw6/elRqJHu0BFWYgvYX1dfBfykyy6WnIAstapTElHtLnhEsnGL6FFUyoVRq/A6TPoZAeeDVDaw6sPtz0bSF9zvI6BFZtC4h7BJcthfQWpstQl80NLezi28Z7r0hcAektTJehnh8Plu41aif4VEjfwHQZ6nwzgjvOfddN/zXU60B6C9NlqCeeSCoFu0Vmg2qirAHpLRJLd6jpQ7QTW7Wu0pQODekzyKXbXlmafXVbH7h31/aViRAuneKZvmCvvdRwE5rdVResVJqm1CF9RgzpxiWPRFvCLVmpNCV8Q/qMONIHcxAnx4jLv6xUmhoQSJ8RS3r/BabrPGx+kunYOqQbw9oROnJLOiOzNHvtNVkd0vTL1SHd+PSMKL1r+EYTjWmxUmmaQID0GfUSoRjS25nm7nVirFipNE0VQvqMWjrNvtqbrF1nwqF5z0dA+hRjWnC96Nwn99iOycFncZ7lSyC9iQTp0VmpNP20dEg3BrjrHawgPQbCpZMGRtMC6a0PNS3Wr6VHGUylAdJbHwrp3a9MhHDpkcbQKVipND3NIH0GpEeFRbpxeFyHzKhylxhYfUfTCBXSZ0B6VFikG9et1NK914zys1JpijrrkG5ct1JLD99zmQ1Ib2KcO6urwpkrtogF0psYg6u1dM+drySwUmnKGUm+vTKLdONsZlnSTd83Sm2kIWRKrxMY97k3y/bHXnryHflkSq/LSKiQnrwiMKTHwl76CeqUXxPCpV93XXEqB3vpyfedkim9XlOuQnryXacgPRb20kkKYbkgU3rd4KmQnmiDghWQHgt76ck3nBIu/UTqYBUd9tIT7kAzR6b0uiaUCunJg+/CpZuKOAgG0ptAeu9LkyBTeh2jgvQYCJdus8WVUCC9CaT3vjQJwqXb7s8pEEhvAum9L02CTOn1xrqQHgNIjwWkN4H03pcmQab0ugDUtXcin0o8IL2JvfSryfcWJwPSm0B670uTAOmxgPQmRul1UjCkxwDSYwHpTSC996VJkCm9XugD6TGA9FhAehN76RkHZ9YWIEN6peROh/QmRun1im1IjwGkxwLSm0B6E0ifUl8wSI8BpMdirZIMpFeQ3gbSp0B6VGRKr68CpMcA0mMB6U3spZv2mxcMpDeB9CaQPgXSowLpsVgr/gnplYv086nr6tEB6U2ylX7uU9PWwCsgvUkc6Y+Nu4QEMi3yZ9w8sgbSm0SRvvemxd5fAey/PvuH9c7bkN4kSkduXncx2o68yyXzkO5JFOnLCqtRgnir+n7W0tequEN6FUl6vRtEhDbeQaDPeyB9in/zPv8r7cZe2+tddkj3JLb0arJHF9Q53G6UKoV0T6JIrzfwm2Hc78+W9gYrkO5JAukWO/7ZsLnTBqR7EmWcfqy9ja1pX1sLOnZMg3RP0kgP1t65SZ619LqwAqTPiCK9c3+EgFm6y3c6/zOke5JOuvfGnT3K40hPvdmqcOnP3rY+aN9OKMcOu//7IP27ZllLXxvdQ3qVWHpVnXHd4XBodzxI9ySx9OoJt4fmhaHoPaR7klq6eQvzNQzb3UK6J+mlVztX7PrxFz8ybCsA6X6Ybzsf6effC/3Uymb/ekj3g0f60bU1fdlDi98Fhmx+cEk3XP2LVkWNIN0PB+kOwRkb6dXZ+73/a9su0TVG7B3Sp9TSHYr8W0nvbeNP2I7lY+TIQfqUWvrxR0Mva2ApvbMfv/ux9WW3lu5QfkSD9ImxIa2lm19aYyt986C9cfYurKU7VIyE9CmrC2Z9jd12IZ/sLFKln7nzhdsVtz2h9SAgpLtJt7eeaOt5y/OZrPcYId1RunWymyzpDY+Q7tSRq+zXrIiSftCYz4V0V+m2PfiOdKkYWElvzdNBurN0yzQIQdLbjQ6ku0u3G7jJkb4R6IH0yqXe+xKLVYlipG/O1EF6ZXHhNvOVzK2DEOnLxbNrGJddQPqUrp64aWJUhvSNNsr8FqRAz5l0ToYNv02C9O6MSkifYn4udl+GwZXn/NK7f6oW4SVIn9F3Gfbu9r6FPTjTl2plzglQId18GaZVgzrpH73Zz7IF0Sd9t3cljf9PPBYs0i3qcvVfh76b3SbBjYAehf2J0+aAYqKf6woW6RY//qEFB09vjooqXun9t7lNBRxzCi4xUqUPNnmdS5BPxyom1qTr1IdyrQK/ahTESm8XlmjSEY5nkz608q26eM98SCXSbWq9DYepNpanPXuXSfrged60GFIkGmuuwSPdat7McAO0rv6teyl778/9ffGv48F6tMblFVOsE3HJ4JFuNytt6ODMu8XLy/+l+ynH6c9V848dfgjZFa9MHXmXLX14zfARz5wYjUZ/mf/9+b+mjMg9V82sD/qyXSmb/JHOJd2ygvb+G8N3wclbo9Gf5n/96mtJpZ88+rndvT3wOuvF0b1xqHgwSbdOcj0wPf1f+MP8n6mkv/j76Z9fG43+PBhWtF+lkf5GFy+9e7JynckXXx+9Un35/O/SSP/mb6d/fuPVQeUupS8USXeoA2McgJ88uu+q/yWS/pXXqm/9elHwvw+XQmYDwbxocEl3uNXNF2a8e3N39Mc0V++l0Z1rvxkcVjisv6s4+u6M0m+4LCAztoH7z49+ab/sLYTvjl4d7nm5/JorltadT7rjxelJUBDHFccQEYdzRukORSZmDIa4heC8X5Rd9Qtq+KQ7VPlakHwK0hH3b2QcmsSBT7rVZEST058y9HpsmZzoLS3ayxnrXd5IYZTu2uWZwnNn2OC1lQTLE51XunPN1iN2jlPt00GK3+4h/WWH48Ipvbrm042xrAKVlNNeDdAVig1HfGCV7tPAV/K0d+fsmWFq3LmlO5ZnXnLpbeLzCMJ352e+3y6vdMeQ5Yqn/0F7Hv4MLL8YxpQsEBFm6Z4NfMUTs+7A+/yfsi+LSA63dI+AxhIBsRpv5amy9Lvhln5k/Ts/93wrW0dogWePZAbrubNLr8Yvbf/M972cbfxAbWEj1+m2gvWBX3q18+3RT33fy9cbcpsabsL5PJ8iQHpVfX/0E+/38gRmfYfmM4x5f7ERIX38vdf+5v3m8x8mb+Mtc3l7SL+4oY0I6UcN3gsv+795eMUBPXZrGHoYXhKTBiHSqwsv/sL/zUlnYcJ2ZufIg9xAinSf6fU10t0//kPzIwxZtKmQIz1o2JuqH+8ddJ3B3oNbIEi65164NfHjHWEtO9fs+SaipLvs3tFB5LIEk2Mho8Obd/ijxktkSQ8dDcUctNvWne9GVA6ANOmBcY9omYZhLTt3CK6FPOmBHeSOgrwEBA3NJcwHNpAoPbCNp29JfVM95shbpSFSumWxlj6os6lKGJo3ECrdM1N2CeXo6FzQsbjn/DsRKz1ovpruMWos0D+InKF5A7nSq2r3k4A3kwzaw+IGyWu+2iJZeuA1D+7QjbeDJm35p1D7EC3dqpzuAGEP1LDnS/o6kPYIl350v4TcbQGF/8OGjVfuysjQ7ka89MARk29gNizoKi0a0yID6WEh0MljDwFhT5VRUCwnATlID5zGds+TvhUSKmcqNOBCHtIDn7Bura1NifZ++vf1kEMm0gOzqVxmYYK6ECJS4IxkI70anwu5oJbZVONLIdHfG29J7rOvyEd6YPfKqhBdwHLKSuJ0Wg85SQ/MnTQuIGMOAKYjL+lRB+0+dY9WCB+aN8hNeqD2/uFbWNBV5AxqL/lJDxtSjQ+6WuHxTpByWTVwzGQoPTQ/fnNYtR+0o0YG0ZgWWUp3L7zbYu/hB1vbRw/hydbDg8tBi1Yy6rOvyFN6uHYqGGtE+ZOr9MD1JlRkNE5bI1vpofF4CvJUnrX0wETpYPbezSPouknW0gMH7WHkFI1pkbl0tg5dnNVTichdOk8bfzZoyp2d/KVXk7Op88vl7i9hRwHSQ7MYXRG6bMWBIqSn1J71w3xBIdKrnURrCzIMum5SivQ0sZoSbvOqJOmhi4otyHho3qAk6ZFjNTkkN9tRlvTAQiFDXA4o9S2NwqSH1nTsJa98KAPFSQ+sNtpNIR24JeVJD9t0oQvmzTfoKVF6YAJ7m3I6cEuKlE45+ZZ6B4EUFCr9qE0mSUve+TzXRIkhipUeuC5tjpQC7cSUKz1ce4kt+4ySpVfVqZC4qZDdXCNQtvSAwGxR0ZgWpUuvLnmVMpg8LPY2rxRI97rZS77NKxXSnUuSsW5znQIN0h1rORd+m1dapNsvav/Br4oLum6iRbrdNMwPXy65/1ajR3pVnbwwWHzgR6+8rUK5LunVUJCuiDRXS5RJP2L86PTDydqeET9++fL7B4VkPFqiTzqAdI1AukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hXyfy89l0B+7GqqAAAAAElFTkSuQmCC">
                            </image>
                        </defs>
                    </svg>
                    <span>Explore the Magento Metropolis!</span>
                    <svg class="cmsb82-drop-shadow-lg cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10" fill="none" height="24" viewbox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.7998 15.5999H15.5998V14.3999H13.7998V15.5999ZM15.5998 17.9999H13.7998V16.7999H15.5998V17.9999ZM13.7998 20.3999H15.5998V19.1999H13.7998V20.3999Z" fill="white"></path>
                        <path clip-rule="evenodd" d="M5.4 0L15 3.6V12H17.4C17.5591 12 17.7117 12.0632 17.8243 12.1757C17.9368 12.2883 18 12.4409 18 12.6V22.8H18.6C18.7591 22.8 18.9117 22.8632 19.0243 22.9757C19.1368 23.0883 19.2 23.2409 19.2 23.4C19.2 23.5591 19.1368 23.7117 19.0243 23.8243C18.9117 23.9368 18.7591 24 18.6 24H0.6C0.44087 24 0.288258 23.9368 0.175736 23.8243C0.0632142 23.7117 0 23.5591 0 23.4C0 23.2409 0.0632142 23.0883 0.175736 22.9757C0.288258 22.8632 0.44087 22.8 0.6 22.8H1.2V10.2C1.2 10.0409 1.26321 9.88826 1.37574 9.77574C1.48826 9.66321 1.64087 9.6 1.8 9.6H3V5.4H4.2V9.6H5.4V0ZM16.8 22.8H15.6V21.6H13.8V22.8H12.6V13.2H16.8V22.8ZM5.4 10.8H2.4V22.8H5.4V10.8ZM8.4 5.4H7.2V6.6H8.4V5.4ZM9.6 5.4H10.8V6.6H9.6V5.4ZM13.2 5.4H12V6.6H13.2V5.4ZM7.2 7.8H8.4V9H7.2V7.8ZM10.8 7.8H9.6V9H10.8V7.8ZM12 7.8H13.2V9H12V7.8ZM8.4 10.2H7.2V11.4H8.4V10.2ZM9.6 10.2H10.8V11.4H9.6V10.2ZM13.2 10.2H12V11.4H13.2V10.2ZM7.2 12.6H8.4V13.8H7.2V12.6ZM10.8 12.6H9.6V13.8H10.8V12.6ZM8.4 15H7.2V16.2H8.4V15ZM9.6 15H10.8V16.2H9.6V15ZM7.2 17.4H8.4V18.6H7.2V17.4ZM10.8 17.4H9.6V18.6H10.8V17.4ZM8.4 19.8H7.2V21H8.4V19.8ZM9.6 19.8H10.8V21H9.6V19.8Z" fill="white" fill-rule="evenodd"></path>
                    </svg>
                </div>
                <svg class="cmsb82-absolute cmsb82-left-0 cmsb82-bottom-0" fill="none" height="51" viewbox="0 0 435 51" width="435" xmlns="http://www.w3.org/2000/svg">
                    <path d="M521.149 66.6131V52.8942H518.576V49.1462H515.839V45.6486H506.218V49.1462H503.825V52.8084H502.489V39.4329H495.519V52.6368H491.445V45.5699H489.304V40.9636H484.482V45.4841H475.443V41.9864H465.053V44.9691H462.431V24.0116H451.869V39.7762H444.856V52.4651H440.523V49.7399H436.758V34.2328H431.074V47.9517H426.742V19.0691H424.6V14.5343L423.171 7.05972H421.777V0H421.058V7.05972H419.578L418.242 14.6774L418.234 14.7131V18.8975H416.524V46.5069H410.359V49.9116H408.254V41.0494H400.178V49.0604H395.895V57.4934H394.221V51.5281H391.484V35.5132H389.256V33.0455H384.686V35.5132H382.287V39.2612H378.902V34.2328H370.733V39.4329H365.258V43.095H363.066V38.1525H360.752V35.6848H355.155V38.0667H353.229V52.6368H350.614V38.7104H345.994V33.9825H338.722V41.1352H334.562V37.8164H323.317V60.4332H321.341V40.8777H318.388V25.4207H316.204V21.8372H314.156V18.1321H312.741V11.9736H312.022V18.1321H310.607V21.5797H309.069V25.4207H306.755V40.4986H304.01V27.3662L301.208 20.7572L298.413 27.495V35.8994H292.507V45.9919H290.021V25.4207H280.184V42.7946H277.231V57.1143H275.384V34.1041H273.2V30.5277H271.404V26.0573H268.113V30.399H266.187V34.1041H264.262V62.7364H261.388V29.1258H254.504V36.021H251.12V33.0884H245.214V26.1861H234.867V37.9451H232.373V29.2546H225.239V37.3013H222.745V26.0573H220.432V22.6025H214.453V26.0573H211.371V33.9825H209.007V26.5652L203.769 18.3324L198.718 26.2218L198.66 26.3076V29.8912H196.814V25.9285H189.42V28.103H187.954V24.0116H182.228V27.588H180.561V44.2037H178.966V32.1872H170.932V35.7707H161.434V38.3242H157.015V34.7478H153.551V30.5277H143.327V37.6876H141.609V34.7478H135.373V47.401H133.389V30.5277H130.824V20.8144H122.791V44.4612H120.169V23.7541H110.461V30.2703H103.276V34.4904H100.582V39.9836H98.2177V28.3533H87.8709V34.3616H85.2986V45.9919H81.6557V41.6502H79.4714V26.5652H72.3364V41.264H68.2264V50.212H65.9918V37.8164H59.3167V18.6471H47.5545V42.0293H44.4792V52.0002H42.7547V31.0427H36.0006V44.59H33.2558V29.7624H23.6779V37.4301H20.7247V50.9773H18.8781V47.1435H15.537V27.7167H4.42142V47.5297H1.67665V40.7561H-0.37833V37.5589H-11.3718V40.2411H-13.8076V64.3958H-21V83H525V66.6131H521.149Z" fill="#9B3205" fill-opacity="0.5"></path>
                </svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Magento.
            </p>
        </div>
    </div>
    <br>
    <hr>
    <style>
        .hyvaverse-teaser-shine {
            position: relative;
            overflow: hidden;
        }

        .hyvaverse-teaser-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: teaser-shine-move 6s infinite;
            pointer-events: none;
        }

        @keyframes teaser-shine-move {
            0% {
                left: -75%;
            }

            100% {
                left: 125%;
            }
        }
    </style>
</div></div></div>
</div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="toc-summary" class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 md:pb-6 xl:pt-[120px] p-6 lg:p-10">
            <div
                class="mx-auto mb-8 lg:absolute lg:top-[40%] lg:right-4 xl:right-[5%] 2xl:right-[10%] max-w-[180px] rounded-full shadow-xl border-2 border-white/50 overflow-hidden shadow-inner">
                <img src="https://www.jajuma.de/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="Hyvänaut Introducing and explaining Hyvä UI" class="w-full h-auto p-2">
            </div>
            <h2 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">tl;dr</span><br>Quick Navigation & Key Insights 
            </h2>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="text-left mb-8">
                <p class="text-lg lg:text-xl">
                    Pressed for time?  
                    <br>Here’s a quick overview of what this comprehensive guide covers, with direct links to each key section:
                </p>
            </div>

            <div class="flex flex-col gap-8 text-lg lg:text-xl"
               >
                <ul class="text-base space-y-1">
                    <li><span class="w-full xl:w-[44%] xl:w-5/12 inline-block"><a href="#decoding-hyva-ui" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Decoding Hyvä UI:</b></a></span>
                        <span>More Than Just a Box of Pre-Styled Elements</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#how-hyva-ui-works" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>The "Copy, Paste, Done" Magic:</b></a></span>
                        <span>How Hyvä UI Works in Practice</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#tangible-benefits" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>The Tangible Benefits:</b></a></span>
                        <span>How Hyvä UI Supercharges Your Hyvä Workflow</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#whats-inside" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>What's Inside the Box?</b></a></span>
                        <span>A Deep Dive into Key Hyvä UI Components & Features</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#hyva-ui-vs-alternatives" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Hyvä UI vs. Alternatives:</b></a></span>
                        <span>A Quick Comparison</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#who-benefits" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Who Benefits Most from Hyvä UI?</b></a></span>
                        <span>And how each target group benefits</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#hyva-ui-in-action" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Hyvä UI in Action:</b></a></span>
                        <span>Real-World Impact & Examples</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#getting-started" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Getting Started with Hyvä UI:</b></a></span>
                        <span>A Practical Guide</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#why-jajuma" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Why JaJuMa is Your Expert Partner</b></a></span>
                        <span>For Maximizing Hyvä UI</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#future-is-componentized" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>The Future is Componentized:</b></a></span>
                        <span>What's Next for Hyvä UI?</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#conclusion" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Conclusion:</b></a></span>
                        <span>Build Faster, Smarter, and Better with Hyvä UI & JaJuMa</span>
                    </li>
                    <li><span class="w-full xl:w-5/12 inline-block"><a href="#faq" class="hover:text-white transition-colors duration-200 text-[#93c5ff]"><b>Hyvä UI - FAQ:</b></a></span>
                        <span>Frequently Asked Questions</span>
                    </li>
                </ul>
                <p><b>In essence:</b> Hyvä UI is a powerful, <b>free library</b> of pre-built, <b>fully functional components</b> designed for <b>Hyvä Themes on Magento 2</b>.<br>
                It dramatically <b>accelerates development</b> timelines, significantly <b>cuts project costs</b>, and helps deliver <b>consistently high-quality user experiences</b>.<br>
                It's a true game-changer for <b>merchants aiming for rapid deployment</b> and <b>enhanced UX</b>, developers seeking <b>efficiency</b> and <b>modern tooling</b>, and agencies looking to <b>deliver top-tier Hyvä projects</b> more profitably.</p>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="QDBG2NU"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="decoding-hyva-ui">Decoding Hyv&auml; UI: More Than Just a Box of Pre-Styled Elements</h2>
<p>At its core, <strong>Hyv&auml; UI is a comprehensive library of pre-built, ready-to-use components</strong> specifically designed to <strong>accelerate and streamline frontend development</strong> when working <strong>with Hyv&auml; Themes</strong>. Think of it as a <strong>treasure chest filled with meticulously crafted building blocks</strong> for your Magento store's interface.</p>
<p><br>However, it's crucial to understand that <strong>Hyv&auml; UI goes far beyond typical CSS and HTML libraries</strong>. Each component within Hyv&auml; UI isn't just a static visual snippet; it's often a <strong>fully functional <code>.phtml</code> file complete with integrated <a title="AlpineJS" href="https://alpinejs.dev/" target="_blank" rel="noopener nofollow">Alpine.js</a> logic for interactivity</strong>. This means when you integrate a Hyv&auml; UI component into your theme, <strong>it's "alive"</strong> and immediately functional. This allows developers to rapidly enhance the Magento store's frontend without needing to build all the underlying Magento-specific functionality from scratch. This "alive" nature of the components is a <strong>significant differentiator</strong>, bridging the gap between design and dynamic functionality far more effectively than most UI kits and directly impacting development speed by reducing manual wiring and potential integration errors.</p>
<p><img class="rounded-3xl shadow-xl overflow-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-component-library.png" alt="Visual representation of the Hyv&auml; UI Component Library structure for Magento" width="1264" height="800"><br>One of the most appealing aspects for the Hyv&auml; community is its accessibility:<br><strong>Hyv&auml; UI is provided free of charge</strong> to all individuals and businesses <strong>holding a valid <a title="JaJuMa-Shop | Top 10 Reasons and Benefits for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Theme</a> or <a title="Hyv&auml; Commerce: The Ultimate Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" target="_blank" rel="noopener">Hyv&auml; Commerce</a> license</strong>. This isn't an extra upsell; it's an <strong>integral part of the Hyv&auml; value proposition</strong>, enhancing the <a title="Magento Page Speed ROI Calculator: Quantify Your Lost Revenue &amp; Unlock Growth with Hyv&auml;" href="/en/blog/magento-page-speed-roi-calculator" target="_blank" rel="noopener"><strong>return on investment</strong></a> for <a title="Top 10 Reasons and Benefits of Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener"><strong>choosing Hyv&auml; Themes</strong></a> and underscoring <strong>Hyv&auml;'s commitment to empowering its users</strong>. This free access also means ongoing updates and new component drops are included, ensuring the library evolves with the needs of the community.</p>
<p><br>Many in the community draw a parallel between Hyv&auml; UI and the popular <a title="Tailwind UI" href="https://tailwindui.com/" target="_blank" rel="noopener nofollow">Tailwind UI</a>, known for its utility-first approach and high-quality design. While the comparison is apt in terms of design philosophy and ease of styling with <a title="Tailwind CSS" href="https://tailwindcss.com/" target="_blank" rel="noopener nofollow">Tailwind CSS</a>, <strong>Hyv&auml; UI offers a distinct advantage for Magento developers</strong>. It's the functional equivalent of <strong>Tailwind UI tailored specifically for Hyv&auml; Themes</strong>, with the critical added benefit of built-in, ready-to-use <strong>Magento-specific logic within its <code>.phtml</code> files</strong>. This makes it significantly more powerful and <strong>immediately applicable within the Magento environment</strong>.</p>
<p><br><strong>The fundamental purpose of Hyv&auml; UI is to streamline and accelerate the Hyv&auml; development process.</strong> While Hyv&auml; Themes already offer a vastly improved and faster development experience compared to Luma, building every UI element from the ground up can still be time-consuming. Hyv&auml; UI addresses this "second wave" of development bottlenecks, providing a <strong>proactive solution from the Hyv&auml; team</strong> to further <strong>enhance efficiency</strong>. This focus on <strong>efficiency makes Hyv&auml; UI an invaluable asset</strong>, whether you're an expert Hyv&auml; developer looking to optimize workflows or an agency aiming to deliver high-quality Hyv&auml; stores more rapidly. For developers or agencies newer to Hyv&auml;, or for merchants with tighter budgets, <strong>Hyv&auml; UI can also lower the barrier to entry</strong>, making the <a title="JaJuMa-Shop | Top 10 Reasons &amp; Benefits for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener"><strong>powerful benefits of Hyv&auml; Themes even more accessible</strong></a>.&nbsp;<br>And with tools like the <strong>Hyv&auml; UI Manager by JaJuMa</strong> included in <strong><a title="JaJuMa Takeoff - Fixed price Hyv&auml; Quick Launch Accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener">JaJuMa Takeoff</a></strong>, even non-technical users can gain more control over their store's appearance, further enhancing this accessibility.</p></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="mt-6 lg:mt-8 bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<p class="text-slate-700 mb-4 text-base sm:text-lg">Core Hyv&auml; UI Capabilities &amp; Business Impact (June 2025 Projection):</p>
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left">
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Hyv&auml; UI Capability/Feature</th>
<th class="p-4 font-semibold">Direct Technical Advantage</th>
<th class="p-4 font-semibold">Tangible Business Impact</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Pre-built, Functional Checkout Components</td>
<td class="p-4">Reduced custom coding for complex checkout flows</td>
<td class="p-4">Lower cart abandonment rates, increased conversion</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Advanced &amp; Customizable Product Galleries</td>
<td class="p-4">Richer visual merchandising, enhanced product presentation</td>
<td class="p-4">Higher user engagement, improved product understanding, potential sales uplift</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Performance-Optimized Codebase</td>
<td class="p-4">Faster page load times, improved Core Web Vitals</td>
<td class="p-4">Better SEO rankings, lower bounce rates, enhanced user satisfaction</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Figma Design System Integration</td>
<td class="p-4">Streamlined design-dev workflow, brand consistency</td>
<td class="p-4">Reduced design iteration time, faster time-to-market, lower project costs</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Comprehensive Set of UI Elements</td>
<td class="p-4">Less need for many third-party UI modules</td>
<td class="p-4">Leaner codebase, potentially fewer conflicts, easier maintenance</td>
</tr>
<tr class="bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Modern Tech Stack (AlpineJS, Tailwind)</td>
<td class="p-4">Efficient development, easier customization &amp; maintenance</td>
<td class="p-4">Reduced development costs, faster feature deployment</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 text-base sm:text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200">This table effectively translates <strong>Hyv&auml; UI capabilities</strong> and features into <strong>technical advantages</strong> and <strong>tangible business impacts</strong> relevant to <strong>technical as well as business decision-makers</strong>. In this blog post we will explore each of these points in-depth.</div>
</div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>Decoding Hyvä UI 
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>Hyvä UI is a library of functional, pre-built <code>.phtml</code> components with Alpine.js logic for Hyvä Themes.</li>
					<li>It's free with a Hyvä Theme license, accelerating development and reducing costs.</li>
					<li>Think of it as a Magento-specific, functional version of Tailwind UI.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="OQI2NNQ"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="how-hyva-ui-works">The "Copy, Paste, Done" Magic: How Hyv&auml; UI Works in Practice</h2>
<p><strong>The beauty of Hyv&auml; UI lies in its simplicity and practical application.</strong><br>The core workflow is designed to be intuitive for Magento developers, leveraging familiar theming practices while injecting significant speed and efficiency.</p>
<h3>For Theme Files (.phtml):</h3>
<ol>
<li><strong>Browse &amp; Select:</strong> <br>Developers can explore the Hyv&auml; UI library (often via the provided Figma files or documentation) to identify the component needed - be it a header, product gallery, or a content banner.</li>
<li><strong>Locate &amp; Review:</strong><br>Each component resides in the <em>vendor/hyva-themes/hyva-ui/components/</em> directory after installation via Composer.<br>Crucially, every component folder includes a README.md file detailing specific instructions, dependencies, or necessary <a title="TailwindCSS" href="https://tailwindcss.com/" rel="nofollow noopener">Tailwind CSS</a> configurations.</li>
<li><strong>Copy to Theme:</strong><br>The primary .phtml file (and any associated assets like specific CSS or JS if noted) is copied from the vendor directory into the corresponding path within the custom Hyv&auml; theme.<br>For instance, a banner component might go from<br><em>vendor/.../Magento_Cms/templates/elements/banner-a.phtml<br></em>to<br><em>app/design/frontend/Your_Vendor/Your_Theme/Magento_Cms/templates/elements/banner-a.phtml</em>.</li>
<li><strong>Customize (If Needed):</strong><br>Once in the theme, the component's PHTML, <a title="AlpineJS" href="https://alpinejs.dev/" rel="nofollow noopener">Alpine.js</a> logic, and Tailwind CSS classes can be <strong>tailored to match specific design requirements or extend functionality</strong>.</li>
<li><strong>Build &amp; Deploy:</strong><br>A Tailwind CSS build process (npm run watch or npm run build-prod) compiles the necessary styles, and standard Magento deployment commands make the changes live.</li>
</ol>
<p><br><strong>This "copy, paste, customize" approach dramatically reduces the time spent on boilerplate coding for common UI patterns.</strong></p>
<h3>For CMS Content (Pages &amp; Blocks):</h3>
<p><strong>Hyv&auml; UI components aren't limited to theme PHTML files.</strong><br>Many are designed to be <strong>directly usable within Magento's CMS pages and blocks</strong>.<br>This is often facilitated by the <strong>Hyv&auml; CMS Tailwind JIT module</strong>, which compiles the Tailwind CSS classes used in CMS content on the fly.</p>
<ol>
<li><strong>Select Component for CMS:</strong><br>Identify a CMS-compatible component from the Hyv&auml; UI library.</li>
<li><strong>Copy HTML Structure:</strong><br>Instead of the PHTML file, you copy the HTML structure (often provided within the component's cms-content directory or README.md) directly into the Magento Admin's CMS page or block editor.</li>
<li><strong>Adjust Content &amp; Styles:</strong><br>Modify the content within the HTML and adjust Tailwind CSS classes as needed.</li>
<li><strong>Save &amp; Refresh:</strong><br>Save the CMS content and refresh the cache. The Hyv&auml; CMS Tailwind JIT module ensures the styles are applied.</li>
</ol>
<p>This <strong>empowers content managers</strong> to <strong>build richer</strong>, more <strong>dynamic layouts</strong> using pre-defined, <strong>functional components</strong> without always needing developer intervention for basic structural elements, further speeding up content creation and site updates.<br>The key is the <strong>"don't clone the whole library"</strong> rule: always copy only the components you need to avoid CSS bloat and maintain update compatibility.</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>How Hyvä UI Works 
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>For theme files, developers copy <code>.phtml</code> components from the library into their theme and customize.</li>
					<li>For CMS content, HTML structures of components can be pasted directly, styled with Tailwind CSS, and rendered via the Hyvä CMS Tailwind JIT module.</li>
					<li>Crucially, only copy needed components; don't clone the entire library to avoid issues.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="GCL5H54"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="tangible-benefits">The Tangible Benefits: How Hyv&auml; UI Supercharges Your Hyv&auml; Development Workflow</h2>
<p><strong>Integrating Hyv&auml; UI into your development process isn't just about convenience;</strong><br>it's about unlocking a <strong>cascade of tangible benefits</strong> that <strong>impact project timelines</strong>, <strong>budgets</strong>, and the overall <strong>quality of the end product</strong>.<br>These advantages compound, creating a <strong>virtuous cycle of efficiency and excellence</strong>.</p>
<ol>
<li><strong>Radically Faster Development &amp; Quicker Time-to-Market:</strong><br>This is perhaps the most immediate and impactful benefit.<br>By providing a library of fully functional components, Hyv&auml; UI allows developers to bypass the often tedious and repetitive task of coding common UI patterns from scratch. Imagine needing a complex mega menu or a feature-rich product gallery with image zoom and thumbnails. Instead of spending extensive time coding these with Alpine.js and Tailwind CSS (even within a Hyv&auml; Theme), developers can leverage Hyv&auml; UI components, make necessary tweaks, and deploy a working feature in a fraction of the time.<br>This dramatically <strong>cuts down development hours</strong>, leading to a significantly <strong>quicker time-to-market</strong> for new stores, features, or redesigns.</li>
<li><strong>Significant Reduction in Development Costs:</strong><br>The equation is simple:<br>Faster development directly translates to lower development costs. Fewer billable hours mean <a title="JaJuMa Takeoff - The fixed price Hyv&auml; quick launch accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener">projects become more affordable for merchants</a>. For agencies, this efficiency can lead to more competitive pricing or higher project profitability.<br>Hyv&auml; UI is often cited for its potential to <strong>reduce development time by up to 50%</strong>, offering substantial financial savings.</li>
<li><strong>Consistent, High-Quality, and Professional User Experience:</strong><br>Hyv&auml; UI components are not just functional;<br>they are professionally designed with modern UX best practices and accessibility in mind. Many components also incorporate accessibility considerations from the outset.<br>This ensures a polished, reliable, and consistent frontend across your Magento store, contributing to a better overall user journey and building customer trust.<br>Using <strong>pre-vetted components</strong> also <strong>reduces the risk of UI bugs</strong> or inconsistencies.</li>
<li><strong>Enhanced Developer Experience &amp; Increased Focus:</strong><br>Developers appreciate tools that simplify their workflow.<br>Hyv&auml; UI eliminates the need to write boilerplate code for common interface elements, freeing developers to concentrate on more complex backend logic, custom Magento integrations, and innovative features that <strong>truly differentiate a store</strong>, leading to greater job satisfaction.</li>
<li><strong>Easier Onboarding and Long-Term Maintainability:</strong><br>Working with a standardized set of <strong>well-structured components</strong> makes the codebase more predictable.<br>This is advantageous for onboarding new developers.<br>As Hyv&auml; UI receives updates, integrating improvements can be simpler than maintaining purely custom code, contributing to <strong>better long-term maintainability</strong>.</li>
</ol></div><div data-content-type="text" data-appearance="default" data-element="main"><div class="mt-6 lg:mt-8 bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<p class="text-slate-700 mb-4 text-base sm:text-lg">To illustrate the efficiency gains, consider the development of common e-commerce features:</p>
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left">
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Feature</th>
<th class="p-4 font-semibold">Estimated Time (From Scratch)</th>
<th class="p-4 font-semibold">Estimated Time (With Hyv&auml; UI)</th>
<th class="p-4 font-semibold">Time Savings</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Complex Mega Menu</td>
<td class="p-4">16&ndash;24 hours</td>
<td class="p-4">2&ndash;4 hours</td>
<td class="p-4 text-green-700 font-semibold">80&ndash;85%</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Product Gallery w/ Zoom</td>
<td class="p-4">8&ndash;12 hours</td>
<td class="p-4">1&ndash;2 hours</td>
<td class="p-4 text-green-700 font-semibold">80&ndash;87%</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Multi-Section Footer</td>
<td class="p-4">4&ndash;6 hours</td>
<td class="p-4">0.5&ndash;1 hour</td>
<td class="p-4 text-green-700 font-semibold">80&ndash;87%</td>
</tr>
<tr class="bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Accordion/FAQ Section</td>
<td class="p-4">3&ndash;5 hours</td>
<td class="p-4">0.5&ndash;1 hour</td>
<td class="p-4 text-green-700 font-semibold">70&ndash;80%</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-6 text-sm text-slate-600 italic">Estimates are illustrative and can vary based on specific requirements and developer experience.</p>
<div class="mt-6 text-base sm:text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200">This table clearly demonstrates that even on the already efficient Hyv&auml; Themes platform, <strong class="text-primary-dark">Hyv&auml; UI</strong> introduces another <strong>significant layer of time and cost optimization</strong>, making it a <strong>strategically sound choice for any Hyv&auml; project.</strong></div>
</div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>Tangible Benefits 
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>Dramatically speeds up development and time-to-market.</li>
					<li>Significantly reduces development costs.</li>
					<li>Ensures consistent, high-quality UX and improves developer experience.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="WS1DXFB"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="whats-inside">What's Inside the Box? A Deep Dive into Key Hyv&auml; UI Components &amp; Features</h2>
<p>The <strong>Hyv&auml; UI library is a rich collection of components</strong> designed to cover a wide array of e-commerce frontend needs.<br>These components are <strong>thoughtfully categorized</strong>, making it easier for developers and designers to find what they need quickly. While the exact number of components evolves with new releases (it launched with 36 components), the <strong>library consistently provides robust solutions for common and complex UI challenges</strong>.</p>
<h3>Overview of Component Categories:</h3>
<p>Hyv&auml; UI components are generally grouped into logical categories such as:</p>
<ul id="KRX4KK3">
<li><strong>Fixed Elements:</strong> Headers, Footers.</li>
<li><strong>Navigational Elements:</strong> Menus (Desktop &amp; Mobile), Breadcrumbs, Pagination, Scroll-to-Top.</li>
<li><strong>Content Elements:</strong> Banners, Sliders/Carousels, Accordions, Testimonials, Unique Selling Propositions (USPs), Call-to-Action (CTA) blocks.</li>
<li><strong>Shop Elements:</strong> Product Cards, Product Data Tabs, Product Swatches.</li>
<li><strong>Product Page Elements:</strong> Product Galleries, Sticky Add-to-Cart.</li>
<li><strong>Cart &amp; Checkout Elements:</strong> Mini-cart enhancements (though full checkout is often handled by <strong><a tabindex="-1" title="Hyv&auml; Checkout: Boost Conversions with Hyv&auml; Checkout" href="/en/blog/hyva-checkout-guide" target="_blank" rel="noopener">Hyv&auml; Checkout</a></strong>).</li>
<li><strong>Attention Grabbers:</strong> Modals, Pop-ups, Notifications, Cookie Notices.</li>
<li><strong>Styling Elements:</strong> Pre-defined color palettes, typography helpers (often part of the accompanying Figma design system).</li>
</ul>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="IRYMBLP"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="EYFT1LS"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="D89QCR8"><div data-content-type="text" data-appearance="default" data-element="main"><p>Let's spotlight some of the most impactful components:</p>
<ol>
<li><strong>Navigation Menus:</strong><br>Magento navigation can be notoriously complex to customize, especially with Luma's reliance on topmenu.phtml and intricate XML configurations.<br><strong>Hyv&auml; UI offers a breath of fresh air</strong> with several pre-built, stylish, and functional menu options for both desktop and mobile:
<ol class="!list-disc">
<li><strong>Desktop Menu Versions:</strong>
<ol class="!list-circle">
<li><strong>A - Simple Static Links:</strong><br>Ideal for straightforward navigation or when primary category navigation is handled elsewhere.</li>
<li><strong>B - Column Megamenu:</strong><br>A classic, content-rich mega menu displaying nested items in columns &ndash; perfect for large catalogs.</li>
<li><strong>C - Vertical Dropdown (4 Columns):</strong><br>A drilldown-style menu for deeply nested structures, visually similar to mobile menus.</li>
<li><strong>D - Shop Dropdown:</strong><br>Consolidates top-level items under a "Shop" button, with support for additional static links.</li>
</ol>
</li>
<li><strong>Mobile Menu Versions:</strong>
<ol class="!list-circle">
<li><strong>A - Scroll Menu:</strong><br>A modern drilldown-style menu with optional search and CTA.</li>
<li><strong>B - Tabs Menu:</strong><br>Similar to the Scroll Menu but uses tabs for a more compact organization of menu groups.</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>These <strong>menu components</strong> not only save immense development time but also <strong>ensure responsive and accessible navigation patterns out of the box</strong>. Many also support the inclusion of static blocks or widgets for adding promotional banners or other content directly within the menu structure.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="C8MNED7"><figure class="md:ml-4 shadow-xl rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="IC5C5C8"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/B-4-column-megamenu-open-with-block.jpg" alt="Preview Hyv&auml; UI - menu.B - 4 column megamenu" title="" data-element="desktop_image" data-pb-style="EEMQU24"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/B-4-column-megamenu-open-with-block.jpg" alt="Preview Hyv&auml; UI - menu.B - 4 column megamenu" title="" data-element="mobile_image" data-pb-style="K3DCCU7"></figure><figure class="m-auto mt-10 shadow-xl w-1/2 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="OYHXRM5"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-mobile-menu-a-scroll.jpg" alt="" title="" data-element="desktop_image" data-pb-style="EF093FN"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-mobile-menu-a-scroll.jpg" alt="" title="" data-element="mobile_image" data-pb-style="TMBRY4R"></figure></div></div></div><figure class="m-auto mt-8 w-10/12 shadow-xl rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="REIS2HC"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-gallery-b-fancy.jpg" alt="Preview Hyv&auml; UI - gallery.B - Fancy" title="" data-element="desktop_image" data-pb-style="S7DNBKX"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-gallery-b-fancy.jpg" alt="Preview Hyv&auml; UI - gallery.B - Fancy" title="" data-element="mobile_image" data-pb-style="O6X8S8F"></figure><div data-content-type="text" data-appearance="default" data-element="main"><p><br><br></p>
<ol start="2">
<li><strong>Product Galleries:</strong><br>The <strong>product gallery is a critical conversion point</strong> on any e-commerce site.<br>Luma's default Fotorama gallery has often been a source of frustration due to its limitations, performance issues, and customization difficulties.<br>Hyv&auml; UI provides several <strong>advanced product gallery components</strong> that are modern, flexible, and performant:
<ul class="!list-disc">
<li><strong>Gallery Versions:</strong>
<ol class="!list-circle">
<li><strong>A - Basis:</strong> Adds vertical thumbnails while retaining the core functionality of the default Hyv&auml; gallery.</li>
<li><strong>B - Fancy:</strong> A complete rebuild of the default Hyv&auml; gallery, visually similar to version A. It offers extensive customization options via etc/view.xml (e.g., fullscreen dialog, magnifier).</li>
<li><strong>C - Grid:</strong> Displays a grid of images and videos, ideal for image-heavy stores.</li>
<li><strong>D - Splide:</strong> Utilizes SplideJS for smooth transitions without thumbnails, offering a minimalistic design.</li>
</ol>
</li>
<li><strong>Key Features &amp; Customizations:</strong><br>Options often include navigation looping, image captions (from alt text), fullscreen toggles, thumbnail direction (horizontal/vertical), navigation arrows/dots/counter, video autoplay, and a product image magnifier (for non-touch devices).</li>
</ul>
</li>
</ol>
<p><strong>These galleries offer a significantly improved user experience and are easier to tailor to specific brand aesthetics compared to their Luma counterparts.</strong></p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="WCWJ5CI"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="GG1CN53"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="CXWYIIO"><div data-content-type="text" data-appearance="default" data-element="main"><ol start="3">
<li><strong>Headers &amp; Footers:</strong><br>Hyv&auml; UI provides <strong>multiple variations for these essential site-wide elements</strong>, such as "Clean," "Compact," and "Stacked" <strong>headers</strong>, or "Clean" and "4-Column Newsletter" <strong>footers</strong>. This allows for quick selection of a suitable base structure that aligns with the store's design language, which can then be further customized.</li>
<li><strong>Interactive Content Elements:</strong><br>To build engaging and informative pages, Hyv&auml; UI includes components like:
<ol>
<li><strong>Banners:<br></strong>Single, Split, and Grid layouts for promotions.</li>
<li><strong>Sliders/Carousels:<br></strong>For showcasing multiple images or products.</li>
<li><strong>Accordions:<br></strong>Ideal for FAQs or collapsible content sections.</li>
<li><strong>USPs (Unique Selling Propositions):<br></strong>Displayed with icons, as cards, or in a compact format to highlight key store benefits.</li>
<li><strong>CTAs (Call to Actions):<br></strong>Image-based, text-only, or split layouts to drive user actions.</li>
</ol>
</li>
</ol>
<p><strong>These elements come with the necessary Alpine.js for interactivity, saving developers from building these common JavaScript-driven features from scratch.</strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="HXE34P9"><figure class="md:ml-4 shadow-xl rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="MLLIDRV"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-slider-a-basic.png" alt="Prview Hyv&auml; UI - slider.A - basic" title="" data-element="desktop_image" data-pb-style="HL6CVEH"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-slider-a-basic.png" alt="Prview Hyv&auml; UI - slider.A - basic" title="" data-element="mobile_image" data-pb-style="MKC3QUI"></figure></div></div></div><div class="pagebuilder-column-group mt-8" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="Q54QAF9"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="QOYHTPA"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="QDBQXH0"><figure class="shadow-xl md:mr-4 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="FEL1JYG"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-components-design-system.jpg" alt="Hyv&auml; UI Components Design System" title="" data-element="desktop_image" data-pb-style="WGW0LC6"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/hyva-ui-components-design-system.jpg" alt="Hyv&auml; UI Components Design System" title="" data-element="mobile_image" data-pb-style="YPVDOA3"></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="N1BOCW2"><div data-content-type="text" data-appearance="default" data-element="main"><h3>The Hyv&auml; UI Figma Design System:</h3>
<p>A <strong>crucial companion</strong> to the code components is the Hyv&auml; UI <a title="Hyv&auml; UI Figma Design System" href="https://docs.hyva.io/hyva-ui-library/figma.html" rel="nofollow noopener">Figma Design System</a>.<br>This is <strong>more than just a style guide;</strong> it's a <a title="Hyv&auml; UI Figma File" href="https://figma.com/@hyva" rel="nofollow noopener">comprehensive design toolkit</a> that includes all <strong>essential Hyv&auml; UI components</strong> and reusable elements like colors and buttons.</p>
<ul>
<li><strong>Benefits for Designers &amp; Agencies:</strong>
<ul>
<li>Visualizes exactly what components are available.</li>
<li>Streamlines the design-to-development handoff.</li>
<li>Facilitates brand customization and faster prototyping.</li>
<li>Helps clients understand feature options and make decisions earlier. The Figma kit acts as a powerful collaboration tool, ensuring that designers, developers, and merchants are all on the same page, reducing rework and accelerating the entire project lifecycle.</li>
</ul>
</li>
</ul></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<h3>Seamless CMS Integration:</h3>
<p><strong>A standout feature is the ability to use Hyv&auml; UI components directly within Magento's CMS pages and blocks.</strong><br>This is often facilitated by the <a title="Hyv&auml; CMS Tailwind JIT module" href="https://docs.hyva.io/hyva-themes/cms/using-tailwind-classes-in-cms-content.html" rel="nofollow noopener">Hyv&auml; CMS Tailwind JIT module</a>, which compiles the necessary Tailwind CSS classes on the fly.<br>This empowers content managers to build richer, more dynamic content pages without always needing developer intervention for basic structural elements.</p>
<h3>Hyv&auml; UI Plugins:</h3>
<p>Beyond the main components,<strong> Hyv&auml; UI also offers "Plugins"</strong>.<br>These are typically <strong>smaller, reusable Alpine.js or Vanilla JavaScript solutions</strong> that can be <strong>paired with Hyv&auml; UI Components</strong> (e.g., a "Sticky Header" plugin that works with header components) or even used with the default theme's elements. They provide <strong>targeted functionality</strong> and can be a great way to add <strong>specific enhancements</strong> without implementing a full component.<br>The sheer variety and functional depth of these components demonstrate a keen understanding of real-world e-commerce requirements by the Hyv&auml; team. They <strong>proactively address common Magento frontend development pain points</strong>, offering <strong>modern, performant, and easier-to-customize solutions.</strong></p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>What's Inside Hyvä UI
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>Includes a wide range of components: Navigation (menus), product galleries , headers, footers, CTAs, and more.</li>
					<li>Comes with a Figma Design System for streamlined design-to-dev workflows.</li>
					<li>Offers CMS integration and smaller, reusable UI Plugins for targeted functionality.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="DGWMM91"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="hyva-ui-vs-alternatives">Hyv&auml; UI vs. Alternatives: A Quick Comparison</h2>
<div>
<div class="mt-6 lg:mt-8 bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200">
<p class="text-slate-700 mb-4 text-base sm:text-lg"><strong>To fully appreciate the value Hyv&auml; UI brings</strong>, it's helpful to see how it stacks up against common alternatives in the Magento development landscape.<br>Compare Hyv&auml; UI Components with building from scratch and legacy Luma/Blank theme:</p>
<div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
<table class="table-auto w-full text-sm text-left">
<thead>
<tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
<th class="p-4 font-semibold">Feature/Aspect</th>
<th class="p-4 font-semibold">Hyv&auml; UI Components</th>
<th class="p-4 font-semibold">Hyv&auml; from Scratch</th>
<th class="p-4 font-semibold">Luma/Blank Components</th>
</tr>
</thead>
<tbody class="text-slate-700">
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Development Speed</td>
<td class="p-4">Fastest (copy, paste, minor tweaks)</td>
<td class="p-4">Moderate (requires building all HTML, CSS, JS logic)</td>
<td class="p-4">Slowest (heavy overrides, complex JS, extensive CSS)</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Cost Efficiency</td>
<td class="p-4">Highest (minimal development hours)</td>
<td class="p-4">Moderate (more development hours than Hyv&auml; UI)</td>
<td class="p-4">Lowest (most development hours, complex debugging)</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Ease of Use (Developer)</td>
<td class="p-4">Very Easy (pre-built, functional)</td>
<td class="p-4">Moderate (requires strong Tailwind/Alpine.js skills)</td>
<td class="p-4">Complex (steep learning curve, KnockoutJS, RequireJS)</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Performance</td>
<td class="p-4">Excellent (optimized, lean by design)</td>
<td class="p-4">Excellent (if built well, lean by design)</td>
<td class="p-4">Poor to Moderate (bloated, many dependencies)</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Customization Flexibility</td>
<td class="p-4">High (PHTML, Alpine.js, Tailwind CSS are fully customizable)</td>
<td class="p-4">Highest (complete control from ground up)</td>
<td class="p-4">Moderate to Low (often requires fighting default styles/JS)</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Consistency &amp; Quality</td>
<td class="p-4">High (professionally designed, tested components)</td>
<td class="p-4">Variable (depends on developer skill)</td>
<td class="p-4">Moderate (can be inconsistent if heavily customized)</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Learning Curve</td>
<td class="p-4">Low (for using components)</td>
<td class="p-4">Moderate (for Tailwind/Alpine.js mastery)</td>
<td class="p-4">High (for Luma's intricacies)</td>
</tr>
<tr class="border-b border-slate-200 bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Tech Stack</td>
<td class="p-4">Hyv&auml; (PHTML, Alpine.js, Tailwind CSS)</td>
<td class="p-4">Hyv&auml; (PHTML, Alpine.js, Tailwind CSS)</td>
<td class="p-4">Luma (PHTML, XML, LESS, KnockoutJS, RequireJS, jQuery)</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Initial Setup</td>
<td class="p-4">Minimal (copy components as needed)</td>
<td class="p-4">Theme setup, then build all elements</td>
<td class="p-4">Magento default setup</td>
</tr>
<tr class="bg-white hover:bg-slate-50 transition-colors">
<td class="p-4 font-medium text-slate-800">Best For</td>
<td class="p-4">Rapid development, cost-sensitive projects, consistent UX, teams wanting to leverage pre-built best practices.</td>
<td class="p-4">Highly bespoke unique UIs where no Hyv&auml; UI component is a close fit, teams with deep Tailwind/Alpine.js expertise.</td>
<td class="p-4">Projects with extreme budget constraints for theme licensing (though Luma's dev costs can be higher), or when many legacy non-Hyv&auml;-compatible modules must be used without refactoring.</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 text-base sm:text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200">This comparison highlights that <strong>Hyv&auml; UI offers a compelling sweet spot</strong>, providing the <strong>performance and modern tooling</strong> of a <strong>custom Hyv&auml; build</strong> but with significantly <strong>accelerated development</strong> and <strong>reduced costs</strong> by leveraging a library of ready-to-use, functional building blocks.</div>
</div>
</div>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>Hyvä UI vs. Alternatives
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>Hyvä UI is faster to develop with and more cost-efficient than building from scratch or using Luma.</li>
					<li>Offers excellent performance and high customization, similar to building Hyvä from scratch but with pre-built advantages.</li>
					<li>Significantly outperforms Luma in speed, ease of use, and modern tech stack.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="UMAUSOB"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="who-benefits">Who Benefits Most from Hyv&auml; UI? (And How)</h2>
<p><strong>Hyv&auml; UI isn't just a tool for developers;<br></strong>its benefits ripple outwards, positively impacting Magento merchants and the agencies that serve them.<br>Each group finds unique value in this powerful component library.</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="BVNG6IV"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="OTBD5SW"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="KXCYX2M"><figure class="md:mr-4 rounded-3xl overflow-hidden" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="QPFVUIR"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/who-benefits-most-from-hyva-ui-and-how.png" alt="Infographic: Who Benefits Most from Hyv&auml; UI? (And How)" title="" data-element="desktop_image" data-pb-style="HQQWM2R"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/who-benefits-most-from-hyva-ui-and-how.png" alt="Infographic: Who Benefits Most from Hyv&auml; UI? (And How)" title="" data-element="mobile_image" data-pb-style="FDHERKB"></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="JGDHNNQ"><div data-content-type="text" data-appearance="default" data-element="main"><h3>Benefits of Hyv&auml; UI For Magento Merchants:</h3>
<ul>
<li><strong>Faster Launch &amp; Quicker ROI:</strong><br>The most significant advantage is speed. With Hyv&auml; UI, new stores, features, or redesigns can be launched much faster because developers aren't building common elements from scratch. This accelerated time-to-market means businesses can start generating revenue and seeing a return on their investment sooner.</li>
<li><strong>Reduced Development &amp; Agency Costs:</strong><br>Efficiency directly translates to cost savings. Since Hyv&auml; UI components drastically cut down development hours (by up to 50% or more for certain elements), the overall project costs for merchants are significantly reduced. This makes high-quality Hyv&auml; builds more accessible, even for businesses with tighter budgets.</li>
<li><strong>Access to Professional &amp; Consistent Brand Experiences:</strong><br>Hyv&auml; UI provides a library of professionally designed components that adhere to modern UX best practices. This helps ensure a high-quality, consistent look and feel across the entire store, enhancing brand perception and customer trust, without the premium price tag of entirely custom-designed elements.</li>
<li><strong>Clearer Vision &amp; Communication:</strong><br>Merchants can use the Hyv&auml; UI Figma kit or the component overview PDF to visualize available elements and better articulate their design preferences and functional requirements to their designers or development agency. This shared understanding streamlines the design and development process.</li>
</ul></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><h3>Benefits of Hyv&auml; UI&nbsp;For Magento Developers:</h3>
<ul>
<li><strong>Drastically Reduced Development Time on Repetitive Tasks:</strong><br>Developers are freed from the monotony of coding common UI patterns like menus, galleries, or forms repeatedly. They can leverage pre-built, functional .phtml components with integrated Alpine.js logic, allowing them to assemble interfaces much faster.</li>
<li><strong>Focus on High-Value, Complex Work:</strong><br>By offloading the creation of standard UI elements, developers can dedicate their expertise to more challenging and business-critical tasks, such as complex backend integrations, custom module development, performance optimization, and unique feature implementation that truly adds value to the merchant's business.</li>
<li><strong>Enjoyable &amp; Modern Toolkit:</strong><br>Working with Hyv&auml; Themes, Tailwind CSS, and Alpine.js is already a significant improvement over the Luma stack. Hyv&auml; UI further enhances this by providing well-structured, performant components built with these modern tools, leading to a more satisfying and productive developer experience.</li>
<li><strong>Easier Maintenance &amp; Upgradability:<br></strong>Using standardized components can simplify long-term maintenance. As Hyv&auml; UI itself is updated, these improvements can often be incorporated more easily than managing a multitude of disparate custom solutions.</li>
</ul>
<h3>Benefits of Hyv&auml; UI For Magento Agencies:</h3>
<ul>
<li><strong>Deliver Hyv&auml; Projects Faster, More Predictably &amp; Profitably:</strong><br>The efficiency gains from Hyv&auml; UI allow agencies to complete Hyv&auml; projects in shorter timeframes and with greater predictability in terms of effort and cost. This can lead to improved project margins and client satisfaction.</li>
<li><strong>Offer More Competitive Hyv&auml; Solutions:</strong><br>With reduced development effort, agencies can offer more competitive pricing or timelines for Hyv&auml; builds, making them an attractive option for merchants considering a Hyv&auml; store.</li>
<li><strong>Standardize Build Quality &amp; Consistency:</strong><br>Hyv&auml; UI helps agencies establish a baseline of quality and consistency across different projects and among various developers within the team. This ensures that all clients receive a high-quality frontend built on proven components.</li>
<li><strong>Streamlined Design &amp; Client Approval Processes:</strong><br>The Hyv&auml; UI Figma kit is a powerful asset for agency design teams. It allows for faster prototyping, easier client presentations (as clients can see and interact with designs based on existing, functional components), and smoother handoffs to the development team. This collaborative tool reduces misunderstandings and revisions, benefiting the entire project lifecycle.</li>
</ul>
<p>Ultimately, Hyv&auml; UI democratizes <strong>access to high-quality, performant frontends</strong>. It <strong>empowers smaller merchants and agencies</strong> to achieve a level of polish and efficiency that might have previously been reserved for larger enterprises with bigger budgets. For agencies, it's <strong>a strategic tool for enhancing efficiency</strong>, scalability, and the overall quality of their <strong><a title="JaJuMa-Shop | Online Store with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; development services</a></strong>.</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>Who Benefits Most
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li><strong>Merchants:</strong> Faster launches, lower costs, professional UX, clearer communication.</li>
					<li><strong>Developers:</strong> Reduced repetitive work, focus on complex tasks, enjoyable modern tools, easier maintenance.</li>
					<li><strong>Agencies:</strong> Faster/profitable projects, competitive offerings, standardized quality, streamlined design approvals.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="YNAH5TK"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="hyva-ui-in-action">Hyv&auml; UI in Action: Real-World Impact &amp; Examples</h2>
<p>The theoretical benefits of Hyv&auml; UI translate into <strong>tangible results for e-commerce businesses</strong>. While specific <strong>"Hyv&auml; UI component"</strong> case studies are often embedded within broader "Hyv&auml; Theme" success stories, the <strong>impact of using these pre-built elements is evident</strong> in the speed of development, cost savings, and improved user experiences reported by merchants and agencies.</p>
<ul>
<li><strong>Accelerated Launch for Niche Retailers:</strong><br>Consider a boutique like Barr Display. Facing challenges with clunky UX and low organic traffic, a key reason for their move to Hyv&auml; Themes was performance improvement. The availability of Hyv&auml; UI components would have directly contributed to a faster rebuild of their frontend, allowing them to achieve a "clear and simple design and easy navigation" more quickly. Their reported 30% increase in revenue and 47% increase in organic conversion rate are outcomes supported by a high-performing, user-friendly frontend, which Hyv&auml; UI helps deliver efficiently.</li>
<li><strong>Enhanced User Experience for Specialized Stores:</strong><br>Alcon Lighting, specializing in commercial LED lighting, achieved near-perfect performance scores (Mobile 96, Desktop 100) with Hyv&auml;. While this is a holistic Hyv&auml; Theme success, the ability to rapidly implement well-structured navigation (using Hyv&auml; UI menu components), clear product displays (potentially using gallery components), and informative content sections (using content blocks or accordions from Hyv&auml; UI) would be crucial. The efficiency of Hyv&auml; UI allows development focus to shift towards such content-rich experiences.</li>
<li><strong>Rapid Turnaround for Time-Sensitive Projects:</strong><br>JaJuMa's own <a tabindex="-1" title="A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp; JaJuMa)" href="/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" target="_blank" rel="noopener">showcase of launching a Magento store for Stollen Store in under four weeks</a>, within a <strong>limited budget</strong>, highlights the <strong>speed advantage</strong>.<br>Hyv&auml; UI components are instrumental in such <strong>rapid deployments</strong>, providing ready-made solutions for common e-commerce elements.</li>
<li><strong>Cost-Effective Solutions for Merchants:</strong><br>The ability to use pre-built components directly saves merchants development costs.<br>JaJuMa's <a tabindex="-1" title="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success" href="/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success" target="_blank" rel="noopener">"60 days on Hyv&auml;" showcase of migrating a Magento store from Luma to Hyv&auml; </a>on a record-low budget further <strong>proves the cost benefits</strong> achievable with an <strong>efficient Hyv&auml; workflow</strong>, often accelerated by <strong>component-based development principles</strong> similar to those in Hyv&auml; UI.</li>
</ul>
<p>While many case studies focus on the overall Hyv&auml; Theme benefits, it's understood that <strong>Hyv&auml; UI is a key enabler of these results</strong> by making the development of high-quality, performant frontends faster and more cost-effective. The pre-built nature of Hyv&auml; UI components means less time spent on foundational work and <strong>more time on custom features and strategic business goals</strong>.</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>Hyvä UI in Action
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>Hyvä UI contributes to faster launches and improved UX, as seen in various store examples.</li>
					<li>Enables rapid turnarounds for projects with tight deadlines and budgets.</li>
					<li>Reduces development costs by providing ready-made solutions for common e-commerce elements.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="TDCF77J"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="getting-started">Getting Started with Hyv&auml; UI: A Practical Guide</h2>
<p><strong>Embarking on your Hyv&auml; UI journey is refreshingly straightforward</strong>, especially if you're already familiar with the Hyv&auml; Themes ecosystem.<br>Here&rsquo;s what you need to know to get up and running:</p>
<h3>Prerequisites:</h3>
<p>The primary prerequisite is a <strong>valid Hyv&auml; Theme license</strong>.<br><strong>Hyv&auml; UI is generously included as a free component library for all Hyv&auml; Theme license holders.</strong> For developers, a foundational understanding of Hyv&auml; Themes, along with its core technologies - Tailwind CSS for styling and Alpine.js for interactivity - will be highly beneficial for effective customization and troubleshooting.</p>
<h3><br>Installation Made Easy:</h3>
<p>Hyv&auml; UI can be easily integrated into your Magento 2 project using one of two methods:</p>
<ol>
<li><strong>Composer (Recommended):</strong><br>If your project already has your Hyv&auml; Theme <a tabindex="-1" title="Packagist" href="https://packagist.org/" rel="nofollow noopener">Packagist</a> key configured (which is standard practice for licensed users), installing Hyv&auml; UI is as simple as running a single command in your Magento root directory:<br>
<pre class="overflow-auto">composer require hyva-themes/hyva-ui</pre>
<br>For projects that might be on an older Hyv&auml; Theme version (specifically V1.1.X, which used Tailwind CSS V2 and Alpine.js V2), you might need to specify an older version of Hyv&auml; UI if compatibility issues arise, for example:<br>
<pre class="overflow-auto">composer require --dev hyva-themes/hyva-ui:1.0.0</pre>
<br>However, for most current Hyv&auml; Theme installations, the first command is appropriate.</li>
<li><strong>Manual Download from Packagist:</strong><br>If, for some reason, your Packagist key isn't configured directly in the project, you can navigate to your private Packagist page (usually <em>https://packagist.com/customers/YOUR_NAMESPACE.hyva-themes/packages</em>), search for <em>hyva-themes/hyva-ui</em>, and download the package manually.<br>The Composer method is generally preferred for easier updates and dependency management.</li>
</ol>
<p>Once installed via Composer, you'll find all the Hyv&auml; UI components located within the <em>vendor/hyva-themes/hyva-ui/components/</em> directory.</p>
<h3><br>Using Hyv&auml; UI Components:</h3>
<p>The core workflow for utilizing a Hyv&auml; UI component is designed for simplicity and mirrors standard Magento theming practices:</p>
<ol>
<li><strong>Identify the Component:</strong><br>Browse the available components to find the one that suits your needs.</li>
<li><strong>Locate the Component Files:</strong><br>Navigate to the specific component's folder within <em>vendor/hyva-themes/hyva-ui/components/</em>.</li>
<li><strong>Read the README.md:</strong><br>Crucially, each component folder contains a README.md file. This file provides component-specific instructions, including any dependencies, required Tailwind CSS configurations, or particular usage notes. Always consult this file before proceeding.</li>
<li><strong>Copy to Your Theme:</strong><br>Copy the <em>main .phtml</em> template file (and any associated assets like CSS or specific JS if mentioned in the README) from the vendor directory into the corresponding path within your custom Hyv&auml; theme. For example, if you're using a banner component from <em>vendor/hyva-themes/hyva-ui/components/Magento_Cms/templates/elements/banner-a.phtml</em>,<br>you would copy it to<br><em>app/design/frontend/Your_Vendor/Your_Theme/Magento_Cms/templates/elements/banner-a.phtml</em>.</li>
<li><strong>Adjust Tailwind CSS Configuration (If Needed):</strong><br>Sometimes, a component might use specific Tailwind CSS classes that need to be explicitly included in your theme's tailwind.config.js purge settings to ensure they are not removed during the CSS build process. The component's README should guide you if this is necessary.</li>
<li><strong>Customize:</strong><br>Once copied into your theme, you can customize the .phtml markup, Alpine.js logic, and Tailwind CSS classes as needed to match your design and functional requirements.</li>
</ol>
<h3><br>Crucial Pitfall to Avoid: The "Don't Clone" Rule!</h3>
<p>It is strongly advised to avoid directly cloning the entire <em>hyva-themes/hyva-ui</em> repository into your Magento project, especially within your theme's directory. While it might seem like a shortcut to get all components at once, this practice can lead to significant problems:</p>
<ul>
<li><strong>Bloated Stylesheets:</strong><br>Tailwind CSS uses a Just-in-Time (JIT) compiler that scans your template files and generates only the CSS classes you actually use. If you clone the entire Hyv&auml; UI library into your theme, Tailwind might process all component templates, including those you don't use, leading to an unnecessarily large styles.css file, which negatively impacts performance.</li>
<li><strong>Potential Compatibility Issues &amp; Site Breakages:</strong><br>Hyv&auml; UI is an evolving library. Future updates might involve renaming components, modifying their structure, or even removing outdated ones. If your theme directly references files within a cloned repository that later change or disappear, your site could break upon updating Hyv&auml; UI or your theme.</li>
</ul>
<h3>Best Practices for Customization:</h3>
<p>The recommended and safest approach is to&nbsp;<strong>copy individual component templates into your project on an as-needed basis and then customize these copied versions</strong>.<br>This isolates your customizations, prevents stylesheet bloat, and makes it much easier to manage updates to the core Hyv&auml; UI library. You can always refer back to the original component in the vendor directory if needed. When customizing, respect the existing PHTML structure and the embedded Alpine.js logic, extending it thoughtfully to maintain functionality and performance.</p>
<p><br>By following these guidelines, you can <strong>seamlessly integrate Hyv&auml; UI components into your Hyv&auml; projects</strong>, significantly accelerating your development workflow while maintaining a clean, performant, and maintainable codebase. The straightforward installation and usage, coupled with the clear "don't clone" advice, are deliberate choices by the Hyv&auml; team to ensure developers can adopt these powerful tools easily and safely.</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>Getting Started
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>Requires a Hyvä Theme license; Hyvä UI itself is free.</li>
					<li>Installation is typically via Composer.</li>
					<li>Usage involves copying individual components to your theme and customizing; avoid cloning the entire repository.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="NCP5WEQ"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="why-jajuma">Why JaJuMa is Your Expert Partner for Maximizing Hyv&auml; UI</h2>
<p>While <strong>Hyv&auml; UI provides an incredible toolkit for accelerating Magento frontend development</strong>, realizing its full potential - and integrating it seamlessly into a high-performing, conversion-optimized e-commerce store - requires deep expertise.<br>This is where JaJuMa, as an <a tabindex="-1" title="Hyv&auml; Gold Partner status &amp; Journey" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" target="_blank" rel="noopener"><strong>official Hyv&auml; Gold Partner, Technology Partner, and active Core Contributor</strong></a>, stands out.<br>Our esteemed partner statuses aren't just labels; they're a <strong>testament to years of dedicated experience</strong>, <strong>pioneering innovation within the Hyv&auml; ecosystem</strong>, and a <a tabindex="-1" title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>proven ability to deliver exceptional Magento Hyv&auml; solutions</strong></a>.<br>We've been with Hyv&auml; since its inception, actively contributing to its growth and mastering its nuances. <a tabindex="-1" title="JaJuMa Is Hyv&auml; Gold Partner" href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance"> <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-gold-partner-badge.svg" alt="Hyv&auml; Gold Partner Agency - Official Partner Badge" width="312" height="224"></a></p>
<h3>Proven Track Record &amp; Real-World Success with Hyv&auml;:</h3>
<p>JaJuMa has a strong portfolio of successful Hyv&auml; projects, demonstrating our capability to leverage the entire Hyv&auml; stack, including the principles that make Hyv&auml; UI so effective. Our case studies, such as <a tabindex="-1" title="A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp; JaJuMa)" href="/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" target="_blank" rel="noopener">"Baking a Super-Fast Magento Store in Weeks"</a> and <a tabindex="-1" title="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success" href="/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success" target="_blank" rel="noopener">project rescues that achieved "Light Speed" performance</a>, showcase our ability to deliver rapid, high-quality Hyv&auml; implementations. Our <a tabindex="-1" title="Supercharge Your Magento 2 Performance: The Ultimate Guide To LCP Optimization (Luma + Hyv&auml;)" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener">expertise in LCP optimization</a>, a core benefit of Hyv&auml;, ensures your store not only looks great with Hyv&auml; UI components but also performs exceptionally.</p>
<h3><br>Beyond Standard Components: JaJuMa's Custom Hyv&auml; Solutions &amp; Extensions:</h3>
<p><strong>We don't just implement off-the-shelf Hyv&auml; UI components.</strong> JaJuMa possesses the advanced skills to heavily customize existing Hyv&auml; UI elements or, when unique client needs demand it, build entirely new, bespoke Hyv&auml; components from the ground up. This ensures your store has precisely the functionality and user experience required to meet your business goals.</p>
<p><br>Furthermore, <strong>JaJuMa enhances the power of Hyv&auml; UI</strong> by integrating it with our <a tabindex="-1" title="Performance Optimization Extensions for Magento 2 &amp; Hyv&auml; | JaJuMa-Develop" href="/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener"><strong>own suite of proprietary, performance-enhancing Hyv&auml; extensions</strong></a>. Tools like our <a tabindex="-1" title="More about Ultimate Image Optimizer for Magento 2" href="/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a>, <a tabindex="-1" title="Hyv&auml; Inline CSS extension" href="/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Inline CSS</a>, <a tabindex="-1" title="More about Smart Speculation Rules for Magento 2" href="/en/jajuma-develop/magento-extensions/smart-speculations-rules-extension-for-magento-2" target="_blank" rel="noopener">Smart Speculation Rules</a>, and <a tabindex="-1" title="More about Back/Forward Cache (bfcache) for Magento 2" href="/en/jajuma-develop/magento-extensions/back-forward-cache-extension-for-magento-2" target="_blank" rel="noopener">Back/Forward Cache</a> work synergistically with Hyv&auml; UI components. For example, our image optimizer ensures that images within Hyv&auml; UI galleries are perfectly optimized for speed and quality, while our CSS inlining can further <strong>boost the rendering performance of pages built with Hyv&auml; UI</strong> elements. This <strong>holistic approach provides a distinct advantage</strong>, offering clients a solution that's more powerful and optimized than Hyv&auml; UI alone.<br>As a certified Hyv&auml; Gold Partner, our custom solutions often feature these cutting-edge innovations, providing an unparalleled performance edge.</p>
<h3>Strategic Hyv&auml; Solutions Tailored to Your Business:</h3>
<p>JaJuMa offers a comprehensive range of Hyv&auml; services, ensuring we can guide you through every stage of your Hyv&auml; journey, with Hyv&auml; UI playing a vital role in efficiency and quality:</p>
<ul>
<li><strong><a tabindex="-1" title="Hyv&auml; Consulting &amp; Strategy" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Strategy &amp; Consulting</a>:</strong><br>We help you <strong>plan your Hyv&auml; adoption</strong>, including how Hyv&auml; UI can best be leveraged for your specific project.</li>
<li><strong><a tabindex="-1" title="Luma to Hyv&auml; Migration" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Luma to Hyv&auml; Migration</a>:</strong><br>We expertly <strong>transition your existing Magento 2 Luma stores to the Hyv&auml; frontend</strong>, rebuilding your frontend efficiently, often utilizing Hyv&auml; UI components as a base for a swift and cost-effective migration.</li>
<li><strong><a tabindex="-1" title="New Hyv&auml; Store Development" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">New Hyv&auml; Store Development</a>:</strong><br>We <strong>build cutting-edge Magento stores natively on Hyv&auml;</strong>, incorporating Hyv&auml; UI for rapid development and a polished user experience from day one.</li>
<li><a tabindex="-1" title="JaJuMa Takeoff - Fixed price Hyv&auml; Quick Launch Accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener"><strong>JaJuMa TakeOff Package:</strong></a><br>For businesses seeking a <strong>rapid and affordable entry into the world of high-performance Hyv&auml; e-commerce</strong>, our TakeOff package delivers a foundational Hyv&auml; store, optimized with our Speed Boost Suite. The efficiency of Hyv&auml; UI principles is inherent in delivering such a package quickly and cost-effectively.<br>And with our <strong>innovative and exclusive "Hyv&auml; UI Manager"</strong> we take these principles to the next level:</li>
</ul></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="ECCY8TT"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="BBGT69D"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="U9IPUI4"><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="message success rounded-3xl p-6 mt-6">
	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512" class="inline-block float-left mr-2 w-16" width="29" height="51" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"></path><title>awesomeicons6/solid/lightbulb</title></svg>

<blockquote class="py-2.5 px-5 border-l-4 border-secondary-lighter">
<span class="uppercase text-xl"><b>Exclusive Innovation<br>The JaJuMa Hyvä UI Manager:</b></span><br>
As a testament to our commitment to innovating within the Hyvä space, our TakeOff package exclusively includes the JaJuMa Hyvä UI Manager.<br>
This <b>first-of-its-kind tool empowers merchants to make simple UI adjustments</b> 
and <b>configure Hyvä UI components directly from the Magento admin panel</b> – no coding or developer assistance required.<br>
This means greater control, faster tweaks to layouts and styles, and significant time and 
cost savings for non-technical users looking to manage their store's appearance and basic functionality.
</blockquote>
</div></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="J8I7FXQ"><figure class="md:ml-4 rounded-3xl" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="V4XEMI1"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/HyvaUI_Manager.png" alt="First And Only Hyv&auml; UI Manager By JaJuMa" title="" data-element="desktop_image" data-pb-style="SIH2NFI"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/HyvaUI_Manager.png" alt="First And Only Hyv&auml; UI Manager By JaJuMa" title="" data-element="mobile_image" data-pb-style="IXKXSEH"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>Choosing JaJuMa means partnering with a team that not only understands Hyv&auml; UI at a technical level but also knows how to strategically deploy it to achieve your specific business objectives, amplified by our unique technological innovations.</p>
<h3>Ready to explore how JaJuMa can leverage Hyv&auml; UI for your Magento store?</h3>
<ul>
<li><strong>Explore JaJuMa's Comprehensive Hyv&auml; Services:</strong><br><a title="JaJuMa-Shop | Online Store with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Learn more about our full range of Hyv&auml; solutions</a></li>
<li><strong>See Hyv&auml;'s Speed and JaJuMa's Expertise in Action &ndash; Check Out Our Hyv&auml; Demo!</strong><br><a title="JaJuMa-Shop | Demo-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Experience the performance and quality firsthand</a></li>
</ul></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>Why JaJuMa for Hyvä UI
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>JaJuMa is an official Hyvä Gold Partner with deep, early expertise.</li>
					<li>Offers custom Hyvä development and proprietary extensions that enhance Hyvä UI, incl. first of its kind "Hyvä UI Manager".</li>
					<li>Provides a full range of strategic Hyvä services, from consulting to new store builds and performance optimization.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="HU98N1C"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="future-is-componentized">The Future is Componentized: What's Next for Hyv&auml; UI?</h2>
<p><strong>The Hyv&auml; UI library is not a static offering;</strong><br>it's an <strong>actively maintained and evolving</strong> part of the <strong>Hyv&auml; ecosystem</strong>, reflecting a commitment to continuous improvement and responsiveness to community needs.<br>This <strong>ongoing development ensures</strong> that Hyv&auml; users will continue to receive even <strong>more value and efficiency tools in the future</strong>.</p>
<p><br>According to the <a title="Hyv&auml; UI Roadmap" href="https://www.hyva.io/roadmap?product=hyva-ui" rel="nofollow noopener">official Hyv&auml; Roadmap</a>, specific <strong>enhancements are planned for the Hyv&auml; UI library itself</strong>, distinct from broader <strong><a title="Hyv&auml; Commerce: The Ultimate Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" target="_blank" rel="noopener">Hyv&auml; Commerce</a></strong> or general <strong><a title="JaJuMa-Shop | Top 10 Reasons and Benefits for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Theme</a></strong> updates.<br>Key planned features (typically with a 6+ months outlook from the roadmap's publication) include:</p>
<ul>
<li><strong>Off-Canvas Components:</strong><br>This will enable various areas of the storefront to be <strong>accessible as off-canvas sidebars</strong>.<br>For merchants, this means a consistent and stylized way to display hidden content, such as <strong>filters, mini-carts, or supplementary navigation</strong>, all while benefiting from beautifully designed components that aid performance and accessibility.<br>For developers, these prebuilt components will significantly reduce implementation time.</li>
<li><strong>Product Detail &amp; Listing Page (PDP/PLP) Components:</strong><br>The roadmap indicates a focus on <strong>expanding the range of components</strong> available for these critical e-commerce pages.<br>This will allow merchants to quickly revitalize their product detail and listing pages with new, performant, and accessible elements.<br>Again, the prebuilt nature of these components promises to massively reduce implementation time and development costs for agencies and developers.</li>
</ul>
<p>The existence of a public roadmap and the nature of these planned features - addressing common e-commerce development needs - demonstrate <strong>Hyv&auml;'s commitment to the UI library as a core part of its offering</strong>. It signals to users that they are investing in a tool that will grow and adapt, further solidifying its value proposition for building modern, efficient Magento frontends.</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="container mx-auto">
    <div class="text-white mx-auto my-12 rounded-3xl shadow-xl overflow-hidden">
        <div class="relative bg-[#3762a0] pt-10 p-6 lg:p-10 !pb-4">
            <div
                class="mx-auto mb-8 lg:absolute top-[20%] right-[5%] max-w-[100px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="#93c5ff"><path d="M19 9.62c0 2.58-1.27 4.565-3.202 5.872c-.45.304-.675.456-.786.63c-.11.172-.149.4-.224.854l-.06.353c-.132.798-.199 1.197-.479 1.434s-.684.237-1.493.237h-2.612c-.809 0-1.213 0-1.493-.237s-.346-.636-.48-1.434l-.058-.353c-.076-.453-.113-.68-.223-.852s-.336-.326-.787-.634C5.192 14.183 4 12.199 4 9.62C4 5.413 7.358 2 11.5 2a7.4 7.4 0 0 1 1.5.152"></path><path d="m16.5 2l.258.697c.338.914.507 1.371.84 1.704c.334.334.791.503 1.705.841L20 5.5l-.697.258c-.914.338-1.371.507-1.704.84c-.334.334-.503.791-.841 1.705L16.5 9l-.258-.697c-.338-.914-.507-1.371-.84-1.704c-.334-.334-.791-.503-1.705-.841L13 5.5l.697-.258c.914-.338 1.371-.507 1.704-.84c.334-.334.503-.791.841-1.705zm-3 17v1c0 .943 0 1.414-.293 1.707S12.443 22 11.5 22s-1.414 0-1.707-.293S9.5 20.943 9.5 20v-1"></path></g></svg>
            </div>
            <h3 class="text-3xl lg:text-4xl text-center md:text-left font-bold m-0 !mb-0 text-white md:w-[calc(100%-220px)]">
                <span class="text-[#93c5ff]">Key Takeaways</span><br>The Future of Hyvä UI
            </h3>
        </div>
        <div class="bg-[#93c5ff] text-secondary p-6 lg:p-10">
            <div class="flex flex-col gap-8 text-xl"
               >
                <ul class="text-lg space-y-1 marker:text-[#3762a0] marker:text-2xl">
					<li>Hyvä UI is actively developed with a public roadmap.</li>
					<li>Planned features include Off-Canvas Components and more PDP/PLP components.</li>
					<li>This signals ongoing commitment and evolving value for users.</li>
                </ul>
            </div>
        </div>
    </div>
</div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="DR4IQ4M"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="conclusion">Conclusion: Build Faster, Smarter, and Better with Hyv&auml; UI &amp; JaJuMa</h2>
<p><strong>Hyv&auml; UI has firmly established itself as an indispensable toolkit for any Magento store embracing the power and performance of Hyv&auml; Themes.</strong><br><strong>It's far more than a simple collection of styles;</strong> it's a library of functional, <strong>ready-to-use components </strong>that directly address the core needs of <strong>modern e-commerce development</strong>. By providing these building blocks, Hyv&auml; UI is the key to unlocking significantly faster development cycles, substantially reducing project costs, and consistently delivering higher-quality, professional user experiences for your customers.</p>
<p><br><strong>The benefits are clear and compelling</strong> for everyone in the Magento ecosystem:</p>
<ul>
<li><strong>Merchants</strong> can get to market <strong>faster and more affordably</strong>.</li>
<li><strong>Developers</strong> can shed repetitive tasks and <strong>focus on high-impact, custom solutions</strong>.</li>
<li><strong>Agencies</strong> can deliver superior Hyv&auml; projects with <strong>greater efficiency and profitability</strong>.</li>
</ul>
<p>As an official&nbsp;<strong>Hyv&auml; Gold Partner</strong>, JaJuMa is uniquely positioned to help you harness the <strong>full spectrum of advantages offered by Hyv&auml; Themes and the Hyv&auml; UI library</strong>.<br>Our deep, hands-on experience, coupled with our proprietary suite of specialized <strong><a title="Hyv&auml; Theme Compatible Extensions" href="/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener">Hyv&auml; extensions</a></strong> and the exclusive <strong><a title="JaJuMa Takeoff - Fixed price Hyv&auml; Quick Launch Accelerator" href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" target="_blank" rel="noopener">Hyv&auml; UI &amp; Hyv&auml; Style Manager in JaJuMa Takeoff</a></strong>, means <strong>we don't just implement Hyv&auml; UI components - we elevate them</strong>.<br>We understand how to <strong>weave these tools into a cohesive, high-performance e-commerce solution tailored precisely</strong> to your business objectives.<br><strong>Our commitment to the Hyv&auml; philosophy of performance and simplicity is unwavering, and our track record speaks for itself.</strong></p>
<p><br><strong>Ready to revolutionize your Magento store's development speed, slash costs, and elevate your user experience with Hyv&auml; UI?</strong> <br><a title="Let the Hyv&auml;nauts guide you through the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>The expert Hyv&auml;nauts at JaJuMa are here to guide you.</strong></a><br>Whether you're migrating an existing Luma store, building a brand-new Hyv&auml;-powered e-commerce platform, or looking to optimize and extend your current Hyv&auml; setup, we have the <strong><a title="Tailored Hyv&auml; Theme Store Solutions" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">tailored Hyv&auml; solutions</a></strong> and deep expertise you need.</p>
<p><br><strong>Don't just build a store; build a future-proof, high-performance e-commerce experience.</strong></p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="flex flex-col xl:flex-row justify-center items-center gap-4 my-16">
                <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Discuss Your Hyvä Project with JaJuMa"
                    class="btn btn-primary flex xl:inline-flex w-full lg:w-fit items-center justify-center px-6 py-3 text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                        stroke="currentColor" class="w-5 h-5 mr-2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
                    </svg>
                    Discuss Your Hyvä Project with JaJuMa
                </a>
                <a href="/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="Explore Our Hyvä TakeOff Package"
                    class="btn btn-secondary flex xl:inline-flex items-center justify-center w-full lg:w-fit px-6 py-3 text-base font-medium rounded-md border border-primary-light text-primary hover:bg-primary-lighter focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition ease-in-out duration-150">
                    Explore Our Hyvä TakeOff Package
                </a>
            </div></div></div></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="R3D8367"><div data-content-type="text" data-appearance="default" data-element="main"><h2 id="faq">Hyv&auml; UI - Frequently Asked Questions (FAQ)</h2>
<p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-638 .chevron::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkzIDcuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCAxMC41ODZsMy4yOTMtMy4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNGwtNCA0YTEgMSAwIDAxLTEuNDE0IDBsLTQtNGExIDEgMCAwMTAtMS40MTR6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PC9zdmc+Cg==);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-638 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 chevron">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-638 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>Is Hyv&auml; UI free?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes, Hyv&auml; UI is included completely free of charge with every Hyv&auml; Theme license.<br>It's a value-added part of the Hyv&auml; ecosystem, designed to enhance your Hyv&auml; development experience without additional cost.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-638 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>Do I need to be an expert developer to use Hyv&auml; UI components?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>While developers are the ones who will directly implement the <code>.phtml</code> components into the theme, Hyv&auml; UI is beneficial for the entire team.<br>Merchants and designers can leverage the Hyv&auml; UI Figma kit and component overview PDFs to understand the available pre-built elements.<br>This allows them to effectively plan their store's look and feel and communicate requirements much more clearly to their development team or agency, streamlining the entire process.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-638 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>How many components are included in Hyv&auml; UI?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; UI was initially launched with 36 components, and the library is dynamic and continuously growing.<br>The Hyv&auml; team regularly adds new components and improvements based on community needs and evolving best practices.<br>For the most current list of available components, it's always best to refer to the <a title="official Hyv&auml; UI documentation" href="https://docs.hyva.io/hyva-ui-library/what-is-the-hyva-ui-library.html">official Hyv&auml; UI documentation</a> or the Hyv&auml; UI Figma file.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-638 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>Can I customize Hyv&auml; UI components?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>Absolutely! Hyv&auml; UI components are specifically designed to be a flexible starting point, not a rigid framework.<br>The recommended practice is to copy the desired component's <code>.phtml</code> file (and any associated assets) into your custom Hyv&auml; theme.<br>From there, you have full freedom to modify the PHTML structure, tweak the Alpine.js logic for interactivity, and adjust the Tailwind CSS classes to perfectly align with your brand identity and specific functional requirements.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-638 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>Where can I see examples of Hyv&auml; UI in action?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>You can explore the official Hyv&auml; demo store to see some components in a live environment.<br>Additionally, JaJuMa offers its own <a title="Hyv&auml; Demo Shop" href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; Demo Shop</a>, where you can experience the speed, UI quality, and craftsmanship firsthand.<br>Many live Magento stores built with Hyv&auml; Themes also utilize components from, or inspired by, the Hyv&auml; UI library, showcasing its real-world application.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-638 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>How does Hyv&auml; UI compare to just using Tailwind CSS with Hyv&auml; Themes?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>Tailwind CSS is a utility-first CSS framework that forms the styling foundation for both Hyv&auml; Themes and Hyv&auml; UI components.<br>While you can certainly build any user interface from scratch using Tailwind CSS directly within your Hyv&auml; Theme, Hyv&auml; UI provides a significant advantage: it offers pre-built, <em>fully functional</em> components. This means they come with the necessary <code>.phtml</code> structure, integrated Alpine.js for interactivity, and Magento-specific considerations already handled.<br>This saves a substantial amount of development time and effort compared to having only the styling utilities and building all the logic and structure yourself.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-7">
                            <div class="accordion-item-header-638 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="6">
                                <span>What are Hyv&auml; UI Plugins?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-7">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; UI Plugins are smaller, often more focused, reusable JavaScript solutions (either Alpine.js or Vanilla JavaScript) designed to work alongside or enhance Hyv&auml; UI Components, or even elements from the default Hyv&auml; theme (like the header).<br>For example, a plugin might add "sticky" behavior to a header.<br>They offer a way to add specific pieces of functionality without needing to implement or customize a full-blown component, providing another layer of flexibility and reusability in your Hyv&auml; development toolkit.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    </div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div></div></div>]]></description>
              <pubDate>Fri, 06 Jun 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa-Shop]]></category>
           </item>
       <item>
      <title>JaJuMa: Your Gold-Standard Hyvä Development Agency - A 4-Year Journey of Passion &amp; Performance</title>
      <link>https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance</link>
      <guid>https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=DEBQS1V],#html-body [data-pb-style=UGVUWMC]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=DEBQS1V]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=UGVUWMC]{align-self:stretch}#html-body [data-pb-style=KAXTYPT]{display:flex;width:100%}#html-body [data-pb-style=NCQU5KV],#html-body [data-pb-style=NWVYKIB]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=XADYG2L]{border-style:none}#html-body [data-pb-style=AWFMLAH],#html-body [data-pb-style=P4105QW]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=B3M731B]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=TQ2GDO9]{display:flex;width:100%}#html-body [data-pb-style=WCLUI4B]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=KX03ECK]{border-style:none}#html-body [data-pb-style=DKFAN6N],#html-body [data-pb-style=SRJ1DPF]{max-width:100%;height:auto}#html-body [data-pb-style=O5JTFRN]{justify-content:flex-start;display:flex;flex-direction:column;width:50%}#html-body [data-pb-style=E0CMTG0],#html-body [data-pb-style=O5JTFRN]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=U6FIEY2]{display:flex;width:100%}#html-body [data-pb-style=KYHDETF],#html-body [data-pb-style=UXY5AYF]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:75%;align-self:stretch}#html-body [data-pb-style=KYHDETF]{width:25%;align-self:center}#html-body [data-pb-style=AMNBJIP]{border-style:none}#html-body [data-pb-style=FL2VU3F],#html-body [data-pb-style=GFG9TYF]{max-width:100%;height:auto}#html-body [data-pb-style=OV0DXS7]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=LM2A4IA]{display:flex;width:100%}#html-body [data-pb-style=FL55M70],#html-body [data-pb-style=TUAS4DI]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:41.6667%;align-self:stretch}#html-body [data-pb-style=FL55M70]{width:58.3333%;align-self:flex-end}#html-body [data-pb-style=V8MCL14]{border-style:none}#html-body [data-pb-style=A182Y58],#html-body [data-pb-style=SMX2O4Y]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=CX0U61W]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=IB2CY87]{display:flex;width:100%}#html-body [data-pb-style=B0LQ12F],#html-body [data-pb-style=UALO7F4]{justify-content:flex-start;display:flex;flex-direction:column;width:50%}#html-body [data-pb-style=B0LQ12F],#html-body [data-pb-style=PC5K205],#html-body [data-pb-style=UALO7F4]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=SLOM9EW]{display:flex;width:100%}#html-body [data-pb-style=DE71MTU],#html-body [data-pb-style=IUUE326]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}@media only screen and (max-width: 767px) { #html-body [data-pb-style=AMNBJIP],#html-body [data-pb-style=KX03ECK],#html-body [data-pb-style=V8MCL14],#html-body [data-pb-style=XADYG2L]{border-style:none} }</style><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
.blog-post-view .page-main h4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
}
@media (min-width: 1280px) {
    .blog-widget-recent .post-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .blog-post-view .page-main h4 {
	font-size: 1.25rem;
    line-height: 1.5rem;
	}
}
</style></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="DEBQS1V"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="UGVUWMC"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="KAXTYPT"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="NWVYKIB"><div data-content-type="text" data-appearance="default" data-element="main"><p id="ID0HK0V">Four years ago, we saw the future of Magento performance, and its name was Hyv&auml;. Today, we're thrilled and incredibly proud to announce the achievement of being <a tabindex="-1" title="Hyv&auml; Ecosystem - Find an Agency" href="https://www.hyva.io/find-an-agency" target="_blank" rel="noopener nofollow"><strong>Hyv&auml; Gold Partner</strong></a>, a significant milestone reflecting years of dedication, innovation, and collaboration within the vibrant&nbsp;<strong><a tabindex="-1" title="Discover the Hyv&auml; Ecosystem in our JaJuMa Hyv&auml;verse " href="/en/hyvaverse-guide" target="_blank" rel="noopener">Hyv&auml; ecosystem</a></strong>. This recognition underscores JaJuMa's position as a leading <a title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Development Agency</strong></a>, committed to leveraging the revolutionary <a title="JaJuMa-Shop | Top 10 Reasons and Benefits for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Theme</strong></a> to build exceptional <strong><a title="Your Ultimate Guide to Magento, the World's Most Powerful Commerce Platform" href="/en/magento-metropolis-guide" target="_blank" rel="noopener">Magento e-commerce</a></strong> experiences.</p>
<p>&nbsp;</p>
<blockquote class="p-2 my-2 border-s-2 border-gray-300 bg-gray-50">
<p class="italic leading-relaxed text-gray-900">&ldquo;JaJuMa forged the path with pride,<br>Where Largest Content Paint must peak.<br>A <strong>Gold Partner</strong> on Hyv&auml;'s side.<br>4 Years strong, achievements bold,<br>Simplicity and speed, a story told.<br>Early adopter, a leader's art,<br>In Hyv&auml;'s journey, we've played our part.&rdquo;</p>
</blockquote>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="NCQU5KV"><figure class="hero md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="XADYG2L"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/jajuma/JaJuMa-Hyva-Gold-Partner-Agency-A-4-Year-Journey-of-Passion-Performance.png" alt="JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance" title="JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance" data-element="desktop_image" data-pb-style="AWFMLAH"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/jajuma/JaJuMa-Hyva-Gold-Partner-Agency-A-4-Year-Journey-of-Passion-Performance.png" alt="JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance" title="JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance" data-element="mobile_image" data-pb-style="P4105QW"><figcaption data-element="caption">JaJuMa: Your Gold-Standard Hyv&auml; Development Agency - A 4-Year Journey of Passion &amp; Performance</figcaption></figure></div></div></div><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb82-absolute {
position: absolute
}
.cmsb82-relative {
position: relative
}
.cmsb82-bottom-0 {
bottom: 0px
}
.cmsb82-left-0 {
left: 0px
}
.cmsb82-z-\[1\] {
z-index: 1
}
.cmsb82-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb82-my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.cmsb82-ml-4 {
margin-left: 1rem
}
.cmsb82-flex {
display: flex
}
.cmsb82-inline-flex {
display: inline-flex
}
.cmsb82-grid {
display: grid
}
.cmsb82-hidden {
display: none
}
.cmsb82-h-10 {
height: 2.5rem
}
.cmsb82-h-auto {
height: auto
}
.cmsb82-w-10 {
width: 2.5rem
}
.cmsb82-w-8 {
width: 2rem
}
.cmsb82-flex-shrink-0 {
flex-shrink: 0
}
.cmsb82-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb82-flex-row {
flex-direction: row
}
.cmsb82-items-center {
align-items: center
}
.cmsb82-justify-center {
justify-content: center
}
.cmsb82-gap-2 {
gap: 0.5rem
}
.cmsb82-gap-8 {
gap: 2rem
}
.cmsb82-overflow-hidden {
overflow: hidden
}
.cmsb82-rounded-lg {
border-radius: 0.5rem
}
.cmsb82-\!bg-\[\#EE682F\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(238 104 47 / var(--tw-bg-opacity)) !important
}
.cmsb82-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb82-py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.cmsb82-pt-4 {
padding-top: 1rem
}
.cmsb82-text-center {
text-align: center
}
.cmsb82-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb82-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb82-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb82-font-bold {
font-weight: 700
}
.cmsb82-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb82-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb82-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb82-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb82-duration-300 {
transition-duration: 300ms
}
.cmsb82-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb82-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb82-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb82-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb82-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb82-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
@media (min-width: 640px) {
.cmsb82-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
}
@media (min-width: 1024px) {
.cmsb82-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb82-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.cmsb82-lg\:gap-4 {
gap: 1rem
}
.cmsb82-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb82-lg\:text-\[20px\] {
font-size: 20px
}
.cmsb82-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div data-cacheable="false">
    <hr>
    <p class="hyvaverse-main-cta-subtext cmsb82-text-center cmsb82-my-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
        Find all you need to know and more valuable insights about Hyv&auml; and Magento.<br>
        Expertly curated by JaJuMa:
        <br>
    </p>
    <div class="hyvaverse-main-cta-container cmsb82-text-center cmsb82-grid cmsb82-grid-cols-1 cmsb82-lg:grid-cols-2 cmsb82-gap-8">
        <div>

            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">        
                <span>&#128640;</span>
                <span>Launch the JaJuMa Hyv&auml;verse</span>
                <svg class="cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10 cmsb82-ml-4 cmsb82-lg:ml-6" height="210.000000pt" preserveaspectratio="xMidYMid meet" version="1.0" viewbox="0 0 245.000000 210.000000" width="245.000000pt" xmlns="http://www.w3.org/2000/svg">

                    <g fill="#402b05" stroke="none" transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)">
                        <path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
                        <path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
                        <path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
                        <path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
                        <path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
                        <path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
                        <path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
                    </g>
                </svg>
                </div>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Hyv&auml;.
            </p></div>
        <div>

            <a class="btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-white cmsb82-!bg-[#EE682F] cmsb82-overflow-hidden" href="/en/magento-metropolis-guide" title="Explore the Magento Metropolis!">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">
                    <svg class="cmsb82-drop-shadow-lg cmsb82-w-8 cmsb82-h-auto" fill="none" height="24" viewbox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect fill="url(#pattern0_413_38)" height="24" width="22"></rect>
                        <defs>
                            <pattern height="1" id="pattern0_413_38" patterncontentunits="objectBoundingBox" width="1">
                                <use transform="matrix(0.00329268 0 0 0.003 -0.317073 -0.311111)" xlink:href="#image0_413_38"></use>
                            </pattern>
                            <image height="500" id="image0_413_38" preserveaspectratio="none" width="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRFAAAA/////////v7+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v////////////7+///////////////////+///////////////////////+///////////////////////////+/////////////////////////////////v///////////v///v///////////////////////////////v///////////v///////////////v///v///v7+/v//ZZGWUAAAAFp0Uk5TAAUS/wwBBg8YAgMHGiMKCRMiHw0EERUIIRkdHBcQCxYOFB4gGyG6tv+yjO3//7E1h9uw/OSbTSnA8qA5i/GvuDFfyf/i9qmg9S9rZEpq6eJR5jjGKG0bIiAVGb/2kAAAFSlJREFUeJztnduPHEcVh3t2PbFnfVs7vq0vWSdxkFAkeCPhASFeyANISNz+zAghEA9IwAOKhABFQgSJWzAkcRKHODcnjoO9y86tZ7qnu+t2qs6pOr/vwXGSmZ6e/qarq06dOjWqgDpG3CcA0gPpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hWiVPpoNKr/9j/WM+FAm/QnOiWPD7cepD8XNnRJ3x76n8c/S3Ua3OiRfnJkvJl3Rh+nOBN2tEgfbdm97tRHcc9DBDqkHzu0f+3pD+OdhxA0SJ984fb6A4efSJaUL318yv1BXXgjX7z0k5/7vOvsPerzkETh0m37b5tM7lOehyzKlu7SgdvgMdlpSKNk6U+G9sNLfbSXK33nIcFBnigyOlus9NM0QdUiH+2FSj/+iOxQI7pDSaFI6Rc+ID1ccT26AqW7BuAsKEx7edIvxoir7L4f4aBslCb9bKyO14lPIx2YgcKkE/XZOymnjS9J+vhc3Eb4ybtRD5+OkqQPJkORUEisphjpEfrsXZz7b5KPiUsp0qN14NpceDfRB0WkDOnJlE/ZTtOmRKQE6eMn30v7gbk/2guQvpe+U515Yk320s/wBE2yDtFlLt0/HSqYjPvxWUufHHIuPrz8Qa6P9pylM7XsK3Kdas9Xul9uMzEns1z8lq30a+9wn8GMvTe5z8CDTKXvfsJ9BjXjx9lVNchTevypFReym3PNUbos5VMyG77lJ/2yxAucV4cuN+mM0ZhhLr3NfQb2ZCb9xh2iAx1brn8Z71LF0fN5tGcl/TrN3bSZ40j0W8pFe0bSiZYwHOtc43aO5KF87T8UR4lOPtJp+uz9/ewtkkuRhfZcpAetNK8Z7G2RLHOtzmxLHF00yUP6+IDkMKZnLpF22pV0EchBOlGiq03ewz5JKF367FsG0mketoeWjcUJkki67ORJ8dKDa4jMsS/8SjNI2Dku+NEuXDpRy+5249F8qG3TwoBs6TRtrXOEdLxF8lC+cZviKBGQLJ0ozu4VJ6OJCggN0cmVThSA8531JPrFiVwXIVY6TQpcSAt78w2KM7hKchRahEqnmTQPrQdGM8Ejb9QuUjpRAC48s4HoESOtjZconaaGCE27SvNo3/lcVPKkPOk0Uys7j6juLppho6g2Xpp0omgM6c5LV0nqEAiKzAqT/jTJdPR54vXqT5CMty+/J6WNFyWd5gEaY/E4jXYpITpB0id7/6Y4TJxtd8aXSYZvMvYEkiOdZpwWsQ4QSWR2LGHZpRjpJJf0+t2YI2KaIKGA3T2FSKe5zaMHQS5RFB3hXwMlQ/pTbxEcJEXJ3slxguWy3UnYCREhnWJq4wrF78YCilkB6iGlKxKknw/fFOnSh+nC2wQB+af+RXAe/giQThDnTBzkvBJ8p/K28PzSn70degSGnlFwqjRrUJZdenghEZacpOCuJ6d1bunBztnS0EKLEDPmzzFLD413cBZ3Co0tbLHNv/BKD5xIZa/nFRRGTDXI3IRXeljsVcD+t0GPdrbZF1bpQVuoCckpDxm1c30FTukht8l4i3/eYs7OVe9IC9fuvZzSAxp3Ibf5Au8vwvQ1GKX773wsrmqbdz1qHut80r1HPKdpFi/T4jnpyjO5zifdM7v97ANhKwcW+G04cPOf5CdiAZ90vwchfwZCL14Va1jadzbpXvFXcQ/zJh7aWUoXsEn3udFl9dm7cC89yfGduKR7VA8SqHzy8Oq9VtfENQuIYxtPLunON3qdJzF+tP/ZtKvMH4QdnZufwqUHDw5XkwiO8wnXSZL93chEem14PYrH/IRvZn+spWW6aWdowJiku12Xi+8vhkPtRyZfJsJmLaL12oQuDy890p1u9FUEY/NtTA/6rshS41SesW61GVJj5UtfLy7Q8TaOmi6dQ7NWoNB+yWP63y2PdIf5yMaqlc77J/lF6x6XbWTk2mZ8apFuPZxt5cb0XMekiUd980Sbld4tn+xapN+ynIJud9T6npQJFw/0Ppg6ns126+3TR5Z5pFs+0jcWJPZ3jxLtZz504heq+4etSI1Vxmz68Ixk6dN2z34uLkEr6VKRen46pyymBNPXIBIsfRrucCn7UY/mI+GW9HFxvgGwxTdNX5RErvTZc9qtvljMhtI55+Ox7dvST7TJlT67aK7LSKJpd1+zuGijzPWy9l93P50wxEqfB9bdV8BEqUbhs73EQrrFHHvyMZtY6fMr4bHsiX7hiF8dgqVK82gd0pevmI/Qveq30c6+TSZ+c7j1mRu/LKQvWATZPIv2EV5G772iIL2F8Tosw6/elRqJHu0BFWYgvYX1dfBfykyy6WnIAstapTElHtLnhEsnGL6FFUyoVRq/A6TPoZAeeDVDaw6sPtz0bSF9zvI6BFZtC4h7BJcthfQWpstQl80NLezi28Z7r0hcAektTJehnh8Plu41aif4VEjfwHQZ6nwzgjvOfddN/zXU60B6C9NlqCeeSCoFu0Vmg2qirAHpLRJLd6jpQ7QTW7Wu0pQODekzyKXbXlmafXVbH7h31/aViRAuneKZvmCvvdRwE5rdVResVJqm1CF9RgzpxiWPRFvCLVmpNCV8Q/qMONIHcxAnx4jLv6xUmhoQSJ8RS3r/BabrPGx+kunYOqQbw9oROnJLOiOzNHvtNVkd0vTL1SHd+PSMKL1r+EYTjWmxUmmaQID0GfUSoRjS25nm7nVirFipNE0VQvqMWjrNvtqbrF1nwqF5z0dA+hRjWnC96Nwn99iOycFncZ7lSyC9iQTp0VmpNP20dEg3BrjrHawgPQbCpZMGRtMC6a0PNS3Wr6VHGUylAdJbHwrp3a9MhHDpkcbQKVipND3NIH0GpEeFRbpxeFyHzKhylxhYfUfTCBXSZ0B6VFikG9et1NK914zys1JpijrrkG5ct1JLD99zmQ1Ib2KcO6urwpkrtogF0psYg6u1dM+drySwUmnKGUm+vTKLdONsZlnSTd83Sm2kIWRKrxMY97k3y/bHXnryHflkSq/LSKiQnrwiMKTHwl76CeqUXxPCpV93XXEqB3vpyfedkim9XlOuQnryXacgPRb20kkKYbkgU3rd4KmQnmiDghWQHgt76ck3nBIu/UTqYBUd9tIT7kAzR6b0uiaUCunJg+/CpZuKOAgG0ptAeu9LkyBTeh2jgvQYCJdus8WVUCC9CaT3vjQJwqXb7s8pEEhvAum9L02CTOn1xrqQHgNIjwWkN4H03pcmQab0ugDUtXcin0o8IL2JvfSryfcWJwPSm0B670uTAOmxgPQmRul1UjCkxwDSYwHpTSC996VJkCm9XugD6TGA9FhAehN76RkHZ9YWIEN6peROh/QmRun1im1IjwGkxwLSm0B6E0ifUl8wSI8BpMdirZIMpFeQ3gbSp0B6VGRKr68CpMcA0mMB6U3spZv2mxcMpDeB9CaQPgXSowLpsVgr/gnplYv086nr6tEB6U2ylX7uU9PWwCsgvUkc6Y+Nu4QEMi3yZ9w8sgbSm0SRvvemxd5fAey/PvuH9c7bkN4kSkduXncx2o68yyXzkO5JFOnLCqtRgnir+n7W0tequEN6FUl6vRtEhDbeQaDPeyB9in/zPv8r7cZe2+tddkj3JLb0arJHF9Q53G6UKoV0T6JIrzfwm2Hc78+W9gYrkO5JAukWO/7ZsLnTBqR7EmWcfqy9ja1pX1sLOnZMg3RP0kgP1t65SZ619LqwAqTPiCK9c3+EgFm6y3c6/zOke5JOuvfGnT3K40hPvdmqcOnP3rY+aN9OKMcOu//7IP27ZllLXxvdQ3qVWHpVnXHd4XBodzxI9ySx9OoJt4fmhaHoPaR7klq6eQvzNQzb3UK6J+mlVztX7PrxFz8ybCsA6X6Ybzsf6effC/3Uymb/ekj3g0f60bU1fdlDi98Fhmx+cEk3XP2LVkWNIN0PB+kOwRkb6dXZ+73/a9su0TVG7B3Sp9TSHYr8W0nvbeNP2I7lY+TIQfqUWvrxR0Mva2ApvbMfv/ux9WW3lu5QfkSD9ImxIa2lm19aYyt986C9cfYurKU7VIyE9CmrC2Z9jd12IZ/sLFKln7nzhdsVtz2h9SAgpLtJt7eeaOt5y/OZrPcYId1RunWymyzpDY+Q7tSRq+zXrIiSftCYz4V0V+m2PfiOdKkYWElvzdNBurN0yzQIQdLbjQ6ku0u3G7jJkb4R6IH0yqXe+xKLVYlipG/O1EF6ZXHhNvOVzK2DEOnLxbNrGJddQPqUrp64aWJUhvSNNsr8FqRAz5l0ToYNv02C9O6MSkifYn4udl+GwZXn/NK7f6oW4SVIn9F3Gfbu9r6FPTjTl2plzglQId18GaZVgzrpH73Zz7IF0Sd9t3cljf9PPBYs0i3qcvVfh76b3SbBjYAehf2J0+aAYqKf6woW6RY//qEFB09vjooqXun9t7lNBRxzCi4xUqUPNnmdS5BPxyom1qTr1IdyrQK/ahTESm8XlmjSEY5nkz608q26eM98SCXSbWq9DYepNpanPXuXSfrged60GFIkGmuuwSPdat7McAO0rv6teyl778/9ffGv48F6tMblFVOsE3HJ4JFuNytt6ODMu8XLy/+l+ynH6c9V848dfgjZFa9MHXmXLX14zfARz5wYjUZ/mf/9+b+mjMg9V82sD/qyXSmb/JHOJd2ygvb+G8N3wclbo9Gf5n/96mtJpZ88+rndvT3wOuvF0b1xqHgwSbdOcj0wPf1f+MP8n6mkv/j76Z9fG43+PBhWtF+lkf5GFy+9e7JynckXXx+9Un35/O/SSP/mb6d/fuPVQeUupS8USXeoA2McgJ88uu+q/yWS/pXXqm/9elHwvw+XQmYDwbxocEl3uNXNF2a8e3N39Mc0V++l0Z1rvxkcVjisv6s4+u6M0m+4LCAztoH7z49+ab/sLYTvjl4d7nm5/JorltadT7rjxelJUBDHFccQEYdzRukORSZmDIa4heC8X5Rd9Qtq+KQ7VPlakHwK0hH3b2QcmsSBT7rVZEST058y9HpsmZzoLS3ayxnrXd5IYZTu2uWZwnNn2OC1lQTLE51XunPN1iN2jlPt00GK3+4h/WWH48Ipvbrm042xrAKVlNNeDdAVig1HfGCV7tPAV/K0d+fsmWFq3LmlO5ZnXnLpbeLzCMJ352e+3y6vdMeQ5Yqn/0F7Hv4MLL8YxpQsEBFm6Z4NfMUTs+7A+/yfsi+LSA63dI+AxhIBsRpv5amy9Lvhln5k/Ts/93wrW0dogWePZAbrubNLr8Yvbf/M972cbfxAbWEj1+m2gvWBX3q18+3RT33fy9cbcpsabsL5PJ8iQHpVfX/0E+/38gRmfYfmM4x5f7ERIX38vdf+5v3m8x8mb+Mtc3l7SL+4oY0I6UcN3gsv+795eMUBPXZrGHoYXhKTBiHSqwsv/sL/zUlnYcJ2ZufIg9xAinSf6fU10t0//kPzIwxZtKmQIz1o2JuqH+8ddJ3B3oNbIEi65164NfHjHWEtO9fs+SaipLvs3tFB5LIEk2Mho8Obd/ijxktkSQ8dDcUctNvWne9GVA6ANOmBcY9omYZhLTt3CK6FPOmBHeSOgrwEBA3NJcwHNpAoPbCNp29JfVM95shbpSFSumWxlj6os6lKGJo3ECrdM1N2CeXo6FzQsbjn/DsRKz1ovpruMWos0D+InKF5A7nSq2r3k4A3kwzaw+IGyWu+2iJZeuA1D+7QjbeDJm35p1D7EC3dqpzuAGEP1LDnS/o6kPYIl350v4TcbQGF/8OGjVfuysjQ7ka89MARk29gNizoKi0a0yID6WEh0MljDwFhT5VRUCwnATlID5zGds+TvhUSKmcqNOBCHtIDn7Bura1NifZ++vf1kEMm0gOzqVxmYYK6ECJS4IxkI70anwu5oJbZVONLIdHfG29J7rOvyEd6YPfKqhBdwHLKSuJ0Wg85SQ/MnTQuIGMOAKYjL+lRB+0+dY9WCB+aN8hNeqD2/uFbWNBV5AxqL/lJDxtSjQ+6WuHxTpByWTVwzGQoPTQ/fnNYtR+0o0YG0ZgWWUp3L7zbYu/hB1vbRw/hydbDg8tBi1Yy6rOvyFN6uHYqGGtE+ZOr9MD1JlRkNE5bI1vpofF4CvJUnrX0wETpYPbezSPouknW0gMH7WHkFI1pkbl0tg5dnNVTichdOk8bfzZoyp2d/KVXk7Op88vl7i9hRwHSQ7MYXRG6bMWBIqSn1J71w3xBIdKrnURrCzIMum5SivQ0sZoSbvOqJOmhi4otyHho3qAk6ZFjNTkkN9tRlvTAQiFDXA4o9S2NwqSH1nTsJa98KAPFSQ+sNtpNIR24JeVJD9t0oQvmzTfoKVF6YAJ7m3I6cEuKlE45+ZZ6B4EUFCr9qE0mSUve+TzXRIkhipUeuC5tjpQC7cSUKz1ce4kt+4ySpVfVqZC4qZDdXCNQtvSAwGxR0ZgWpUuvLnmVMpg8LPY2rxRI97rZS77NKxXSnUuSsW5znQIN0h1rORd+m1dapNsvav/Br4oLum6iRbrdNMwPXy65/1ajR3pVnbwwWHzgR6+8rUK5LunVUJCuiDRXS5RJP2L86PTDydqeET9++fL7B4VkPFqiTzqAdI1AukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hXyfy89l0B+7GqqAAAAAElFTkSuQmCC">
                            </image>
                        </defs>
                    </svg>
                    <span>Explore the Magento Metropolis!</span>
                    <svg class="cmsb82-drop-shadow-lg cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10" fill="none" height="24" viewbox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.7998 15.5999H15.5998V14.3999H13.7998V15.5999ZM15.5998 17.9999H13.7998V16.7999H15.5998V17.9999ZM13.7998 20.3999H15.5998V19.1999H13.7998V20.3999Z" fill="white"></path>
                        <path clip-rule="evenodd" d="M5.4 0L15 3.6V12H17.4C17.5591 12 17.7117 12.0632 17.8243 12.1757C17.9368 12.2883 18 12.4409 18 12.6V22.8H18.6C18.7591 22.8 18.9117 22.8632 19.0243 22.9757C19.1368 23.0883 19.2 23.2409 19.2 23.4C19.2 23.5591 19.1368 23.7117 19.0243 23.8243C18.9117 23.9368 18.7591 24 18.6 24H0.6C0.44087 24 0.288258 23.9368 0.175736 23.8243C0.0632142 23.7117 0 23.5591 0 23.4C0 23.2409 0.0632142 23.0883 0.175736 22.9757C0.288258 22.8632 0.44087 22.8 0.6 22.8H1.2V10.2C1.2 10.0409 1.26321 9.88826 1.37574 9.77574C1.48826 9.66321 1.64087 9.6 1.8 9.6H3V5.4H4.2V9.6H5.4V0ZM16.8 22.8H15.6V21.6H13.8V22.8H12.6V13.2H16.8V22.8ZM5.4 10.8H2.4V22.8H5.4V10.8ZM8.4 5.4H7.2V6.6H8.4V5.4ZM9.6 5.4H10.8V6.6H9.6V5.4ZM13.2 5.4H12V6.6H13.2V5.4ZM7.2 7.8H8.4V9H7.2V7.8ZM10.8 7.8H9.6V9H10.8V7.8ZM12 7.8H13.2V9H12V7.8ZM8.4 10.2H7.2V11.4H8.4V10.2ZM9.6 10.2H10.8V11.4H9.6V10.2ZM13.2 10.2H12V11.4H13.2V10.2ZM7.2 12.6H8.4V13.8H7.2V12.6ZM10.8 12.6H9.6V13.8H10.8V12.6ZM8.4 15H7.2V16.2H8.4V15ZM9.6 15H10.8V16.2H9.6V15ZM7.2 17.4H8.4V18.6H7.2V17.4ZM10.8 17.4H9.6V18.6H10.8V17.4ZM8.4 19.8H7.2V21H8.4V19.8ZM9.6 19.8H10.8V21H9.6V19.8Z" fill="white" fill-rule="evenodd"></path>
                    </svg>
                </div>
                <svg class="cmsb82-absolute cmsb82-left-0 cmsb82-bottom-0" fill="none" height="51" viewbox="0 0 435 51" width="435" xmlns="http://www.w3.org/2000/svg">
                    <path d="M521.149 66.6131V52.8942H518.576V49.1462H515.839V45.6486H506.218V49.1462H503.825V52.8084H502.489V39.4329H495.519V52.6368H491.445V45.5699H489.304V40.9636H484.482V45.4841H475.443V41.9864H465.053V44.9691H462.431V24.0116H451.869V39.7762H444.856V52.4651H440.523V49.7399H436.758V34.2328H431.074V47.9517H426.742V19.0691H424.6V14.5343L423.171 7.05972H421.777V0H421.058V7.05972H419.578L418.242 14.6774L418.234 14.7131V18.8975H416.524V46.5069H410.359V49.9116H408.254V41.0494H400.178V49.0604H395.895V57.4934H394.221V51.5281H391.484V35.5132H389.256V33.0455H384.686V35.5132H382.287V39.2612H378.902V34.2328H370.733V39.4329H365.258V43.095H363.066V38.1525H360.752V35.6848H355.155V38.0667H353.229V52.6368H350.614V38.7104H345.994V33.9825H338.722V41.1352H334.562V37.8164H323.317V60.4332H321.341V40.8777H318.388V25.4207H316.204V21.8372H314.156V18.1321H312.741V11.9736H312.022V18.1321H310.607V21.5797H309.069V25.4207H306.755V40.4986H304.01V27.3662L301.208 20.7572L298.413 27.495V35.8994H292.507V45.9919H290.021V25.4207H280.184V42.7946H277.231V57.1143H275.384V34.1041H273.2V30.5277H271.404V26.0573H268.113V30.399H266.187V34.1041H264.262V62.7364H261.388V29.1258H254.504V36.021H251.12V33.0884H245.214V26.1861H234.867V37.9451H232.373V29.2546H225.239V37.3013H222.745V26.0573H220.432V22.6025H214.453V26.0573H211.371V33.9825H209.007V26.5652L203.769 18.3324L198.718 26.2218L198.66 26.3076V29.8912H196.814V25.9285H189.42V28.103H187.954V24.0116H182.228V27.588H180.561V44.2037H178.966V32.1872H170.932V35.7707H161.434V38.3242H157.015V34.7478H153.551V30.5277H143.327V37.6876H141.609V34.7478H135.373V47.401H133.389V30.5277H130.824V20.8144H122.791V44.4612H120.169V23.7541H110.461V30.2703H103.276V34.4904H100.582V39.9836H98.2177V28.3533H87.8709V34.3616H85.2986V45.9919H81.6557V41.6502H79.4714V26.5652H72.3364V41.264H68.2264V50.212H65.9918V37.8164H59.3167V18.6471H47.5545V42.0293H44.4792V52.0002H42.7547V31.0427H36.0006V44.59H33.2558V29.7624H23.6779V37.4301H20.7247V50.9773H18.8781V47.1435H15.537V27.7167H4.42142V47.5297H1.67665V40.7561H-0.37833V37.5589H-11.3718V40.2411H-13.8076V64.3958H-21V83H525V66.6131H521.149Z" fill="#9B3205" fill-opacity="0.5"></path>
                </svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Magento.
            </p>
        </div>
    </div>
    <br>
    <hr>
    <style>
        .hyvaverse-teaser-shine {
            position: relative;
            overflow: hidden;
        }

        .hyvaverse-teaser-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: teaser-shine-move 6s infinite;
            pointer-events: none;
        }

        @keyframes teaser-shine-move {
            0% {
                left: -75%;
            }

            100% {
                left: 125%;
            }
        }
    </style>
</div></div></div>
</div><h2 data-content-type="heading" data-appearance="default" data-element="main">Our Journey To Hyv&auml; Agency - How It Began</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>For JaJuMa, an e-commerce agency deeply rooted in the <strong><a title="Your Ultimate Guide to Magento, the World's Most Powerful Commerce Platform" href="/en/magento-metropolis-guide" target="_blank" rel="noopener">Magento platform</a></strong>&nbsp;since more than 10 years, the encounter with <a tabindex="-1" title="Hyv&auml; Themes" href="https://www.hyva.io/" target="_blank" rel="noopener nofollow">Hyv&auml; Themes</a> marked a pivotal moment. Hyv&auml; emerged as a groundbreaking frontend solution designed to address the long-standing challenges of Magento 2's default frontend, offering a path to superior performance, simplicity, and efficiency.</p>
<p>&nbsp;</p>
<p>The journey began not merely with using the technology, but by contributing to it. <br>In April 2021, JaJuMa initiated contact regarding the compatibility of their Magento extensions with the newly released Hyv&auml; Theme.</p>
<p>&nbsp;</p>
<blockquote class="p-2 my-2 border-s-2 border-gray-300 bg-gray-50">
<p class="italic leading-relaxed text-gray-900"><strong>Date:</strong> 23.04.2021<br><strong>From:</strong> Oli Jaufmann, JaJuMa GmbH<br><strong>To:</strong> Willem, Hyv&auml; Themes B.V.</p>
<hr>
<p class="italic leading-relaxed text-gray-900">&ldquo;Hi Willem,</p>
<p data-sourcepos="3:1-4:75">First of all, big congratulations on Hyv&auml; &ndash; awesome thing!<br>We are currently looking for projects where we can work with it and use it.</p>
<p data-sourcepos="6:1-7:85">One of the ideas would be to make our extensions compatible with Hyv&auml;.<br>The question now would be, would it be possible to get a developer license for this?<br><br>Thanks and Cheers<br>Oli Jaufmann &rdquo;</p>
</blockquote>
<p>&nbsp;</p>
<p>From that very first interaction, <a tabindex="-1" title="How our passion for Hyv&auml; Theme started" href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">the conviction was immediate and unwavering</a>. This wasn't a tentative exploration; it was a strategic embrace driven by a clear recognition of Hyv&auml;'s potential. JaJuMa's proactive engagement, focusing on enabling the ecosystem through extension compatibility, signaled a partnership mentality from the outset. It demonstrated an <a tabindex="-1" title="Hyv&auml; Theme Benefits &amp; Value" href="https://www.jajuma.de/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">understanding that Hyv&auml;'s value</a> extended beyond individual client projects to the broader Magento community.</p>
<p><br>The core philosophy underpinning Hyv&auml; &ndash; prioritizing performance, championing simplicity, and enhancing affordability &ndash; resonated deeply with JaJuMa's own values: Delivering outstanding e-commerce solutions, with speed, usability and affordable. This alignment formed the bedrock of a journey characterized by passion, technical excellence, and a relentless pursuit of delivering unparalleled value to Magento merchants.</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Why Hyv&auml;? The Instant Connection to Performance, Simplicity &amp; Value</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>The immediate and profound connection JaJuMa felt with Hyv&auml; stemmed from a clear understanding of the pain points associated with Magento's traditional Luma frontend. Issues like cumbersome complexity, sluggish performance impacting user experience and conversions, and consequently, high development costs were all too familiar. Hyv&auml; presented not just an alternative, but a fundamental solution.</p>
<p>Hyv&auml;'s core philosophy directly addresses these challenges through three key pillars:</p>
<p>&nbsp;</p>
<ol class="list-decimal ml-4">
<li>
<p><strong>Unmatched Performance:<br></strong>Hyv&auml; is engineered for speed. By replacing the heavy, complex JavaScript libraries of Luma (like KnockoutJS and RequireJS) with lightweight, modern alternatives like AlpineJS and TailwindCSS, <a tabindex="-1" title="Hyv&auml; improves Core Web Vitals" href="https://www.hyva.io/" target="_blank" rel="noopener nofollow">Hyv&auml; drastically reduces page load times and improves Core Web Vitals</a>. The goal is consistently achieving "green" scores in Google's performance metrics, a feat often considered nearly impossible with the standard Luma theme.6 This performance boost isn't just a technical achievement; it directly translates to better user experiences, higher conversion rates, and ultimately, increased revenue for merchants.</p>
</li>
<li>
<p><strong>Radical Simplicity:<br></strong>The lean architecture of the <a tabindex="-1" title="Hyv&auml; Theme Benefits - Simplicity" href="https://www.jajuma.de/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Frontend</strong> eliminates unnecessary complexity</a>. By shedding outdated frameworks and reducing dependencies, Hyv&auml; offers a cleaner, more manageable codebase. This simplicity significantly enhances the developer experience, making development faster, more enjoyable, and less prone to bugs stemming from intricate dependencies. Efficient developers are happy developers, leading to quicker project turnarounds and higher quality outcomes for clients.</p>
</li>
<li>
<p><strong>Enhanced Value &amp; Affordability:<br></strong>The combination of performance and simplicity delivers tangible business value. Faster development cycles mean a quicker time-to-market for new stores or features. Reduced complexity often translates into lower development and maintenance costs. This makes the <a tabindex="-1" title="Hyv&auml; Theme Benefits - Affordable" href="https://www.jajuma.de/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">powerful combination of Magento 2 and Hyv&auml; a surprisingly affordable</a> and accessible solution, even for small and medium-sized merchants who might have previously found Magento cost-prohibitive.</p>
</li>
</ol>
<p>&nbsp;</p>
<p>Recognizing these interconnected benefits &ndash; how technical improvements directly solved critical business challenges &ndash; solidified JaJuMa's commitment. The agency formulated a clear vision from the outset: Hyv&auml; would be the foundational technology upon which JaJuMa would build innovative, high-performing, and unmatched digital experiences for its clients. It represented a strategic alignment of cutting-edge technology with tangible business outcomes like&nbsp;<a tabindex="-1" title="improved conversion rates, operational efficiency, and broader market accessibility" href="https://www.hyva.io/" target="_blank" rel="noopener nofollow">improved conversion rates, operational efficiency, and broader market accessibility</a>.</p>
<p>&nbsp;</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Pioneering the Future: JaJuMa's Early Days &amp; Foundational Hyv&auml; Contributions</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>JaJuMa's engagement with Hyv&auml; quickly evolved from early adoption to active leadership within the burgeoning ecosystem.<br>This wasn't just about using a new tool; it was about helping build and shape its future, demonstrating a deep, integrated commitment.</p>
<p>A primary focus was enabling seamless integration through extension compatibility:</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="B3M731B"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="TQ2GDO9"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="WCLUI4B"><figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="KX03ECK"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/jajuma/JaJuMa-Hyva-Extensions-Magento-Marketplace.png" alt="Hyv&auml; Extensions Marketplace" title="Hyv&auml; Extensions Marketplace" data-element="desktop_image" data-pb-style="DKFAN6N"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/jajuma/JaJuMa-Hyva-Extensions-Magento-Marketplace.png" alt="Hyv&auml; Extensions Marketplace" title="Hyv&auml; Extensions Marketplace" data-element="mobile_image" data-pb-style="SRJ1DPF"></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="O5JTFRN"><div data-content-type="text" data-appearance="default" data-element="main"><ul class="list-disc ml-4">
<li>
<p><strong>Trailblazing Compatibility:<br></strong>JaJuMa holds the distinction of being the very <a tabindex="-1" title="First Magento extension provider to offer official Hyv&auml; compatibility" href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>first Magento extension provider to offer official Hyv&auml; compatibility</strong></a>.&nbsp;<br>This addressed a critical early need for merchants and developers looking to adopt Hyv&auml;, establishing JaJuMa's credibility and technical prowess from day one.</p>
</li>
<li>
<p><strong>Marketplace Leadership:<br></strong>JaJuMa was also the first to actively promote <a tabindex="-1" title="Hyv&auml; Extensions on Magento Marketplace" href="https://commercemarketplace.adobe.com/catalogsearch/result/?q=JaJuMa" target="_blank" rel="noopener nofollow">Hyv&auml; compatibility <strong>within the official Magento Marketplace</strong></a>, showcasing strong confidence in the theme and significantly boosting its visibility within the wider Magento community.</p>
</li>
</ul></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<ul class="list-disc ml-4">
<li>
<p><strong>Comprehensive Support:<br></strong>Today, all JaJuMa-developed Magento extensions are <strong>fully compatible with Hyv&auml;</strong>, very most natively or through dedicated compatibility modules, many even <strong>developed "Hyv&auml;-First"</strong>, ensuring clients can leverage JaJuMa's solutions seamlessly within a Hyv&auml; environment. The full range can be explored at&nbsp;<a tabindex="-1" href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions">https://www.jajuma.de/en/jajuma-develop/hyva-extensions</a>.</p>
</li>
<li>
<p><strong>Dedicated Hyv&auml; Extensions:<br></strong>Beyond compatibility, JaJuMa has developed so far seven <a tabindex="-1" title="Dedicated Hyv&auml; Theme Extensions" href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener">extensions specifically named after and dedicated to enhancing the Hyv&auml; experience</a>, including popular tools like "Awesome Hyv&auml;", "Hyv&auml; Inline CSS", "Hyv&auml; Flags", and "Hyv&auml; Translation".</p>
</li>
<li>
<p><strong>Community &amp; Accessibility:<br></strong>A significant number of <a tabindex="-1" title="Free Hyv&auml; &amp; Magento Extensions" href="https://www.jajuma.de/en/jajuma-develop/free-magento-extensions" target="_blank" rel="noopener">JaJuMa's Hyv&auml;-focused extensions are <strong>offered free and open-source</strong></a>, including icon packs (Awesome Hyv&auml;, Phosphor Icons, Hyv&auml; Flags), and other functional enhancements (Hyv&auml; PWA, Hyv&auml; FAQ Widget), and numerous <a tabindex="-1" title="Magento Power Toys by JaJuMa" href="https://www.jajuma.de/en/jajuma-develop/magento-power-toys-extensions" target="_blank" rel="noopener">"Power Toys"</a>. This commitment to open-source <strong><a tabindex="-1" title="Hyv&auml; Benefits &amp; Philosophy" href="https://www.jajuma.de/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">aligns directly with the Hyv&auml; philosophy</a></strong> of accessibility and strengthens the community by <strong>lowering barriers to entry for merchants</strong>, especially smaller ones seeking specific functionalities without added cost.</p>
</li>
</ul></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="E0CMTG0"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="U6FIEY2"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="UXY5AYF"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p><strong>JaJuMa's contributions</strong> extended beyond their own product catalog:</p>
<p>&nbsp;</p>
<ul class="list-disc ml-4">
<li>
<p><strong>Platform Integration:<br></strong>Demonstrating deep belief in Hyv&auml;'s capabilities, JaJuMa rebuilt their proprietary marketplace software, <a tabindex="-1" title="Marketplace Software" href="https://www.jajuma.de/en/jajuma-market" target="_blank" rel="noopener">"JaJuMa-Market"</a>, to be entirely powered by Hyv&auml;, making it the first (and still only?) <strong>fully Hyv&auml;-compatible multi-vendor solution</strong>.</p>
</li>
<li>
<p><strong>Core Contributions:<br></strong>JaJuMa achieved status as a <a tabindex="-1" title='"Core Contributor" to the Hyv&auml; Theme' href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">"Core Contributor" to the Hyv&auml; Theme</a> itself, actively participating in fixing bugs and adding new features, showcasing profound technical understanding and a direct impact on Hyv&auml;'s evolution.</p>
</li>
<li>
<p><strong>Ecosystem Support:<br></strong>In a spirit of collaboration, JaJuMa has also developed and provided <a tabindex="-1" title="Hyv&auml; Theme Compatibility Modules" href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">free compatibility modules for extensions created by other providers</a>, further strengthening the overall Hyv&auml; ecosystem and demonstrating leadership that transcends direct commercial benefit. This investment in the ecosystem's health reflects a long-term strategic vision, understanding that a stronger platform benefits all participants.</p>
</li>
</ul>
<p>&nbsp;</p></div></div><div class="pagebuilder-column md:ml-8" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="KYHDETF"><figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="AMNBJIP"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-shop/JaJuMa-Hyvanaut-large.png" alt="Hyv&auml;naut - The JaJuMa mascot, presenting the Hyv&auml; philosophy" title="Hyv&auml;naut - The JaJuMa mascot, presenting the Hyv&auml; philosophy" data-element="desktop_image" data-pb-style="FL2VU3F"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-shop/JaJuMa-Hyvanaut-large.png" alt="Hyv&auml;naut - The JaJuMa mascot, presenting the Hyv&auml; philosophy" title="Hyv&auml;naut - The JaJuMa mascot, presenting the Hyv&auml; philosophy" data-element="mobile_image" data-pb-style="GFG9TYF"></figure><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>The Hyv&auml;naut:</strong><br>Initially created as a Twitterbot to help sharing and spreading news about Hyv&auml;. Now grown into the JaJuMa mascot, showing how much the Hyv&auml; philosophy has become part of our DNA</p></div></div></div></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
  .custom-inset-shadow-green {
    position: relative;
    background-color: #ecfdf5; /* green-50 */
    z-index: 1;
  }
  .custom-inset-shadow-green::before,
  .custom-inset-shadow-green::after {
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    z-index: 0;
  }
  .custom-inset-shadow-green::before {
    box-shadow: -15px 0 15px -15px inset #059669; /* green-600 */
    left: -15px;
  }
  .custom-inset-shadow-green::after {
    box-shadow: 15px 0 15px -15px inset #059669;
    right: -15px;
  }
</style>

<div class="bg-slate-50 p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl border border-slate-200 mb-20">
  <div class="mb-6 text-slate-700 text-base leading-relaxed" id="F6VA4PD">
    <p><strong>&#128640; The following table summarizes <strong>key milestones in JaJuMa's Hyvä journey</strong>:</strong></p>
  </div>

  <div class="overflow-x-auto rounded-xl shadow-lg border border-slate-200">
    <table class="table-auto w-full text-sm text-left">
      <thead>
        <tr class="bg-slate-200 text-slate-700 uppercase tracking-wider">
          <th class="p-4 font-semibold" scope="col">Year/Period</th>
          <th class="p-4 font-semibold" scope="col">Milestone</th>
          <th class="p-4 font-semibold" scope="col">Significance/Impact</th>
          <th class="p-4 font-semibold" scope="col">Reference/Example</th>
        </tr>
      </thead>
      <tbody class="text-slate-700">

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">April 2021</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128233; Initial Contact &amp; Commitment</td>
          <td class="p-4">Focused on enabling ecosystem via extensions from Day 1</td>
          <td class="p-4">See email above</td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2021</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128295; First Extension Provider with Official Hyvä Compatibility</td>
          <td class="p-4">Addressed critical need, built early credibility</td>
          <td class="p-4"><a tabindex="-1" title="PRG Pattern Compat Module" href="https://gitlab.hyva.io/hyva-public/module-tracker/-/issues/28" target="_blank" rel="noopener nofollow">PRG Pattern Compat Module</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2021</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#127980; First to Promote Hyvä on Magento Marketplace</td>
          <td class="p-4">Showcased confidence, increased Hyvä visibility</td>
          <td class="p-4"><a tabindex="-1" title="Magento/Adobe Marketplace" href="https://commercemarketplace.adobe.com/catalogsearch/result/?q=JaJuMa" target="_blank" rel="noopener nofollow">Magento/Adobe Marketplace</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2022</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128104;&#8205;&#128640; Hyvänaut was born</td>
          <td class="p-4">Spreading and sharing news about Hyvä, driving community spirit</td>
          <td class="p-4"><a tabindex="-1" title="Hyvänaut on X" href="https://x.com/hyvanaut" target="_blank" rel="noopener nofollow">Hyvänaut on X</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2022</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128187; JaJuMa-Market Becomes Hyvä Compatible</td>
          <td class="p-4">Proves Hyvä's capability for complex platforms</td>
          <td class="p-4"><a tabindex="-1" title="JaJuMa Market" href="https://www.jajuma.de/en/jajuma-market" target="_blank" rel="noopener">JaJuMa Market</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2022</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128736;&#65039; Hyvä Core &amp; Community Contributor as well as Tech Partner Status Achieved</td>
          <td class="p-4">Deep technical expertise, direct impact on Hyvä's evolution</td>
          <td class="p-4"><a tabindex="-1" title="Hyvä Default Theme Changelog with JaJuMa Contributions" href="https://gitlab.hyva.io/hyva-themes/magento2-default-theme/-/blob/main/CHANGELOG.md" target="_blank" rel="noopener nofollow">Hyvä Default Theme Changelog</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2022</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#127968; First Client Site Launched On Hyvä Theme</td>
          <td class="p-4">Hyvä experience applied to real-life use-cases</td>
          <td class="p-4"><a tabindex="-1" title="Te-Centralen - Sweden's oldest online tea shop" href="https://tecentralen.se/se/" target="_blank" rel="noopener nofollow">Te-Centralen - Sweden’s oldest online tea shop</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">Since 2022 + Ongoing</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128421;&#65039; All JaJuMa Extensions Hyvä Compatible</td>
          <td class="p-4">Provides seamless integrations for clients &amp; merchants within Hyvä ecosystem</td>
          <td class="p-4"><a tabindex="-1" title="All JaJuMa Extensions for Hyvä &amp; Magento" href="https://www.jajuma.de/en/jajuma-develop/magento-extensions#maincontent" target="_blank" rel="noopener">All JaJuMa Extensions for Hyvä &amp; Magento</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">Since 2022 + Ongoing</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128161; 7 Dedicated "Hyvä" Extensions Developed</td>
          <td class="p-4">Demonstrates deep focus and innovation within Hyvä</td>
          <td class="p-4"><a tabindex="-1" title="Hyvä Theme Extension by JaJuMa" href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener">Hyvä Theme Extensions by JaJuMa</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2024</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#129352; Hyvä Silver Partner Status Achieved</td>
          <td class="p-4">Ongoing engagement honored with launch of new partner program</td>
          <td class="p-4"><a tabindex="-1" title="Hyvä Partner Agencies" href="https://www.hyva.io/find-an-agency" target="_blank" rel="noopener nofollow">Hyvä Partner Agencies</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2024</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#127870; New jajuma.de launched on Hyvä Theme &amp; using most of our own extensions</td>
          <td class="p-4">"Drinking our own champagne" by being our own customer / customer zero</td>
          <td class="p-4"><a tabindex="-1" title="JaJuMa.de Launched on Mage-OS and Hyvä Theme" href="https://www.jajuma.de/en/blog/launching-the-very-first-mage-os-store-ever-our-journey" target="_blank" rel="noopener">JaJuMa.de Launched on Mage-OS and Hyvä Theme</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2025</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#129351; Hyvä Gold Partner Status Achieved</td>
          <td class="p-4">Ongoing engagement honored with partner-tier upgrade</td>
          <td class="p-4"><a tabindex="-1" title="Hyvä Partner Agencies" href="https://www.hyva.io/find-an-agency" target="_blank" rel="noopener nofollow">Hyvä Partner Agencies</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2025</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128218; Certified Associate Developers</td>
          <td class="p-4">Among the first agencies to receive developer certification, proving skills and focus on quality</td>
          <td class="p-4"><a tabindex="-1" title="Hyvä Certification" href="https://www.hyva.io/hyva-certification.html" target="_blank" rel="noopener nofollow">Hyvä Certification</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2025</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#129680; Hyväverse Launched</td>
          <td class="p-4">Showcasing deep knowledge, skills and a growing suite of comprehensive Hyvä products &amp; services</td>
          <td class="p-4"><a tabindex="-1" title="Hyväverse - Ultimate Guide through the Hyvä Universe" href="/en/hyvaverse-guide" target="_blank" rel="noopener">Hyväverse</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2025</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128230; All JaJuMa Extensions Hyvä Compatible natively</td>
          <td class="p-4">No separate compat modules required; immediate out-of-the-box compatibility</td>
          <td class="p-4"><a tabindex="-1" title="All JaJuMa Extensions for Hyvä &amp; Magento" href="/en/jajuma-develop/hyva-extensions#maincontent" target="_blank" rel="noopener">All JaJuMa Extensions</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">2025</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#129309; First 3rd Party Hyvä Commerce Integration</td>
          <td class="p-4">Pioneering integration included in first native Magento/Hyvä RUM tool</td>
          <td class="p-4">Included in JaJuMa <a title="First native RUM solution for Mageno & Hyvä" href="/en/jajuma-develop/hyva-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank">Real User Monitoring (RUM) for Magento/Hyvä</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">Ongoing</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#127873; Numerous Free &amp; Open-Source Extensions</td>
          <td class="p-4">Strengthens community, makes Hyvä accessible</td>
          <td class="p-4"><a tabindex="-1" title="Free JaJuMa Extensions for Hyvä &amp; Magento" href="https://www.jajuma.de/en/jajuma-develop/free-magento-extensions" target="_blank" rel="noopener">Free JaJuMa Extensions for Hyvä &amp; Magento</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">Ongoing</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#129309; Compatibility Modules for 3rd Party Extensions</td>
          <td class="p-4">Fosters collaboration, strengthens the overall ecosystem</td>
          <td class="p-4"><a tabindex="-1" title="Compat Modules by JaJuMa" href="https://gitlab.hyva.io/hyva-public/module-tracker/-/issues/?sort=created_date&amp;state=opened&amp;search=jajuma&amp;first_page_size=20" target="_blank" rel="noopener nofollow">Compat Modules by JaJuMa</a></td>
        </tr>

        <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
          <th class="p-4 font-medium text-slate-800" scope="row">Ongoing</th>
          <td class="p-4 custom-inset-shadow-green text-green-700 font-semibold">&#128640; Building Outstanding eCommerce site based on Hyvä</td>
          <td class="p-4">Magento Merchants Made Happy By Hyvänauts</td>
          <td class="p-4">See Example showcases below</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div class="mt-8 text-lg text-slate-700 bg-white p-6 rounded-xl shadow-md border border-slate-200 relative">
    <div class="absolute -top-4 left-6 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
      &#127942; Summary
    </div>
    <p class="mt-6">
      This consistent track record highlights JaJuMa's role not just as a user of Hyvä technology, but as a <strong>foundational pillar actively contributing to its growth and success</strong>.  
      But simply building the foundation wasn't enough; our passion drives us to <strong>&#128640; push the boundaries of what can be achieved with Hyvä...</strong>
    </p>
  </div>
</div>
</div><h2 data-content-type="heading" data-appearance="default" data-element="main">Pushing Boundaries: JaJuMa's Innovation in Hyv&auml; Development &amp; Performance</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Building upon its foundational contributions, JaJuMa has consistently pushed the boundaries of what's possible with <strong>Hyv&auml; development</strong>, focusing particularly on cutting-edge performance optimization. While Hyv&auml; provides a <a title="Hyv&auml; Theme - significantly faster baseline than Luma" href="https://www.hyva.io/" target="_blank" rel="noopener nofollow">significantly faster baseline than Luma</a>, JaJuMa identified opportunities to elevate <strong>Magento speed</strong> even further within the Hyv&auml; framework.</p>
<p>This led to the development of a specialized suite of performance optimization extensions, designed to work seamlessly with Hyv&auml; and address specific performance bottlenecks. This suite, available at <a title="Hyv&auml; Performance Optimization Extensions" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions</a>, includes innovative tools such as:</p>
<p>&nbsp;</p>
<ul class="list-disc ml-4">
<li><strong>Ultimate Image Optimizer &amp; WebP Optimized Images:<br></strong>These extensions tackle image optimization, a critical factor in page load speed, by automatically converting images to next-generation formats like WebP and, crucially, even adding <strong>AVIF images </strong>since more than 4 years, making Magento the first Cart/CMS software having an option to integrate this cutting edge tech. AVIF offers superior compression compared to WebP and JPEG, resulting in smaller file sizes for faster loading without sacrificing quality. JaJuMa's tools automate this conversion process, including fallbacks for browsers that don't yet support these formats and provides an <a title="All-In-One Image Optimization: Performance + UX + SEO" href="https://www.jajuma.de/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">All-In-One Image Optimization a solution covering all aspects of image optimization regarding Performance + UX + SEO.</a></li>
</ul>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="OV0DXS7"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="LM2A4IA"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="TUAS4DI"><div data-content-type="text" data-appearance="default" data-element="main"><ul class="list-disc ml-4">
<li>
<p><strong>Hyv&auml; Inline CSS:<br></strong>This extension directly <strong>targets render-blocking CSS</strong>, a major impediment to <strong>fast rendering and good Core Web Vitals</strong>. It automates the process of generating and inlining only the necessary CSS for each specific page directly into the HTML. This <a title="Hyv&auml; Inline CSS - Next-Level CSS Optimization" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener">eliminates unused CSS as well as requests for external CSS files</a>, creating effectively "CSS-LESS" Hyv&auml; stores from the browser's perspective on initial load. It builds upon Hyv&auml;'s efficient use of TailwindCSS (which already <a title="Hyv&auml; Theme Benfits - Lean" href="https://www.jajuma.de/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">reduces CSS bloat</a>) to achieve maximum CSS optimization.</p>
</li>
<li><strong>B/F Cache (Back/Forward Cache):<br></strong>Leveraging the browser's native back/forward cache, this extension, the <a title="Back/Forward Cache Extension for Magento &amp; Hyv&auml;" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions/back-forward-cache-extension-for-magento-2" target="_blank" rel="noopener">first and most advanced Back/Forward Cache implementation</a> for Magento and Hyv&auml;, enables instantaneous navigation between previously visited pages, <strong>dramatically improving perceived performance, user experience as well as CWV field data.</strong></li>
</ul></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-bottom" data-background-images="{}" data-element="main" data-pb-style="FL55M70"><figure class="md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="V8MCL14"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/real-user-monitoring-rum-extension-for-magento-2/JaJuMa-Real-User-Monitoring-Tablet-Screen-Dasboard-View.png" alt="Hyv&auml; performance optimization" title="Hyv&auml; performance optimization" data-element="desktop_image" data-pb-style="A182Y58"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/real-user-monitoring-rum-extension-for-magento-2/JaJuMa-Real-User-Monitoring-Tablet-Screen-Dasboard-View.png" alt="Hyv&auml; performance optimization" title="Hyv&auml; performance optimization" data-element="mobile_image" data-pb-style="SMX2O4Y"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<ul class="list-disc ml-4">
<li>
<p><strong>Smart Speculation Rules:<br></strong>Utilizing the browser's emerging Speculation Rules API, this extension <strong>predictively prefetches or prerenders pages</strong> a user is likely to visit next. This Predictive Speculation results in near-instantaneous loading for subsequent page navigations, creating a remarkably fluid browsing experience.<br>At this point, this extension is still the only(!) <a title="Smart Speculation Rules for Hyv&auml; &amp; Magento 2" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions/smart-speculations-rules-extension-for-magento-2" target="_blank" rel="noopener">Speculation Rules API implementation providing <strong>100% compatibiliy for Hyv&auml;/Magento</strong></a> and the only implementation <strong>providing smart and predictive preloading</strong> for any Cart/CMS software.</p>
</li>
<li>
<p><strong>Page Preload:<br></strong>Similar in goal to Speculation Rules, this extension focuses on <a title="Page Preload for Magento 2 &amp; Hyv&auml;" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions/page-preload-extension-for-magento-2" target="_blank" rel="noopener">preloading entire pages to achieve near "zero-TTFB"</a> (Time To First Byte) for subsequent loads, further enhancing perceived speed, also for Browsers that do not support the newer Speculation Rules API yet.&nbsp;</p>
</li>
</ul>
<p>&nbsp;</p>
<p>These innovations demonstrate&nbsp;<strong>JaJuMa's commitment</strong> to not just implementing Hyv&auml;, but <strong>actively enhancing its core promise of performance</strong>. By developing unique solutions like automated AVIF conversion, per-page inline CSS automation, and predictive preloading via Speculation Rules, JaJuMa provides Hyv&auml; users with tools to achieve performance levels beyond standard implementations. This focus on pioneering new optimization techniques underscores JaJuMa's dedication to staying at the forefront of <strong>Hyv&auml; performance optimization</strong>, with a clear intention to continue this path of innovation.</p>
<p>&nbsp;</p>
<div class="message success rounded-3xl p-6 mt-6"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512" class="inline-block float-left mr-2 w-16" width="29" height="51" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"></path><title>awesomeicons6/solid/lightbulb</title></svg>

<blockquote class="py-2.5 px-5 border-l-4 border-secondary-lighter"><strong>TIP:<br></strong>Learn more about Performance Optimization with Hyv&auml; Theme based on our experience and how JaJuMa Extensions can help you end-to-end achieving <a title="CWV (Core Web Vitals) &amp; LCP (Largest Contentful Paint) Optimization for Hyv&auml; and Magento 2" href="https://www.jajuma.de/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener"><strong>top Core Web Vital &amp; Largest Contentful Paint values</strong>.</a></blockquote>
</div></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Proof in Performance: Real-World Client Success with Hyv&auml;</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>While technical innovation and community contributions are vital, the ultimate measure of success lies in delivering tangible results for clients. JaJuMa, though often focused on project delivery rather than extensive self-promotion, has accumulated compelling success stories that showcase the real-world impact of combining Magento, Hyv&auml;, and JaJuMa's expertise. Two examples stand out:</p>
<p>&nbsp;</p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Case Study 1: Project Rescue Accelerated to Light Speed (Rosemarie Schulz)</h3><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="CX0U61W"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="IB2CY87"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="UALO7F4"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<ul class="list-disc ml-4">
<li>
<p><strong>The Challenge:<br></strong>A long-term Magento client, Rosemarie Schulz, faced a critical situation. Their store, running on an older Magento version with a Luma-based frontend, suffered persistent instability and performance issues, reaching a point where migrating away from Magento seemed like the only option.</p>
</li>
<li>
<p><strong>The JaJuMa + Hyv&auml; Solution:<br></strong>JaJuMa intervened, proposing a rescue plan centered not on abandoning Magento, but on revitalizing it with Hyv&auml;. They argued that Magento, paired with the <strong>Hyv&auml; Theme</strong>, <strong>Hyv&auml; Checkout</strong>, and JaJuMa's performance enhancements, could deliver superior speed and stability, cost-effectively. The project involved upgrading Magento, refreshing extensions, and implementing the full Hyv&auml; frontend.</p>
</li>
</ul></div></div><div class="pagebuilder-column md:ml-4" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="B0LQ12F"><div data-content-type="text" data-appearance="default" data-element="main"><p>
    </p><div class="post-list-wrapper blog-widget-recent">
        <h3 class="title"></h3>
        <ul class="post-list clearfix">
                                            <li class="post-holder post-holder-63">
                    <!-- post image -->
                    <div class="post-image">
                        <!-- img container -->
                        <div class="image-container relative block border-b-2 border-[#e5e7eb] flex-none overflow-hidden">
                            <img class="w-full object-fit feature-image" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Rosemarie-Schulz.jpg" alt="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp;amp; Success" loading="lazy">
                                                                                                                                                    <div class="w-full object-fit feature-image" data-original=""></div>
                                                                                        
                        </div>
                    </div>

                    <div class="post-header">
                        <div class="post-title-holder clearfix">
                            <div class="post-title">
                                <a class="post-item-link" href="https://www.jajuma.de/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success">
                                    60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success                                </a>
                            </div>
                        </div>

                        <div class="post-info clear">
                                                            <div class="item post-categories">
                                    <span class="label text-sm font-bold">Categories:</span>
                                                                            <a class="text-sm hover:text-primary transition-colors" title="JaJuMa-Shop" href="https://www.jajuma.de/en/blog/blog-shop">
                                            JaJuMa-Shop                                        </a>
                                                                                                        </div>
                                                    </div>

                        <div class="post-description clearfix">
                            <!-- post description -->
                            <div class="mt-2 line-clamp-3">
                                                                The world of ecommerce can sometimes feel like a roller coaster:
One moment your online store is buzzing with traffic and sales, the next it&rsquo;s down, leaving you in a state of panic.That&rsquo;s exactly what happened to one of our Magento clients:                            </div>
                        </div>
                    </div>

                    <div class="post-content">

                    </div>
                    <div class="post-footer">

                    </div>
                </li>

                    </ul>
    </div>
</div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><ul class="list-disc ml-4">
<li>
<p><strong>The Outcome:<br></strong>The results, monitored over 60 days post-launch, were described as "truly outstanding." Key Core Web Vitals metrics saw dramatic improvements:</p>
</li>
</ul>
<ul>
<li>
<ul class="ml-8">
<li>
<p id="KCPGS4U">Cumulative Layout Shift (CLS): <strong>Reduced from 0.3 to a perfect 0.0</strong>.</p>
</li>
<li>
<p>Largest Contentful Paint (LCP): <strong>Cut in half from 1.6s to 0.8s</strong>.</p>
</li>
<li>
<p>First Contentful Paint (FCP): <strong>Improved from 1.3s to 0.7s</strong>.</p>
</li>
<li>
<p>Time to First Byte (TTFB): <strong>Decreased from 0.9s to an impressive 0.4s</strong>.&nbsp;<br><br>Crucially, this top-tier <strong>Hyv&auml; performance</strong> was achieved on a <strong>cost-effective server setup</strong>, without relying on typically expensive infrastructure components like Varnish or Redis.<br><br></p>
</li>
</ul>
</li>
</ul>
<ul class="list-disc ml-4">
<li>
<p><strong>The Significance:<br></strong>This <strong>Hyv&auml; case study</strong> powerfully demonstrates that Magento + Hyv&auml;, guided by JaJuMa's expertise, can be exceptionally fast, reliable, and surprisingly affordable, effectively debunking common myths about Magento's cost and complexity, especially for smaller merchants. Read the full story: <a tabindex="-1" href="https://www.jajuma.de/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success">https://www.jajuma.de/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success</a></p>
</li>
</ul></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Case Study 2: Baking a Super-Fast Magento Store in Weeks (Stollen Store)</h3><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="PC5K205"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="SLOM9EW"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="IUUE326"><div data-content-type="text" data-appearance="default" data-element="main"><ul class="list-disc ml-4">
<li>
<p><strong>The Challenge:<br></strong>A client needed a brand-new online store for selling seasonal Christmas Stollen launched urgently &ndash; in under four weeks - to capture the peak holiday sales period, all within a limited budget.</p>
</li>
<li>
<p><strong>The JaJuMa + Hyv&auml; Solution:<br></strong>Speed and efficiency were paramount. JaJuMa leveraged the rapid development capabilities inherent in Hyv&auml;'s simpler architecture (using Hyv&auml; Theme, Hyv&auml; UI, and Hyv&auml; Checkout) combined with their own experience and ready-made modules to accelerate the build process significantly.</p>
</li>
<li>
<p><strong>The Outcome:<br></strong>The fully functional, high-performing <strong>Magento Hyv&auml;</strong> store was successfully launched in less than four weeks, beating the tight deadline and staying within the low budget. The store performed flawlessly throughout the critical sales season, exceeding client expectations for speed and reliability. JaJuMa continued post-launch optimization, implementing further performance enhancements like Speculation Rules.</p>
</li>
</ul></div></div><div class="pagebuilder-column md:ml-4" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="DE71MTU"><div data-content-type="text" data-appearance="default" data-element="main"><p>
    </p><div class="post-list-wrapper blog-widget-recent">
        <h3 class="title"></h3>
        <ul class="post-list clearfix">
                                            <li class="post-holder post-holder-61">
                    <!-- post image -->
                    <div class="post-image">
                        <!-- img container -->
                        <div class="image-container relative block border-b-2 border-[#e5e7eb] flex-none overflow-hidden">
                            <img class="w-full object-fit feature-image" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Weihnachtsstollen.jpg" alt="A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp;amp; JaJuMa)" loading="lazy">
                                                                                                                                                    <div class="w-full object-fit feature-image" data-original=""></div>
                                                                                        
                        </div>
                    </div>

                    <div class="post-header">
                        <div class="post-title-holder clearfix">
                            <div class="post-title">
                                <a class="post-item-link" href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma">
                                    A Delicious Ecommerce Recipe: Baking A Super Fast Magento Store in Weeks (with Hyv&auml; &amp; JaJuMa)                                </a>
                            </div>
                        </div>

                        <div class="post-info clear">
                                                            <div class="item post-categories">
                                    <span class="label text-sm font-bold">Categories:</span>
                                                                            <a class="text-sm hover:text-primary transition-colors" title="JaJuMa-Shop" href="https://www.jajuma.de/en/blog/blog-shop">
                                            JaJuMa-Shop                                        </a>
                                                                                                        </div>
                                                    </div>

                        <div class="post-description clearfix">
                            <!-- post description -->
                            <div class="mt-2 line-clamp-3">
                                                                Our delicious ecommerce recipe for a fast Magento launch starts with the finest ingredients: Magento, Hyv&auml;, and JaJuMa.
Magento provides the robust foundation, Hyv&auml; adds the speed and agility, and JaJuMa contributes the secret spices of expertise and optimization.                            </div>
                        </div>
                    </div>

                    <div class="post-content">

                    </div>
                    <div class="post-footer">

                    </div>
                </li>

                    </ul>
    </div>
</div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><ul class="list-disc ml-4">
<li><strong>The Significance:<br></strong>This case study highlights the remarkable time-to-market advantage offered by Hyv&auml; and JaJuMa's efficient development practices. It proves that complex platforms like Magento can be deployed incredibly quickly and cost-effectively with the right frontend and expertise, again challenging outdated perceptions about the platform. Read the full recipe for success: <a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma">https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma</a></li>
</ul>
<p>&nbsp;</p>
<p>These real-world examples provide concrete evidence of JaJuMa's ability to deliver on the promise of Hyv&auml; &ndash; achieving exceptional performance and efficiency, whether rescuing complex projects or executing rapid launches, all while respecting budget constraints and client needs.<br>They serve as powerful testimonials to the transformative potential of the Hyv&auml; philosophy when implemented by a skilled and dedicated <strong>Hyv&auml; Agency</strong>.</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">JaJuMa's Unwavering Commitment as Your Hyv&auml; Partner</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>JaJuMa's journey over the past four years culminates in its status as a <strong>Hyv&auml; Gold Partner</strong>, but this is not an endpoint.<br>It signifies an ongoing, unwavering commitment to the Hyv&auml; philosophy and to delivering exceptional value as a trusted <strong>Hyv&auml; Partner</strong> for Magento merchants.</p>
<p>The core commitment remains: to leverage Hyv&auml;'s principles of performance, simplicity, and value to build outstanding e-commerce solutions. JaJuMa aims to make achieving top-tier <strong>Magento Hyv&auml; performance</strong> accessible and straightforward for clients, thanks to the combination of deep experience and a powerful suite of specialized extensions.<br>The goal is to ensure that stores built on Hyv&auml; not only meet but exceed performance expectations, and do so within reasonable, manageable budgets.</p>
<p>Proof points for this commitment are evident in JaJuMa's offerings:</p>
<p>&nbsp;</p>
<ul class="list-disc ml-4">
<li>
<p><strong><a title="Performance Optimization Extensions for Hyv&auml; &amp; Magento 2" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">Performance Optimization Suite</a>:<br></strong>Tools like the Hyv&auml; Inline CSS, Ultimate Image Optimizer, and Smart Speculation Rules are designed to <strong>give clients an edge in speed and Core Web Vitals.</strong></p>
</li>
<li>
<p><strong>Accessibility &amp; Affordability:<br></strong>The extensive library of free and open-source extensions lowers the cost barrier for specific functionalities.<br>Furthermore, extensions like <a title="Hyv&auml; Translation Extension" href="https://www.jajuma.de/en/jajuma-develop/magento-extensions/hyva-translation-extension-for-magento-2-with-hyva-theme" target="_blank" rel="noopener">Hyv&auml; Translation</a> and cost efficient alternatives like a <a title="MySQL Search as Elasticsearch Alternative for Magento 2" href="https://www.jajuma.de/en/jajuma-develop/magento-extensions/magento-without-elasticsearch-mysql-search-extension-for-magento-2" target="_blank" rel="noopener">MySQL Search</a> demonstrate a focus on providing cost-effective solutions, particularly beneficial for smaller merchants seeking powerful features without enterprise-level price tags.</p>
</li>
</ul>
<p>&nbsp;</p>
<p>JaJuMa continues to invest in innovation within the Hyv&auml; space, ensuring clients benefit from the latest advancements in frontend technology and performance optimization.<br>The focus is not just on technical proficiency, but on being a strategic partner invested in the client's business success, making powerful e-commerce capabilities accessible and manageable through the smart application of Hyv&auml; technology.</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Your Hyv&auml; Questions Answered: Insights from a Gold Partner (FAQ)</h2><div data-content-type="text" data-appearance="default" data-element="main"><p id="V5LIYQQ">Leveraging four years of deep immersion in the Hyv&auml; ecosystem and experience gained achieving <strong>Hyv&auml; Gold Partner</strong> status, JaJuMa offers insights into common questions merchants have when considering <strong>Hyv&auml; development</strong> and selecting a <strong>Hyv&auml; Development Agency</strong>.</p>
<p>&nbsp;</p>
<p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-226 .chevron::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkzIDcuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCAxMC41ODZsMy4yOTMtMy4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNGwtNCA0YTEgMSAwIDAxLTEuNDE0IDBsLTQtNGExIDEgMCAwMTAtMS40MTR6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PC9zdmc+Cg==);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-226 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 chevron">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-226 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>What makes a good Hyv&auml; Development Agency?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>A strong Hyv&auml; Agency typically demonstrates proven experience specifically with Hyv&auml; &ndash; look for official partnership status (like Gold or Platinum) which signifies expertise and contribution.<br>They should have a portfolio of successful Hyv&auml; projects and ideally contribute back to the ecosystem through extensions or community involvement, indicating deep understanding.<br>Crucially, they must grasp Hyv&auml;'s core principles of performance and simplicity and communicate transparently.<br>JaJuMa's 4-year journey, Gold status, extensive extension library, core contributions, and successful case studies exemplify these qualities.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-226 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>How much does a Hyv&auml; project typically cost? Is it really cheaper?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>The main direct cost is the one-time Hyv&auml; license fee of &euro;1000 (excluding VAT).<br>While this is an added cost compared to the free Luma theme, the overall project cost for Hyv&auml; development is often lower than traditional Luma builds or complex Progressive Web Apps (PWAs).<br>This is due to Hyv&auml;'s simplified architecture, which significantly reduces development time and effort.<br>JaJuMa's case studies demonstrate delivering high-performance Hyv&auml; sites within reasonable, even low, budgets, proving the value proposition of affordable Magento through Hyv&auml;.<br>Project complexity always influences the final cost, but Hyv&auml; offers substantial efficiency savings.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-226 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>Will my existing Magento extensions work with Hyv&auml;?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>Compatibility depends on whether an extension relies heavily on the JavaScript libraries (like jQuery, KnockoutJS) removed by Hyv&auml;.<br>Many popular extensions are already compatible or have compatibility modules available, supported by a growing community effort.<br>Assessing compatibility is a key part of any Hyv&auml; migration.<br>JaJuMa excels here: they were the first provider of official compatibility modules, all their own extensions are compatible, and they contribute community modules.<br>They possess the expertise to effectively assess and manage third-party extension compatibility during a Hyv&auml; project.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-226 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>How long does it take to build or migrate to a Hyv&auml; theme?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>The timeline for Hyv&auml; development or migration varies based on store complexity, the number of customizations, and extension compatibility requirements.<br>However, Hyv&auml; generally enables a significantly faster time-to-market compared to Luma or PWA builds due to its streamlined nature.<br>JaJuMa's rapid launch case study, delivering a store in under four weeks, showcases the potential speed.<br>While typical conversion projects might take longer (e.g., 8-12 weeks as cited by some agencies), Hyv&auml; inherently accelerates the process.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-226 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>Why choose Hyv&auml; over a PWA or Headless approach?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>PWAs and Headless architectures offer powerful capabilities but often come with significantly higher complexity, development time, and costs.<br>Hyv&auml; vs PWA or Hyv&auml; vs Headless often comes down to pragmatism. Hyv&auml; delivers outstanding performance, excellent user experience, and improved Core Web Vitals &ndash; rivaling the benefits sought from PWAs &ndash; but achieves this without the associated overhead.<br>It maintains strong integration with Magento's core functionalities and utilizes a simpler, more familiar technology stack (AlpineJS, TailwindCSS), making development and maintenance more efficient.<br>For many businesses, Hyv&auml; provides the optimal balance of performance, cost, and development efficiency.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-226 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>What are the key benefits of working with a Hyv&auml; Gold Partner like JaJuMa?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>Choosing a Hyv&auml; Gold Partner provides assurance of validated expertise and commitment.<br>Gold status is awarded based on proven experience, successful project delivery, and contributions to the Hyv&auml; ecosystem.<br>Working with JaJuMa means partnering with an agency that has a deep, 4-year understanding of Hyv&auml;, a documented track record of delivering high-performance sites, significant contributions that shape the platform, and strong connections within the Hyv&auml; Partner community.<br>It signifies a commitment to quality and staying at the forefront of Hyv&auml; development.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    
<p>&nbsp;</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Ready to Experience the Gold Standard in Hyv&auml; Development?</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Our journey to <strong>Gold Partner</strong> wasn't just about code; it was fueled by a genuine <strong>passion for Hyv&auml;</strong>'s potential, technical innovation, and unwavering commitment to the Hyv&auml; philosophy. With deep experience, a portfolio of proven client successes, and a suite of cutting-edge performance tools, JaJuMa stands as a leading <strong>Hyv&auml; Development Agency</strong> poised to unlock the full potential of Magento for businesses of all sizes.</p>
<p>&nbsp;</p>
<p>The team's early adoption, foundational contributions, and continuous innovation demonstrate a unique understanding of not just how to build with Hyv&auml;, but how to maximize its benefits &ndash; delivering exceptional speed, seamless user experiences, and tangible business value, often within remarkably efficient timeframes and budgets.</p>
<p>&nbsp;</p>
<p>If you're ready to transform your Magento store with the speed, simplicity, and power of Hyv&auml;, partner with an agency that has been instrumental in shaping its ecosystem from the beginning.<br><strong><a title="Discover the JaJuMa Hyv&auml;verse - Your Full Guide to the Hyv&auml; Ecosystem" href="/en/hyvaverse-guide" target="_blank" rel="noopener">Explore the full Hyv&auml; ecosystem in the JaJuMa Hyv&auml;verse</a></strong></p>
<p>&nbsp;</p>
<p><strong>Partner with JaJuMa, a Hyv&auml; Gold Partner, and let's build something incredibly fast, efficient, and successful together. Contact JaJuMa today for a free consultation to discuss your Hyv&auml; project!</strong></p>
<ul>
<li>
<p><a title="Hyv&auml; Services by JaJuMa" href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Learn more about our Hyv&auml; Services</a></p>
</li>
<li>
<p><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions">Discover JaJuMa's Hyv&auml; Extensions</a></p>
</li>
</ul></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p><strong><a title="Contact us" href="https://www.jajuma.de/en/contact" target="_blank" rel="noopener">Contact Us</a></strong></p></div></div></div>]]></description>
              <pubDate>Sun, 13 Apr 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa]]></category>
           </item>
       <item>
      <title>Supercharge Your Magento 2 Performance: The Ultimate Guide To LCP Optimization (Luma + Hyvä)</title>
      <link>https://www.jajuma.de/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization</link>
      <guid>https://www.jajuma.de/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=N0MA11R],#html-body [data-pb-style=PRJVT7O]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=PRJVT7O]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=N0MA11R]{align-self:stretch}#html-body [data-pb-style=KSEOPDB]{display:flex;width:100%}#html-body [data-pb-style=ASIJ9LU],#html-body [data-pb-style=S10PM2X]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=KB4OHDM]{border-style:none}#html-body [data-pb-style=ENIORTU],#html-body [data-pb-style=MJ27CM1]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=NY1UUMS]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=GFL7802]{display:flex;width:100%}#html-body [data-pb-style=DWBDBTY],#html-body [data-pb-style=QLU52UJ]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:58.3333%;align-self:stretch}#html-body [data-pb-style=DWBDBTY]{width:41.6667%}#html-body [data-pb-style=P6E0HO4]{border-style:none}#html-body [data-pb-style=FJQR2B2],#html-body [data-pb-style=HHHSO4E]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=E3FW5K8]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=QEEYPOM]{display:flex;width:100%}#html-body [data-pb-style=MXRY5EW]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:center}#html-body [data-pb-style=HWRB7Y7]{border-style:none}#html-body [data-pb-style=NFC60AG],#html-body [data-pb-style=QDO0A9A]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=COKATG8]{justify-content:flex-start;display:flex;flex-direction:column;width:50%}#html-body [data-pb-style=COKATG8],#html-body [data-pb-style=Q1F85OJ]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=AIOUA51]{display:flex;width:100%}#html-body [data-pb-style=NCHPLB4],#html-body [data-pb-style=PFTX9Q7]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=NAQLMA0]{border-style:none}#html-body [data-pb-style=JJLXJNC],#html-body [data-pb-style=XONWSLY]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=XC80TIF]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;margin-top:24px;margin-bottom:24px;align-self:stretch}#html-body [data-pb-style=DVD4VAV]{display:flex;width:100%}#html-body [data-pb-style=NMQQB9J]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:16.6667%;align-self:stretch}#html-body [data-pb-style=DX8UVY9]{border-style:none}#html-body [data-pb-style=GRYMG2B],#html-body [data-pb-style=U13E7T4]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=UULFR9K],#html-body [data-pb-style=V09MX8G]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=UULFR9K]{justify-content:flex-start;display:flex;flex-direction:column;width:83.3333%;align-self:center}#html-body [data-pb-style=V09MX8G]{margin-top:24px;margin-bottom:24px;align-self:stretch}#html-body [data-pb-style=YWKNCGQ]{display:flex;width:100%}#html-body [data-pb-style=AEA33RM]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:16.6667%;align-self:stretch}#html-body [data-pb-style=TFCQB8A]{border-style:none}#html-body [data-pb-style=DKRJXUI],#html-body [data-pb-style=EAPUT9P]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=EIDIPS8],#html-body [data-pb-style=UMOYTGU]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=EIDIPS8]{justify-content:flex-start;display:flex;flex-direction:column;width:83.3333%;align-self:center}#html-body [data-pb-style=UMOYTGU]{margin-top:24px;margin-bottom:24px;align-self:stretch}#html-body [data-pb-style=IN20TPA]{display:flex;width:100%}#html-body [data-pb-style=PD9JYEN]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:16.6667%;align-self:stretch}#html-body [data-pb-style=NPQY0AH]{border-style:none}#html-body [data-pb-style=TAOE8RX],#html-body [data-pb-style=UP7TIIF]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=NL2QAPP]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:16.6667%;align-self:stretch}#html-body [data-pb-style=AQUFTP9]{border-style:none}#html-body [data-pb-style=C576184],#html-body [data-pb-style=IXN1M8D]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=RGXUHO5]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:16.6667%;align-self:stretch}#html-body [data-pb-style=JTTXNLX]{border-style:none}#html-body [data-pb-style=D8ORQEM],#html-body [data-pb-style=KKK8DY2]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=OWPWV2A],#html-body [data-pb-style=RXGX74J]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=OWPWV2A]{justify-content:flex-start;display:flex;flex-direction:column;width:50%;align-self:center}#html-body [data-pb-style=RXGX74J]{margin-top:24px;margin-bottom:24px;align-self:stretch}#html-body [data-pb-style=WCJ6L0B]{display:flex;width:100%}#html-body [data-pb-style=XS97A3S]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:16.6667%;align-self:stretch}#html-body [data-pb-style=H16SGT2]{border-style:none}#html-body [data-pb-style=DELETMV],#html-body [data-pb-style=VRWYQTO]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=BAXDCSH],#html-body [data-pb-style=XUEW7GX]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=BAXDCSH]{justify-content:flex-start;display:flex;flex-direction:column;width:83.3333%;align-self:center}#html-body [data-pb-style=XUEW7GX]{margin-top:24px;margin-bottom:24px;align-self:stretch}#html-body [data-pb-style=CBJ9PTW]{display:flex;width:100%}#html-body [data-pb-style=ULYJRNC]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:16.6667%;align-self:stretch}#html-body [data-pb-style=UODSQUA]{border-style:none}#html-body [data-pb-style=FBLO7JF],#html-body [data-pb-style=KDRJG7T]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=A0EE0RR]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:83.3333%;align-self:center}@media only screen and (max-width: 768px) { #html-body [data-pb-style=AQUFTP9],#html-body [data-pb-style=DX8UVY9],#html-body [data-pb-style=H16SGT2],#html-body [data-pb-style=HWRB7Y7],#html-body [data-pb-style=JTTXNLX],#html-body [data-pb-style=KB4OHDM],#html-body [data-pb-style=NAQLMA0],#html-body [data-pb-style=NPQY0AH],#html-body [data-pb-style=P6E0HO4],#html-body [data-pb-style=TFCQB8A],#html-body [data-pb-style=UODSQUA]{border-style:none} }</style><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
.blog-post-view .page-main h4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
}
@media (min-width: 1280px) {
    .blog-widget-recent .post-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .blog-post-view .page-main h4 {
	font-size: 1.25rem;
    line-height: 1.5rem;
	}
}
</style></div><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="PRJVT7O"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="N0MA11R"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="KSEOPDB"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="ASIJ9LU"><div data-content-type="text" data-appearance="default" data-element="main"><p>Is your <strong><a title="Your Ultimate Guide to Magento, the World's Most Powerful Commerce Platform" href="/en/magento-metropolis-guide" target="_blank" rel="noopener">Magento 2</a></strong> store slower than a sleepy sloth? Maybe even with&nbsp;<a title="Ihr Experten-Guide f&uuml;r Hyv&auml;: Das JaJuMa Hyv&auml;verse" href="/de/hyvaverse-guide" target="_blank" rel="noopener"><strong>Hyv&auml;</strong></a>?&nbsp;<br>Does your website's speed leave your customers tapping their fingers impatiently? In today's fast-paced digital world,&nbsp;<a title="Magento Page Speed ROI Calculator: Quantify Your Lost Revenue &amp; Unlock Growth with Hyv&auml;" href="/en/blog/magento-page-speed-roi-calculator" target="_blank" rel="noopener"><strong>website speed isn't just a luxury</strong></a> &ndash; it's a necessity. <strong>Slow loading times</strong> can lead to <strong>frustrated users</strong>, <strong>higher bounce rates</strong>, and ultimately, <strong>lost sales</strong>.</p>
<p>A key part of <strong>delivering a fast experience</strong> with Magento involves&nbsp;<strong>understanding and optimizing</strong> Google's <strong>Largest Contentful Paint (LCP) </strong>and <strong>Core Web Vitals (CWV) in general</strong>.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="S10PM2X"><figure class="hero md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="KB4OHDM"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Supercharge-Your-Magento-2-Store-Luma-Hyva-The-Ultimate-_Guide-to-LCP-Optimization.png" alt="Supercharge Your Magento 2 Store (Luma + Hyv&auml;) The Ultimate Guide to LCP Optimization" title="Supercharge Your Magento 2 Store (Luma + Hyv&auml;) The Ultimate Guide to LCP Optimization" data-element="desktop_image" data-pb-style="MJ27CM1"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Supercharge-Your-Magento-2-Store-Luma-Hyva-The-Ultimate-_Guide-to-LCP-Optimization.png" alt="Supercharge Your Magento 2 Store (Luma + Hyv&auml;) The Ultimate Guide to LCP Optimization" title="Supercharge Your Magento 2 Store (Luma + Hyv&auml;) The Ultimate Guide to LCP Optimization" data-element="mobile_image" data-pb-style="ENIORTU"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>These metrics measure <strong>real-world user experience</strong> for loading <strong>performance</strong>, <strong>interactivity</strong>, and <strong>visual stability</strong>. One of the most critical Core Web Vitals affecting your website's performance and user experience is the <strong>Largest Contentful Paint (LCP)</strong>. Especially for Magento 2 stores, <strong>optimizing LCP can be the key</strong> to unlocking <strong>faster load times</strong>, <strong>happier customers</strong>, and <strong>better search engine rankings</strong>.</p>
<p>&nbsp;</p>
<p>This comprehensive guide will&nbsp;<strong>dive deep into LCP optimization specifically for Magento 2 stores</strong>, for both the <strong>traditional Luma theme</strong> as well as the <a title="Your Expert Guide to Hyv&auml;: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>modern, performance-focused Hyv&auml; theme</strong></a>. We'll explore what <strong>LCP</strong> and other <strong>Core Web Vitals</strong> are, <strong>why they matter</strong>, <strong>how to measure them</strong>, and most importantly, provide <strong>actionable strategies</strong> and tools &ndash; including powerful extensions from JaJuMa - to help you <strong>supercharge your <a title="JaJuMa-Shop | Your Online Shop with Magento 2" href="/en/jajuma-shop/online-shop-with-magento-2" target="_blank" rel="noopener">Magento 2 store</a>'s speed</strong>.</p>
<p>&nbsp;</p>
<blockquote class="p-2 my-2 border-s-2 border-gray-300 bg-gray-50">
<p class="italic leading-relaxed text-gray-900">&ldquo;In Magento's flow, swift speeds we seek,<br>Where Largest Content Paint must peak.<br>A dance of bytes, a seamless glide,<br>Peformance shines, no need to hide.<br>Measure, refine, each metric feeds,<br>The beauty of speed is all it needs.&rdquo;</p>
</blockquote>
<p>&nbsp;</p></div><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb82-absolute {
position: absolute
}
.cmsb82-relative {
position: relative
}
.cmsb82-bottom-0 {
bottom: 0px
}
.cmsb82-left-0 {
left: 0px
}
.cmsb82-z-\[1\] {
z-index: 1
}
.cmsb82-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb82-my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.cmsb82-ml-4 {
margin-left: 1rem
}
.cmsb82-flex {
display: flex
}
.cmsb82-inline-flex {
display: inline-flex
}
.cmsb82-grid {
display: grid
}
.cmsb82-hidden {
display: none
}
.cmsb82-h-10 {
height: 2.5rem
}
.cmsb82-h-auto {
height: auto
}
.cmsb82-w-10 {
width: 2.5rem
}
.cmsb82-w-8 {
width: 2rem
}
.cmsb82-flex-shrink-0 {
flex-shrink: 0
}
.cmsb82-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb82-flex-row {
flex-direction: row
}
.cmsb82-items-center {
align-items: center
}
.cmsb82-justify-center {
justify-content: center
}
.cmsb82-gap-2 {
gap: 0.5rem
}
.cmsb82-gap-8 {
gap: 2rem
}
.cmsb82-overflow-hidden {
overflow: hidden
}
.cmsb82-rounded-lg {
border-radius: 0.5rem
}
.cmsb82-\!bg-\[\#EE682F\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(238 104 47 / var(--tw-bg-opacity)) !important
}
.cmsb82-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb82-py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.cmsb82-pt-4 {
padding-top: 1rem
}
.cmsb82-text-center {
text-align: center
}
.cmsb82-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb82-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb82-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb82-font-bold {
font-weight: 700
}
.cmsb82-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb82-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb82-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb82-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb82-duration-300 {
transition-duration: 300ms
}
.cmsb82-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb82-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb82-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb82-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb82-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb82-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
@media (min-width: 640px) {
.cmsb82-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
}
@media (min-width: 1024px) {
.cmsb82-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb82-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.cmsb82-lg\:gap-4 {
gap: 1rem
}
.cmsb82-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb82-lg\:text-\[20px\] {
font-size: 20px
}
.cmsb82-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div data-cacheable="false">
    <hr>
    <p class="hyvaverse-main-cta-subtext cmsb82-text-center cmsb82-my-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
        Find all you need to know and more valuable insights about Hyv&auml; and Magento.<br>
        Expertly curated by JaJuMa:
        <br>
    </p>
    <div class="hyvaverse-main-cta-container cmsb82-text-center cmsb82-grid cmsb82-grid-cols-1 cmsb82-lg:grid-cols-2 cmsb82-gap-8">
        <div>

            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">        
                <span>&#128640;</span>
                <span>Launch the JaJuMa Hyv&auml;verse</span>
                <svg class="cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10 cmsb82-ml-4 cmsb82-lg:ml-6" height="210.000000pt" preserveaspectratio="xMidYMid meet" version="1.0" viewbox="0 0 245.000000 210.000000" width="245.000000pt" xmlns="http://www.w3.org/2000/svg">

                    <g fill="#402b05" stroke="none" transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)">
                        <path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
                        <path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
                        <path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
                        <path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
                        <path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
                        <path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
                        <path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
                    </g>
                </svg>
                </div>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Hyv&auml;.
            </p></div>
        <div>

            <a class="btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-white cmsb82-!bg-[#EE682F] cmsb82-overflow-hidden" href="/en/magento-metropolis-guide" title="Explore the Magento Metropolis!">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">
                    <svg class="cmsb82-drop-shadow-lg cmsb82-w-8 cmsb82-h-auto" fill="none" height="24" viewbox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect fill="url(#pattern0_413_38)" height="24" width="22"></rect>
                        <defs>
                            <pattern height="1" id="pattern0_413_38" patterncontentunits="objectBoundingBox" width="1">
                                <use transform="matrix(0.00329268 0 0 0.003 -0.317073 -0.311111)" xlink:href="#image0_413_38"></use>
                            </pattern>
                            <image height="500" id="image0_413_38" preserveaspectratio="none" width="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRFAAAA/////////v7+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v////////////7+///////////////////+///////////////////////+///////////////////////////+/////////////////////////////////v///////////v///v///////////////////////////////v///////////v///////////////v///v///v7+/v//ZZGWUAAAAFp0Uk5TAAUS/wwBBg8YAgMHGiMKCRMiHw0EERUIIRkdHBcQCxYOFB4gGyG6tv+yjO3//7E1h9uw/OSbTSnA8qA5i/GvuDFfyf/i9qmg9S9rZEpq6eJR5jjGKG0bIiAVGb/2kAAAFSlJREFUeJztnduPHEcVh3t2PbFnfVs7vq0vWSdxkFAkeCPhASFeyANISNz+zAghEA9IwAOKhABFQgSJWzAkcRKHODcnjoO9y86tZ7qnu+t2qs6pOr/vwXGSmZ6e/qarq06dOjWqgDpG3CcA0gPpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hWiVPpoNKr/9j/WM+FAm/QnOiWPD7cepD8XNnRJ3x76n8c/S3Ua3OiRfnJkvJl3Rh+nOBN2tEgfbdm97tRHcc9DBDqkHzu0f+3pD+OdhxA0SJ984fb6A4efSJaUL318yv1BXXgjX7z0k5/7vOvsPerzkETh0m37b5tM7lOehyzKlu7SgdvgMdlpSKNk6U+G9sNLfbSXK33nIcFBnigyOlus9NM0QdUiH+2FSj/+iOxQI7pDSaFI6Rc+ID1ccT26AqW7BuAsKEx7edIvxoir7L4f4aBslCb9bKyO14lPIx2YgcKkE/XZOymnjS9J+vhc3Eb4ybtRD5+OkqQPJkORUEisphjpEfrsXZz7b5KPiUsp0qN14NpceDfRB0WkDOnJlE/ZTtOmRKQE6eMn30v7gbk/2guQvpe+U515Yk320s/wBE2yDtFlLt0/HSqYjPvxWUufHHIuPrz8Qa6P9pylM7XsK3Kdas9Xul9uMzEns1z8lq30a+9wn8GMvTe5z8CDTKXvfsJ9BjXjx9lVNchTevypFReym3PNUbos5VMyG77lJ/2yxAucV4cuN+mM0ZhhLr3NfQb2ZCb9xh2iAx1brn8Z71LF0fN5tGcl/TrN3bSZ40j0W8pFe0bSiZYwHOtc43aO5KF87T8UR4lOPtJp+uz9/ewtkkuRhfZcpAetNK8Z7G2RLHOtzmxLHF00yUP6+IDkMKZnLpF22pV0EchBOlGiq03ewz5JKF367FsG0mketoeWjcUJkki67ORJ8dKDa4jMsS/8SjNI2Dku+NEuXDpRy+5249F8qG3TwoBs6TRtrXOEdLxF8lC+cZviKBGQLJ0ozu4VJ6OJCggN0cmVThSA8531JPrFiVwXIVY6TQpcSAt78w2KM7hKchRahEqnmTQPrQdGM8Ejb9QuUjpRAC48s4HoESOtjZconaaGCE27SvNo3/lcVPKkPOk0Uys7j6juLppho6g2Xpp0omgM6c5LV0nqEAiKzAqT/jTJdPR54vXqT5CMty+/J6WNFyWd5gEaY/E4jXYpITpB0id7/6Y4TJxtd8aXSYZvMvYEkiOdZpwWsQ4QSWR2LGHZpRjpJJf0+t2YI2KaIKGA3T2FSKe5zaMHQS5RFB3hXwMlQ/pTbxEcJEXJ3slxguWy3UnYCREhnWJq4wrF78YCilkB6iGlKxKknw/fFOnSh+nC2wQB+af+RXAe/giQThDnTBzkvBJ8p/K28PzSn70degSGnlFwqjRrUJZdenghEZacpOCuJ6d1bunBztnS0EKLEDPmzzFLD413cBZ3Co0tbLHNv/BKD5xIZa/nFRRGTDXI3IRXeljsVcD+t0GPdrbZF1bpQVuoCckpDxm1c30FTukht8l4i3/eYs7OVe9IC9fuvZzSAxp3Ibf5Au8vwvQ1GKX773wsrmqbdz1qHut80r1HPKdpFi/T4jnpyjO5zifdM7v97ANhKwcW+G04cPOf5CdiAZ90vwchfwZCL14Va1jadzbpXvFXcQ/zJh7aWUoXsEn3udFl9dm7cC89yfGduKR7VA8SqHzy8Oq9VtfENQuIYxtPLunON3qdJzF+tP/ZtKvMH4QdnZufwqUHDw5XkwiO8wnXSZL93chEem14PYrH/IRvZn+spWW6aWdowJiku12Xi+8vhkPtRyZfJsJmLaL12oQuDy890p1u9FUEY/NtTA/6rshS41SesW61GVJj5UtfLy7Q8TaOmi6dQ7NWoNB+yWP63y2PdIf5yMaqlc77J/lF6x6XbWTk2mZ8apFuPZxt5cb0XMekiUd980Sbld4tn+xapN+ynIJud9T6npQJFw/0Ppg6ns126+3TR5Z5pFs+0jcWJPZ3jxLtZz504heq+4etSI1Vxmz68Ixk6dN2z34uLkEr6VKRen46pyymBNPXIBIsfRrucCn7UY/mI+GW9HFxvgGwxTdNX5RErvTZc9qtvljMhtI55+Ox7dvST7TJlT67aK7LSKJpd1+zuGijzPWy9l93P50wxEqfB9bdV8BEqUbhs73EQrrFHHvyMZtY6fMr4bHsiX7hiF8dgqVK82gd0pevmI/Qveq30c6+TSZ+c7j1mRu/LKQvWATZPIv2EV5G772iIL2F8Tosw6/elRqJHu0BFWYgvYX1dfBfykyy6WnIAstapTElHtLnhEsnGL6FFUyoVRq/A6TPoZAeeDVDaw6sPtz0bSF9zvI6BFZtC4h7BJcthfQWpstQl80NLezi28Z7r0hcAektTJehnh8Plu41aif4VEjfwHQZ6nwzgjvOfddN/zXU60B6C9NlqCeeSCoFu0Vmg2qirAHpLRJLd6jpQ7QTW7Wu0pQODekzyKXbXlmafXVbH7h31/aViRAuneKZvmCvvdRwE5rdVResVJqm1CF9RgzpxiWPRFvCLVmpNCV8Q/qMONIHcxAnx4jLv6xUmhoQSJ8RS3r/BabrPGx+kunYOqQbw9oROnJLOiOzNHvtNVkd0vTL1SHd+PSMKL1r+EYTjWmxUmmaQID0GfUSoRjS25nm7nVirFipNE0VQvqMWjrNvtqbrF1nwqF5z0dA+hRjWnC96Nwn99iOycFncZ7lSyC9iQTp0VmpNP20dEg3BrjrHawgPQbCpZMGRtMC6a0PNS3Wr6VHGUylAdJbHwrp3a9MhHDpkcbQKVipND3NIH0GpEeFRbpxeFyHzKhylxhYfUfTCBXSZ0B6VFikG9et1NK914zys1JpijrrkG5ct1JLD99zmQ1Ib2KcO6urwpkrtogF0psYg6u1dM+drySwUmnKGUm+vTKLdONsZlnSTd83Sm2kIWRKrxMY97k3y/bHXnryHflkSq/LSKiQnrwiMKTHwl76CeqUXxPCpV93XXEqB3vpyfedkim9XlOuQnryXacgPRb20kkKYbkgU3rd4KmQnmiDghWQHgt76ck3nBIu/UTqYBUd9tIT7kAzR6b0uiaUCunJg+/CpZuKOAgG0ptAeu9LkyBTeh2jgvQYCJdus8WVUCC9CaT3vjQJwqXb7s8pEEhvAum9L02CTOn1xrqQHgNIjwWkN4H03pcmQab0ugDUtXcin0o8IL2JvfSryfcWJwPSm0B670uTAOmxgPQmRul1UjCkxwDSYwHpTSC996VJkCm9XugD6TGA9FhAehN76RkHZ9YWIEN6peROh/QmRun1im1IjwGkxwLSm0B6E0ifUl8wSI8BpMdirZIMpFeQ3gbSp0B6VGRKr68CpMcA0mMB6U3spZv2mxcMpDeB9CaQPgXSowLpsVgr/gnplYv086nr6tEB6U2ylX7uU9PWwCsgvUkc6Y+Nu4QEMi3yZ9w8sgbSm0SRvvemxd5fAey/PvuH9c7bkN4kSkduXncx2o68yyXzkO5JFOnLCqtRgnir+n7W0tequEN6FUl6vRtEhDbeQaDPeyB9in/zPv8r7cZe2+tddkj3JLb0arJHF9Q53G6UKoV0T6JIrzfwm2Hc78+W9gYrkO5JAukWO/7ZsLnTBqR7EmWcfqy9ja1pX1sLOnZMg3RP0kgP1t65SZ619LqwAqTPiCK9c3+EgFm6y3c6/zOke5JOuvfGnT3K40hPvdmqcOnP3rY+aN9OKMcOu//7IP27ZllLXxvdQ3qVWHpVnXHd4XBodzxI9ySx9OoJt4fmhaHoPaR7klq6eQvzNQzb3UK6J+mlVztX7PrxFz8ybCsA6X6Ybzsf6effC/3Uymb/ekj3g0f60bU1fdlDi98Fhmx+cEk3XP2LVkWNIN0PB+kOwRkb6dXZ+73/a9su0TVG7B3Sp9TSHYr8W0nvbeNP2I7lY+TIQfqUWvrxR0Mva2ApvbMfv/ux9WW3lu5QfkSD9ImxIa2lm19aYyt986C9cfYurKU7VIyE9CmrC2Z9jd12IZ/sLFKln7nzhdsVtz2h9SAgpLtJt7eeaOt5y/OZrPcYId1RunWymyzpDY+Q7tSRq+zXrIiSftCYz4V0V+m2PfiOdKkYWElvzdNBurN0yzQIQdLbjQ6ku0u3G7jJkb4R6IH0yqXe+xKLVYlipG/O1EF6ZXHhNvOVzK2DEOnLxbNrGJddQPqUrp64aWJUhvSNNsr8FqRAz5l0ToYNv02C9O6MSkifYn4udl+GwZXn/NK7f6oW4SVIn9F3Gfbu9r6FPTjTl2plzglQId18GaZVgzrpH73Zz7IF0Sd9t3cljf9PPBYs0i3qcvVfh76b3SbBjYAehf2J0+aAYqKf6woW6RY//qEFB09vjooqXun9t7lNBRxzCi4xUqUPNnmdS5BPxyom1qTr1IdyrQK/ahTESm8XlmjSEY5nkz608q26eM98SCXSbWq9DYepNpanPXuXSfrged60GFIkGmuuwSPdat7McAO0rv6teyl778/9ffGv48F6tMblFVOsE3HJ4JFuNytt6ODMu8XLy/+l+ynH6c9V848dfgjZFa9MHXmXLX14zfARz5wYjUZ/mf/9+b+mjMg9V82sD/qyXSmb/JHOJd2ygvb+G8N3wclbo9Gf5n/96mtJpZ88+rndvT3wOuvF0b1xqHgwSbdOcj0wPf1f+MP8n6mkv/j76Z9fG43+PBhWtF+lkf5GFy+9e7JynckXXx+9Un35/O/SSP/mb6d/fuPVQeUupS8USXeoA2McgJ88uu+q/yWS/pXXqm/9elHwvw+XQmYDwbxocEl3uNXNF2a8e3N39Mc0V++l0Z1rvxkcVjisv6s4+u6M0m+4LCAztoH7z49+ab/sLYTvjl4d7nm5/JorltadT7rjxelJUBDHFccQEYdzRukORSZmDIa4heC8X5Rd9Qtq+KQ7VPlakHwK0hH3b2QcmsSBT7rVZEST058y9HpsmZzoLS3ayxnrXd5IYZTu2uWZwnNn2OC1lQTLE51XunPN1iN2jlPt00GK3+4h/WWH48Ipvbrm042xrAKVlNNeDdAVig1HfGCV7tPAV/K0d+fsmWFq3LmlO5ZnXnLpbeLzCMJ352e+3y6vdMeQ5Yqn/0F7Hv4MLL8YxpQsEBFm6Z4NfMUTs+7A+/yfsi+LSA63dI+AxhIBsRpv5amy9Lvhln5k/Ts/93wrW0dogWePZAbrubNLr8Yvbf/M972cbfxAbWEj1+m2gvWBX3q18+3RT33fy9cbcpsabsL5PJ8iQHpVfX/0E+/38gRmfYfmM4x5f7ERIX38vdf+5v3m8x8mb+Mtc3l7SL+4oY0I6UcN3gsv+795eMUBPXZrGHoYXhKTBiHSqwsv/sL/zUlnYcJ2ZufIg9xAinSf6fU10t0//kPzIwxZtKmQIz1o2JuqH+8ddJ3B3oNbIEi65164NfHjHWEtO9fs+SaipLvs3tFB5LIEk2Mho8Obd/ijxktkSQ8dDcUctNvWne9GVA6ANOmBcY9omYZhLTt3CK6FPOmBHeSOgrwEBA3NJcwHNpAoPbCNp29JfVM95shbpSFSumWxlj6os6lKGJo3ECrdM1N2CeXo6FzQsbjn/DsRKz1ovpruMWos0D+InKF5A7nSq2r3k4A3kwzaw+IGyWu+2iJZeuA1D+7QjbeDJm35p1D7EC3dqpzuAGEP1LDnS/o6kPYIl350v4TcbQGF/8OGjVfuysjQ7ka89MARk29gNizoKi0a0yID6WEh0MljDwFhT5VRUCwnATlID5zGds+TvhUSKmcqNOBCHtIDn7Bura1NifZ++vf1kEMm0gOzqVxmYYK6ECJS4IxkI70anwu5oJbZVONLIdHfG29J7rOvyEd6YPfKqhBdwHLKSuJ0Wg85SQ/MnTQuIGMOAKYjL+lRB+0+dY9WCB+aN8hNeqD2/uFbWNBV5AxqL/lJDxtSjQ+6WuHxTpByWTVwzGQoPTQ/fnNYtR+0o0YG0ZgWWUp3L7zbYu/hB1vbRw/hydbDg8tBi1Yy6rOvyFN6uHYqGGtE+ZOr9MD1JlRkNE5bI1vpofF4CvJUnrX0wETpYPbezSPouknW0gMH7WHkFI1pkbl0tg5dnNVTichdOk8bfzZoyp2d/KVXk7Op88vl7i9hRwHSQ7MYXRG6bMWBIqSn1J71w3xBIdKrnURrCzIMum5SivQ0sZoSbvOqJOmhi4otyHho3qAk6ZFjNTkkN9tRlvTAQiFDXA4o9S2NwqSH1nTsJa98KAPFSQ+sNtpNIR24JeVJD9t0oQvmzTfoKVF6YAJ7m3I6cEuKlE45+ZZ6B4EUFCr9qE0mSUve+TzXRIkhipUeuC5tjpQC7cSUKz1ce4kt+4ySpVfVqZC4qZDdXCNQtvSAwGxR0ZgWpUuvLnmVMpg8LPY2rxRI97rZS77NKxXSnUuSsW5znQIN0h1rORd+m1dapNsvav/Br4oLum6iRbrdNMwPXy65/1ajR3pVnbwwWHzgR6+8rUK5LunVUJCuiDRXS5RJP2L86PTDydqeET9++fL7B4VkPFqiTzqAdI1AukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hXyfy89l0B+7GqqAAAAAElFTkSuQmCC">
                            </image>
                        </defs>
                    </svg>
                    <span>Explore the Magento Metropolis!</span>
                    <svg class="cmsb82-drop-shadow-lg cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10" fill="none" height="24" viewbox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.7998 15.5999H15.5998V14.3999H13.7998V15.5999ZM15.5998 17.9999H13.7998V16.7999H15.5998V17.9999ZM13.7998 20.3999H15.5998V19.1999H13.7998V20.3999Z" fill="white"></path>
                        <path clip-rule="evenodd" d="M5.4 0L15 3.6V12H17.4C17.5591 12 17.7117 12.0632 17.8243 12.1757C17.9368 12.2883 18 12.4409 18 12.6V22.8H18.6C18.7591 22.8 18.9117 22.8632 19.0243 22.9757C19.1368 23.0883 19.2 23.2409 19.2 23.4C19.2 23.5591 19.1368 23.7117 19.0243 23.8243C18.9117 23.9368 18.7591 24 18.6 24H0.6C0.44087 24 0.288258 23.9368 0.175736 23.8243C0.0632142 23.7117 0 23.5591 0 23.4C0 23.2409 0.0632142 23.0883 0.175736 22.9757C0.288258 22.8632 0.44087 22.8 0.6 22.8H1.2V10.2C1.2 10.0409 1.26321 9.88826 1.37574 9.77574C1.48826 9.66321 1.64087 9.6 1.8 9.6H3V5.4H4.2V9.6H5.4V0ZM16.8 22.8H15.6V21.6H13.8V22.8H12.6V13.2H16.8V22.8ZM5.4 10.8H2.4V22.8H5.4V10.8ZM8.4 5.4H7.2V6.6H8.4V5.4ZM9.6 5.4H10.8V6.6H9.6V5.4ZM13.2 5.4H12V6.6H13.2V5.4ZM7.2 7.8H8.4V9H7.2V7.8ZM10.8 7.8H9.6V9H10.8V7.8ZM12 7.8H13.2V9H12V7.8ZM8.4 10.2H7.2V11.4H8.4V10.2ZM9.6 10.2H10.8V11.4H9.6V10.2ZM13.2 10.2H12V11.4H13.2V10.2ZM7.2 12.6H8.4V13.8H7.2V12.6ZM10.8 12.6H9.6V13.8H10.8V12.6ZM8.4 15H7.2V16.2H8.4V15ZM9.6 15H10.8V16.2H9.6V15ZM7.2 17.4H8.4V18.6H7.2V17.4ZM10.8 17.4H9.6V18.6H10.8V17.4ZM8.4 19.8H7.2V21H8.4V19.8ZM9.6 19.8H10.8V21H9.6V19.8Z" fill="white" fill-rule="evenodd"></path>
                    </svg>
                </div>
                <svg class="cmsb82-absolute cmsb82-left-0 cmsb82-bottom-0" fill="none" height="51" viewbox="0 0 435 51" width="435" xmlns="http://www.w3.org/2000/svg">
                    <path d="M521.149 66.6131V52.8942H518.576V49.1462H515.839V45.6486H506.218V49.1462H503.825V52.8084H502.489V39.4329H495.519V52.6368H491.445V45.5699H489.304V40.9636H484.482V45.4841H475.443V41.9864H465.053V44.9691H462.431V24.0116H451.869V39.7762H444.856V52.4651H440.523V49.7399H436.758V34.2328H431.074V47.9517H426.742V19.0691H424.6V14.5343L423.171 7.05972H421.777V0H421.058V7.05972H419.578L418.242 14.6774L418.234 14.7131V18.8975H416.524V46.5069H410.359V49.9116H408.254V41.0494H400.178V49.0604H395.895V57.4934H394.221V51.5281H391.484V35.5132H389.256V33.0455H384.686V35.5132H382.287V39.2612H378.902V34.2328H370.733V39.4329H365.258V43.095H363.066V38.1525H360.752V35.6848H355.155V38.0667H353.229V52.6368H350.614V38.7104H345.994V33.9825H338.722V41.1352H334.562V37.8164H323.317V60.4332H321.341V40.8777H318.388V25.4207H316.204V21.8372H314.156V18.1321H312.741V11.9736H312.022V18.1321H310.607V21.5797H309.069V25.4207H306.755V40.4986H304.01V27.3662L301.208 20.7572L298.413 27.495V35.8994H292.507V45.9919H290.021V25.4207H280.184V42.7946H277.231V57.1143H275.384V34.1041H273.2V30.5277H271.404V26.0573H268.113V30.399H266.187V34.1041H264.262V62.7364H261.388V29.1258H254.504V36.021H251.12V33.0884H245.214V26.1861H234.867V37.9451H232.373V29.2546H225.239V37.3013H222.745V26.0573H220.432V22.6025H214.453V26.0573H211.371V33.9825H209.007V26.5652L203.769 18.3324L198.718 26.2218L198.66 26.3076V29.8912H196.814V25.9285H189.42V28.103H187.954V24.0116H182.228V27.588H180.561V44.2037H178.966V32.1872H170.932V35.7707H161.434V38.3242H157.015V34.7478H153.551V30.5277H143.327V37.6876H141.609V34.7478H135.373V47.401H133.389V30.5277H130.824V20.8144H122.791V44.4612H120.169V23.7541H110.461V30.2703H103.276V34.4904H100.582V39.9836H98.2177V28.3533H87.8709V34.3616H85.2986V45.9919H81.6557V41.6502H79.4714V26.5652H72.3364V41.264H68.2264V50.212H65.9918V37.8164H59.3167V18.6471H47.5545V42.0293H44.4792V52.0002H42.7547V31.0427H36.0006V44.59H33.2558V29.7624H23.6779V37.4301H20.7247V50.9773H18.8781V47.1435H15.537V27.7167H4.42142V47.5297H1.67665V40.7561H-0.37833V37.5589H-11.3718V40.2411H-13.8076V64.3958H-21V83H525V66.6131H521.149Z" fill="#9B3205" fill-opacity="0.5"></path>
                </svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Magento.
            </p>
        </div>
    </div>
    <br>
    <hr>
    <style>
        .hyvaverse-teaser-shine {
            position: relative;
            overflow: hidden;
        }

        .hyvaverse-teaser-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: teaser-shine-move 6s infinite;
            pointer-events: none;
        }

        @keyframes teaser-shine-move {
            0% {
                left: -75%;
            }

            100% {
                left: 125%;
            }
        }
    </style>
</div></div></div>
</div><h2 data-content-type="heading" data-appearance="default" data-element="main">Why&nbsp;Core Web Vitals, Including Largest Contentful Paint (LCP), Matter For Magento 2 Stores</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>Largest Contentful Paint and the other <strong>Core Web Vitals are more than just technical terms</strong>; they are <strong>crucial indicators of how users perceive your website's loading speed</strong>, <strong>interactivity</strong>, and <strong>stability</strong>. <strong>Google uses LCP as a key metric in its Core Web Vitals, as ranking signals</strong> directly impacting your site's search engine ranking. You can find Google's official documentation on LCP <a title="Google's official documentation on LCP" href="https://web.dev/articles/lcp" target="_blank" rel="noopener nofollow">here</a>.</p>
<p>Here's why <strong>optimizing Core Web Vitals, with a focus on LCP</strong>, is particularly important for <strong><a href="/en/jajuma-shop/online-shop-with-magento-2">Magento 2 stores</a></strong>:</p>
<p>&nbsp;</p>
<ul>
<li><strong>User Experience:<br></strong>A fast LCP means users see the most important content on the page quickly <strong>(loading performance)</strong>. <strong>Good Interaction to Next Paint (INP) ensures the site responds quickly to clicks and taps (interactivity), while a low Cumulative Layout Shift (CLS) prevents annoying content jumps (visual stability)</strong>. In e-commerce, <strong>this combination</strong> means the difference between a customer staying to browse or leaving for a competitor.</li>
<li>
<p><strong>Conversion Rates:<br></strong>Faster loading times and <strong>a smoother interactive experience</strong> are directly correlated with higher conversion rates. Studies, like the one by Deloitte (<a title="Milliseconds Make Millions - A study on how improvements in mobile site speed positively affect a brands bottom line" href="https://www.deloitte.com/ie/en/services/consulting/research/milliseconds-make-millions.html" target="_blank" rel="noopener nofollow">https://www.deloitte.com/ie/en/services/consulting/research/milliseconds-make-millions.html</a>), show that even millisecond improvements can significantly boost engagement and sales.</p>
</li>
<li>
<p><strong>SEO Ranking:<br></strong>Google prioritizes websites that offer a good user experience. <strong>Good scores across all Core Web Vitals contribute</strong> to your overall <strong>Page Experience assessment</strong>, potentially boosting your visibility in search results and driving more organic traffic.</p>
</li>
<li>
<p><strong>Bounce Rate:<br></strong><span>Slow-loading pages and <strong>unresponsive interfaces</strong> are a major reason for high bounce rates. If the main content takes too long to <strong>appear</strong> or the page feels sluggish, users are likely to give up and go elsewhere. <strong>Optimizing LCP and INP helps keep users engaged</strong> from the moment they land on your page.</span></p>
</li>
</ul></div><h2 data-content-type="heading" data-appearance="default" data-element="main">What Are The Core Web Vitals?</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Before diving deeper into Magento Largest Contentful Paint (LCP) optimization, let's quickly define the three main Core Web Vitals metrics:<br><br></p>
<ul>
<li><strong>Largest Contentful Paint (LCP):</strong><br><strong>Focuses on loading performance</strong>. It measures the time it takes for the largest image or text block visible within the viewport to render, relative to when the page first started loading. Essentially, it marks the point when the <strong>main content of the page has likely loaded</strong>.<br>Google <strong>recommends an LCP of 2.5 seconds or less for a 'good'</strong> experience.</li>
<li><strong>Interaction to Next Paint (INP):</strong><br><strong>Focuses on interactivity</strong>. It measures the latency of all user interactions (like clicks, taps, or key presses) throughout their visit to a page. The final INP score is the longest interaction observed (ignoring outliers). It indicates <strong>how quickly the page responds visually to user input</strong>.<br><strong>A 'good' INP is considered 200 milliseconds or less</strong>.<br>(Note: INP replaced First Input Delay (FID) as a Core Web Vital in March 2024).</li>
<li><strong>Cumulative Layout Shift (CLS):</strong><br><strong>Focuses on visual stability</strong>. It measures the sum total of all unexpected layout shifts that occur during the entire lifespan of the page load. A <strong>layout shift happens when a visible element changes its position</strong> from one rendered frame to the next.<br><strong>A 'good' CLS score is 0.1 or less</strong>.</li>
</ul>
<p><strong>Optimizing all three Core Web Vitals is essential</strong> for providing a <strong>superior user experience on your Magento store</strong>.<br>This <strong>guide focuses primarily on LCP</strong>, but many <strong>optimization techniques positively impact INP and CLS as well</strong>.</p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">The State of LCP and Core Web Vitals in Magento: Hyv&auml; vs. Luma</h3><div data-content-type="text" data-appearance="default" data-element="main"><p>Magento's default <strong>Luma theme</strong>, while functional, is <strong>known for its relatively heavy frontend</strong> which relies on extensive CSS (e.g., styles-m.css) and JavaScript libraries like KnockoutJS, jQuery, and RequireJS. This complexity can lead to <strong>challenges in achieving optimal LCP scores</strong> and often contributes to issues with render-blocking resources and potentially Cumulative Layout Shift (CLS), especially on mobile.</p>
<p>&nbsp;</p>
<p><a tabindex="-1" title="JaJuMa-Shop | Online-Shop with Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Hyv&auml; theme for Magento 2</a>, on the other hand, were built from the ground up <strong>with performance as a primary goal</strong>. By eliminating bulky libraries <strong><a tabindex="-1" title="JaJuMa-Shop | Top 10 Reasons for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" target="_blank" rel="noopener">Hyv&auml; adopts a modern architecture</a></strong>, with lightweight technologies like Tailwind CSS and Alpine.js, <a tabindex="-1" title="Hyv&auml; Theme Stores" href="https://www.hyva.io/hyva-theme-license.html" target="_blank" rel="noopener nofollow">Hyv&auml;-based stores</a> significantly reduce the amount of code the browser needs to process. This streamlined approach typically results in <strong>drastically better LCP times and overall Core Web Vitals scores</strong> compared to Luma - a significant improvement that makes the <strong><a title="JaJuMa-Shop | Top 10 Reasons and Benefits for Magento" href="/en/jajuma-shop/top-10-reasons-for-magento" target="_blank" rel="noopener">Magento platform even better</a></strong>.<br>(For more information about Hyv&auml;, <a class="text-primary hover:underline" title="Your Expert Resources about Hyv&auml;: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>check all our Hyv&auml; resources in the JaJuMa Hyv&auml;verse</strong>.</a>) <br>However, achieving really good and outstanding LCP values in <strong>real-life scenarios often requires additional optimizations</strong> also with Hyv&auml; Theme.<br><strong>Or from another view: Not applying additional optimizations for LCP with Hyv&auml; Theme would be a missed chance to improve a store and its user experience.</strong></p>
<p>&nbsp;</p>
<p><strong>While this guide provides strategies applicable to both Luma and Hyv&auml;, users of Hyv&auml; themes often have a significant head start due to the theme's inherent performance advantages. However, optimization is still crucial regardless of the theme.</strong></p>
<p>&nbsp;</p>
<p>To further <strong>simplify the journey towards LCP excellence</strong> and achieving those coveted top Google spots, a suite of measures and powerful tools are available for Magento and Hyv&auml; Theme, e. g. in the form of <strong><a tabindex="-1" title="Performance Optimization Extensions for Magento 2 &amp; Hyv&auml; Theme" href="/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">JaJuMa Performance Optimization Extensions</a></strong>. These extensions are specifically designed to address various aspects of website performance, including image optimization, CSS delivery, and resource loading. By&nbsp;<strong>leveraging these readily available solutions</strong>, Magento merchants, agencies, and developers can <strong>implement LCP best practices with greater ease and efficiency</strong>, transforming complex optimization tasks into straightforward configurations.<br><strong>Think of it as having a performance expert right within your Magento admin!</strong></p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Understanding Largest Contentful Paint (LCP)</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>At its core, <strong>Largest Contentful Paint (LCP) measures how quickly the primary content of a web page becomes visible</strong> to the user.</p>
<p><br>As defined earlier, <strong>LCP measures the render time of the largest visible content element</strong> within the viewport. This element is often a <strong>hero image</strong>, a <strong>large banner</strong>, a video's poster image, or a <strong>significant block of text</strong>. LCP aims to capture when the main content of the page has likely loaded and become visible ('appeared') to the user.<br>The browser begins measuring LCP when the user initiates the page load and stops when the largest content element has been fully rendered and becomes visible. <strong>Understanding this definition is the first crucial step in effectively optimizing this metric</strong>, as it directs attention to the elements that have the most significant impact on perceived loading speed.</p>
<p>&nbsp;</p>
<p>Google has established clear <strong>scoring thresholds for LCP</strong> to help website owners gauge their performance and understand the implications for their users and search engine rankings (<a title="LCP Definition by Google" href="https://web.dev/articles/lcp" target="_blank" rel="noopener nofollow">Source</a>).</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="NY1UUMS"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="GFL7802"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="QLU52UJ"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<ul class="list-disc ml-4">
<li>An <strong>LCP of 0 to 2.5 seconds</strong> is considered <strong>Good</strong>, indicating a fast and responsive user experience.</li>
<li>Websites falling within the <strong>2.5 to 4 seconds</strong> range are categorized as <strong>Needs Improvement</strong>, suggesting that while the site isn't critically slow, there's room for optimization to enhance the user experience.</li>
<li>Finally, an LCP <strong>over 4 seconds</strong> is considered <strong>Poor</strong>, signaling significant loading performance issues that can negatively impact user satisfaction and SEO.</li>
</ul>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="DWBDBTY"><figure class="md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="P6E0HO4"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Largest-Contentful-Paint-Ranges.png" alt="Largest Contentful Paint Ranges Defined By Google" title="Largest Contentful Paint Ranges Defined By Google" data-element="desktop_image" data-pb-style="FJQR2B2"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Largest-Contentful-Paint-Ranges.png" alt="Largest Contentful Paint Ranges Defined By Google" title="Largest Contentful Paint Ranges Defined By Google" data-element="mobile_image" data-pb-style="HHHSO4E"><figcaption data-element="caption">Largest Contentful Paint Ranges Defined By Google</figcaption></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>These benchmarks provide tangible targets for optimization efforts, allowing developers and merchants to assess their current standing and strive for the "Good" category to maximize search engine visibility.<br>Remember, a <strong>good LCP score is a strong signal to Google</strong> that your site provides a <strong>positive user experience</strong>, which can lead to better rankings.</p>
<p>&nbsp;</p>
<div class="message success rounded-3xl p-6 mt-6"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512" class="inline-block float-left mr-2 w-16" width="29" height="51" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"></path><title>awesomeicons6/solid/lightbulb</title></svg>

<blockquote class="py-2.5 px-5 border-l-4 border-secondary-lighter"><strong>TIP:<br></strong>While aiming for "Good" (under the 2.5 seconds target) is essential, Stores aiming for <strong>truly excellent user experience</strong> and driving their user engagement might want to go beyond above thresholds, targeting <strong>LCP values as low as in a ~1 - 1.5s range,</strong> ensuring an exceptional user experience and a competitive edge.</blockquote>
</div>
<p>&nbsp;</p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">How To Measure LCP?</h3><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Identifying the specific element</strong> that contributes to the LCP on your Magento 2 store with Luma or Hyv&auml; is the <strong>essential first step in any targeted optimization strategy</strong>.<br>LCP and other CWV values can be&nbsp;<strong>measured in "the lab"</strong> using <strong>developer tools</strong> analyzing a single page load under specific conditions or <strong>in "the field"</strong> based on <strong>real user experiences on a site</strong>.</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="E3FW5K8"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="QEEYPOM"><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="MXRY5EW"><figure class="md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="HWRB7Y7"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Monitor-And-Measure-LCP-Field-And-Lab.png" alt="Monitor And Measure LCP In The Lab &amp; In The Field" title="Monitor And Measure LCP In The Lab &amp; In The Field" data-element="desktop_image" data-pb-style="NFC60AG"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Monitor-And-Measure-LCP-Field-And-Lab.png" alt="Monitor And Measure LCP In The Lab &amp; In The Field" title="Monitor And Measure LCP In The Lab &amp; In The Field" data-element="mobile_image" data-pb-style="QDO0A9A"><figcaption data-element="caption">Monitor And Measure LCP In The Lab &amp; In The Field</figcaption></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="COKATG8"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<ul class="list-disc ml-4">
<li><strong>Measuring LCP manually in "the lab":</strong><br>Fortunately, modern browser developer tools provide straightforward ways to pinpoint this element, which is<strong id="docs-internal-guid-ef87a337-7fff-af4a-14a4-265cb21395c8"> useful for debugging and testing changes.</strong> These tools simulate page loads in a controlled environment to analyze your page's performance and clearly indicate the LCP element along with its loading time. Examples include:<br><br>
<ul class="list-disc ml-4">
<li><strong>Google Lighthouse:</strong><br>Available in Chrome DevTools (<em>F12 &gt; Lighthouse tab</em>). &nbsp;Provides a detailed performance audit, including LCP, INP simulation insights, and CLS.</li>
<li><strong>Google PageSpeed Insights (PSI):</strong><strong><br></strong>An online tool (<a title="Google Page Speed" href="https://pagespeed.web.dev/" target="_blank" rel="noopener nofollow">https://pagespeed.web.dev/</a>) that analyzes your page and provides both lab (Lighthouse) and field data (from CrUX, if available).</li>
<li><strong>WebPageTest:<br></strong>A powerful tool for in-depth performance analysis from various locations, devices, and connection speeds.</li>
</ul>
</li>
</ul>
<p>&nbsp;</p></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<ul>
<li><strong>Field Tools (Real User Monitoring - RUM):</strong><br>Priority should be measuring LCP in the field as it reflects the real user experience customers have in a Magento store.<br>Real User Monitoring (RUM) tools collect data from actual users visiting your site, providing a more accurate picture of real-world performance<strong>&nbsp;</strong>across different devices and network conditions. Examples include:<br><br>
<ul>
<li><strong>Chrome User Experience Report (CrUX):<br></strong>Public data collected from opted-in Chrome users. PageSpeed Insights and Google Search Console display this data.<br>You can visualize CrUX data for your site or competitors using tools like <a href="https://cruxvis.withgoogle.com/">CrUXVis</a>.</li>
<li><strong>Google Search Console:<br></strong>The Core Web Vitals report (under "Experience") shows how your pages perform based on CrUX field data, highlighting URLs needing improvement.</li>
<li><strong>JavaScript Libraries:<br></strong>Libraries like Google's web-vitals library allow you to collect CWV data directly from your users and send it to your own analytics tools (e.g., Google Analytics).</li>
<li><strong>JaJuMa Real User Monitoring (RUM) Extension:<br></strong>Our <strong><a tabindex="-1" title="Real User Monitoring (RUM) extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">Real User Monitoring (RUM)</a></strong> Magento 2 extension simplifies monitoring, collecting and analyzing real-world LCP, INP, CLS and other performance data.<br>It provides up-to-date data, options for more detailed analysis and insights directly within your Magento admin for easy and convenient monitoring and analyis.</li>
</ul>
</li>
</ul>
<p>&nbsp;</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Key Factors Affecting LCP In Magento 2</h2><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Several factors can influence and delay the Largest Contentful Paint</strong> on a Magento 2 website with Luma or Hyv&auml;.<br>Understanding these key drivers is crucial for developing <strong>effective optimization strategies</strong> and ultimately achieving those top Google spots as well as outstanding user experience.</p>
<ol class="list-decimal pl-8 ml-4 marker:text-2xl marker:font-bold">
<li>
<h3>Server Response Time (TTFB):</h3>
<p><strong>One of the most fundamental aspects affecting Magento LCP value is server response time</strong> (<a tabindex="-1" title="TTFB - Time to First Byte" href="https://web.dev/articles/ttfb" target="_blank" rel="noopener nofollow">TTFB - Time to First Byte</a>). <br>TTFB measures the time it takes for a user's browser to receive the <em>first byte</em> of data from the server after making a request. <strong>A slow TTFB acts as a bottleneck</strong>, delaying all subsequent loading processes, including the loading of the LCP element. If the server takes a long time to respond with the initial HTML, the browser cannot even begin to identify and request the resources needed to render the page, including the largest contentful element.<br>Therefore, optimizing server response time is a foundational step for improving LCP.</p>
</li>
<li>
<h3>Render-Blocking Resources:</h3>
<p><strong>Render-blocking resources, primarily CSS and JavaScript files</strong>, can significantly delay the rendering of the LCP element. <br>When the browser encounters these files in the HTML, it typically <strong>pauses the parsing of the document to download and process</strong> them. If these files are large or not optimized, they can block the browser from rendering any content, including significantly delaying the LCP element to from appearing, until they are fully processed.<br>Minimizing the impact of render-blocking resources is therefore crucial for ensuring a fast LCP.</p>
</li>
<li>
<h3>Media Optimization:</h3>
<p>Given that <strong>images and videos are frequently the largest elements</strong> on a page, their slow loading is a common cause of poor LCP.<br>Large, <strong>unoptimized media files require significant time to download</strong>, and until they are fully loaded, they cannot be rendered as the LCP element.<br>Optimizing the size, format and loading of these media assets is therefore paramount for improving LCP, especially if the largest contentful element is an image or a video.</p>
</li>
<li>
<h3>JavaScript Execution:</h3>
<p><strong>JavaScript execution time can also play a critical role in LCP</strong>, particularly if JavaScript is used to render or manipulate the LCP element.<br>If the browser has to execute a significant amount of JavaScript before the LCP element can be displayed, this <strong>execution can block the main thread and delay the rendering process</strong>, even if the underlying resource (like an image) has already been downloaded.<br>LCP issues due to tied up main-thread are more common in themes heavily reliant on complex JavaScript frameworks (like Luma with KnockoutJS) or extensive client-side rendering.<br>Reducing the amount of main-thread work, JavaScript and optimizing its execution are important considerations for LCP (and also INP) optimization.</p>
</li>
<li>
<h3>Web Fonts:</h3>
<p>Finally, <strong>web fonts can impact LCP</strong> if the largest contentful element is text styled with a custom font.<br>By default, browsers may <strong>delay rendering text styled with a web font until the font file has been downloaded</strong>, leading to a delay in the appearance of the LCP element.<br>Also If a large block of text is your LCP element, font loading strategy becomes critical.<br>Optimizing the loading of web fonts is therefore essential to ensure that text-based LCP elements are rendered promptly and also helps prevent layout shifts (CLS).</p>
</li>
</ol></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Actionable Strategies For LCP Optimization</h2><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="Q1F85OJ"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="AIOUA51"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="NCHPLB4"><div data-content-type="text" data-appearance="default" data-element="main"><p>Now, let's get practical and tackle those LCP Bottlenecks in your Magento 2 store.<br>Based on the factors discussed above, <strong>several proven actionable strategies can be implemented to optimize the Largest Contentful Paint</strong> on your Magento 2 store with Luma or Hyv&auml;.</p>
<p>&nbsp;</p>
<p>Continue reading to learn about proven and tested actionables to improve your LCP in Magento.&nbsp;<br><strong>These strategies below align</strong> with general <strong>recommendations available for LCP</strong> optimization and are <strong>tailored for the Magento and Hyv&auml; ecosystem</strong>.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="PFTX9Q7"><figure class="md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="NAQLMA0"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/The-Beauty-Of-Speed-And-Performance-Optimization.png" alt="The Beauty Of Speed And Performance Optimization" title="The Beauty Of Speed And Performance Optimization" data-element="desktop_image" data-pb-style="JJLXJNC"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/The-Beauty-Of-Speed-And-Performance-Optimization.png" alt="The Beauty Of Speed And Performance Optimization" title="The Beauty Of Speed And Performance Optimization" data-element="mobile_image" data-pb-style="XONWSLY"><figcaption data-element="caption">The Beauty Of Speed And Performance Optimization</figcaption></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p><strong>By applying these measures, we managed to scrape off 50% from a LCP of 1.6 on Luma down to an incredible LCP of 0.8 on Hyv&auml; - Check our Showcases linked below for more details and see the beauty of speed and performance optimization in action.</strong></p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Your Best Friend: A Good TTFB (Time to First Byte)</h3><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Even with a perfectly optimized frontend, a slow server response will kill your LCP.</strong><br>While focusing on the largest contentful element is crucial, <strong>a fast LCP is built upon a solid foundation of a quick Time to First Byte (TTFB)</strong>. If the browser has to wait an extended period to receive the initial HTML document, it inherently delays the discovery and loading of all subsequent resources, including the LCP element.</p>
<div class="message success rounded-3xl p-6 mt-6"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512" class="inline-block float-left mr-2 w-16" width="29" height="51" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"></path><title>awesomeicons6/solid/lightbulb</title></svg>

<blockquote class="py-2.5 px-5 border-l-4 border-secondary-lighter"><strong>INSIGHT:<br></strong>While Server Infrastructure, CDN and advanced caching optimizations described below can improve performance and CWV, they should be seen primarily as scaling measures and be evaluated/considered depending on the individual situation.<br>With Magento 2 is totally possible to achieve good TTFB and CWV-Values without expensive hosting, CDN or advanced caching such as Varnish or redis, by applying targeted and smart optimizations.<strong><br></strong>See our<strong> <a tabindex="-1" title="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success" href="/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success" target="_blank" rel="noopener">60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success</a> </strong>Case-Study to learn how</blockquote>
</div>
<ul class="list-disc pl-8 ml-4 marker:text-xl marker:font-bold">
<li>
<h4><strong>Server Infrastructure:</strong></h4>
<p>For Magento 2 stores, particularly those using the performance-oriented Hyv&auml; theme, selecting the right server infrastructure is paramount. Magento, being a robust e-commerce platform, benefits significantly from robust server resources. Hyv&auml;, while lightweight on the frontend, still relies on efficient backend processing. Reviewing server logs and utilizing performance monitoring tools can help identify potential bottlenecks in server response times. Optimizing the Magento backend code and database queries, as well as ensuring your server configuration (such as using LiteSpeed or Nginx and the latest PHP version like 8.1+) is properly tuned, can lead to substantial improvements in TTFB. Furthermore, auditing third-party extensions and your theme files for any performance-intensive operations is crucial.<br>Ensure your hosting plan is adequate for your traffic. Consider upgrading to a more powerful server, a Magento-optimized hosting provider is a must (dedicated hosting is often better than shared). Server location matters too; choose one close to your primary audience.</p>
</li>
<li>
<h4><strong>Content Delivery Network (CDN):</strong></h4>
<p>Implementing a Content Delivery Network (CDN) can be another effective way to reduce TTFB, especially for stores with a global customer base. A CDN stores cached copies of your website's static assets (like images, CSS, and JavaScript files) on servers distributed geographically around the world. When a user requests your site, the CDN serves these assets from the server closest to their location, minimizing server load, reducing latency and significantly improving response times. Numerous CDN providers are compatible with Magento 2 and Hyv&auml;, making this a readily implementable solution. Popular options include Cloudflare, Fastly, and Amazon CloudFront.<br>Note: Keep in mind that using CDN might be a GDPR issue.</p>
</li>
<li>
<h4><strong>Full Page Cache (FPC):</strong></h4>
<p>Optimizing caching is also critical for reducing server response times. <strong>Magento 2 offers built-in caching mechanisms like Full Page Cache (FPC)</strong>, which should be properly configured and enabled. For even greater performance gains, <strong>consider using Varnish</strong>, a powerful HTTP reverse proxy and caching application that is highly recommended for Magento 2. Configuring FPC/Varnish to cache frequently accessed pages can dramatically reduce the load on your Magento server and lead to significantly faster TTFB for cached content. They serve pre-generated HTML pages directly from cache, bypassing much of Magento's backend processing for most visitors. Ensure your FPC is correctly configured and enabled.<br>In Magento Admin, check <em>Stores &gt; Configuration &gt; Advanced &gt; System &gt; Full Page Cache</em>. For Varnish, ensure it's selected as the Caching Application.</p>
</li>
<li>
<h4><strong>Redis:</strong></h4>
<p>Utilizing redis, an in-memory data structure store, for caching database queries, sessions, and other frequently accessed data <strong>can also significantly improve performance</strong>.</p>
</li>
<li>
<h4><strong>Database Optimization:</strong></h4>
<p>Minimize and optimize database queries. Ensure database caches (like Redis or Memcached) are enabled and properly configured. <strong>Use indexing effectively</strong>.</p>
</li>
<li>
<h4><strong>Third-Party Module Audit:</strong></h4>
<p>Regularly audit third-party extensions. <strong>Poorly coded modules can significantly slow down server response time</strong>. Disable extensions one by one to identify culprits.</p>
</li>
<li>
<h4><strong>PHP &amp; Magento Version:</strong></h4>
<p>Keep PHP and Magento updated to the latest stable versions, as they often include performance improvements. Run <strong>Magento in production mode</strong>.</p>
</li>
<li>
<h4><strong>BFCache/Preloading/Prerender:</strong></h4>
<p>While not directly for "cold loads" as analyzed e. g. in Google Pag Speed, leveraging Browser features such as <a tabindex="-1" title="Back Forward Cache (bfcache) Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/back-forward-cache-extension-for-magento-2" target="_blank" rel="noopener"><strong>Back/Forward Cache</strong></a>, <a tabindex="-1" title="Smart Speculations Rules Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/smart-speculations-rules-extension-for-magento-2" target="_blank" rel="noopener"><strong>Speculation Rules API</strong></a> and <a tabindex="-1" title="Page Preload Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/page-preload-extension-for-magento-2" target="_blank" rel="noopener"><strong>Page Preloading</strong></a><strong> are highly effective options for reducing LCP</strong> and <strong>CWV field values</strong> and making navigation feel <strong>dramatically faster</strong> and provide a <strong>smoother perceived performance for customers</strong> after the initial first load, by aiming for near "zero-TTFB" on subsequent page loads.</p>
</li>
</ul></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Optimize Critical Rendering Path To Minimize Render-Blocking Resources</h3><div data-content-type="text" data-appearance="default" data-element="main"><p>The <strong>critical rendering path</strong> is the sequence of steps the browser takes to <strong>render the initial view of a web page, </strong>that means convert HTML, CSS, and JavaScript into pixels on the screen.<br>Resources that block this path prevent the browser from painting the page quickly, <strong>directly impacting LCP</strong>.</p>
<ul class="list-disc pl-8 ml-4 marker:text-xl marker:font-bold">
<li>
<h4>Minifying CSS and JavaScript</h4>
<p><strong>Minifying CSS and JavaScript files is a fundamental optimization</strong>. Minification removes unnecessary characters (like whitespace and comments) from code, reducing file sizes.<br>Smaller files download faster and are parsed more quickly by the browser, <strong>allowing the LCP element to appear sooner</strong>.<br>Magento 2 has built-in configuration options for CSS and JavaScript minification<strong><em> </em></strong>in <em>Stores &gt; Configuration &gt; Advanced &gt; Developer</em>. You can also enable merging, but test carefully as merging can sometimes break functionality or decrease performance depending on HTTP/2 usage. Use Magento CLI commands like <em>bin/magento config:set dev/css/minify_files</em> and <em>bin/magento config:set dev/js/minify_files</em>.<br>Hyv&auml; Theme leverages CSS and JS minification by default.</p>
</li>
<li>
<h4>Inlining (Critical) CSS&nbsp;<strong>&amp; Deferring Non-Critical CSS</strong></h4>
<p><strong>Inlining critical CSS is a powerful technique</strong> to eliminate CSS as a render-blocking resource. Critical CSS is the minimal set of CSS required to style the content visible in the initial viewport <strong>(above-the-fold)</strong>. By including this CSS directly within the&nbsp;<em>&lt;head&gt;</em> of your HTML document, the browser can render the above-the-fold content (which often includes the LCP element) without waiting for external CSS files to download. Identifying and inlining critical CSS can be a manual process or automated using various tools.<br>Magento has a built-in "CSS Critical Path" feature (<em>Stores &gt; Configuration &gt; Advanced &gt; Developer</em>), but generating unique critical CSS per page requires custom solutions or extensions.</p>
<p>Deferring non-critical CSS ensures that CSS not needed for the initial view doesn't block rendering . This can be achieved using the <em>media="print" onload="this.media='all'"</em> trick&nbsp;or by loading CSS asynchronously using JavaScript. By loading non-essential CSS later, the browser can <strong>prioritize rendering the LCP element</strong>.</p>
<p>&nbsp;</p>
<p>For Hyv&auml; themes, the&nbsp;<a title="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" href="/en/jajuma-develop/performance-optimization-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Inline CSS extension by JaJuMa</strong></a><strong> takes this optimization a step further</strong> and provides a streamlined solution for this crucial optimization, making it significantly easier to implement. This extension <strong>fully automates the CSS optimization</strong> and generation per page/URL and adds all, but only used styles as inline CSS, making the need to <strong>load any CSS file as well as loading unused CSS obsolete</strong>. Note that Hyv&auml;'s architecture, leveraging Tailwind CSS, already minimizes CSS overheadfile sizes, making this extension even more effective.<br><strong>Removing unused CSS is also crucial for performance.</strong></p>
</li>
<li>
<h4>Defer Non-Critical JS Files</h4>
<p>Similarly, <strong>async or defer</strong> attributes should be used for <strong>non-critical JavaScript files</strong>. The async attribute allows the script to be downloaded without blocking HTML parsing, and it will be executed as soon as it's downloaded <strong>(potentially out of order)</strong>. The defer attribute also downloads the script without blocking parsing, but it will only be executed <strong>in order</strong> after the HTML has been fully parsed. Choosing the appropriate attribute depends on whether the script has dependencies or needs to execute at a specific time, e. g.<strong> </strong>needs to execute before or after the DOM is fully ready.<br>Magento allows moving JS to the bottom (<em>Stores &gt; Configuration &gt; Advanced &gt; Developer &gt; JavaScript Settings &gt; Move JS code to the bottom of the page</em>), which acts similarly to deferring. However, test this carefully as it can break scripts relying on early execution. Exclude critical scripts if needed.<br>Note: With Hyv&auml; Themes, this option should not be used.<br>Several Magento 2 extensions can help with deferring or bundling JavaScript .</p>
</li>
<li>
<h4>Preload Critical Resources &amp; Assets</h4>
<p><strong>Preloading key resources via resource hints</strong> using the <em>&lt;link rel=preload&gt;</em> directive is another effective way to optimize the critical rendering path. <br>This tells the browser to fetch important resources like fonts, hero images (often the LCP element), and critical CSS/JS files with higher priority, even before they are discovered in the HTML. This ensures that these critical assets are available sooner, reducing the load time for the LCP element.<br>For example: <em>&lt;link rel="preload" href="/path/to/lcp-image.webp" as="image"&gt;<br></em>Use preconnect for critical third-party domains (e.g., CDNs, font providers) to speed up connection setup: <em>&lt;link rel="preconnect" href="https://your-cdn.com"&gt;</em>.<br>The <a title="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2" target="_blank" rel="noopener">Preload Critical Resources &amp; Assets extension by JaJuMa</a> simplifies the implementation of resource hints like preload and preconnect, allowing for easy configuration of which critical assets should be prioritized.<br>Another option to boost the loading priority of hero images / LCP is to use <em>fetchpriority="high".<br></em>For example: <em>&lt;img src="/path/to/lcp-image.webp" fetchpriority="high"&gt;</em>.<em><br></em>The <a title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a> by JaJuMa allows to add this attribute to optimized images easily.</p>
</li>
</ul>
<p>&nbsp;</p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Implement Code Splitting And Progressive Loading Techniques</h3><div data-content-type="text" data-appearance="default" data-element="main"><p>Loading all JavaScript, CSS, and content upfront isn't always necessary <strong>or efficient</strong>.<br>These techniques focus on <strong>delivering only the necessary code</strong> and resources initially, <strong>improving the initial load time</strong> and potentially the LCP.</p>
<ul class="list-disc pl-8 ml-4 marker:text-xl marker:font-bold">
<li>
<h4>JS Bundling &amp; Code Splitting</h4>
<p>Splitting JavaScript bundles involves breaking down large JavaScript files into smaller, more manageable chunks based on routes, pages, or components. This allows the browser to download and execute only the JavaScript that is needed for the current page, reducing the initial payload and improving performance.<br>While <strong>Hyv&auml;'s minimal JavaScript approach inherently eliminates the need</strong> for splitting compared to Luma, optimizing Magento 2's JavaScript bundling configurations can still yield benefits for Luma.<br>Magento's built-in JavaScript bundling can sometimes create very large files. While intended to reduce requests, it can negatively impact LCP and INP if the bundle is too big, blocks rendering, or causes excessive main-thread work. Advanced bundling tools (like MagePack) or strategies focusing on splitting bundles based on page type or functionality might be more effective, especially for complex stores. <strong>The goal is to load only the necessary JavaScript for the current view initially</strong>.</p>
</li>
<li>
<h4>Lazy Loading</h4>
<p>This technique <strong>defers the loading of offscreen resources</strong> (especially images and iframes) until the user scrolls near them. This <strong>prioritizes loading critical above-the-fold content</strong> first, significantly improving initial load times and LCP if the LCP element itself is not lazy-loaded. Native browser lazy loading (<em>loading="lazy"</em> attribute on<em> &lt;img&gt;</em> and <em>&lt;iframe&gt;</em> tags) is widely supported and easy to implement (It is crucial to <strong>avoid lazy loading the LCP element itself</strong>, as this would directly delay its appearance):<br><em>&lt;img src="image.jpg" loading="lazy" width="200" height="200" alt="..."&gt;</em><br>Ensure you provide width and height attributes to prevent layout shifts (CLS).<br>This reduces the initial page load time by deferring the loading of resources that are not immediately visible.<br>Both the <a title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a> and the <a title="WebP Optimized Images Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/webp-optimized-images-extension-for-magento-2" target="_blank" rel="noopener">WebP Optimized Images</a> extensions by JaJuMa offer easy-to-configure lazy loading for images, with the essential option to exclude specific images (like the LCP element) from being lazy-loaded .</p>
</li>
<li>
<h4>Placeholders</h4>
<p>Using lightweight placeholders (e.g., solid color blocks, blurred low-quality images (LQIP), or reserving space with CSS) for images, videos, and other dynamically loaded content while they load can&nbsp;<strong>improve perceived performance</strong>, make the wait feel shorter and prevent layout shifts (CLS).</p>
</li>
</ul>
<p>&nbsp;</p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Optimizing Common LCP Elements: Images, Banners, and Media</h3><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Since the LCP element is frequently an image, banner, or video placeholder, optimizing these media assets is paramount.</strong><br><strong>Beyond lazy loading offscreen content, focus on the LCP element itself:<br><br></strong></p>
<ul>
<li><strong>Identify the LCP Element:</strong><br>Use tools like PageSpeed Insights or Lighthouse to pinpoint exactly which element is the LCP on key page types (homepage, category page, product page).<br>It might be a <strong>banner</strong> image, the main <strong>product</strong> image, or even a text block.</li>
<li><strong>Prioritize LCP Loading:</strong><br>Ensure the LCP <strong>image</strong> is discovered and loaded as early as possible.
<ul>
<li><strong>Avoid Lazy Loading the LCP Image:</strong><br>Never apply <em>loading="lazy"</em> to your main LCP image if it's visible above the fold.</li>
<li><strong>Use Preload:</strong><br>Use <em>&lt;link rel="preload" as="image"&gt;</em> for the LCP image source (ensure it matches the srcset source used, if applicable).</li>
<li><strong>Use Fetch Priority:</strong><br>Add <em>fetchpriority="high"</em> to the LCP <em>&lt;img&gt;</em> tag to signal its importance to the browser.</li>
</ul>
</li>
<li><strong>Optimize Image Files:</strong>
<ul>
<li><strong>Compression:</strong><br>Use effective compression tools (like TinyPNG online or server-side tools) to reduce file size without sacrificing visual quality.<br>Or better skip this step and apply the compression when generating next-generation formats WebP or AVIF - see next point.</li>
<li><strong>Modern Formats:</strong><br>Serve images in next-generation formats like WebP or AVIF, which offer better compression than traditional JPG or PNG.<br>Use the <em>&lt;picture&gt;</em> element or server negotiation to provide fallbacks for older browsers.<br>Example:<br><em>&lt;picture&gt;</em><br><em> &lt;source srcset="image.avif" type="image/avif"&gt;</em><br><em>&lt;source srcset="image.webp" type="image/webp"&gt;</em><br><em>&lt;img src="image.jpg" alt="..." width="1000" height="500" fetchpriority="high"&gt;</em><br><em>&lt;/picture&gt;</em></li>
<li><strong>Responsive Images (srcset and sizes):</strong><br>Serve appropriately sized images based on the user's viewport and device resolution using the srcset and sizes attributes.<br>Avoid serving huge desktop-sized images to mobile users.</li>
<li><strong>Explicit Dimensions:</strong><br>Always specify width and height attributes on &lt;img&gt; and &lt;video&gt; tags to prevent layout shifts (CLS) as the media loads.</li>
<li>
<p><strong>LQIP (Low-Quality Image Placeholder):</strong><br>Consider using&nbsp;LQIP (Low-Quality Image Placeholder)&nbsp;to improve perceived performance. This involves displaying a very small, low-resolution version of the image while the full-quality image is loading. This provides immediate visual feedback to the user, making the&nbsp;loading process feel faster. The&nbsp;<a title="Ultimate Image Optimizer Extension for Magento 2" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a> offers various LQIP options, including blurred versions and color-based placeholders.</p>
</li>
</ul>
</li>
<li><strong>Video Optimization:</strong><br>If a video is part of the LCP (usually its poster image), ensure the poster image itself is optimized like any other image. Defer the loading of the actual video player JavaScript until needed.</li>
<li><strong>Use a CDN:</strong><br>Deliver images and videos via a Content Delivery Network (CDN) for faster delivery from servers closer to the user.</li>
</ul>
<p><strong>The <a title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer by JaJuMa</a> and <a title="WebP Optimized Images Extension for Magento 2" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions/webp-optimized-images-extension-for-magento-2" target="_blank" rel="noopener">WebP Optimized Images by JaJuMa</a> extensions can automate many of these image optimization tasks within Magento.</strong></p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Reduce JavaScript Execution And Main Thread Blocking Time</h3><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Long-running JavaScript tasks, </strong>due to excessive or inefficient JavaScript can block the main thread, <strong>delaying</strong> rendering <strong>(impacting LCP)</strong> and making the page unresponsive to user input <strong>(impacting INP)</strong>.</p>
<p>&nbsp;</p>
<ul>
<li><strong>Audit &amp; Remove Unused JS:</strong><br>Identify and remove any JavaScript code, <strong>libraries</strong>, or third-party scripts that are not essential for the page's core functionality <strong>or for the initial view</strong>.</li>
<li><strong>Optimize Third-Party Scripts:</strong><br>Load third-party scripts (analytics, chat widgets, ads, tag managers) asynchronously (`<em>async</em>`) or defer (`<em>defer</em>`) them. Consider if they are truly necessary <strong>on every page load</strong>, as they often impact performance significantly. <strong>Filter scripts to load only when needed.</strong></li>
<li><strong>Code Splitting:</strong><br>Break down large JavaScript bundles into smaller chunks that load only when needed (e.g., load JavaScript for a popup only when the popup is triggered).</li>
<li>Minimize Main-Thread Work: Optimize complex calculations or long-running JavaScript tasks. <strong>Break long tasks (over 50ms) into smaller ones using techniques like `<em>setTimeout</em>` to yield control back to the browser</strong>. Consider using web workers to move non-UI tasks off the main thread.</li>
<li><strong>Reduce DOM Size:</strong><br>An excessively large Document Object Model (DOM) increases memory usage and slows down rendering and script interactions. Avoid creating unnecessary DOM elements.</li>
<li>It's worth noting that the&nbsp;<strong>Hyv&auml; theme's core philosophy</strong> of using minimal JavaScript (primarily Alpine.js) inherently <strong>contributes to reducing JavaScript execution time</strong> compared to more traditional Magento themes. This lightweight approach provides a significant advantage in minimizing JavaScript-related performance bottlenecks. While JaJuMa doesn't offer a specific extension for general JavaScript optimization, utilizing their <strong>extensions for CSS inlining </strong>(<a tabindex="-1" title="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" href="/en/jajuma-develop/performance-optimization-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Inline CSS</strong></a>) and&nbsp;<strong>image optimization</strong> (<a tabindex="-1" title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a>, <a tabindex="-1" title="WebP Optimized Images Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/webp-optimized-images-extension-for-magento-2" target="_blank" rel="noopener">WebP Optimized Images</a>) <strong>can indirectly reduce the workload on the main thread</strong>.</li>
</ul>
<p>&nbsp;</p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Leverage Back/Forward Cache, Preloading And Prerendering For Instant Loads</h3><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Beyond optimizing the initial load, speeding up subsequent navigations significantly enhances the overall user experience and Core Web Vitals field data:</strong></p>
<p>&nbsp;</p>
<ul>
<li><strong>Browser Caching:</strong><br>Ensure static assets (CSS, JS, images, fonts) are served with appropriate cache headers (e.g., `<em>Cache-Control: max-age=...</em>`) so browsers can store them locally and avoid re-downloading them on subsequent visits. <strong>Configure cache lifetimes effectively.</strong></li>
<li><strong>Back/Forward Cache (BFCache):</strong><br>This browser optimization allows for instant loading of previously visited pages when using the back/forward buttons. Ensuring your pages are BFCache-compatible (avoiding `<em>unload</em>` event listeners, etc.) can dramatically improve navigation speed. The <strong><a title="Back Forward Cache (bfcache) Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/back-forward-cache-extension-for-magento-2" target="_blank" rel="noopener">Back Forward Cache (bfcache) Extension for Magento 2</a></strong> helps enabling the bfcache, ensuring compatibility and avoiding UX issues as well as with private/stale data being displayed.</li>
<li><strong>Preloading/Prerendering Next Navigations:</strong><br>Techniques like `<em>&lt;link rel="prefetch"&gt;</em>` or the newer Speculation Rules API (Chromium browsers only) allow the browser to start fetching or even fully render pages the user is likely to visit next during idle time. This can make subsequent page loads feel instantaneous. JaJuMa offers extensions like&nbsp;<strong><a title="Smart Speculations Rules Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/smart-speculations-rules-extension-for-magento-2" target="_blank" rel="noopener">Smart Speculation Rules</a></strong> and <a title="Page Preload Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/page-preload-extension-for-magento-2" target="_blank" rel="noopener"><strong>Page Preload</strong></a> to implement these strategies easily in Magento 2.</li>
<li><strong>Preloading via Resource Hints:</strong><br>As mentioned earlier,&nbsp;<strong>preloading key resources</strong> with <em>&lt;link rel=preload&gt;</em> is crucial for ensuring critical assets like the LCP image or font are fetched early. The <a title="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2" target="_blank" rel="noopener">Preload Critical Resources &amp; Assets extension by JaJuMa</a> simplifies the implementation of this technique .</li>
<li><strong>Service Workers:<br></strong>Service Workers can intercept network requests and serve precached or prerendered responses, leading to faster loading, especially on subsequent visits.&nbsp;<br>While implementing Service Workers can be more complex, they offer significant performance benefits.</li>
</ul>
<p>&nbsp;</p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Optimize Web Fonts For Faster Text Rendering</h3><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>If your <strong>LCP element includes text</strong> styled with a web font or&nbsp;if fonts cause layout shifts (CLS), <strong>optimizing font loading</strong> is essential.<br><br></strong></p>
<ul>
<li><strong>Font Loading Strategy:</strong><br>Use `<em>font-display: swap;</em>` in your `<em>@font-face</em>` declarations. This tells the browser to initially display text using a fallback system font and then swap to the custom font once it loads. This avoids invisible text (FOIT) and ensures content is readable quickly, improving perceived LCP for text elements. <strong>It also helps prevent CLS caused by font swaps.</strong></li>
<li><strong>Preload Fonts:</strong><br>Preload critical font files (especially WOFF2 format) using `<em>&lt;link rel="preload" as="font" type="font/woff2" crossorigin&gt;</em>`.<br>Focus on the fonts&nbsp;<strong>and weights</strong>&nbsp;needed for above-the-fold content.<br>This can be easily configured using the Preload Critical Resources &amp; Assets extension by JaJuMa.</li>
<li><strong>Font Formats:</strong><br>Use modern, efficient font formats like WOFF2, which offers the best compression.</li>
<li><strong>Self-Host Fonts vs. Third-Party:</strong><br>Hosting fonts on your own server&nbsp;<strong>(and serving via your CDN)</strong> often provides more control and potentially better performance than relying on third-party font services (like Google Fonts), especially if you optimize caching and use a CDN. Consider using system fonts (see tip below) to avoid web font loading altogether if design allows.</li>
<li><strong>Subset Fonts:</strong><br>If using custom fonts, subset them to include only the characters (glyphs) actually used on your site, significantly reducing file size.<strong><br></strong></li>
<li><strong>Variable Fonts:</strong><br>Consider <strong>using variable fonts</strong>, which can contain multiple weights and styles within a single file, potentially leading to smaller file sizes compared to loading individual font files for each weight and style.</li>
</ul>
<div class="message success rounded-3xl p-6 mt-6"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512" class="inline-block float-left mr-2 w-16" width="29" height="51" role="img"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"></path><title>awesomeicons6/solid/lightbulb</title></svg>

<blockquote class="py-2.5 px-5 border-l-4 border-secondary-lighter"><strong>TIP:<br></strong>Whenever possible, try to avoid web fonts/font files altogether.<br>Use system fonts instead that are available in clients operating system,<br>see e. g. <a tabindex="-1" href="https://modernfontstacks.com/" target="_blank" rel="noopener nofollow">https://modernfontstacks.com/</a><strong>.<br></strong>Instead of icon fonts, use inline svg icons that can be added easily,<br>e. g. with our <a tabindex="-1" title="SVG Icons for Hyv&auml; Theme" href="/en/jajuma-develop/free-magento-extensions" target="_blank" rel="noopener">free icon pack extensions for Hyv&auml; Theme</a></blockquote>
</div></div><h3 data-content-type="heading" data-appearance="default" data-element="main">Monitor And Measure LCP In The Field And In The Lab</h3><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Continuous monitoring and measurement</strong> are crucial for <strong>identifying LCP issues</strong> and <strong>tracking the impact of your optimization</strong> efforts.</p>
<p>Continuously <strong>track the impact</strong> of any new features or performance optimizations on your LCP score. This helps you understand what works and what doesn't.<br><strong>Analyze the LCP</strong> element itself to understand what is contributing to the loading time. Focus your optimization efforts on this specific element.<br>Remember to <strong>prioritize field data over lab data</strong>, as field data reflects the actual user experience. While lab tools are valuable for debugging, real-world conditions can vary significantly.</p>
<p>&nbsp;</p>
<ul class="list-disc pl-8 ml-4 marker:text-xl marker:font-bold">
<li>
<p><strong>Field Data - Real User Monitoring (RUM):</strong><br>Utilize <strong>RUM (Real User Monitoring)</strong> tools to collect real-world LCP data from your actual users. This provides valuable insights into how your website performs under real-world conditions. The <a title="Real User Monitoring (RUM) extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">Real User Monitoring (RUM) extension</a> (currently in beta) and the <a title="Real User Monitoring (RUM) Power Toy" href="/en/jajuma-develop/performance-optimization-extensions/real-user-monitoring-rum-power-toy-for-magento-2" target="_blank" rel="noopener">Real User Monitoring (RUM) Power Toy</a> by JaJuMa aim to provide this crucial field data directly within the Magento environment together with details and guidance for identifying and prioritizing further optimizations.</p>
</li>
<li>
<p><strong>Lab Data - Lab Tools:</strong><br>Leverage <strong>lab tools</strong> like Lighthouse and Chrome DevTools to measure LCP in a controlled environment during development and testing.<br>These tools provide detailed performance reports and recommendations for improvements.</p>
</li>
</ul></div><h2 data-content-type="heading" data-appearance="default" data-element="main">The Ultimate Magento 2 Luma &amp; Hyv&auml; LCP Optimization Checklist With JaJuMa Extensions</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Below is an <strong>easy-to-read checklist</strong> table that <strong><strong>summarizes key optimization areas and highlights JaJuMa extensions providing automated or enhanced solutions </strong></strong>to help you quickly review and implement the&nbsp;<strong>recommended optimizations:</strong></p>
<p>&nbsp;</p>
<div class="relative overflow-x-auto">
<table class="w-full text-gray-500 text-left">
<thead class="text-gray-700 uppercase bg-gray-50">
<tr>
<th class="px-6 py-3" scope="col">Optimization<br>Technique</th>
<th class="px-6 py-3" scope="col">Magento 2 Implementation</th>
<th class="px-6 py-3" scope="col">JaJuMa Extension(s)</th>
<th class="px-6 py-3" scope="col">Priority</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Optimize TTFB</th>
<td class="px-6 py-4">Choose optimized hosting, configure CDN, enable Magento &amp; Varnish/Redis caching, minimize redirects, audit third-party extensions/themes</td>
<td class="px-6 py-4"><a tabindex="-1" title="Back Forward Cache (bfcache) Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/back-forward-cache-extension-for-magento-2" target="_blank" rel="noopener"><strong>Back/Forward Cache</strong></a>, <br><a tabindex="-1" title="Smart Speculations Rules Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/smart-speculations-rules-extension-for-magento-2" target="_blank" rel="noopener"><strong>Speculation Rules API</strong></a> and <br><a tabindex="-1" title="Page Preload Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/page-preload-extension-for-magento-2" target="_blank" rel="noopener"><strong>Page Preload</strong></a>&nbsp;<br>(for subsequent loads)</td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Minify CSS &amp; JS</th>
<td class="px-6 py-4">Luma: Enable minification in Magento admin<br>Hyv&auml;: Use build tools for Hyv&auml;</td>
<td class="px-6 py-4">N/A</td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Inline (Critical) CSS</th>
<td class="px-6 py-4">Luma: Identify and inline critical CSS manually or using online tools.<br>Hyv&auml;: Inline all used CSS</td>
<td class="px-6 py-4"><a tabindex="-1" title="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" href="/en/jajuma-develop/performance-optimization-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Inline CSS</strong></a></td>
<td class="px-6 py-4">
<p>High</p>
<p>&nbsp;</p>
</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Defer Non-Critical <br>CSS</th>
<td class="px-6 py-4">Luma: Use media attribute or JavaScript-based loading.<br>Hyv&auml;: Not needed</td>
<td class="px-6 py-4">N/A</td>
<td class="px-6 py-4">Medium</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Async/Defer <br>Non-Critical JS</th>
<td class="px-6 py-4">Use async or defer attributes on &lt;script&gt; tags, consider Magento 2 extensions for this</td>
<td class="px-6 py-4">N/A</td>
<td class="px-6 py-4">Medium</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Preload Key <br>Resources</th>
<td class="px-6 py-4">Use &lt;link rel=preload&gt; for LCP image, fonts, critical CSS/JS,<br>fetchpriority="high" for hero images</td>
<td class="px-6 py-4"><strong><a tabindex="-1" title="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2" target="_blank" rel="noopener">Preload Critical Resources &amp; Assets</a><br></strong>and<strong><br><a tabindex="-1" title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener">Ultimate Image Optimizer</a><br></strong></td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Lazy Load <br>Non-LCP Images</th>
<td class="px-6 py-4">Implement lazy loading using browser APIs</td>
<td class="px-6 py-4"><a tabindex="-1" title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener"><strong>Ultimate Image Optimizer</strong></a>, <strong><a tabindex="-1" title="WebP Optimized Images Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/webp-optimized-images-extension-for-magento-2" target="_blank" rel="noopener">WebP Optimized Images</a></strong> (with LCP exclusion)</td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Adopt Next-Gen<br>Image Formats</th>
<td class="px-6 py-4">Convert images to WebP and AVIF</td>
<td class="px-6 py-4"><a tabindex="-1" title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener"><strong>Ultimate Image Optimizer</strong></a>, <strong><a tabindex="-1" title="WebP Optimized Images Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/webp-optimized-images-extension-for-magento-2" target="_blank" rel="noopener">WebP Optimized Images</a></strong></td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Responsive <br>Images</th>
<td class="px-6 py-4">Use srcset and &lt;picture&gt; elements with responsive image versions</td>
<td class="px-6 py-4"><a tabindex="-1" title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener"><strong>Ultimate Image Optimizer</strong></a></td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Provide Image<br>Width/Height</th>
<td class="px-6 py-4">Add width and height attributes to &lt;img&gt; tags</td>
<td class="px-6 py-4"><a tabindex="-1" title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener"><strong>Ultimate Image Optimizer</strong></a></td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Consider LQIP</th>
<td class="px-6 py-4">Implement Low-Quality Image Placeholders</td>
<td class="px-6 py-4"><a tabindex="-1" title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener"><strong>Ultimate Image Optimizer</strong></a></td>
<td class="px-6 py-4">Medium</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Audit/Trim <br>Unused JS</th>
<td class="px-6 py-4">Use browser developer tools to identify and remove unnecessary code</td>
<td class="px-6 py-4">N/A</td>
<td class="px-6 py-4">Medium</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Break Up Long <br>JS Tasks</th>
<td class="px-6 py-4">Refactor code to split long-running tasks</td>
<td class="px-6 py-4">N/A</td>
<td class="px-6 py-4">Medium</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Optimize Web <br>Fonts</th>
<td class="px-6 py-4">Self-host fonts, use font-display: swap, preload critical fonts, subset fonts.<br>Better: Avoid Web Fonts, use System Fonts.<br>Use SVG Icons instead of Icon Fonts</td>
<td class="px-6 py-4"><strong><a tabindex="-1" title="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2" target="_blank" rel="noopener">Preload Critical Resources &amp; Assets</a><br><a tabindex="-1" title="SVG Icons for Hyv&auml; Theme" href="/en/jajuma-develop/free-magento-extensions" target="_blank" rel="noopener">Icon Pack extensions for Hyv&auml; Theme</a><br></strong></td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Bfcache/<br>Prefetch/<br>Prerender <br>Links</th>
<td class="px-6 py-4">Implement Speculation Rules for Chromium Browsers<br>Implement page preloading techniques for other Browsers</td>
<td class="px-6 py-4"><a tabindex="-1" title="Back Forward Cache (bfcache) Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/back-forward-cache-extension-for-magento-2" target="_blank" rel="noopener"><strong>Back/Forward Cache</strong></a>, <br><a tabindex="-1" title="Smart Speculations Rules Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/smart-speculations-rules-extension-for-magento-2" target="_blank" rel="noopener"><strong>Smart Speculation Rules</strong></a>&nbsp;and <br><a tabindex="-1" title="Page Preload Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/page-preload-extension-for-magento-2" target="_blank" rel="noopener"><strong>Page Preload</strong></a>&nbsp;</td>
<td class="px-6 py-4">High</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900" scope="row">Monitor LCP <br>(Field &amp; Lab)</th>
<td class="px-6 py-4">Use tools like Lighthouse, Chrome DevTools + Real User Monitoring</td>
<td class="px-6 py-4"><strong><a tabindex="-1" title="Real User Monitoring (RUM) extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">Real User Monitoring (RUM)</a></strong>,<br><a tabindex="-1" title="Real User Monitoring (RUM) Power Toy" href="/en/jajuma-develop/performance-optimization-extensions/real-user-monitoring-rum-power-toy-for-magento-2" target="_blank" rel="noopener"><strong>Real User Monitoring (RUM) Power Toy</strong></a>, <br>Core Web Vitals Power Toy</td>
<td class="px-6 py-4">High</td>
</tr>
</tbody>
</table>
</div></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Supercharging Your Magento Store: How JaJuMa Extensions Simplify LCP And CWV Optimization</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>While many LCP&nbsp;<strong>and Core Web Vitals</strong> optimizations can be done manually <strong>using native Magento features or custom code</strong>, it often requires <strong>significant technical expertise</strong>, <strong>development time</strong>, and ongoing effort&nbsp;<strong>to implement and maintain effectively</strong>. JaJuMa's suite of <a title="JaJuMa Performance Optimization Extensions" href="/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">Performance Optimization Extensions</a> for Magento 2 (compatible with both Luma and Hyv&auml;, with some specifically designed for Hyv&auml;) automates and simplifies many of these critical tasks, <strong>offering convenience, advanced features, and faster results compared to manual methods</strong>:&nbsp;&nbsp;</p>
<p>&nbsp;</p></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="XC80TIF"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="DVD4VAV"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="NMQQB9J"><figure class="mb-4 md:mb-0 md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="DX8UVY9"><a href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" data-link-type="default" title="Ultimate Image Optimizer Extension for Magento 2" data-element="link"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/ultimate-image-optimizer-extension-for-magento-2/Highlight-Ultimate-Image-Optimizer.png" alt="Ultimate Image Optimizer Extension for Magento 2" title="Ultimate Image Optimizer Extension for Magento 2" data-element="desktop_image" data-pb-style="U13E7T4"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/ultimate-image-optimizer-extension-for-magento-2/Highlight-Ultimate-Image-Optimizer.png" alt="Ultimate Image Optimizer Extension for Magento 2" title="Ultimate Image Optimizer Extension for Magento 2" data-element="mobile_image" data-pb-style="GRYMG2B"></a></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="UULFR9K"><div data-content-type="text" data-appearance="default" data-element="main"><p>The <a tabindex="-1" title="Ultimate Image Optimizer Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/ultimate-image-optimizer-extension-for-magento-2" target="_blank" rel="noopener"><strong>Ultimate Image Optimizer</strong></a> stands out as a comprehensive solution for image-related LCP optimizations. It automates the conversion of images to next-generation formats like WebP and AVIF, generates responsive images for various devices, and ensures that crucial width and height attributes are automatically added to prevent layout shifts. Furthermore, it offers built-in lazy loading functionality for off-screen images while providing the essential option to exclude your LCP element from lazy loading, ensuring it loads immediately. The extension also supports high-priority loading for designated LCP images and offers various Low-Quality Image Placeholder (LQIP) options to improve perceived performance.</p></div></div></div></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="V09MX8G"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="YWKNCGQ"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="AEA33RM"><figure class="mb-4 md:mb-0 md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="TFCQB8A"><a href="/en/jajuma-develop/performance-optimization-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="" data-link-type="default" title="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" data-element="link"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/hyva-inline-css-extension-for-magento-with-hyva-themes/Highlight-Hyva-Inline-CSS.png" alt="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" title="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" data-element="desktop_image" data-pb-style="EAPUT9P"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/hyva-inline-css-extension-for-magento-with-hyva-themes/Highlight-Hyva-Inline-CSS.png" alt="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" title="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" data-element="mobile_image" data-pb-style="DKRJXUI"></a></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="EIDIPS8"><div data-content-type="text" data-appearance="default" data-element="main"><p>For Hyv&auml; theme users, the <a tabindex="-1" title="Hyv&auml; Inline CSS Extension for Magento 2 with Hyv&auml; Themes" href="/en/jajuma-develop/performance-optimization-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes" target="_blank" rel="noopener"><strong>Hyv&auml; Inline CSS</strong></a> extension provides a straightforward way to tackle render-blocking CSS. By automating the process of identifying and inlining critical CSS, this extension eliminates a complex manual task and ensures that all and only the CSS necessary for rendering a page is delivered directly within the HTML, leading to faster initial rendering and improved LCP.</p></div></div></div></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="UMOYTGU"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="IN20TPA"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="PD9JYEN"><figure class="mb-4 md:mb-0 md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="NPQY0AH"><a href="/en/jajuma-develop/performance-optimization-extensions/smart-speculations-rules-extension-for-magento-2" target="" data-link-type="default" title="Smart Speculations Rules Extension for Magento 2" data-element="link"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/smart-speculations-rules-extension-for-magento-2/Smart-Speculations-Rules-Module-Magento-2-small_1.png" alt="Smart Speculations Rules Extension for Magento 2" title="Smart Speculations Rules Extension for Magento 2" data-element="desktop_image" data-pb-style="TAOE8RX"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/smart-speculations-rules-extension-for-magento-2/Smart-Speculations-Rules-Module-Magento-2-small_1.png" alt="Smart Speculations Rules Extension for Magento 2" title="Smart Speculations Rules Extension for Magento 2" data-element="mobile_image" data-pb-style="UP7TIIF"></a></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="NL2QAPP"><figure class="mb-4 md:mb-0 md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="AQUFTP9"><a href="/en/jajuma-develop/performance-optimization-extensions/back-forward-cache-extension-for-magento-2" target="" data-link-type="default" title="Back Forward Cache (bfcache) Extension for Magento 2" data-element="link"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/back-forward-cache-extension-for-magento-2/module_image.png" alt="Back Forward Cache (bfcache) Extension for Magento 2" title="Back Forward Cache (bfcache) Extension for Magento 2" data-element="desktop_image" data-pb-style="IXN1M8D"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/back-forward-cache-extension-for-magento-2/module_image.png" alt="Back Forward Cache (bfcache) Extension for Magento 2" title="Back Forward Cache (bfcache) Extension for Magento 2" data-element="mobile_image" data-pb-style="C576184"></a></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="RGXUHO5"><figure class="mb-4 md:mb-0 md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="JTTXNLX"><a href="/en/jajuma-develop/performance-optimization-extensions/page-preload-extension-for-magento-2" target="" data-link-type="default" title="Page Preload Extension for Magento 2" data-element="link"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/page-preload-extension-for-magento-2/module-image.png" alt="Page Preload Extension for Magento 2" title="Page Preload Extension for Magento 2" data-element="desktop_image" data-pb-style="KKK8DY2"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/page-preload-extension-for-magento-2/module-image.png" alt="Page Preload Extension for Magento 2" title="Page Preload Extension for Magento 2" data-element="mobile_image" data-pb-style="D8ORQEM"></a></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="OWPWV2A"><div data-content-type="text" data-appearance="default" data-element="main"><p>While not directly impacting the initial LCP, extensions like <a tabindex="-1" title="Back Forward Cache (bfcache) Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/back-forward-cache-extension-for-magento-2" target="_blank" rel="noopener"><strong>Back/Forward Cache</strong></a>,&nbsp;<a tabindex="-1" title="Smart Speculations Rules Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/smart-speculations-rules-extension-for-magento-2" target="_blank" rel="noopener"><strong>Speculation Rules API</strong></a> and&nbsp;<a tabindex="-1" title="Page Preload Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/page-preload-extension-for-magento-2" target="_blank" rel="noopener"><strong>Page Preload</strong></a> contribute to a significantly faster and more seamless user experience by speeding up navigation. This improves the overall perception of your store's performance and directly impacts Core Web Vitals field values positively.</p>
<p>&nbsp;</p></div></div></div></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="RXGX74J"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="WCJ6L0B"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="XS97A3S"><figure class="mb-4 md:mb-0 md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="H16SGT2"><a href="/en/jajuma-develop/performance-optimization-extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2" target="" data-link-type="default" title="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" data-element="link"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/resource-hints-preload-critical-resources-assets-extension-for-magento-2/module-image.png" alt="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" title="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" data-element="desktop_image" data-pb-style="DELETMV"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/resource-hints-preload-critical-resources-assets-extension-for-magento-2/module-image.png" alt="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" title="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" data-element="mobile_image" data-pb-style="VRWYQTO"></a></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="BAXDCSH"><div data-content-type="text" data-appearance="default" data-element="main"><p>The <strong><a tabindex="-1" title="Resource Hints: Preload Critical Resources And Assets Extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2" target="_blank" rel="noopener">Preload Critical Resources &amp; Assets</a></strong> extension simplifies the implementation of resource preloading, a vital technique for improving LCP. With this extension, you can easily configure which critical assets, such as your LCP image, key fonts, or critical CSS and JavaScript files, should be preloaded, ensuring they are fetched by the browser as early as possible. This extension also allows for configuring DNS prefetch and preconnect for third-party domains.</p></div></div></div></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="XUEW7GX"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="CBJ9PTW"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="ULYJRNC"><figure class="mb-4 md:mb-0 md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="UODSQUA"><a href="/en/jajuma-develop/performance-optimization-extensions/real-user-monitoring-rum-extension-for-magento-2" target="" data-link-type="default" title="Real User Monitoring (RUM) Extension for Magento 2" data-element="link"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/real-user-monitoring-rum-extension-for-magento-2/module-image.png" alt="Real User Monitoring (RUM) Extension for Magento 2" title="Real User Monitoring (RUM) Extension for Magento 2" data-element="desktop_image" data-pb-style="KDRJG7T"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/real-user-monitoring-rum-extension-for-magento-2/module-image.png" alt="Real User Monitoring (RUM) Extension for Magento 2" title="Real User Monitoring (RUM) Extension for Magento 2" data-element="mobile_image" data-pb-style="FBLO7JF"></a></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="align-center" data-background-images="{}" data-element="main" data-pb-style="A0EE0RR"><div data-content-type="text" data-appearance="default" data-element="main"><p>Finally, the <strong><a tabindex="-1" title="Real User Monitoring (RUM) extension for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">Real User Monitoring (RUM)</a></strong> extension provides valuable insights into your store's LCP performance, Core Web Vitals as well as other prformance KPIs and errors as experienced by real users, enabling you to make data-driven decisions for further optimization.</p></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>By leveraging these tools, you can achieve significant LCP&nbsp;<strong>and overall Core Web Vitals</strong>&nbsp;improvements more efficiently, freeing up time to focus on other aspects of your business. <strong>They provide a streamlined path compared to potentially complex manual configuration and development.</strong></p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">JaJuMa LCP Optimization Extensions Case Studies</h3><div data-content-type="text" data-appearance="default" data-element="main"><p>Don't just take our word for it! See how our extensions have helped real Magento stores achieve dramatic <strong>LCP and overall performance</strong> improvements.<br>Check out our case <strong>studies/showcases</strong> below to see our performance optimization extensions for <strong>top LCP values</strong> in action.<br>A Largest Contentful Paint of 0.8 seconds for both a newly launched shop and a migration from Luma to Hyv&auml; is impressive, right?</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div class="pb-12 lg:pb-16">
    <div class="container mx-auto">
        <div class="flex flex-col gap-8">

            <div class="case-study-item bg-white rounded-2xl shadow-lg border border-gray-200 p-6 lg:p-8 flex flex-col">
                <h3 class="xl:col-span-3 text-2xl text-center font-semibold text-gray-800 !mt-0">
                    Showcase 1: Flowers Retailer<br>Mastering LCP in a Hyvä Project Rescue
                </h3>
                <div class="flex flex-col gap-4 bg-primary-lighter p-6 rounded-2xl shadow-md">
                    <div class="flex flex-col gap-4">
                        <div class="flex flex-col-reverse lg:grid lg:grid-cols-2 items-center gap-4">
                            <p class="text-gray-600 leading-relaxed pl-4">
                                <strong class="font-bold text-gray-700 block text-lg mb-1">Challenge:</strong>
                                This Flowers Retailer <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank"
                                title="JaJuMa Custom Performance Optimization Services for Magento 2 & Hyvä | JaJuMa-Shop"
                                class="text-primary hover:underline font-medium">project was a rescue mission</a>, 
                                with their previous Luma site suffering from a critically poor Largest Contentful Paint (LCP), 
                                a key focus of our optimization guide.
                            </p>
                            <img class="bg-gray-100 h-auto rounded-lg shadow-md"
                            src="https://www.jajuma.de/media//wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Rosemarie-Schulz.jpg"
                            alt="Flowers Retailer's LCP dramatically improved through JaJuMa's Hyvä optimization expertise."
                            loading="lazy" />
                        </div>
                        <p class="text-gray-600 leading-relaxed px-4">
                            <strong class="font-bold text-gray-700 block text-lg mb-1">Solution:</strong>
                            JaJuMa's LCP optimization expertise, central to their Hyvä migration, 
                            involved targeted strategies that slashed LCP times and 
                            <a href="/en/jajuma-develop/performance-optimization-extensions" target="_blank"
                                title="Advanced Performance Optimization Extensions for Magento 2 | JaJuMa-Develop"
                                class="text-primary hover:underline font-medium">revitalized site performance</a>.
                        </p>
                    </div>
                    <div class="flex flex-col gap-4 bg-[#c9f1c9a3] p-5 rounded-2xl shadow-md">
                        <strong class="font-bold text-gray-700 block text-lg">Results:</strong>
                        <ul class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4 text-center lg:text-left">
                            <li class="flex gap-2.5 xl:gap-1 2xl:gap-2.5 p-2.5 w-full shadow-md rounded-xl bg-white/40">
                                <div class="flex flex-col gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="#10b981" class="w-10 h-10">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181">
                                        </path>
                                    </svg>
                                    <span class="text-base font-bold text-gray-500 block leading-tight">CLS</span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <strong class="block text-3xl font-bold text-[#10b981]">-100%</strong>
                                    <span
                                        class="text-base text-left font-bold text-gray-500 mt-1 pl-4 block leading-tight">0.0</span>
                                </div>
                            </li>
                            <li class="flex gap-2.5 xl:gap-1 2xl:gap-2.5 p-2.5 w-full shadow-md rounded-xl bg-white/40">
                                <div class="flex flex-col gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="#10b981" class="w-10 h-10">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181">
                                        </path>
                                    </svg>
                                    <span class="text-base font-bold text-gray-500 block leading-tight">LCP</span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <strong class="block text-3xl font-bold text-[#10b981]">-50%</strong>
                                    <span
                                        class="text-base text-left font-bold text-gray-500 mt-1 pl-4 block leading-tight">0.8</span>
                                </div>
                            </li>
                            <li class="flex gap-2.5 xl:gap-1 2xl:gap-2.5 p-2.5 w-full shadow-md rounded-xl bg-white/40">
                                <div class="flex flex-col gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="#10b981" class="w-10 h-10">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181">
                                        </path>
                                    </svg>
                                    <span class="text-base font-bold text-gray-500 block leading-tight">FCP</span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <strong class="block text-3xl font-bold text-[#10b981]">-46%</strong>
                                    <span
                                        class="text-base text-left font-bold text-gray-500 mt-1 pl-4 block leading-tight">0.7</span>
                                </div>
                            </li>
                            <li class="flex gap-2.5 xl:gap-1 2xl:gap-2.5 p-2.5 w-full shadow-md rounded-xl bg-white/40">
                                <div class="flex flex-col gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="#10b981" class="w-10 h-10">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181">
                                        </path>
                                    </svg>
                                    <span class="text-base font-bold text-gray-500 block leading-tight">TTFB</span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <strong class="block text-3xl font-bold text-[#10b981]">-55%</strong>
                                    <span
                                        class="text-base text-left font-bold text-gray-500 mt-1 pl-4 block leading-tight">0.4</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <a href="/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success"
                        target="_blank"
                        title="Full case study on the Flowers Retailer's LCP optimization and Hyvä rescue."
                        class="font-semibold px-5 py-2.5 inline-flex items-center justify-center gap-1.5 btn btn-primary text-lg lg:text-xl 2xl:text-lg rounded-lg h-full mt-0 shadow-md">
                        Dive into the Flowers Retailer LCP Success <span class="text-2xl">&rarr;</span>
                    </a>
                </div>
            </div>


            <div class="case-study-item bg-white rounded-2xl shadow-lg border border-gray-200 p-6 lg:p-8 flex flex-col">
                <h3 class="xl:col-span-3 text-2xl text-center font-semibold text-gray-800 !mt-0">
                    Showcase 2: Weihnachtsstollen.de<br>Proactive LCP Optimization for Flawless Launch
                </h3>
                <div class="flex flex-col gap-4 bg-primary-lighter p-6 rounded-2xl shadow-md">
                    <div class="flex flex-col gap-4">
                        <div class="flex flex-col-reverse lg:grid lg:grid-cols-2 items-center gap-4">
                            <p class="text-gray-600 leading-relaxed pl-4">
                                <strong class="font-bold text-gray-700 block text-lg mb-1">Challenge:</strong>
                                Weihnachtsstollen.de required exceptional LCP and going "beyond 'only green' Core Web Vitals 
                                from the moment of launch to handle seasonal traffic effectively, a core principle of LCP strategy.
                            </p>
                            <img class="bg-gray-100 h-auto rounded-lg shadow-md"
                            src="https://www.jajuma.de/media//wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Weihnachtsstollen.jpg"
                            alt="Weihnachtsstollen.de achieves excellent LCP at launch with JaJuMa's proactive optimization."
                            loading="lazy" />
                        </div>
                        <p class="text-gray-600 leading-relaxed px-4">
                            <strong class="font-bold text-gray-700 block text-lg mb-1">Solution:</strong>
                            By integrating LCP optimization best practices into the <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank"
                                title="JaJuMa Custom Performance Optimization Services for Magento 2 & Hyvä | JaJuMa-Shop"
                                class="text-primary hover:underline font-medium">Hyvä build</a> from the outset, 
                            JaJuMa ensured Weihnachtsstollen.de launched with an outstanding LCP score.
                        </p>
                    </div>
                    <div class="flex flex-col gap-4 bg-[#c9f1c9a3] p-5 rounded-2xl shadow-md"> <!-- This "Results" section was updated in the previous step -->
                        <strong class="font-bold text-gray-700 block text-lg">Results:</strong>
                        <ul class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4 text-center lg:text-left">
                            <li class="flex gap-2.5 xl:gap-1 2xl:gap-2.5 p-2.5 w-full shadow-md rounded-xl bg-white/40">
                                <div class="flex flex-col gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="#10b981" class="w-10 h-10">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181">
                                        </path>
                                    </svg>
                                    <span class="text-base font-bold text-gray-500 block leading-tight">CLS</span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <strong class="block text-3xl font-bold text-[#10b981]">0</strong>
                                    <span
                                        class="text-base text-left font-bold text-gray-500 mt-1 pl-4 block leading-tight"></span>
                                </div>
                            </li>
                            <li class="flex gap-2.5 xl:gap-1 2xl:gap-2.5 p-2.5 w-full shadow-md rounded-xl bg-white/40">
                                <div class="flex flex-col gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="#10b981" class="w-10 h-10">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181">
                                        </path>
                                    </svg>
                                    <span class="text-base font-bold text-gray-500 block leading-tight">LCP</span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <strong class="block text-3xl font-bold text-[#10b981]">0.8s</strong>
                                    <span
                                        class="text-base text-left font-bold text-gray-500 mt-1 pl-4 block leading-tight"></span>
                                </div>
                            </li>
                            <li class="flex gap-2.5 xl:gap-1 2xl:gap-2.5 p-2.5 w-full shadow-md rounded-xl bg-white/40">
                                <div class="flex flex-col gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="#10b981" class="w-10 h-10">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181">
                                        </path>
                                    </svg>
                                    <span class="text-base font-bold text-gray-500 block leading-tight">FCP</span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <strong class="block text-3xl font-bold text-[#10b981]">0.7s</strong>
                                    <span
                                        class="text-base text-left font-bold text-gray-500 mt-1 pl-4 block leading-tight"></span>
                                </div>
                            </li>
                            <li class="flex gap-2.5 xl:gap-1 2xl:gap-2.5 p-2.5 w-full shadow-md rounded-xl bg-white/40">
                                <div class="flex flex-col gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="#10b981" class="w-10 h-10">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181">
                                        </path>
                                    </svg>
                                    <span class="text-base font-bold text-gray-500 block leading-tight">TTFB</span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <strong class="block text-3xl font-bold text-[#10b981]">0.4s</strong>
                                    <span
                                        class="text-base text-left font-bold text-gray-500 mt-1 pl-4 block leading-tight"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <a href="/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma"
                        target="_blank"
                        title="Case study detailing the LCP optimization for Weihnachtsstollen.de's Hyvä store."
                        class="font-semibold px-5 py-2.5 inline-flex items-center justify-center gap-1.5 btn btn-primary text-lg lg:text-xl 2xl:text-lg rounded-lg h-full mt-0 shadow-md">
                        Learn About Weihnachtsstollen.de's Optimized Launch <span class="text-2xl">&rarr;</span>
                    </a>
                </div>
            </div>

        </div>

    </div>
</div></div><h2 data-content-type="heading" data-appearance="default" data-element="main">FAQ: Your Questions Answered On Magento 2 LCP Optimization</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-942 .chevron::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkzIDcuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCAxMC41ODZsMy4yOTMtMy4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNGwtNCA0YTEgMSAwIDAxLTEuNDE0IDBsLTQtNGExIDEgMCAwMTAtMS40MTR6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PC9zdmc+Cg==);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-942 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 chevron">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>What is a good LCP score for an e-commerce store?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>Google defines a 'Good' LCP score as 2.5 seconds or less. Aiming for this target is crucial for user experience and SEO in competitive e-commerce environments. For a really outstanding user experience, we recommend to aim for a significantly lower value.</p>
<p>&nbsp;</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>How do I know which element is the LCP on my site?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p dir="ltr">You can use browser developer tools like Google Lighthouse (within Chrome DevTools or PageSpeed Insights) or the Performance tab in Chrome DevTools to identify the LCP element. These tools will highlight the specific element that is taking the longest to load.<br>However, it is recommended to prioritize field data over lab data and leverage a RUM (Real User Monitoring) tool to collect data and insights from real customers.&nbsp;</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>Is LCP more important than other Core Web Vitals?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p dir="ltr">LCP, Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) are all important Core Web Vitals that contribute to the overall user experience. LCP focuses on loading performance, which is often the first impression a user has of your site. Optimizing all Core Web Vitals is crucial for a healthy website.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>Will using Hyv&auml; automatically give me a good LCP score?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; provides a fantastic foundation for performance with its lightweight architecture . However, further optimization based on your specific content, images, and configuration is usually necessary to achieve an optimal LCP score and truly maximize your Google rankings and user experience.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>How can I test the impact of my LCP optimizations?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>Use both, lab tools like Lighthouse and field data from tools like JaJuMa's RUM extensions to measure the impact of your optimizations. Regularly monitoring and testing your performance will help you identify what's working and what needs further tweaking.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>Are JaJuMa extensions compatible with the latest version of Magento 2 and Hyv&auml;?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>Yes, JaJuMa is committed to keeping their extensions up-to-date with the latest Magento and Hyv&auml; releases.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-7">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="6">
                                <span>What are the most common mistakes to avoid when optimizing LCP?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-7">
                                <div class="accordion-item-body-content p-4">
                                    <p dir="ltr">Common mistakes include lazy loading the LCP element, not optimizing images properly, having excessive render-blocking resources (CSS and JavaScript), and neglecting TTFB/server performance.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-8">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="7">
                                <span>How often should I monitor my LCP score?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-8">
                                <div class="accordion-item-body-content p-4">
                                    <p>You should monitor your LCP score regularly, especially after deploying any code changes or new features. Keeping an eye on or setting up alerts within your monitoring tools can help you identify performance regressions quickly.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-9">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="8">
                                <span>What role do third-party extensions play in LCP?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-9">
                                <div class="accordion-item-body-content p-4">
                                    <p>Third-party extensions can sometimes introduce performance overhead, including increasing TTFB and adding render-blocking resources. It's important to audit your extensions and remove or replace any that significantly impact your LCP.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-10">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="9">
                                <span>How does mobile LCP differ from desktop LCP, and what specific considerations are there for mobile?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-10">
                                <div class="accordion-item-body-content p-4">
                                    <p>Mobile LCP can often be slower due to slower network connections and less powerful devices. Optimizing images for smaller screens (responsive images), minimizing the initial payload, and ensuring a mobile-first design are crucial considerations for mobile LCP.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-11">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="10">
                                <span>What is the most common cause of poor LCP in Magento?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-11">
                                <div class="accordion-item-body-content p-4">
                                    <p>Common culprits include slow server response times (TTFB), large unoptimized images (especially hero banners), render-blocking CSS/JavaScript (particularly in Luma), and inefficient font loading.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-12">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="11">
                                <span>How do I measure LCP in Magento 2?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-12">
                                <div class="accordion-item-body-content p-4">
                                    <p>Use tools like Google PageSpeed Insights (online) or Lighthouse (in Chrome DevTools). These tools analyze your page and report the LCP time along with identifying the LCP element.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-13">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="12">
                                <span>Can I fix LCP just by upgrading my hosting?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-13">
                                <div class="accordion-item-body-content p-4">
                                    <p>Upgrading hosting can significantly improve TTFB, a key LCP factor. However, frontend optimizations (image compression, critical CSS, deferred JS) are usually still necessary for optimal results. It's typically a combination effort.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-14">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="13">
                                <span>How does Hyv&auml; improve LCP compared to Luma?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-14">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml; replaces Luma's heavy JavaScript (KnockoutJS, RequireJS) and large CSS with lightweight alternatives (Alpine.js, Tailwind CSS), drastically reducing render-blocking resources and improving LCP times out-of-the-box.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-15">
                            <div class="accordion-item-header-942 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="14">
                                <span>Do JaJuMa extensions replace the need for a fast theme like Hyv&auml;?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 chevron">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-15">
                                <div class="accordion-item-body-content p-4">
                                    <p>Our extensions work with both Luma and Hyv&auml; to optimize specific areas. While they can significantly improve Luma's performance, combining them with a fundamentally fast theme like Hyv&auml; typically yields the absolute best results, as Hyv&auml; provides a superior performance foundation.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    </div><h2 data-content-type="heading" data-appearance="default" data-element="main">Key Takeaways</h2><div data-content-type="text" data-appearance="default" data-element="main"><ul class="list-disc pl-8 ml-4">
<li><strong>Core Web Vitals (LCP, INP, CLS) are crucial:</strong> They directly impact user experience, SEO rankings, and conversion rates for Magento stores.</li>
<li><strong>Hyv&auml; Advantage:</strong> Magento's Luma theme often presents Core Web Vitals challenges; Hyv&auml; provides a fast foundation for LCP &amp; CWV optimization due to their lightweight architecture.</li>
<li><strong>Key LCP Factors:</strong> Include TTFB, render-blocking resources, resource load times (especially images/banners), JS execution (main-thread work), and font loading.</li>
<li><strong>Optimize LCP:</strong> Through server improvements (hosting, CDN, caching like Varnish), critical path optimization (minify, inline CSS, defer JS, preload), prioritized LCP element loading (`fetchpriority`, no lazy load), media optimization (formats, compression, responsive images, lazy load offscreen), and font strategies (`font-display: swap`, preload).</li>
<li><strong>Many optimizations for LCP also positively impact INP:</strong> E.g., reducing JS execution and CLS (e.g., image dimensions, font optimization).</li>
<li><strong>JaJuMa Power:</strong> Manual optimization is possible but can be complex; JaJuMa extensions can automate and simplify many LCP/performance best-pactices and optimization tasks for both Luma and Hyv&auml;.</li>
<li><strong>Focus on TTFB:</strong> A fast server response is essential for a good LCP.</li>
<li><strong>Optimize Images:</strong> Use next-gen formats, responsive images, and avoid lazy loading the LCP element.</li>
<li><strong>Minimize Blocking Resources:</strong> Inline (critical) CSS and defer non-critical CSS/JS.</li>
<li><strong>Monitor Regularly:</strong> Track your LCP score using field (RUM) and lab tools (Lighthouse) to ensure your optimizations are effective and to maintain good scores.</li>
</ul>
<p>&nbsp;</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Conclusion</h2><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Optimizing Largest Contentful Paint and all Core Web Vitals</strong> is no longer optional for serious Magento 2 store owners.<br>It's a <strong>fundamental aspect</strong> of providing a <strong>positive user experience</strong>, <strong>maximizing conversions</strong>, and <strong>achieving strong SEO performance</strong>.<br>While the journey might seem complex, especially with the Luma theme, understanding the key factors and implementing targeted strategies &ndash; potentially accelerated by tools like <strong>JaJuMa extensions</strong> and the <strong>performance foundation of Hyv&auml; themes</strong> &ndash; can lead to <strong>significant improvements</strong>.</p>
<p>&nbsp;</p>
<p>Start by <strong>measuring your current Core Web Vitals</strong>, identify your biggest bottlenecks (<strong>paying close attention to LCP, INP, and CLS</strong>), and implement the strategies outlined in this guide. Remember that performance optimization is an ongoing process, so keep monitoring, testing, and refining your approach to keep your Magento 2 store running at lightning speed and <strong>delivering an excellent user experience that meets Google's standards</strong>.</p>
<p>&nbsp;</p>
<p>We encourage you to take the steps outlined in the checklist and explore how JaJuMa extensions can help you supercharge your Magento 2 store with Hyv&auml; or Luma.<br>Visit the <a class="text-primary hover:underline" title="Your Expert Resources about Hyv&auml;: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>JaJuMa Hyv&auml;verse</strong></a> and <a title="Performance Optimization Extensions for Magento 2" href="/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">Performance Optimization Extensions </a>to learn more and start optimizing your store's performance today.</p>
<p>&nbsp;</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Ready To Boost Your Magento 2 Store's Speed and Core Web Vitals?</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Looking to achieve top Google rankings and excellent user experienece?<br>Start implementing these LCP optimization techniques today and see the difference in your user experience and SEO!<br>Explore JaJuMa's Performance Optimization Extensions or contact us for expert Magento performance tuning services:</p>
<p>From developing powerful stores to optimizing your performance and customizing your system&rsquo;s extension &ndash; JaJuMa offers comprehensive Magento services that drive your business forward. Let&rsquo;s achieve your goals together!&nbsp;<strong><a tabindex="-1" title="Contact us!" href="https://www.jajuma.de/en/contact" target="_blank" rel="noopener">Contact us for a free &amp; non-binding consultation.</a></strong></p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div></div></div>]]></description>
              <pubDate>Sat, 05 Apr 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa-Develop]]></category>
           </item>
       <item>
      <title>Battling the Bots: The Ultimate Guide to Magento 2 Spam Protection &amp; Fake Registrations</title>
      <link>https://www.jajuma.de/en/blog/battling-the-bots-the-ultimate-guide-to-magento-2-spam-protection</link>
      <guid>https://www.jajuma.de/en/blog/battling-the-bots-the-ultimate-guide-to-magento-2-spam-protection</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=KJ51O2G],#html-body [data-pb-style=WE8T7VT]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=WE8T7VT]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=KJ51O2G]{align-self:stretch}#html-body [data-pb-style=AB7FYL1]{display:flex;width:100%}#html-body [data-pb-style=FQR1AOY],#html-body [data-pb-style=WUY500V]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=I6C5U5K]{border-style:none}#html-body [data-pb-style=LFMAO4K],#html-body [data-pb-style=O8MBN8Y]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=AFMMWKA]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=V4QRY0F]{display:flex;width:100%}#html-body [data-pb-style=HC5DQW1]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:33.3333%;align-self:stretch}#html-body [data-pb-style=U4BGFEX]{border-style:none}#html-body [data-pb-style=I5XYM0Y],#html-body [data-pb-style=P9FMGQF]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=OQX9113]{justify-content:flex-start;display:flex;flex-direction:column;width:66.6667%}#html-body [data-pb-style=OQX9113],#html-body [data-pb-style=YUMRSE7]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=AU4R2NL]{display:flex;width:100%}#html-body [data-pb-style=LMFVL7X],#html-body [data-pb-style=QBOQ3OD]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:66.6667%;align-self:stretch}#html-body [data-pb-style=QBOQ3OD]{width:33.3333%}#html-body [data-pb-style=LN4ELMA]{border-style:none}#html-body [data-pb-style=DRWTPPH],#html-body [data-pb-style=YVWLJC9]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=B7DSBXY]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=Q24EFP1]{display:flex;width:100%}#html-body [data-pb-style=AWF6YV7],#html-body [data-pb-style=GYOOACY]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:75%;align-self:stretch}#html-body [data-pb-style=GYOOACY]{width:25%}#html-body [data-pb-style=KU28LSE]{border-style:none}#html-body [data-pb-style=CKQMDG9],#html-body [data-pb-style=DQ7XG79]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=S1SW022]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=JC8S0QN]{display:flex;width:100%}#html-body [data-pb-style=NFT3FAC],#html-body [data-pb-style=VWIJCNJ]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=RGOIXYA]{border-style:none}#html-body [data-pb-style=U04WKQJ],#html-body [data-pb-style=VFO5VAG]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=GCHD66E]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}@media only screen and (max-width: 768px) { #html-body [data-pb-style=I6C5U5K],#html-body [data-pb-style=KU28LSE],#html-body [data-pb-style=LN4ELMA],#html-body [data-pb-style=RGOIXYA],#html-body [data-pb-style=U4BGFEX]{border-style:none} }</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="WE8T7VT"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="KJ51O2G"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="AB7FYL1"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="WUY500V"><div data-content-type="text" data-appearance="default" data-element="main"><p>The world of e-commerce is a dynamic and exciting place, but it also comes with its fair share of digital nuisances. One of the most persistent headaches for Magento 2 store owners is the<strong> relentless tide of spam bots</strong>.</p>
<p>&nbsp;</p>
<p>These automated programs wreak havoc, <strong>flooding contact forms, comment sections, and review areas</strong> with unwanted content. <strong>Critically, they also target your customer registration forms</strong>, creating thousands of fake accounts that cause spammy confirmation emails being sent from your store, bloat your database, skew analytics, and can be used for further abuse.&nbsp;</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="FQR1AOY"><figure class="hero md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="I6C5U5K"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Battling-the-Bots-The-Ultimate-Guide-to-Magento-2-Spam-Protection.png" alt="Magento 2 spam protection and fake registration prevention guide banner" title="Magento 2 spam protection and fake registration prevention guide banner" data-element="desktop_image" data-pb-style="O8MBN8Y"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Battling-the-Bots-The-Ultimate-Guide-to-Magento-2-Spam-Protection.png" alt="Magento 2 spam protection and fake registration prevention guide banner" title="Magento 2 spam protection and fake registration prevention guide banner" data-element="mobile_image" data-pb-style="LFMAO4K"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Fake customer registration spam</strong> is a major headache for many Magento merchants. But fear not! This guide is your comprehensive battle plan to understand, combat, and <strong>ultimately conquer all types of spam, including fake account creation</strong>, in your Magento 2 store. Get ready to arm your store against the bot armies!</p>
<p>&nbsp;</p>
<p>This comprehensive guide provides Magento agencies, developers, and store owners with actionable strategies to combat <strong>all forms of spam</strong>, with a <strong>special focus on preventing fake account creation</strong>. We'll delve into:</p>
<p>&nbsp;</p>
<ul class="list-disc ml-4">
<li>Understanding the<strong> types of spam targeting Magento 2</strong>, including registration bots.</li>
<li>Detailed explanations of core <strong>spam protection methods</strong> (CAPTCHA, Honeypots, Time Checks, Rate Limiting, etc.).</li>
<li>Specific techniques to <strong>restrict fake registrations</strong>.</li>
<li>Comparing methods based on effectiveness, privacy (GDPR), and performance (CWV).</li>
<li>An overview of effective Magento 2 anti-spam extensions.</li>
<li>Building a robust, layered defense strategy for your store.</li>
</ul>
<p>&nbsp;</p>
<p>Let's equip your Magento 2 site with the <strong>defenses needed to repel bots and ensure genuine interactions</strong>.</p>
<p>&nbsp;</p>
<blockquote class="p-2 my-2 border-s-2 border-gray-300 bg-gray-50">
<p class="italic leading-relaxed text-gray-900">&ldquo;Guard the gates, Magento's shield,<br>Where bots attack and chaos yields.<br>Fake registrations swept away,<br>True users find their rightful stay.<br>Victory shines, defenses strong,<br>Spam defeated, we march along.&rdquo;</p>
</blockquote>
<p>&nbsp;</p>
<p>Ignoring spam isn't an option. It wastes your time, skews your data, and can even pose security risks. That's why&nbsp;<strong>having a robust spam protection strategy is crucial</strong> for any serious Magento 2 merchant, agency, or developer.</p>
<p>&nbsp;</p>
<p>This comprehensive guide dives deep into the realm of Magento 2 spam protection. We'll explore the different <strong>types of spam</strong> you might encounter, the most <strong>effective methods to combat them</strong>, and a look at some of the <strong>top ready-made solutions</strong> available.</p>
<p><strong>Get ready to arm your store against the bot armies!</strong></p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Know Your Enemy: Understanding the Types of Spam Targeting Magento 2</h2><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="AFMMWKA"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="V4QRY0F"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="HC5DQW1"><figure class="md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="U4BGFEX"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Types-Of-Spam-Targeting-Magento-2.png" alt="Illustration showing different types of Magento 2 spam like fake registrations and bot comments" title="Illustration showing different types of Magento 2 spam like fake registrations and bot comments" data-element="desktop_image" data-pb-style="P9FMGQF"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Types-Of-Spam-Targeting-Magento-2.png" alt="Illustration showing different types of Magento 2 spam like fake registrations and bot comments" title="Illustration showing different types of Magento 2 spam like fake registrations and bot comments" data-element="mobile_image" data-pb-style="I5XYM0Y"><figcaption data-element="caption">Illustration showing different types of Magento 2 spam like fake registrations and bot comments</figcaption></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="OQX9113"><div data-content-type="text" data-appearance="default" data-element="main"><p>Before you can effectively defend your Magento 2 store, you need to understand the <a title="different forms of spam" href="https://www.nutshell.com/blog/8-ways-to-combat-form-spam" target="_blank" rel="noopener nofollow">different forms that spam can take</a>. Here are some common culprits:</p>
<ul class="list-disc ml-4 my-4">
<li><strong>Automated Bot Spam:</strong> These are scripts designed to rapidly fill out forms with irrelevant or malicious content. They can target any form on your site, from customer registration, contact pages to newsletter sign-ups.</li>
<li><strong>Manual Spam Submissions:</strong> While less frequent, individuals might intentionally submit unwanted content through your forms.</li>
<li><strong>Comment Spam:</strong> Often found in blog comments, this type of spam typically includes promotional links or nonsensical text aimed at boosting SEO or driving traffic to shady websites.</li>
<li><strong>Fake Spam Reviews:</strong> Mass spam and fake product reviews, trying to inject links to malicious websites or even Cross-Site-Scripting (XSS) attacks.</li>
<li><strong>Checkout Spam:</strong> Fraudulent orders placed by bots or malicious actors targeting your checkout process.</li>
<li><strong id="docs-internal-guid-8332415f-7fff-0fb2-c1b1-af035a9315a6">Catalog Search Spam: </strong>Abusing the search functionality with excessive or irrelevant keywords to manipulate search results. Or trying to find security vulnerabilities via (blind) SQL injections.</li>
</ul></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<ul class="list-disc ml-4 my-4">
<li><strong>Fake Account Registrations</strong> / <strong>Customer Registration Spam</strong>: This is one of the most persistent and damaging forms of spam for Magento 2 stores. Bots relentlessly create numerous dummy customer accounts, often using fake or temporary email addresses and nonsensical names. Why do they do this?&nbsp; These fake accounts cause spam confirmation emails being sent from your store pollute your customer database, waste server resources, skew marketing data, and can be used later for malicious activities like:<br><br>
<ul class="list-disc ml-4 my-4">
<li>Placing spam comments or fake reviews.</li>
<li>Exploiting vulnerabilities or attempting unauthorized actions.</li>
<li>Scraping sensitive data (if they gain further access).</li>
<li>Testing stolen credit card details (sometimes linked to checkout spam).</li>
<li>Simply overwhelming your system.<br><br>Many Magento merchants struggle with waves of fake signups, particularly from specific TLDs like.ru or.cn. Effectively restricting fake registrations is crucial for maintaining a clean database and a secure store.</li>
</ul>
</li>
</ul>
<p>The sophistication of these spam tactics varies, from <span>simple</span> scripts to <a title="advanced bots using AI" href="https://datadome.co/guides/captcha/recaptchav2-recaptchav3-efficient-bot-protection/" target="_blank" rel="noopener nofollow">advanced bots using AI</a>.<br><strong>A strong spam protection strategy needs to address this diverse threat landscape.</strong></p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Your Arsenal: Common Spam Protection Methods for Magento 2</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Fortunately, there are <strong>several well-established methods</strong> you can employ to <strong>protect your Magento 2 store from spam</strong>. <br>Many of these can even be used in combination for a more robust defense.</p></div><h3 data-content-type="heading" data-appearance="default" data-element="main">CAPTCHA &amp; reCAPTCHA: Proving You're Human</h3><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="YUMRSE7"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="AU4R2NL"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="LMFVL7X"><div data-content-type="text" data-appearance="default" data-element="main"><p>CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) presents challenges that are easy for humans to solve but difficult for bots. This could involve identifying distorted text, selecting specific images, or solving simple puzzles.</p>
<p>Google's reCAPTCHA is a popular and effective implementation. reCAPTCHA v2 typically asks users to click an "I'm not a robot" checkbox or solve visual/audio challenges. reCAPTCHA v3 works invisibly in the background, analyzing user behavior to assign a risk score without requiring direct interaction. <a href="https://experienceleague.adobe.com/en/docs/commerce-admin/systems/security/captcha/security-captcha" target="_blank" rel="noopener nofollow">Magento 2 has built-in CAPTCHA functionality</a> and supports Google reCAPTCHA.</p>
<p>While effective against simpler bots, many Magento users report that even Google reCAPTCHA (especially v2) <strong>doesn't completely stop sophisticated registration spam</strong>. Furthermore, CAPTCHAs can <strong>negatively impact user experience and conversion rates,</strong> and reliance on third-party services like Google raises <strong>privacy concerns</strong> under GDPR. Magento itself offers built-in CAPTCHA functionality, but often requires enhancement for robust protection.</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="QBOQ3OD"><figure class="md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="LN4ELMA"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Types-Of-Spam-Protection-For-Magento-2.png" alt="Types Of Spam Protection For Magento 2" title="Types Of Spam Protection For Magento 2" data-element="desktop_image" data-pb-style="YVWLJC9"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/develop/Types-Of-Spam-Protection-For-Magento-2.png" alt="Types Of Spam Protection For Magento 2" title="Types Of Spam Protection For Magento 2" data-element="mobile_image" data-pb-style="DRWTPPH"><figcaption data-element="caption">Types Of Spam Protection For Magento 2</figcaption></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>However, while&nbsp;<strong>(re)CAPTCHA</strong> seems to be an easy solution, it comes with <strong>significant downsides</strong>:<br><br></p>
<ul class="list-disc ml-4">
<li>User experience with CAPTCHAS is considered very bad - who likes solving these annoying challenges anyway?</li>
<li>CAPTCHAS come with a performance penalty due to scripts, fonts and styles that need to be downloaded and processed by the Browser.</li>
<li>If loaded from a 3rd party server, CAPTCHAs additionally impose a GDPR and privacy issue for your customers.</li>
</ul></div><div data-content-type="text" data-appearance="default" data-element="main"><h3>Honeypot Techniques: Setting a Trap for Bots</h3>
<p>Honeypots are a popular technique for <strong>securing Magento forms</strong>, including <strong>customer registration</strong> and <strong>contact forms</strong>, because they are invisible to real users and <strong>don't interrupt the user experience</strong>. They work by adding hidden fields that only bots are likely to fill out. If the field contains data upon submission, the system flags it as spam. These fields are usually hidden using CSS or JavaScript, and using generic names like "email" or "phone" can further entice bots. Many Magento 2 extensions utilize <a title="Jajuma Honey Spam Anti-Spam Extension for Magento 2" href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" rel="noopener"><strong>honeypot techniques due to their effectiveness and minimal impact on user experience</strong></a>.<br>However, basic honeypots can sometimes be detected and bypassed by more advanced bots. Therefore, relying solely on a simple hidden field might not be sufficient for complete protection against persistent fake account creation.</p>
<h3>Time Checks: Detecting Rapid Submissions</h3>
<p>Time checks involve measuring the time taken to submit a form. Abnormally <strong>fast submissions can indicate automated bot activity</strong>. The JaJuMa Honey Spam extension utilizes this technique, not only to detect and block bots that submit forms too quickly, but also as an additional kind of honeypot to detect if bots have tempered the form before submitting.</p>
<p>This method is <strong>particularly useful for identifying bots attempting rapid-fire fake registrations</strong>, as humans require a minimum amount of time to fill out fields like name, email, and password. However, some advanced bots may introduce artificial delays to circumvent basic time checks.</p>
<p>The JaJuMa Honey Spam extension utilizes&nbsp;<strong><a title="Jajuma Honey Spam Anti-Spam Extension for Magento 2" href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" rel="noopener">sophisticated time checks</a></strong>, not just blocking overly fast submissions but also <strong>detecting if bots tamper</strong> with timestamps, adding <strong>another layer of defense beyond simple honeypots</strong>.&nbsp;</p>
<h3>Rate Limiting: Slowing Down the Spammers</h3>
<p>Rate limiting restricts the number of requests or submissions from a specific user or IP address within a given timeframe. This can prevent bots from overwhelming your server with excessive form submissions, login attempts, or search queries. Rate limiting can be based on IP address, user session, or even geographical location. For Magento 2, this can be configured at the server level or through extensions to control form submissions, account creation, and catalog searches.</p>
<p>Rate limiting is essential for <a tabindex="-1" title="Credential Stuffing Prevention - OWASP Cheat Sheet Series" href="https://cheatsheetseries.owasp.org/cheatsheets/Credential_Stuffing_Prevention_Cheat_Sheet.html" target="_blank" rel="noopener nofollow">preventing brute-force login attempts</a> and can also help mitigate large-scale <strong>fake customer registration</strong> campaigns originating from a single IP address or session. By limiting the number of registration attempts allowed within a specific timeframe, you can slow down automated attacks. Configuration can often be done at the web server level (e.g., Nginx, Apache) or via Magento extensions. See rate limiting best practices for effective implementation. Note that highly distributed botnets using many different IPs may still bypass simple IP-based rate limiting.</p>
<h3>Server-Side Validation: The Last Line of Defense</h3>
<p>Server-side validation <strong>verifies user input on the server after a form submission</strong>. This ensures data integrity and helps identify malicious content that might have bypassed client-side checks. Techniques include re-checking field formats, looking for <strong>spam keywords and patterns</strong>, verifying file uploads, and integrating with third-party anti-spam services. While Magento 2 has built-in validation, extensions can offer more <strong>advanced and targeted spam detection via flexible server-side validation spam detection rules and spam scoring</strong>.</p>
<p><strong><a title="Jajuma Honey Spam Anti-Spam Extension for Magento 2" href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" rel="noopener">Server-side validation is non-negotiable</a></strong> for security, as client-side validation can be easily bypassed. For spam protection, especially <strong>against fake registrations</strong>, this goes beyond checking required fields or email formats. <strong>Advanced server-side validation involves analyzing submitted data for suspicious patterns often used by bots</strong>. Techniques include:</p>
<p>&nbsp;</p>
<ul class="list-disc ml-4">
<li>Checking for <strong>known spam keywords or links</strong> in form fields.</li>
<li>Validating form fields against <strong>common spam words</strong> ("test", "dummy"), <strong>character limits or any other pattern typical to spam</strong>.</li>
<li>Blocking <strong>registrations from specific TLDs</strong> (.ru,.cn) or disposable email domains.</li>
<li>Implementing <strong>IP address and/or user-agent blacklisting</strong>.</li>
<li>Utilizing <strong>sophisticated scoring systems</strong>: This involves defining rules that check various aspects of the submission (e.g., content patterns, user agent, submission time relative to others) and assigning points. If the total score exceeds a threshold, the submission is flagged as spam. This allows for <strong>flexible and nuanced detection of complex bots</strong>.</li>
</ul>
<p>&nbsp;</p>
<p>Always follow&nbsp;<a title="Magento secure coding practices" href="/en/blog/magento-security-and-coding-standard-disallow-insecure-functions-exec-shell_exec-system" target="_blank" rel="noopener">secure coding practices</a> when implementing validation.</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Choosing Your Weapons: Analyzing Spam Protection Methods</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Each <strong>spam protection</strong> method has its own strengths and weaknesses when it comes to <strong>effectiveness, privacy, and performance</strong>.</p>
<h3>No More Spam - Finally: True 100% Effective Spam Protection</h3>
<p>None of the available spam detection methods is perfect, each has its down- and upsides and each can be bypassed one or the other way by certain types of spam.<br>The only truly 100% <strong>effective spam protection can be provided by a layered approach</strong> that combines different spam protection methods and allows fine-tuning on demand as needed when new kinds of spam emerges.<br>Ideally, one of these layers is a <strong>server-side validation as "swiss army knife" of spam detection</strong>, allowing highly targeted <strong>spam detection that can be adjusted and fine-tuned to detect any current as well as future spam</strong>. By allowing granular spam detection based on literally any form submission characteristic such as IP-Adress, Email-Domain, User-Agent, Form Field content... based on unlimited/unrestricted matching rules and patterns and flexible spam scoring for each rule.</p>
<h3>Staying Compliant: GDPR/Privacy and Spam Protection</h3>
<p><strong>If your business operates in the EU or serves EU customers, GDPR compliance is a must.</strong> When choosing spam protection methods, consider their impact on user privacy. Transparency is key &ndash; inform users about the use of spam protection and any associated data processing. Obtain consent when using methods like reCAPTCHA that involve data collection. Prioritize privacy-friendly options like honeypots, time checks or server-side validation. Regularly review your privacy policies and data processing agreements.</p>
<h3>Speed Matters: Performance Optimization</h3>
<p><a title="LCP &amp; CWV Optimization - The Ultimate Guide for Magento 2 &amp; Hyv&auml;" href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" target="_blank" rel="noopener">Website performance and Core Web Vitals are crucial for user experience and SEO</a>. Choose <strong>lightweight spam protection methods like honeypots and efficient server-side validation to minimize performance impact</strong>. Avoid or at least optimize CAPTCHA implementations. Monitor your website performance after implementing any spam protection measures. Some extensions are specifically designed for performance without compromising security.</p>
<h3>Lets Put The Pieces Together: Comparing Spam Protection Methods</h3>
<div class="relative overflow-x-auto">
<table class="w-full text-gray-500" border="1"><caption>Comparison table analyzing Magento 2 spam protection methods effectiveness and GDPR impact</caption>
<thead class="text-gray-700 uppercase bg-gray-50">
<tr>
<th class="px-6 py-3" scope="col">Method</th>
<th class="px-6 py-3" scope="col">Effectiveness Against Spam</th>
<th class="px-6 py-3" scope="col">Privacy/GDPR Implications</th>
<th class="px-6 py-3" scope="col">Performance/Core Web Vitals Impact</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">CAPTCHA/reCAPTCHA</th>
<td class="px-6 py-4">Good against basic to moderately sophisticated bots; less effective against advanced bots and manual spam.<br>Bad user experience.</td>
<td class="px-6 py-4">reCAPTCHA v2/v3 involve data collection by Google or other 3rd parties, requiring GDPR compliance.</td>
<td class="px-6 py-4">Can increase page load times due to external scripts, potentially impacting Core Web Vitals.</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">Honeypot Techniques</th>
<td class="px-6 py-4">Effective against many automated bots; less effective against sophisticated bots and manual spam.</td>
<td class="px-6 py-4">No privacy implications as they don't typically collect extra personal data.</td>
<td class="px-6 py-4">No performance impact.</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">Time Checks</th>
<td class="px-6 py-4">Effective against bots submitting forms too quickly.</td>
<td class="px-6 py-4">No privacy implications.</td>
<td class="px-6 py-4">Minimal performance impact.</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">Rate Limiting</th>
<td class="px-6 py-4">Effective against bots flooding forms or carrying out brute-force attacks; less effective against distributed botnets and manual spam.</td>
<td class="px-6 py-4">IP-based rate limiting involves tracking IP addresses, which can be personal data under GDPR.</td>
<td class="px-6 py-4">Negligible impact if configured efficiently; poor configuration can affect user experience.</td>
</tr>
<tr>
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">Server-Side Validation</th>
<td class="px-6 py-4">Can be highly effective against various spam types depending on the checks implemented; requires continuous updates to remain effective.</td>
<td class="px-6 py-4">Privacy implications depend on the checks performed; integration with third-party services might involve data sharing.</td>
<td class="px-6 py-4">No CWV impact. Can potentially increase server processing time; optimization is key to minimize impact.</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">The Magento 2 Anti-Spam Arsenal: Exploring Ready-Made Solutions</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>The Magento 2 marketplace and extension ecosystem offers a wide array of extensions designed to provide comprehensive spam and bot protection. These often combine multiple techniques for a more robust defense. Let's take a look at some examples:</p>
<p>&nbsp;</p>
<div class="relative overflow-x-auto">
<table class="w-full text-gray-500">
<thead class="text-gray-700 uppercase bg-gray-50">
<tr>
<th class="px-6 py-3" scope="col">Extension Name</th>
<th class="px-6 py-3" scope="col">Key Features</th>
<th class="px-6 py-3" scope="col">CAPTCHA/<br>Honeypot/<br>Time Checks/<br>Rate Limiting/<br>Server-Side Validation</th>
<th class="px-6 py-3" scope="col">Other Notable Features</th>
<th scope="col">Primary Focus</th>
<th class="px-6 py-3" scope="col">GDPR Focus/<br>Performance Focus</th>
<th class="px-6 py-3" scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b border-gray-200">
<th class="px-3 py-2 text-gray-900" scope="row"><a tabindex="-1" title="JaJuMa Honey Spam Anti-Spam Extension for Magento 2" href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" rel="noopener">JaJuMa Honey Spam Anti-Spam Extension</a></th>
<td class="px-3 py-2">Advanced &amp; Effective spam protection<br><strong id="docs-internal-guid-878759b4-7fff-8f4a-6e57-9a64152775ba">(Honeypot + Time Check + Scoring Rules - <strong id="docs-internal-guid-f98c8353-7fff-b0ce-cf16-d5ceb8459aa9">No CAPTCHA Required</strong>)</strong>, flexible blocking (IP, User-Agent, form content).<br><strong>Hyv&auml; compatible</strong></td>
<td class="px-3 py-2">&#10060;/<br><strong>&#9989;</strong>/<br><strong>&#9989;</strong>/<br><strong>&#9989;</strong> <br>(via time checks &amp; scoring rules)/<br><strong>&#9989;</strong><br>(via pattern matching &amp; scoring rules)</td>
<td class="px-3 py-2">Time checks, 100% local solution.<br>Individual detection configs per form,&nbsp; flexible scoring rules, pattern matching<br><a tabindex="-1" title="Honey Spam Anti-Spam Power Toy" href="/en/jajuma-develop/magento-power-toys-extensions/honey-spam-power-toy-for-magento-2" target="_blank" rel="noopener">Power Toy for easy monitoring,</a> Customizable action on spam detection.<br>Detailed logging of blocked spam (Logfiles/DB).</td>
<td><strong>All-In-One solution:</strong><br>Supports all forms (default Magento &amp; custom), product/catalog search form (incl. advanced search),<br>checkout protection (Luma &amp; Hyv&auml;)</td>
<td class="px-3 py-2"><strong>&#9989;</strong>/<strong>&#9989;</strong></td>
<td class="px-3 py-2">149,- &euro;</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-3 py-2 text-gray-900" scope="row"><a tabindex="-1" href="https://www.ulmod.com/magento-2-spam-blocker.html" target="_blank" rel="noopener nofollow">Magento 2 Spam Bot Blocker by Ulmod</a></th>
<td class="px-3 py-2">Protects any form type, failed submission message.</td>
<td class="px-3 py-2"><strong>&#9989;</strong>/<br><strong>&#9989;</strong>/<br>&#10060;/<br>&#10060;/<br>&#9989; (Email only)</td>
<td class="px-3 py-2">Saves logs of blocked bots (IP addresses), email notifications.</td>
<td>Default &amp; custom forms</td>
<td class="px-3 py-2">&#10060;/&#10060;</td>
<td class="px-3 py-2">99,- $</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-3 py-2 text-gray-900" scope="row"><a tabindex="-1" href="https://www.mageants.com/spam-and-bot-blocker-extension-for-magento-2.html" target="_blank" rel="noopener nofollow">Magento 2 Spam and Bot Blocker by MageAnts</a></th>
<td class="px-3 py-2">Spam detection based on IP/Email/Name length; error message display.</td>
<td class="px-3 py-2"><strong>&#9989;</strong>/<br>&#10060;/<br>&#10060;/<br>&#10060;/<br>&#9989; (IP-Address/emails only)</td>
<td class="px-3 py-2">Bot name blacklist, restrict registrations by first name length.</td>
<td>contact, registration, newsletter</td>
<td class="px-3 py-2">&#10060;/&#10060;</td>
<td class="px-3 py-2">59,- $</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-3 py-2 text-gray-900" scope="row">Restrict Fake Registration Extensions (MageComp, Meetanshi, FME Extensions, Tridhya Tech, SetuBridge)</th>
<td class="px-3 py-2">Primarily for customer registration.</td>
<td class="px-3 py-2"><strong>&#9989;</strong>/<br>&#9989; (some)/<br>&#10060;/<br>&#10060;/<br>&#9989; (some, domain/TLD restrictions only)</td>
<td class="px-3 py-2">Character limits for names only, customizable messages.</td>
<td>Registration spam</td>
<td class="px-3 py-2">&#10060;/&#10060;</td>
<td class="px-3 py-2">n/a</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-3 py-2 text-gray-900" scope="row"><a tabindex="-1" href="https://www.extendware.com/bot-blocker-for-magento-2.html" target="_blank" rel="noopener nofollow">Bot Blocker for Magento 2 by Extendware</a></th>
<td class="px-3 py-2">Protects against spam bots.</td>
<td class="px-3 py-2"><strong>&#9989;</strong>/<br>&#10060;/<br>&#10060;/<br>&#10060;/<br>&#10060;</td>
<td class="px-3 py-2">Restrict keywords in search, permanently ban users exceeding limits.</td>
<td>Bot blocking</td>
<td class="px-3 py-2">&#10060;/&#10060;</td>
<td class="px-3 py-2">149,- $</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-3 py-2 text-gray-900" scope="row"><a tabindex="-1" href="https://fishpig.com/magento-2-security-extension" target="_blank" rel="noopener nofollow">Magento 2 Security Extension (NoBots) by FishPig</a></th>
<td class="px-3 py-2">Invisible, rule-based protection.</td>
<td class="px-3 py-2"><strong>&#9989;</strong>/<br>&#10060;/<br>&#10060;/<br>&#10060;/<br>&#9989; (IP Address)</td>
<td class="px-3 py-2">Allows good bots, real-time monitoring dashboard.</td>
<td>Security Suite</td>
<td class="px-3 py-2">&#10060;/&#10060;</td>
<td class="px-3 py-2">195,- &pound;</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-3 py-2 text-gray-900" scope="row"><a tabindex="-1" href="https://mageme.com/magento-2-form-builder.html" target="_blank" rel="noopener nofollow">MageMe WebForms</a></th>
<td class="px-3 py-2">Form builder extension.</td>
<td class="px-3 py-2"><strong>&#9989;</strong>/<br>&#10060;/<br>&#10060;/<br>&#10060;/<br>&#10060;</td>
<td class="px-3 py-2">Intuitive form builder, conditional logic, customizable notifications.</td>
<td>Form builder</td>
<td class="px-3 py-2">&#10060;/&#10060;</td>
<td class="px-3 py-2">169,- &euro;</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-3 py-2 text-gray-900" scope="row"><a tabindex="-1" href="https://amasty.com/security-suite-for-magento-2.html" target="_blank" rel="noopener nofollow">Magento 2 Security Suite by Amasty</a></th>
<td class="px-3 py-2">Comprehensive security features.</td>
<td class="px-3 py-2"><strong>&#9989;</strong>/<br>&#10060;/<br>&#10060;/<br>&#10060;/<br>&#10060;</td>
<td class="px-3 py-2">Admin actions log, two-factor authentication, advanced permissions.</td>
<td>Security Suite</td>
<td class="px-3 py-2">&#10060;/&#10060;</td>
<td class="px-3 py-2">419,- $</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Recommendation: Building Your Anti-Spam Fortress</h2><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="B7DSBXY"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="Q24EFP1"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="AWF6YV7"><div data-content-type="text" data-appearance="default" data-element="main"><p>A <strong>layered approach, combining multiple spam protection techniques</strong>, often provides the most effective defense. The best strategy for your Magento 2 store will depend on your specific needs and the types of spam you are facing.</p>
<p>&nbsp;</p>
<p>When choosing an extension, <strong>carefully evaluate your specific spam challenges</strong>, the features offered, the <strong>impact on GDPR and performance</strong>, user reviews, and compatibility with your Magento 2 version and theme.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="GYOOACY"><figure class="md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="KU28LSE"><a href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" data-link-type="default" title="Honey Spam Anti-Spam for Magento 2 by JaJuMa" data-element="link"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/honey-spam-anti-spam-extension-for-magento-2/Honey-Spam-Anti-Spam-Module-Magento-2-small.png" alt="Honey Spam Anti-Spam for Magento 2 by JaJuMa" title="Honey Spam Anti-Spam for Magento 2 by JaJuMa" data-element="desktop_image" data-pb-style="CKQMDG9"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/honey-spam-anti-spam-extension-for-magento-2/Honey-Spam-Anti-Spam-Module-Magento-2-small.png" alt="Honey Spam Anti-Spam for Magento 2 by JaJuMa" title="Honey Spam Anti-Spam for Magento 2 by JaJuMa" data-element="mobile_image" data-pb-style="DQ7XG79"></a><figcaption data-element="caption">Honey Spam Anti-Spam for Magento 2 by JaJuMa</figcaption></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>Considering the available extensions, the <strong><a title="Jajuma Honey Spam Anti-Spam Extension for Magento 2" href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" rel="noopener">JaJuMa Honey Spam Anti-Spam extension</a> is a strong all-around solution</strong>.<br>For a robust, user-friendly, and privacy-conscious approach, especially if you value performance and GDPR compliance, the JaJuMa Honey Spam Anti-Spam extension stands out.</p>
<p>It offers a striking <strong>balance of effectiveness, GDPR compliance, and performance</strong>, with <strong>rock-solid spam detection</strong> and features like honeypot, time checks, flexible scoring rules, pattern matching, spam logging, and <strong>flexible blocking options</strong>.</p>
<p>This combination of honeypot, time checks, and flexible server-side scoring rules provides highly effective detection against&nbsp;<strong>any spam type</strong>,<strong> including persistent fake customer registrations</strong>, without burdening users with annoying CAPTCHAs. <br>Unlike basic blockers that rely solely on IP/domain lists or simple name rules, Honey Spam's multi-layered detection can adapt to more sophisticated bots attempting <strong>fake account creation</strong>. Furthermore, its server-side processing ensures minimal impact on frontend performance and Core Web Vitals, and its independence from third-party services like Google reCAPTCHA aids GDPR compliance.</p>
<p>It also offers seamless compatibility with Hyv&auml; Themes.&nbsp;</p>
<p>Thanks to its broad and versatile detection mechanism and <strong>flexible configuration and options to adapt</strong>, it also ensures you are <strong>ready for any spam coming in the future.<br>No matter if form submit spam, product search spam or checkout spam - with JaJuMa Honey Spam Anti-Spam you are ready to fight any spam</strong>.</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">FAQ: Your Burning Spam Protection Questions Answered</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-609:not(.active) .plus-minus::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDNhMSAxIDAgMDExIDF2NWg1YTEgMSAwIDExMCAyaC01djVhMSAxIDAgMTEtMiAwdi01SDRhMSAxIDAgMTEwLTJoNVY0YTEgMSAwIDAxMS0xeiIgY2xpcC1ydWxlPSJldmVub2RkIi8+Cjx0aXRsZT5wbHVzPC90aXRsZT48L3N2Zz4K);
            }
                                .accordion-item-header-609.active .plus-minus::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMgMTBhMSAxIDAgMDExLTFoMTJhMSAxIDAgMTEwIDJINGExIDEgMCAwMS0xLTF6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPm1pbnVzPC90aXRsZT48L3N2Zz4K);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: block;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-609 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative hidden md:block" data-index="0">
                <strong class="text-3xl text-bold"></strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 plus-minus">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>Why is spam protection important for my Magento store?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>Spam can clutter your database with fake customer accounts, lead to misleading form submissions, negatively impact your website's performance, and even pose security risks. Protecting against spam saves you time, resources, and helps maintain the integrity of your store.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>What are the most common types of spam targeting Magento 2?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>Common types include automated bot spam, comment spam, fake account registrations, manual spam submissions, checkout spam, and catalog search spam.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>Is Magento's built-in CAPTCHA sufficient?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>While Magento's built-in CAPTCHA provides a basic level of protection, third-party extensions often offer more advanced features, a wider range of CAPTCHA options, and integration with other anti-spam techniques for a more robust defense.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>What is a honeypot, and how does it work?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>&nbsp;A honeypot is a hidden form field invisible to humans but detectable by bots. If a bot fills in this field, it's identified as spam and the submission can be blocked.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>How does GDPR affect my choice of spam protection methods?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>GDPR requires you to be transparent about data processing and obtain consent when using methods that collect personal data, such as Google reCAPTCHA. Prioritizing privacy-friendly alternatives and ensuring your privacy policies are up-to-date is crucial.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>Will spam protection slow down my website?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>Some spam protection methods, like certain CAPTCHA implementations, can potentially impact website performance. Choosing lightweight methods and optimizing their implementation is important to maintain good Core Web Vitals.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-7">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="6">
                                <span>What should I look for in a Magento 2 spam protection extension?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-7">
                                <div class="accordion-item-body-content p-4">
                                    <p>Consider the types of spam you're facing, the features offered by the extension, its impact on GDPR and performance, user reviews, compatibility with your store, and the level of support provided.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-8">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="7">
                                <span>What is the best approach to spam protection?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-8">
                                <div class="accordion-item-body-content p-4">
                                    <p>A layered approach that combines multiple spam protection techniques, such as CAPTCHA, honeypots, rate limiting, time checks, and server-side validation, often provides the most comprehensive defense.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-9">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="8">
                                <span>How do I stop fake customer registrations in Magento 2?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-9">
                                <div class="accordion-item-body-content p-4">
                                    <p>Stopping fake customer registrations requires a layered approach. Start by enabling Magento's built-in security features if applicable. Consider methods like honeypots, time checks, server-side validation (including IP/domain blocking, name validation, and scoring rules), and potentially Google reCAPTCHA. Advanced extensions like JaJuMa Honey Spam combine multiple techniques for robust protection without relying on user-unfriendly CAPTCHAs. See the 'Your Arsenal' and 'Recommendation' sections above for details.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-10">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="9">
                                <span>What is the best Magento 2 extension for fake signups?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-10">
                                <div class="accordion-item-body-content p-4">
                                    <p>The "best" extension depends on your specific needs and priorities (e.g., budget, required features, tolerance for CAPTCHA). Many extensions focus on restricting registrations based on IP, domain, or name rules. Solutions like <a title="Jajuma Honey Spam Anti-Spam Extension for Magento 2" href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" rel="noopener">JaJuMa Honey Spam Anti-Spam</a> offer a different approach using honeypots, time checks, and scoring rules for detection, prioritizing user experience and GDPR compliance. Review the comparison table in the 'Magento 2 Anti-Spam Arsenal' section to compare options.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-11">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="10">
                                <span>Is Google reCAPTCHA enough to stop Magento registration spam?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-11">
                                <div class="accordion-item-body-content p-4">
                                    <p>While Google reCAPTCHA (especially v3) can deter many bots, sophisticated bots can sometimes bypass it, and many Magento users still experience fake registrations even with reCAPTCHA enabled. Additionally, reCAPTCHA can impact user experience and has privacy implications. A multi-layered approach, potentially combining reCAPTCHA with other methods or using alternatives like advanced honeypots and server-side scoring, is often recommended for comprehensive protection.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-12">
                            <div class="accordion-item-header-609 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="11">
                                <span>How does a honeypot work for Magento registration forms?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-12">
                                <div class="accordion-item-body-content p-4">
                                    <p>A honeypot adds a hidden field to the registration form that is invisible to human users. Bots, however, often automatically fill in all fields they detect. If the hidden honeypot field is filled upon submission, the system identifies the submission as spam, likely from a bot attempting fake account creation, and blocks it without affecting legitimate users. More advanced honeypot implementations might use multiple hidden fields or combine this with other techniques like time checks.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    </div><h2 data-content-type="heading" data-appearance="default" data-element="main">Conclusion: Stay Vigilant in the Fight Against Spam</h2><div data-content-type="text" data-appearance="default" data-element="main"><p><strong>Key Takeaways:</strong></p>
<ul class="list-disc ml-4">
<li><strong>Understand the Threat:</strong><br>Recognize the various forms of spam targeting Magento, with a particular focus on the risks associated with fake account creation.</li>
<li><strong>Layer Your Defenses:</strong><br>Combine multiple techniques for optimal protection. A common effective stack includes Honeypot +&nbsp; (Advanced) Time Checks + Server-Side Validation.</li>
<li><strong>Target Fake Registrations:</strong><br>Implement specific measures like Restrict Fake Registration extensions to block spammy domains, IPs, and invalid patterns etc..</li>
<li><strong>Prioritize UX &amp; Performance:</strong><br>Balance security measures with user experience and site speed. Choose less intrusive methods like honeypots and server-side validation where possible. <br><a title="Magento Peformance Monitoring - Real User Monitoring" href="/en/jajuma-develop/magento-extensions/real-user-monitoring-rum-extension-for-magento-2" target="_blank" rel="noopener">Monitor Peformance &amp; Core Web Vitals.</a></li>
<li><strong>Stay Informed &amp; Monitor:</strong><br>Keep Magento and extensions updated. Regularly monitor registration patterns, review logs from security tools, and adapt your strategy as spam tactics evolve.</li>
</ul></div><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="S1SW022"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="JC8S0QN"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="VWIJCNJ"><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p id="BX1QCI7">The fight against spam is an ongoing process.&nbsp;<br>By understanding the threats and utilizing the right tools and strategies, <strong>you can effectively protect your Magento 2 store</strong> and ensure a clean, secure, and efficient e-commerce environment.</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="NFT3FAC"><figure class="md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="RGOIXYA"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-for-magento-2/screenshots/Magento-Honey-Spam-Power-Toy-Dark.jpg" alt="Honey Spam Power Toy For Magento 2" title="Honey Spam Power Toy For Magento 2" data-element="desktop_image" data-pb-style="VFO5VAG"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/power-toys-for-magento-2/screenshots/Magento-Honey-Spam-Power-Toy-Dark.jpg" alt="Honey Spam Power Toy For Magento 2" title="Honey Spam Power Toy For Magento 2" data-element="mobile_image" data-pb-style="U04WKQJ"><figcaption data-element="caption">Honey Spam Power Toy For Magento 2</figcaption></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>Stay vigilant,&nbsp;<strong>monitor your store for spam activity</strong>, and be prepared to adapt your defenses as spam tactics evolve. <br>Your peace of mind and the success of your online business depend on it!</p>
<p>&nbsp;</p>
<p>Dealing with spam, especially the resource-draining <strong>issue of fake customer registrations</strong>, is an ongoing challenge for Magento 2 store owners. By understanding the different types of threats and <strong>implementing a layered defense strategy</strong> using <strong>techniques like honeypots, time checks, server-side validation</strong>, and potentially specialized extensions, you can <strong>significantly reduce spam and protect your store</strong>. Stay informed about evolving bot tactics and regularly review your protection measures to <strong>ensure your anti-spam fortress remains strong</strong>.</p>
<p>&nbsp;</p>
<p>The rock-solid spam-detection of <strong><a tabindex="-1" title="Jajuma Honey Spam Anti-Spam Extension for Magento 2" href="/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2" target="_blank" rel="noopener">JaJuMa Honey Spam Anti-Spam extension</a></strong>, combined with the free&nbsp;<strong><a tabindex="-1" title="Honey Spam Anti-Spam Power Toy" href="/en/jajuma-develop/magento-power-toys-extensions/honey-spam-power-toy-for-magento-2" target="_blank" rel="noopener">Honey Spam Power Toy</a></strong> add-on, that lets you check and monitor your spam protection easily with just one click from anywhere in your store, is the perfect tool to protect your business and your peace of mind!</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Magento Challenges? We Have the Solutions!</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>From developing powerful stores to optimizing your performance and customizing your system&rsquo;s extension &ndash; JaJuMa offers comprehensive Magento services that drive your business forward. Let&rsquo;s achieve your goals together! <strong><a title="Contact us!" href="https://www.jajuma.de/en/contact" target="_blank" rel="noopener">Contact us for a free &amp; non-binding consultation.</a></strong></p></div></div></div><div class="rounded-3xl overflow-hidden" data-content-type="row" data-appearance="full-bleed" data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="main" data-pb-style="GCHD66E"><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyv&auml; Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyv&auml;naut Riding The Hyv&auml; Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyv&auml;verse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyv&auml; Development Services - Hyv&auml; Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyv&auml; Development Services - Hyv&auml; Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyv&auml; Development Services - Hyv&auml; Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyv&auml; Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyv&auml; Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <span>&#128640; Launch into the JaJuMa Hyv&auml;verse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyv&auml;.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyv&auml; Pioneers &amp; Gold Partners &ndash; Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyv&auml;nauts' Journey: 4 Years of Hyv&auml; Passion &amp; Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyv&auml; Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyv&auml; store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128640;</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyv&auml; development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#9881;&#65039;</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyv&auml; Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128168;</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyv&auml; extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128268;</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyv&auml; performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#9889;</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyv&auml; Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128747;</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons &amp; Benefits for Hyv&auml;" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128285;</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyv&auml; Checkout: Boost Conversions with Hyv&auml; Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128722;</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyv&auml; UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here&rsquo;s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128142;</span>
                                Starship Schematics:<br>Mastering the Hyv&auml; UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyv&auml; Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128171;</span>
                                The Next Frontier:<br>Hyv&auml; Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#9889;</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento &amp; Hyv&auml; Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#128200;</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyv&auml; Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#9732;</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#127756;</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyv&auml; Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#9654;</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#10024;</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">&#10024;</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">&rarr;</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div>
</div></div>]]></description>
              <pubDate>Thu, 03 Apr 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa-Develop]]></category>
           </item>
       <item>
      <title>60 Days On Hyvä: From Project Rescue, Accelerated To Light Speed &amp; Success</title>
      <link>https://www.jajuma.de/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success</link>
      <guid>https://www.jajuma.de/en/blog/60-days-on-hyva-from-project-rescue-accelerated-to-light-speed-and-success</guid>
      <description><![CDATA[<style>#html-body [data-pb-style=FNVDHJT],#html-body [data-pb-style=Q9JB1HF]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=Q9JB1HF]{justify-content:flex-start;display:flex;flex-direction:column}#html-body [data-pb-style=FNVDHJT]{align-self:stretch}#html-body [data-pb-style=Q47CFVY]{display:flex;width:100%}#html-body [data-pb-style=G5TIMQU],#html-body [data-pb-style=UB84G50]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=MR12UIY]{border-style:none}#html-body [data-pb-style=F0OX213],#html-body [data-pb-style=X24A7XB]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=EMIIEEW]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=U331IBD]{display:flex;width:100%}#html-body [data-pb-style=WWS6YDY]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:33.3333%;align-self:stretch}#html-body [data-pb-style=JSOS862]{border-style:none}#html-body [data-pb-style=BFG652E],#html-body [data-pb-style=WB84X95]{max-width:100%;height:auto}#html-body [data-pb-style=RD04Q37]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:66.6667%;align-self:stretch}#html-body [data-pb-style=QCI5IHW]{border-style:none}#html-body [data-pb-style=ACCP148],#html-body [data-pb-style=CMWJIVI]{border-radius:16px;max-width:100%;height:auto}#html-body [data-pb-style=NLJGPBC]{background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;align-self:stretch}#html-body [data-pb-style=CF8K8RG]{display:flex;width:100%}#html-body [data-pb-style=M8WEQ22],#html-body [data-pb-style=PV39292]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;width:50%;align-self:stretch}#html-body [data-pb-style=GFFC18H]{border-style:none}#html-body [data-pb-style=BPK35JD],#html-body [data-pb-style=V1YNYTF]{border-radius:16px;max-width:100%;height:auto}@media only screen and (max-width: 768px) { #html-body [data-pb-style=GFFC18H],#html-body [data-pb-style=JSOS862],#html-body [data-pb-style=MR12UIY],#html-body [data-pb-style=QCI5IHW]{border-style:none} }</style><div data-content-type="row" data-appearance="contained" data-element="main"><div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="Q9JB1HF"><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="FNVDHJT"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="Q47CFVY"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="UB84G50"><div data-content-type="text" data-appearance="default" data-element="main"><blockquote class="p-2 my-2 border-s-2 border-gray-300 bg-gray-50">
<p class="italic leading-relaxed text-gray-900">&ldquo;Roses are red, the web&rsquo;s a delight,<br>With Magento, Hyv&auml;, and JaJuMa in sight.<br>Fast and efficient, a beautiful flight,<br>E-commerce dreams, shining so bright.&rdquo;</p>
</blockquote>
<p>The <a title="Your Ultimate Guide to Magento, the World's Most Powerful Commerce Platform" href="/en/magento-metropolis-guide" target="_blank" rel="noopener">world of ecommerce</a> can sometimes feel like a roller coaster:</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="G5TIMQU"><figure class="hero md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="MR12UIY"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Rosemarie-Schulz.jpg" alt="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success" title="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success" data-element="desktop_image" data-pb-style="F0OX213"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/JaJuMa-Blog-Showcase-Rosemarie-Schulz.jpg" alt="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success" title="60 Days On Hyv&auml;: From Project Rescue, Accelerated To Light Speed &amp; Success" data-element="mobile_image" data-pb-style="X24A7XB"></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>One moment your online store is buzzing with traffic and sales, the next it&rsquo;s down, leaving you in a state of panic. That&rsquo;s exactly what happened to one of our Magento clients: <a title="Rosemarie Schulz" href="https://www.rosemarie-schulz.de/en/" target="_blank" rel="noopener nofollow">Rosemarie Schulz</a>. Their once reliable site suddenly displayed nothing but an ominous error message, much like a storefront with its shutters slammed shut at the wrong moment.</p>
<p>In the end the journey led to <a title="Your Expert Guide to Hyv&auml;: The JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">Hyv&auml;</a>, But lets start the story from the very beginning:</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">The Calm Before the Crisis: From Routine Maintenance to Sudden Meltdown</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>We&rsquo;ve built a long-standing relationship with this client through performance optimizations in the past and regularly applying essential security patches. For years, their Magento store operated reliably. Then, last summer, the situation took a dramatic turn. What began as a minor glitch&mdash;an error message replacing the usual smooth operation&mdash;quickly spiraled into a full-blown crisis.</p>
<p>Initially, we managed to get the site back online with a quick fix. However, it wasn&rsquo;t long before the problem resurfaced. Further investigation revealed severe server issues: basic commands dragged on, SSH connections dropped frequently, and even service restarts were painfully slow. Despite our efforts, each remedy was only a temporary improvement, leaving the site persistently unstable. To add insult to injury, the hosting company&rsquo;s support was utterly unhelpful, leaving our client stranded and desperate for a sustainable solution.</p>
<p>&nbsp;</p></div><div data-content-type="block" data-appearance="default" data-element="main"><div class="widget block block-static-block">
    <style>.cmsb82-absolute {
position: absolute
}
.cmsb82-relative {
position: relative
}
.cmsb82-bottom-0 {
bottom: 0px
}
.cmsb82-left-0 {
left: 0px
}
.cmsb82-z-\[1\] {
z-index: 1
}
.cmsb82-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb82-my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.cmsb82-ml-4 {
margin-left: 1rem
}
.cmsb82-flex {
display: flex
}
.cmsb82-inline-flex {
display: inline-flex
}
.cmsb82-grid {
display: grid
}
.cmsb82-hidden {
display: none
}
.cmsb82-h-10 {
height: 2.5rem
}
.cmsb82-h-auto {
height: auto
}
.cmsb82-w-10 {
width: 2.5rem
}
.cmsb82-w-8 {
width: 2rem
}
.cmsb82-flex-shrink-0 {
flex-shrink: 0
}
.cmsb82-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb82-flex-row {
flex-direction: row
}
.cmsb82-items-center {
align-items: center
}
.cmsb82-justify-center {
justify-content: center
}
.cmsb82-gap-2 {
gap: 0.5rem
}
.cmsb82-gap-8 {
gap: 2rem
}
.cmsb82-overflow-hidden {
overflow: hidden
}
.cmsb82-rounded-lg {
border-radius: 0.5rem
}
.cmsb82-\!bg-\[\#EE682F\] {
--tw-bg-opacity: 1 !important;
background-color: rgb(238 104 47 / var(--tw-bg-opacity)) !important
}
.cmsb82-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb82-py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.cmsb82-pt-4 {
padding-top: 1rem
}
.cmsb82-text-center {
text-align: center
}
.cmsb82-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb82-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb82-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb82-font-bold {
font-weight: 700
}
.cmsb82-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb82-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb82-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.cmsb82-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb82-duration-300 {
transition-duration: 300ms
}
.cmsb82-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb82-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb82-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb82-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb82-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb82-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb82-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb82-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
@media (min-width: 640px) {
.cmsb82-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
}
@media (min-width: 1024px) {
.cmsb82-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb82-lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.cmsb82-lg\:gap-4 {
gap: 1rem
}
.cmsb82-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb82-lg\:text-\[20px\] {
font-size: 20px
}
.cmsb82-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div data-cacheable="false">
    <hr>
    <p class="hyvaverse-main-cta-subtext cmsb82-text-center cmsb82-my-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
        Find all you need to know and more valuable insights about Hyv&auml; and Magento.<br>
        Expertly curated by JaJuMa:
        <br>
    </p>
    <div class="hyvaverse-main-cta-container cmsb82-text-center cmsb82-grid cmsb82-grid-cols-1 cmsb82-lg:grid-cols-2 cmsb82-gap-8">
        <div>

            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyv&auml; knowledge, services, and insights.">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">        
                <span>&#128640;</span>
                <span>Launch the JaJuMa Hyv&auml;verse</span>
                <svg class="cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10 cmsb82-ml-4 cmsb82-lg:ml-6" height="210.000000pt" preserveaspectratio="xMidYMid meet" version="1.0" viewbox="0 0 245.000000 210.000000" width="245.000000pt" xmlns="http://www.w3.org/2000/svg">

                    <g fill="#402b05" stroke="none" transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)">
                        <path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
                        <path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
                        <path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
                        <path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
                        <path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
                        <path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
                        <path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
                    </g>
                </svg>
                </div>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Hyv&auml;.
            </p></div>
        <div>

            <a class="btn-primary cmsb82-inline-flex cmsb82-items-center cmsb82-justify-center cmsb82-px-4 cmsb82-py-4 cmsb82-lg:px-6 cmsb82-text-lg cmsb82-lg:text-xl cmsb82-font-bold cmsb82-rounded-lg cmsb82-shadow-xl cmsb82-focus:outline-none cmsb82-focus:ring-4 cmsb82-focus:ring-sky-300/70 cmsb82-focus:ring-offset-2 cmsb82-focus:ring-offset-slate-900 cmsb82-transition-all cmsb82-ease-in-out cmsb82-duration-300 cmsb82-transform cmsb82-hover:scale-105 cmsb82-hover:shadow-2xl cmsb82-!text-white cmsb82-!bg-[#EE682F] cmsb82-overflow-hidden" href="/en/magento-metropolis-guide" title="Explore the Magento Metropolis!">
                <div class="cmsb82-flex cmsb82-flex-row cmsb82-items-center cmsb82-text-base cmsb82-lg:text-[20px] cmsb82-gap-2 cmsb82-lg:gap-4 cmsb82-z-[1]">
                    <svg class="cmsb82-drop-shadow-lg cmsb82-w-8 cmsb82-h-auto" fill="none" height="24" viewbox="0 0 22 24" width="22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect fill="url(#pattern0_413_38)" height="24" width="22"></rect>
                        <defs>
                            <pattern height="1" id="pattern0_413_38" patterncontentunits="objectBoundingBox" width="1">
                                <use transform="matrix(0.00329268 0 0 0.003 -0.317073 -0.311111)" xlink:href="#image0_413_38"></use>
                            </pattern>
                            <image height="500" id="image0_413_38" preserveaspectratio="none" width="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAQ5QTFRFAAAA/////////v7+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v////////////7+///////////////////+///////////////////////+///////////////////////////+/////////////////////////////////v///////////v///v///////////////////////////////v///////////v///////////////v///v///v7+/v//ZZGWUAAAAFp0Uk5TAAUS/wwBBg8YAgMHGiMKCRMiHw0EERUIIRkdHBcQCxYOFB4gGyG6tv+yjO3//7E1h9uw/OSbTSnA8qA5i/GvuDFfyf/i9qmg9S9rZEpq6eJR5jjGKG0bIiAVGb/2kAAAFSlJREFUeJztnduPHEcVh3t2PbFnfVs7vq0vWSdxkFAkeCPhASFeyANISNz+zAghEA9IwAOKhABFQgSJWzAkcRKHODcnjoO9y86tZ7qnu+t2qs6pOr/vwXGSmZ6e/qarq06dOjWqgDpG3CcA0gPpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hWiVPpoNKr/9j/WM+FAm/QnOiWPD7cepD8XNnRJ3x76n8c/S3Ua3OiRfnJkvJl3Rh+nOBN2tEgfbdm97tRHcc9DBDqkHzu0f+3pD+OdhxA0SJ984fb6A4efSJaUL318yv1BXXgjX7z0k5/7vOvsPerzkETh0m37b5tM7lOehyzKlu7SgdvgMdlpSKNk6U+G9sNLfbSXK33nIcFBnigyOlus9NM0QdUiH+2FSj/+iOxQI7pDSaFI6Rc+ID1ccT26AqW7BuAsKEx7edIvxoir7L4f4aBslCb9bKyO14lPIx2YgcKkE/XZOymnjS9J+vhc3Eb4ybtRD5+OkqQPJkORUEisphjpEfrsXZz7b5KPiUsp0qN14NpceDfRB0WkDOnJlE/ZTtOmRKQE6eMn30v7gbk/2guQvpe+U515Yk320s/wBE2yDtFlLt0/HSqYjPvxWUufHHIuPrz8Qa6P9pylM7XsK3Kdas9Xul9uMzEns1z8lq30a+9wn8GMvTe5z8CDTKXvfsJ9BjXjx9lVNchTevypFReym3PNUbos5VMyG77lJ/2yxAucV4cuN+mM0ZhhLr3NfQb2ZCb9xh2iAx1brn8Z71LF0fN5tGcl/TrN3bSZ40j0W8pFe0bSiZYwHOtc43aO5KF87T8UR4lOPtJp+uz9/ewtkkuRhfZcpAetNK8Z7G2RLHOtzmxLHF00yUP6+IDkMKZnLpF22pV0EchBOlGiq03ewz5JKF367FsG0mketoeWjcUJkki67ORJ8dKDa4jMsS/8SjNI2Dku+NEuXDpRy+5249F8qG3TwoBs6TRtrXOEdLxF8lC+cZviKBGQLJ0ozu4VJ6OJCggN0cmVThSA8531JPrFiVwXIVY6TQpcSAt78w2KM7hKchRahEqnmTQPrQdGM8Ejb9QuUjpRAC48s4HoESOtjZconaaGCE27SvNo3/lcVPKkPOk0Uys7j6juLppho6g2Xpp0omgM6c5LV0nqEAiKzAqT/jTJdPR54vXqT5CMty+/J6WNFyWd5gEaY/E4jXYpITpB0id7/6Y4TJxtd8aXSYZvMvYEkiOdZpwWsQ4QSWR2LGHZpRjpJJf0+t2YI2KaIKGA3T2FSKe5zaMHQS5RFB3hXwMlQ/pTbxEcJEXJ3slxguWy3UnYCREhnWJq4wrF78YCilkB6iGlKxKknw/fFOnSh+nC2wQB+af+RXAe/giQThDnTBzkvBJ8p/K28PzSn70degSGnlFwqjRrUJZdenghEZacpOCuJ6d1bunBztnS0EKLEDPmzzFLD413cBZ3Co0tbLHNv/BKD5xIZa/nFRRGTDXI3IRXeljsVcD+t0GPdrbZF1bpQVuoCckpDxm1c30FTukht8l4i3/eYs7OVe9IC9fuvZzSAxp3Ibf5Au8vwvQ1GKX773wsrmqbdz1qHut80r1HPKdpFi/T4jnpyjO5zifdM7v97ANhKwcW+G04cPOf5CdiAZ90vwchfwZCL14Va1jadzbpXvFXcQ/zJh7aWUoXsEn3udFl9dm7cC89yfGduKR7VA8SqHzy8Oq9VtfENQuIYxtPLunON3qdJzF+tP/ZtKvMH4QdnZufwqUHDw5XkwiO8wnXSZL93chEem14PYrH/IRvZn+spWW6aWdowJiku12Xi+8vhkPtRyZfJsJmLaL12oQuDy890p1u9FUEY/NtTA/6rshS41SesW61GVJj5UtfLy7Q8TaOmi6dQ7NWoNB+yWP63y2PdIf5yMaqlc77J/lF6x6XbWTk2mZ8apFuPZxt5cb0XMekiUd980Sbld4tn+xapN+ynIJud9T6npQJFw/0Ppg6ns126+3TR5Z5pFs+0jcWJPZ3jxLtZz504heq+4etSI1Vxmz68Ixk6dN2z34uLkEr6VKRen46pyymBNPXIBIsfRrucCn7UY/mI+GW9HFxvgGwxTdNX5RErvTZc9qtvljMhtI55+Ox7dvST7TJlT67aK7LSKJpd1+zuGijzPWy9l93P50wxEqfB9bdV8BEqUbhs73EQrrFHHvyMZtY6fMr4bHsiX7hiF8dgqVK82gd0pevmI/Qveq30c6+TSZ+c7j1mRu/LKQvWATZPIv2EV5G772iIL2F8Tosw6/elRqJHu0BFWYgvYX1dfBfykyy6WnIAstapTElHtLnhEsnGL6FFUyoVRq/A6TPoZAeeDVDaw6sPtz0bSF9zvI6BFZtC4h7BJcthfQWpstQl80NLezi28Z7r0hcAektTJehnh8Plu41aif4VEjfwHQZ6nwzgjvOfddN/zXU60B6C9NlqCeeSCoFu0Vmg2qirAHpLRJLd6jpQ7QTW7Wu0pQODekzyKXbXlmafXVbH7h31/aViRAuneKZvmCvvdRwE5rdVResVJqm1CF9RgzpxiWPRFvCLVmpNCV8Q/qMONIHcxAnx4jLv6xUmhoQSJ8RS3r/BabrPGx+kunYOqQbw9oROnJLOiOzNHvtNVkd0vTL1SHd+PSMKL1r+EYTjWmxUmmaQID0GfUSoRjS25nm7nVirFipNE0VQvqMWjrNvtqbrF1nwqF5z0dA+hRjWnC96Nwn99iOycFncZ7lSyC9iQTp0VmpNP20dEg3BrjrHawgPQbCpZMGRtMC6a0PNS3Wr6VHGUylAdJbHwrp3a9MhHDpkcbQKVipND3NIH0GpEeFRbpxeFyHzKhylxhYfUfTCBXSZ0B6VFikG9et1NK914zys1JpijrrkG5ct1JLD99zmQ1Ib2KcO6urwpkrtogF0psYg6u1dM+drySwUmnKGUm+vTKLdONsZlnSTd83Sm2kIWRKrxMY97k3y/bHXnryHflkSq/LSKiQnrwiMKTHwl76CeqUXxPCpV93XXEqB3vpyfedkim9XlOuQnryXacgPRb20kkKYbkgU3rd4KmQnmiDghWQHgt76ck3nBIu/UTqYBUd9tIT7kAzR6b0uiaUCunJg+/CpZuKOAgG0ptAeu9LkyBTeh2jgvQYCJdus8WVUCC9CaT3vjQJwqXb7s8pEEhvAum9L02CTOn1xrqQHgNIjwWkN4H03pcmQab0ugDUtXcin0o8IL2JvfSryfcWJwPSm0B670uTAOmxgPQmRul1UjCkxwDSYwHpTSC996VJkCm9XugD6TGA9FhAehN76RkHZ9YWIEN6peROh/QmRun1im1IjwGkxwLSm0B6E0ifUl8wSI8BpMdirZIMpFeQ3gbSp0B6VGRKr68CpMcA0mMB6U3spZv2mxcMpDeB9CaQPgXSowLpsVgr/gnplYv086nr6tEB6U2ylX7uU9PWwCsgvUkc6Y+Nu4QEMi3yZ9w8sgbSm0SRvvemxd5fAey/PvuH9c7bkN4kSkduXncx2o68yyXzkO5JFOnLCqtRgnir+n7W0tequEN6FUl6vRtEhDbeQaDPeyB9in/zPv8r7cZe2+tddkj3JLb0arJHF9Q53G6UKoV0T6JIrzfwm2Hc78+W9gYrkO5JAukWO/7ZsLnTBqR7EmWcfqy9ja1pX1sLOnZMg3RP0kgP1t65SZ619LqwAqTPiCK9c3+EgFm6y3c6/zOke5JOuvfGnT3K40hPvdmqcOnP3rY+aN9OKMcOu//7IP27ZllLXxvdQ3qVWHpVnXHd4XBodzxI9ySx9OoJt4fmhaHoPaR7klq6eQvzNQzb3UK6J+mlVztX7PrxFz8ybCsA6X6Ybzsf6effC/3Uymb/ekj3g0f60bU1fdlDi98Fhmx+cEk3XP2LVkWNIN0PB+kOwRkb6dXZ+73/a9su0TVG7B3Sp9TSHYr8W0nvbeNP2I7lY+TIQfqUWvrxR0Mva2ApvbMfv/ux9WW3lu5QfkSD9ImxIa2lm19aYyt986C9cfYurKU7VIyE9CmrC2Z9jd12IZ/sLFKln7nzhdsVtz2h9SAgpLtJt7eeaOt5y/OZrPcYId1RunWymyzpDY+Q7tSRq+zXrIiSftCYz4V0V+m2PfiOdKkYWElvzdNBurN0yzQIQdLbjQ6ku0u3G7jJkb4R6IH0yqXe+xKLVYlipG/O1EF6ZXHhNvOVzK2DEOnLxbNrGJddQPqUrp64aWJUhvSNNsr8FqRAz5l0ToYNv02C9O6MSkifYn4udl+GwZXn/NK7f6oW4SVIn9F3Gfbu9r6FPTjTl2plzglQId18GaZVgzrpH73Zz7IF0Sd9t3cljf9PPBYs0i3qcvVfh76b3SbBjYAehf2J0+aAYqKf6woW6RY//qEFB09vjooqXun9t7lNBRxzCi4xUqUPNnmdS5BPxyom1qTr1IdyrQK/ahTESm8XlmjSEY5nkz608q26eM98SCXSbWq9DYepNpanPXuXSfrged60GFIkGmuuwSPdat7McAO0rv6teyl778/9ffGv48F6tMblFVOsE3HJ4JFuNytt6ODMu8XLy/+l+ynH6c9V848dfgjZFa9MHXmXLX14zfARz5wYjUZ/mf/9+b+mjMg9V82sD/qyXSmb/JHOJd2ygvb+G8N3wclbo9Gf5n/96mtJpZ88+rndvT3wOuvF0b1xqHgwSbdOcj0wPf1f+MP8n6mkv/j76Z9fG43+PBhWtF+lkf5GFy+9e7JynckXXx+9Un35/O/SSP/mb6d/fuPVQeUupS8USXeoA2McgJ88uu+q/yWS/pXXqm/9elHwvw+XQmYDwbxocEl3uNXNF2a8e3N39Mc0V++l0Z1rvxkcVjisv6s4+u6M0m+4LCAztoH7z49+ab/sLYTvjl4d7nm5/JorltadT7rjxelJUBDHFccQEYdzRukORSZmDIa4heC8X5Rd9Qtq+KQ7VPlakHwK0hH3b2QcmsSBT7rVZEST058y9HpsmZzoLS3ayxnrXd5IYZTu2uWZwnNn2OC1lQTLE51XunPN1iN2jlPt00GK3+4h/WWH48Ipvbrm042xrAKVlNNeDdAVig1HfGCV7tPAV/K0d+fsmWFq3LmlO5ZnXnLpbeLzCMJ352e+3y6vdMeQ5Yqn/0F7Hv4MLL8YxpQsEBFm6Z4NfMUTs+7A+/yfsi+LSA63dI+AxhIBsRpv5amy9Lvhln5k/Ts/93wrW0dogWePZAbrubNLr8Yvbf/M972cbfxAbWEj1+m2gvWBX3q18+3RT33fy9cbcpsabsL5PJ8iQHpVfX/0E+/38gRmfYfmM4x5f7ERIX38vdf+5v3m8x8mb+Mtc3l7SL+4oY0I6UcN3gsv+795eMUBPXZrGHoYXhKTBiHSqwsv/sL/zUlnYcJ2ZufIg9xAinSf6fU10t0//kPzIwxZtKmQIz1o2JuqH+8ddJ3B3oNbIEi65164NfHjHWEtO9fs+SaipLvs3tFB5LIEk2Mho8Obd/ijxktkSQ8dDcUctNvWne9GVA6ANOmBcY9omYZhLTt3CK6FPOmBHeSOgrwEBA3NJcwHNpAoPbCNp29JfVM95shbpSFSumWxlj6os6lKGJo3ECrdM1N2CeXo6FzQsbjn/DsRKz1ovpruMWos0D+InKF5A7nSq2r3k4A3kwzaw+IGyWu+2iJZeuA1D+7QjbeDJm35p1D7EC3dqpzuAGEP1LDnS/o6kPYIl350v4TcbQGF/8OGjVfuysjQ7ka89MARk29gNizoKi0a0yID6WEh0MljDwFhT5VRUCwnATlID5zGds+TvhUSKmcqNOBCHtIDn7Bura1NifZ++vf1kEMm0gOzqVxmYYK6ECJS4IxkI70anwu5oJbZVONLIdHfG29J7rOvyEd6YPfKqhBdwHLKSuJ0Wg85SQ/MnTQuIGMOAKYjL+lRB+0+dY9WCB+aN8hNeqD2/uFbWNBV5AxqL/lJDxtSjQ+6WuHxTpByWTVwzGQoPTQ/fnNYtR+0o0YG0ZgWWUp3L7zbYu/hB1vbRw/hydbDg8tBi1Yy6rOvyFN6uHYqGGtE+ZOr9MD1JlRkNE5bI1vpofF4CvJUnrX0wETpYPbezSPouknW0gMH7WHkFI1pkbl0tg5dnNVTichdOk8bfzZoyp2d/KVXk7Op88vl7i9hRwHSQ7MYXRG6bMWBIqSn1J71w3xBIdKrnURrCzIMum5SivQ0sZoSbvOqJOmhi4otyHho3qAk6ZFjNTkkN9tRlvTAQiFDXA4o9S2NwqSH1nTsJa98KAPFSQ+sNtpNIR24JeVJD9t0oQvmzTfoKVF6YAJ7m3I6cEuKlE45+ZZ6B4EUFCr9qE0mSUve+TzXRIkhipUeuC5tjpQC7cSUKz1ce4kt+4ySpVfVqZC4qZDdXCNQtvSAwGxR0ZgWpUuvLnmVMpg8LPY2rxRI97rZS77NKxXSnUuSsW5znQIN0h1rORd+m1dapNsvav/Br4oLum6iRbrdNMwPXy65/1ajR3pVnbwwWHzgR6+8rUK5LunVUJCuiDRXS5RJP2L86PTDydqeET9++fL7B4VkPFqiTzqAdI1AukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hUC6QqBdIVAukIgXSGQrhBIVwikKwTSFQLpCoF0hUC6QiBdIZCuEEhXCKQrBNIVAukKgXSFQLpCIF0hkK4QSFcIpCsE0hXyfy89l0B+7GqqAAAAAElFTkSuQmCC">
                            </image>
                        </defs>
                    </svg>
                    <span>Explore the Magento Metropolis!</span>
                    <svg class="cmsb82-drop-shadow-lg cmsb82-flex-shrink-0 cmsb82-w-10 cmsb82-h-10" fill="none" height="24" viewbox="0 0 20 24" width="20" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.7998 15.5999H15.5998V14.3999H13.7998V15.5999ZM15.5998 17.9999H13.7998V16.7999H15.5998V17.9999ZM13.7998 20.3999H15.5998V19.1999H13.7998V20.3999Z" fill="white"></path>
                        <path clip-rule="evenodd" d="M5.4 0L15 3.6V12H17.4C17.5591 12 17.7117 12.0632 17.8243 12.1757C17.9368 12.2883 18 12.4409 18 12.6V22.8H18.6C18.7591 22.8 18.9117 22.8632 19.0243 22.9757C19.1368 23.0883 19.2 23.2409 19.2 23.4C19.2 23.5591 19.1368 23.7117 19.0243 23.8243C18.9117 23.9368 18.7591 24 18.6 24H0.6C0.44087 24 0.288258 23.9368 0.175736 23.8243C0.0632142 23.7117 0 23.5591 0 23.4C0 23.2409 0.0632142 23.0883 0.175736 22.9757C0.288258 22.8632 0.44087 22.8 0.6 22.8H1.2V10.2C1.2 10.0409 1.26321 9.88826 1.37574 9.77574C1.48826 9.66321 1.64087 9.6 1.8 9.6H3V5.4H4.2V9.6H5.4V0ZM16.8 22.8H15.6V21.6H13.8V22.8H12.6V13.2H16.8V22.8ZM5.4 10.8H2.4V22.8H5.4V10.8ZM8.4 5.4H7.2V6.6H8.4V5.4ZM9.6 5.4H10.8V6.6H9.6V5.4ZM13.2 5.4H12V6.6H13.2V5.4ZM7.2 7.8H8.4V9H7.2V7.8ZM10.8 7.8H9.6V9H10.8V7.8ZM12 7.8H13.2V9H12V7.8ZM8.4 10.2H7.2V11.4H8.4V10.2ZM9.6 10.2H10.8V11.4H9.6V10.2ZM13.2 10.2H12V11.4H13.2V10.2ZM7.2 12.6H8.4V13.8H7.2V12.6ZM10.8 12.6H9.6V13.8H10.8V12.6ZM8.4 15H7.2V16.2H8.4V15ZM9.6 15H10.8V16.2H9.6V15ZM7.2 17.4H8.4V18.6H7.2V17.4ZM10.8 17.4H9.6V18.6H10.8V17.4ZM8.4 19.8H7.2V21H8.4V19.8ZM9.6 19.8H10.8V21H9.6V19.8Z" fill="white" fill-rule="evenodd"></path>
                    </svg>
                </div>
                <svg class="cmsb82-absolute cmsb82-left-0 cmsb82-bottom-0" fill="none" height="51" viewbox="0 0 435 51" width="435" xmlns="http://www.w3.org/2000/svg">
                    <path d="M521.149 66.6131V52.8942H518.576V49.1462H515.839V45.6486H506.218V49.1462H503.825V52.8084H502.489V39.4329H495.519V52.6368H491.445V45.5699H489.304V40.9636H484.482V45.4841H475.443V41.9864H465.053V44.9691H462.431V24.0116H451.869V39.7762H444.856V52.4651H440.523V49.7399H436.758V34.2328H431.074V47.9517H426.742V19.0691H424.6V14.5343L423.171 7.05972H421.777V0H421.058V7.05972H419.578L418.242 14.6774L418.234 14.7131V18.8975H416.524V46.5069H410.359V49.9116H408.254V41.0494H400.178V49.0604H395.895V57.4934H394.221V51.5281H391.484V35.5132H389.256V33.0455H384.686V35.5132H382.287V39.2612H378.902V34.2328H370.733V39.4329H365.258V43.095H363.066V38.1525H360.752V35.6848H355.155V38.0667H353.229V52.6368H350.614V38.7104H345.994V33.9825H338.722V41.1352H334.562V37.8164H323.317V60.4332H321.341V40.8777H318.388V25.4207H316.204V21.8372H314.156V18.1321H312.741V11.9736H312.022V18.1321H310.607V21.5797H309.069V25.4207H306.755V40.4986H304.01V27.3662L301.208 20.7572L298.413 27.495V35.8994H292.507V45.9919H290.021V25.4207H280.184V42.7946H277.231V57.1143H275.384V34.1041H273.2V30.5277H271.404V26.0573H268.113V30.399H266.187V34.1041H264.262V62.7364H261.388V29.1258H254.504V36.021H251.12V33.0884H245.214V26.1861H234.867V37.9451H232.373V29.2546H225.239V37.3013H222.745V26.0573H220.432V22.6025H214.453V26.0573H211.371V33.9825H209.007V26.5652L203.769 18.3324L198.718 26.2218L198.66 26.3076V29.8912H196.814V25.9285H189.42V28.103H187.954V24.0116H182.228V27.588H180.561V44.2037H178.966V32.1872H170.932V35.7707H161.434V38.3242H157.015V34.7478H153.551V30.5277H143.327V37.6876H141.609V34.7478H135.373V47.401H133.389V30.5277H130.824V20.8144H122.791V44.4612H120.169V23.7541H110.461V30.2703H103.276V34.4904H100.582V39.9836H98.2177V28.3533H87.8709V34.3616H85.2986V45.9919H81.6557V41.6502H79.4714V26.5652H72.3364V41.264H68.2264V50.212H65.9918V37.8164H59.3167V18.6471H47.5545V42.0293H44.4792V52.0002H42.7547V31.0427H36.0006V44.59H33.2558V29.7624H23.6779V37.4301H20.7247V50.9773H18.8781V47.1435H15.537V27.7167H4.42142V47.5297H1.67665V40.7561H-0.37833V37.5589H-11.3718V40.2411H-13.8076V64.3958H-21V83H525V66.6131H521.149Z" fill="#9B3205" fill-opacity="0.5"></path>
                </svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb82-pt-4 cmsb82-text-sm cmsb82-sm:text-base cmsb82-mx-auto">
                Your central resource for everything Magento.
            </p>
        </div>
    </div>
    <br>
    <hr>
    <style>
        .hyvaverse-teaser-shine {
            position: relative;
            overflow: hidden;
        }

        .hyvaverse-teaser-shine::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-20deg);
            animation: teaser-shine-move 6s infinite;
            pointer-events: none;
        }

        @keyframes teaser-shine-move {
            0% {
                left: -75%;
            }

            100% {
                left: 125%;
            }
        }
    </style>
</div></div></div>
</div><h2 data-content-type="heading" data-appearance="default" data-element="main">Project Rescue: Emergency Migration to a Temporary Server</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>When your site is crashing repeatedly and the hosting provider can&rsquo;t (or won&rsquo;t) help, you have two options:<br>Keep fighting a losing battle or move to a stable environment.<br>Together with the client, we chose the latter. We migrated the entire store to one of our development servers, immediately restoring site stability.</p>
<p>The key takeaway?<br><strong>Always choose a reputable hosting provider.<br></strong>Magento hosting doesn&rsquo;t have to break the bank, but quality and support are non-negotiable.</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Migrate to Another Platform or Re-Vamp on Magento with Hyv&auml; Theme?</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Server meltdown aside, the store was also long overdue for an upgrade. It ran on an older Magento version and an outdated Luma-based frontend. While our earlier performance optimizations had delivered decent LCP, FCP, and INP scores (even pre-Core Web Vitals), the initial load - especially on mobile - just wasn&rsquo;t up to modern standards. Plus, the Cumulative Layout Shift (CLS), which had never received specific attention or optimization, was causing the store to fail its Core Web Vitals test.</p>
<p>The merchant had even considered switching to alternatives like Shopify, tempted by allegedly lower costs and slick marketing promises. We took the time to bust those myths, explaining why&nbsp;Magento, paired with the <strong>Hyv&auml;</strong> theme and a little <a title="Hyv&auml; Theme for Magento 2 Online Shops" href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>JaJuMa</strong> magic &amp; experience</a>, can actually be faster, more flexible, and surprisingly cost-effective. After all, who wants to trade real freedom, control and scalability for questionable SaaS marketing promises?</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">The Restart: Accelerated to Light Speed on a Low-Key Budget</h2><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="EMIIEEW"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="U331IBD"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="WWS6YDY"><figure class="md:mr-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="JSOS862"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Magento-Hyva-Flower-Store.jpg" alt="" title="" data-element="desktop_image" data-pb-style="BFG652E"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Magento-Hyva-Flower-Store.jpg" alt="" title="" data-element="mobile_image" data-pb-style="WB84X95"></figure></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="RD04Q37"><div data-content-type="text" data-appearance="default" data-element="main"><p>Once the client decided to stay with Magento, we mapped out a plan with these clear goals:</p>
<ol class="list-decimal ml-4 my-4">
<li><strong>Upgrade Magento</strong> to the latest version for security and stability.</li>
<li><strong>Empower the Merchant</strong> with full control, free from risky third-party dependencies.</li>
<li><strong>Adopt Hyv&auml; Theme &amp; Checkout</strong> for a future-proof, lightning-fast frontend.</li>
<li><strong>Maximize Performance</strong> to enhance user experience and conversions.</li>
<li><strong>Stay Low Budget</strong> without sacrificing essential functionality or quality.</li>
</ol></div></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<p>We kicked things off by upgrading Magento, doing some cleanup and refreshing all extensions (both third-party and custom <a title="JaJuMa Hyv&auml; Extensions" href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" target="_blank" rel="noopener"><strong>JaJuMa Extensions</strong></a>), then integrated our <a title="Performance Opimization Extensions" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener"><strong>latest performance enhancements</strong></a>. Next, we rolled out <strong>Hyv&auml; Theme</strong> and <strong>Hyv&auml; Checkout</strong>, migrated payment processing to <strong>Mollie</strong>, and carefully customized the new frontend to preserve the store&rsquo;s familiar look and feel. By mid-October, the revamped site went live. Within minutes, the first order rolled in, and the initial performance data looked fantastic.</p></div><figure class="my-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="QCI5IHW"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/slide-moosbilder-3-de.jpg" alt="Magento &amp; Hyv&auml;: Accelerated To Light Speed &amp; Success" title="Magento &amp; Hyv&auml;: Accelerated To Light Speed &amp; Success" data-element="desktop_image" data-pb-style="CMWJIVI"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/slide-moosbilder-3-de.jpg" alt="Magento &amp; Hyv&auml;: Accelerated To Light Speed &amp; Success" title="Magento &amp; Hyv&auml;: Accelerated To Light Speed &amp; Success" data-element="mobile_image" data-pb-style="ACCP148"></figure><h2 data-content-type="heading" data-appearance="default" data-element="main">60 Days On Hyv&auml; &ndash; Magento Is Fast, But Not Expensive!</h2><div class="pagebuilder-column-group" data-background-images="{}" data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main" data-pb-style="NLJGPBC"><div class="pagebuilder-column-line" data-content-type="column-line" data-element="main" data-pb-style="CF8K8RG"><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="PV39292"><div data-content-type="text" data-appearance="default" data-element="main"><p>The initial weeks following the launch were spent diligently monitoring the store's performance. It operated with the unwavering reliability of a Swiss timepiece. Our efforts were focused on making minor adjustments to further refine the performance indicators. <strong>After 60 days, the results were not just impressive &ndash; they were truly outstanding</strong>. We observed remarkable improvements across all key performance indicators:</p>
<ul class="list-disc ml-4 my-4">
<li>CLS plummeted from 0.3 to a perfect 0.0;</li>
<li>LCP saw a dramatic reduction from 1.6 seconds to a blazing-fast 0.8 seconds;</li>
<li>FCP improved from 1.3 seconds to a snappy 0.7 seconds; and</li>
<li>TTFB decreased from 0.9 seconds to an impressive 0.4 seconds.</li>
</ul>
<p>This dramatic shift in performance is a testament to <strong>Hyv&auml;'s ability to deliver exceptional speed and efficiency</strong>:</p></div></div><div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main" data-pb-style="M8WEQ22"><figure class="md:ml-4" data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="GFFC18H"><img class="pagebuilder-mobile-hidden" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Rosemarie-Schulz-60-Days-2.png" alt="60 Days on Hyv&auml;: Performance Charts" title="60 Days on Hyv&auml;: Performance Charts" data-element="desktop_image" data-pb-style="V1YNYTF"><img class="pagebuilder-mobile-only" src="https://www.jajuma.de/media/wysiwyg/Blog/shop/Rosemarie-Schulz-60-Days-2.png" alt="60 Days on Hyv&auml;: Performance Charts" title="60 Days on Hyv&auml;: Performance Charts" data-element="mobile_image" data-pb-style="BPK35JD"><figcaption data-element="caption">Sixty Days On Hyv&auml;: The beauty of speed and stability in one striking visual.</figcaption></figure></div></div></div><div data-content-type="text" data-appearance="default" data-element="main"><p>&nbsp;</p>
<div class="relative overflow-x-auto">
<table class="w-full text-gray-500 text-justify">
<thead class="text-gray-700 uppercase bg-gray-50">
<tr>
<th class="px-6 py-3" scope="col">Metric</th>
<th class="px-6 py-3" scope="col">Before Hyv&auml;</th>
<th class="px-6 py-3" scope="col">After 60 Days</th>
<th class="px-6 py-3" scope="col">Improvement</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">CLS</th>
<td class="px-6 py-4">0.3</td>
<td class="px-6 py-4">0.0</td>
<td class="px-6 py-4">Outstanding: -100%</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">LCP</th>
<td class="px-6 py-4">1.6</td>
<td class="px-6 py-4">0.8</td>
<td class="px-6 py-4">Significant: -50%</td>
</tr>
<tr class="bg-white border-b border-gray-200">
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">FCP</th>
<td class="px-6 py-4">1.3</td>
<td class="px-6 py-4">0.7</td>
<td class="px-6 py-4">Significant: -46%</td>
</tr>
<tr class="bg-white">
<th class="px-6 py-4 text-gray-900 whitespace-nowrap" scope="row">TTFB</th>
<td class="px-6 py-4">0.9</td>
<td class="px-6 py-4">0.4</td>
<td class="px-6 py-4">Significant: -55%</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p>
<p>The beauty of such speed is truly captivating, and this Hyv&auml; launch was no exception. <br>However, our excitement wasn't solely focused on the performance metrics.&nbsp;<br><strong>Successfully launching this high-performing site on a record-breaking low budget brought us at least as much joy as it did to our client</strong>.</p>
<p>Furthermore, we achieved this top-tier performance and a seamlessly operating online store on a cost-effective server.<br>Remarkably, we didn't need to rely on expensive and often complex technologies like Elasticsearch, Varnish, or Redis - <strong>just Magento, Hyv&auml; with JaJuMa refinements and a stable hosting environment </strong>to achieve these results.</p>
<p><strong>This showcase stands as a powerful testament to how well Magento is suited even for small merchants, thanks to manageable project budgets and minimized ongoing operational costs.</strong></p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">How We Built a Super-Fast Magento Store on a Super-Small Budget</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>Our approach rests on three key pillars:</p>
<ul class="list-disc ml-4 my-4">
<li><strong><a title="Magento Open Source -  eCommerce Plattform for Growth" href="https://magento-opensource.com/" target="_blank" rel="noopener nofollow">Magento</a>: Enterprise-Grade Open Source eCommerce Powerhouse</strong><br>Magento provides the essential foundation for unlimited flexibility, granting merchants complete ownership of their data, complete control over your ecommerce destiny and the freedom to operate independently without risky reliance on restrictive third-party platforms. All of this comes with a surprisingly low total cost of ownership, especially when compared to some proprietary solutions.</li>
<li><strong><a title="Hyv&auml; - eCommerce Made Happy" href="https://hyva.io" target="_blank" rel="noopener nofollow">Hyv&auml;</a>: The Frontend Revolution &ndash; Fast and Fiscally Smart</strong><br>Hyv&auml; delivers unparalleled page load speeds and accelerates development thanks to its modern and developer-friendly technology stack. It benefits from frequent updates, robust maintenance, and the support of a vibrant and extensive community. With speed and performance ingrained in its very DNA, Hyv&auml; is the guarantee for a future-proof frontend choice. Its streamlined architecture significantly reduces complexity compared to traditional Magento frontends, leading to faster development times and improved performance.<br>(Learn more about Hyv&auml;: <a class="bp67-text-primary bp67-hover:underline" title="Your Expert Resources about Hyv&auml;: The JaJuMa Hyv&auml;verse" href="https://www.jajuma.de/en/hyvaverse-guide" target="_blank" rel="noopener"><strong>Check all our Hyv&auml; resources in the JaJuMa Hyv&auml;verse</strong>.</a>)</li>
<li><strong><a title="JaJuMa - Magento &amp; Hyv&auml; Agency" href="https://www.jajuma.de/en" target="_blank" rel="noopener">JaJuMa</a>: Expertise That Turns Possibility into Reality</strong><br>With over a decade of experience working with Magento and as early adopters of Hyv&auml;, we constantly strive to push the boundaries of what's technically achievable while ensuring our clients' complete satisfaction. Our deep understanding of both Magento and Hyv&auml; allows us to craft efficient and cost-effective solutions. <a tabindex="-1" title="JaJuMa Hyv&auml; Expertise" href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener">Our "JaJuMa magic" lies in our vast experience</a>, our ability to leverage the full potential of Hyv&auml;, and our <a title="Magento Extensions" href="https://www.jajuma.de/en/jajuma-develop/magento-extensions" target="_blank" rel="noopener">impressive array of ready-made modules</a>. These modules, developed from previous work and research, cover a wide range of functionalities, from <a title="Performance Opimization Extensions" href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">performance optimization</a> to marketing and legal compliance, allowing us to meet client requirements as easily as installing an extension. This minimizes custom development work and significantly reduces project budgets .</li>
</ul></div><div data-content-type="text" data-appearance="default" data-element="main"><p>
    <style>
        .accordion-item-body-question,
        .accordion-widget > .accordion-item-body{
            display: none;
        }
                                .accordion-item-header-646:not(.active) .plus-minus::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDNhMSAxIDAgMDExIDF2NWg1YTEgMSAwIDExMCAyaC01djVhMSAxIDAgMTEtMiAwdi01SDRhMSAxIDAgMTEwLTJoNVY0YTEgMSAwIDAxMS0xeiIgY2xpcC1ydWxlPSJldmVub2RkIi8+Cjx0aXRsZT5wbHVzPC90aXRsZT48L3N2Zz4K);
            }
                                .accordion-item-header-646.active .plus-minus::after {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0idy02IGgtNiIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1IiByb2xlPSJpbWciPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMgMTBhMSAxIDAgMDExLTFoMTJhMSAxIDAgMTEwIDJINGExIDEgMCAwMS0xLTF6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPHRpdGxlPm1pbnVzPC90aXRsZT48L3N2Zz4K);
            }
        
                    .accordion-widget > .accordion-item-body{
                display: block;
            }
                @media only screen and (max-width: 767px) {
            .accordion-widget > .accordion-item-body {
                display: none;
            }
        }
    </style>

            </p><div class="accordion-widget accordion-item rounded-3xl white/30 shadow-lg border px-4 py-4 2xl:py-12
                    md:px-8 w-full mb-10" id="question-groups-0">
            <div class="accordion-item-header-646 cursor-pointer px-2 lg:px-8 py-4 pr-8 lg:pr-16 font-bold relative block md:block" data-index="0">
                <strong class="text-3xl text-bold">How To Launch A Fast Online Store On A Budget</strong>
                <span class="icon transition-all duration-300 transform absolute right-4 lg:right-8 mt-1.5 plus-minus">
                </span>
            </div>
            <div class="accordion-item-body overflow-hidden rounded-3xl bg-white/30 backdrop-blur-xl shadow-lg border border-container-light px-4 py-6 2xl:py-8 md:px-8 w-full" id="content-group-0">
                <div class="accordion-item-body-content overflow-hidden">
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-1">
                            <div class="accordion-item-header-646 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="0">
                                <span>Is Magento too expensive for smaller stores?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-1">
                                <div class="accordion-item-body-content p-4">
                                    <p>Not at all. With the right partner and efficient tooling (like Hyv&auml;), you can achieve top-notch performance without an astronomical budget.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-2">
                            <div class="accordion-item-header-646 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="1">
                                <span>Why choose Magento over Shopify and other ecommerce platforms?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-2">
                                <div class="accordion-item-body-content p-4">
                                    <p>Magento offers unparalleled flexibility, scalability, and control. With Magento, you own your data and can fully customize your online store, making it ideal for businesses that need a tailored solution without the limitations and risky dependecies of SaaS platforms.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-3">
                            <div class="accordion-item-header-646 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="2">
                                <span>What benefits does the Hyv&auml; theme bring to Magento?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-3">
                                <div class="accordion-item-body-content p-4">
                                    <p>The Hyv&auml; theme is built for speed and efficiency. It dramatically reduces page load times and development complexity, delivering a smooth, modern user experience that meets today&rsquo;s performance standards.</p>
<p>Check the <a title="JaJuMa-Shop | Top 10 Reasons for Hyv&auml; Theme" href="/en/jajuma-shop/top-10-reasons-for-hyva-themes"> Top 10 Reasons for Hyv&auml; Theme</a> to learn more about all the benefits of Hyv&auml; Theme.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-4">
                            <div class="accordion-item-header-646 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="3">
                                <span>How does Hyv&auml; improve performance compared to Luma?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-4">
                                <div class="accordion-item-body-content p-4">
                                    <p>Hyv&auml;&rsquo;s modern tech stack reduces complexity and bloat, translating into faster page loads, smoother user experiences, and better Core Web Vitals scores.</p>
<p>Discover more <a title="Performance Opimization Extensions" href="/en/jajuma-develop/performance-optimization-extensions" target="_blank" rel="noopener">performance optimization</a> opportunities for an even faster Hyv&auml; Theme.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-5">
                            <div class="accordion-item-header-646 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="4">
                                <span>How do you achieve such impressive performance improvements on a low budget?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-5">
                                <div class="accordion-item-body-content p-4">
                                    <p>By leveraging Magento&rsquo;s robust architecture, the lightweight Hyv&auml; theme, and our efficient development practices (including ready-made modules and targeted optimizations), we were able to significantly enhance performance without incurring high costs.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-6">
                            <div class="accordion-item-header-646 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="5">
                                <span>Is Magento suitable for small merchants?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-6">
                                <div class="accordion-item-body-content p-4">
                                    <p>Absolutely. With the right strategy and expertise, Magento can be configured and optimized to run efficiently on a low budget, making it a viable solution for small merchants as well as larger enterprises.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-7">
                            <div class="accordion-item-header-646 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="6">
                                <span>Can I update my existing Magento store with Hyv&auml;, or do I need a complete overhaul?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-7">
                                <div class="accordion-item-body-content p-4">
                                    <p>You can integrate the Hyv&auml; theme into your current Magento setup with minimal disruption. Our team is experienced in transitioning stores to Hyv&auml; while preserving existing functionality and branding.</p>                                </div>
                            </div>
                        </div>
                                            <div class="accordion-widget-content accordion-item mb-4" id="question-detail-8">
                            <div class="accordion-item-header-646 cursor-pointer py-4 font-bold relative accordion-item-header-question border-b border-black pr-8" data-index="7">
                                <span>What level of support can I expect during and after the upgrade?</span>
                                <span class="icon transition-all duration-300 transform absolute right-0 plus-minus">
                                </span>
                            </div>
                            <div class="accordion-item-body overflow-hidden accordion-item-body-question" id="content-question-8">
                                <div class="accordion-item-body-content p-4">
                                    <p>At JaJuMa, we offer comprehensive support throughout the project - from initial consultation and migration to post-launch monitoring - ensuring your store remains fast, secure, and optimized for growth.</p>                                </div>
                            </div>
                        </div>
                                    </div>
            </div>
        </div>
    
    

                
    </div><h2 data-content-type="heading" data-appearance="default" data-element="main">Key Takeaways: Magento Doesn&rsquo;t Have to Be Expensive</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>If you've ever heard someone claim that Magento is expensive, slow, or exclusively for large corporations, it's time to raise an eyebrow, perhaps even two, and ask some pointed questions . Because, in the right hands:</p>
<ul class="list-disc ml-4 my-4">
<li><strong>Magento does not have to be expensive and can be successfully run even on a tight budget </strong></li>
<li><strong>Magento can deliver super-fast performance</strong></li>
<li><strong>Magento is absolutely a viable and powerful platform for small merchants as well</strong></li>
</ul>
<p>This very project serves as compelling evidence of these truths. It's time to disregard the negative narratives surrounding Magento and be wary of any naysayers trying to steer you towards potentially inferior and less flexible SaaS solutions that come with their own set of game breaking limitations and dependencies.</p>
<p>Instead, seek out the <a tabindex="-1" title="JaJuMa Hyv&auml; Expertise" href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" target="_blank" rel="noopener"><strong>right partner</strong></a>, one with deep industry know-how, a client-centric approach and&nbsp;<strong><a tabindex="-1" title="Explore the JaJuMa Hyv&auml;verse" href="/en/hyvaverse-guide" target="_blank" rel="noopener">capable to leverage Hyv&auml; Theme and its companion products to the maximum</a></strong>, to get your online store up and running in a way that not only meets your business needs but also brings you genuine satisfaction.</p></div><h2 data-content-type="heading" data-appearance="default" data-element="main">Ready for a Fast Launch Ecommerce Store?</h2><div data-content-type="text" data-appearance="default" data-element="main"><p>If you&rsquo;re looking to transform your online business with a <strong>Magento</strong> store that&rsquo;s built on a <strong>low budget</strong> yet performs at <strong>lightning speed</strong>, <a title="Contact Us!" href="https://www.jajuma.de/en/contact" target="_blank" rel="noopener"><strong>contact JaJuMa</strong></a> today for a free consultation. We&rsquo;ll help you launch your <strong>online store</strong> in record time - showcasing the true power of Magento, <strong>Hyv&auml;</strong>, and our unique brand of <strong>JaJuMa magic</strong>.<br><strong><a title="Contact Us!" href="https://www.jajuma.de/en/contact" target="_blank" rel="noopener">Let JaJuMa help you launch your online store in record time!</a></strong></p></div><div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><div id="hyvaverse-spotlight-section"><style>.cmsb76-container {
width: 100%
}
@media (min-width: 640px) {
.cmsb76-container {
max-width: 640px
}
}
@media (min-width: 768px) {
.cmsb76-container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.cmsb76-container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.cmsb76-container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.cmsb76-container {
max-width: 1536px
}
}
.cmsb76-absolute {
position: absolute
}
.cmsb76-relative {
position: relative
}
.cmsb76-left-0 {
left: 0px
}
.cmsb76-right-3 {
right: 0.75rem
}
.cmsb76-top-0 {
top: 0px
}
.cmsb76-top-1\/2 {
top: 50%
}
.cmsb76-z-10 {
z-index: 10
}
.cmsb76-mx-auto {
margin-left: auto;
margin-right: auto
}
.cmsb76-my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.cmsb76-mb-5 {
margin-bottom: 1.25rem
}
.cmsb76-mb-6 {
margin-bottom: 1.5rem
}
.cmsb76-mb-8 {
margin-bottom: 2rem
}
.cmsb76-ml-4 {
margin-left: 1rem
}
.cmsb76-mr-2\.5 {
margin-right: 0.625rem
}
.cmsb76-mr-3 {
margin-right: 0.75rem
}
.cmsb76-mt-0 {
margin-top: 0px
}
.cmsb76-mt-2\.5 {
margin-top: 0.625rem
}
.cmsb76-mt-4 {
margin-top: 1rem
}
.cmsb76-mt-6 {
margin-top: 1.5rem
}
.cmsb76-block {
display: block
}
.cmsb76-flex {
display: flex
}
.cmsb76-inline-flex {
display: inline-flex
}
.cmsb76-grid {
display: grid
}
.cmsb76-hidden {
display: none
}
.cmsb76-h-10 {
height: 2.5rem
}
.cmsb76-h-24 {
height: 6rem
}
.cmsb76-h-6 {
height: 1.5rem
}
.cmsb76-h-8 {
height: 2rem
}
.cmsb76-h-auto {
height: auto
}
.cmsb76-h-full {
height: 100%
}
.cmsb76-w-10 {
width: 2.5rem
}
.cmsb76-w-24 {
width: 6rem
}
.cmsb76-w-44 {
width: 11rem
}
.cmsb76-w-6 {
width: 1.5rem
}
.cmsb76-w-8 {
width: 2rem
}
.cmsb76-w-full {
width: 100%
}
.cmsb76-min-w-\[18px\] {
min-width: 18px
}
.cmsb76-max-w-7xl {
max-width: 80rem
}
.cmsb76-flex-shrink-0 {
flex-shrink: 0
}
.cmsb76-flex-grow {
flex-grow: 1
}
.cmsb76--translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-list-none {
list-style-type: none
}
.cmsb76-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.cmsb76-flex-col {
flex-direction: column
}
.cmsb76-flex-wrap {
flex-wrap: wrap
}
.cmsb76-items-center {
align-items: center
}
.cmsb76-justify-center {
justify-content: center
}
.cmsb76-gap-4 {
gap: 1rem
}
.cmsb76-gap-5 {
gap: 1.25rem
}
.cmsb76-gap-6 {
gap: 1.5rem
}
.cmsb76-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.cmsb76-overflow-hidden {
overflow: hidden
}
.cmsb76-rounded-3xl {
border-radius: 1.5rem
}
.cmsb76-rounded-full {
border-radius: 9999px
}
.cmsb76-rounded-lg {
border-radius: 0.5rem
}
.cmsb76-rounded-md {
border-radius: 0.375rem
}
.cmsb76-rounded-xl {
border-radius: 0.75rem
}
.cmsb76-border {
border-width: 1px
}
.cmsb76-border-2 {
border-width: 2px
}
.cmsb76-border-b {
border-bottom-width: 1px
}
.cmsb76-border-sky-400\/30 {
border-color: rgb(56 189 248 / 0.3)
}
.cmsb76-border-sky-400\/50 {
border-color: rgb(56 189 248 / 0.5)
}
.cmsb76-border-white\/10 {
border-color: rgb(255 255 255 / 0.1)
}
.cmsb76-border-white\/20 {
border-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-sky-500\/30 {
background-color: rgb(14 165 233 / 0.3)
}
.cmsb76-bg-white\/10 {
background-color: rgb(255 255 255 / 0.1)
}
.cmsb76-bg-white\/20 {
background-color: rgb(255 255 255 / 0.2)
}
.cmsb76-bg-white\/5 {
background-color: rgb(255 255 255 / 0.05)
}
.cmsb76-object-contain {
object-fit: contain
}
.cmsb76-object-cover {
object-fit: cover
}
.cmsb76-p-0 {
padding: 0px
}
.cmsb76-p-1\.5 {
padding: 0.375rem
}
.cmsb76-p-2\.5 {
padding: 0.625rem
}
.cmsb76-p-4 {
padding: 1rem
}
.cmsb76-p-6 {
padding: 1.5rem
}
.cmsb76-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}
.cmsb76-px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.cmsb76-px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.cmsb76-py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}
.cmsb76-py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.cmsb76-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.cmsb76-pb-3 {
padding-bottom: 0.75rem
}
.cmsb76-text-center {
text-align: center
}
.cmsb76-align-middle {
vertical-align: middle
}
.cmsb76-text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.cmsb76-text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.cmsb76-text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
.cmsb76-font-black {
font-weight: 900
}
.cmsb76-font-bold {
font-weight: 700
}
.cmsb76-font-medium {
font-weight: 500
}
.cmsb76-font-semibold {
font-weight: 600
}
.cmsb76-uppercase {
text-transform: uppercase
}
.cmsb76-leading-relaxed {
line-height: 1.625
}
.cmsb76-leading-tight {
line-height: 1.25
}
.cmsb76-tracking-tight {
letter-spacing: -0.025em
}
.cmsb76-\!text-\[\#402c05\] {
--tw-text-opacity: 1 !important;
color: rgb(64 44 5 / var(--tw-text-opacity)) !important
}
.cmsb76-\!text-white {
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}
.cmsb76-text-sky-200 {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity))
}
.cmsb76-text-sky-300 {
--tw-text-opacity: 1;
color: rgb(125 211 252 / var(--tw-text-opacity))
}
.cmsb76-text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity))
}
.cmsb76-text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity))
}
.cmsb76-text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.cmsb76-\!no-underline {
text-decoration-line: none !important
}
.cmsb76-opacity-0 {
opacity: 0
}
.cmsb76-opacity-40 {
opacity: 0.4
}
.cmsb76-shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.cmsb76-transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
.cmsb76-duration-200 {
transition-duration: 200ms
}
.cmsb76-duration-300 {
transition-duration: 300ms
}
.cmsb76-ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.cmsb76-hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-hover\:border-sky-500\/50:hover {
border-color: rgb(14 165 233 / 0.5)
}
.cmsb76-hover\:bg-slate-700\/60:hover {
background-color: rgb(51 65 85 / 0.6)
}
.cmsb76-hover\:text-sky-100:hover {
--tw-text-opacity: 1;
color: rgb(224 242 254 / var(--tw-text-opacity))
}
.cmsb76-hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.cmsb76-hover\:shadow-sky-500\/20:hover {
--tw-shadow-color: rgb(14 165 233 / 0.2);
--tw-shadow: var(--tw-shadow-colored)
}
.cmsb76-focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.cmsb76-focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.cmsb76-focus\:ring-sky-300\/70:focus {
--tw-ring-color: rgb(125 211 252 / 0.7)
}
.cmsb76-focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.cmsb76-focus\:ring-offset-slate-900:focus {
--tw-ring-offset-color: #0f172a
}
.cmsb76-group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cmsb76-group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.cmsb76-sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-sm\:text-5xl {
font-size: 3rem;
line-height: 1
}
.cmsb76-sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.cmsb76-sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
}
@media (min-width: 768px) {
.cmsb76-md\:h-28 {
height: 7rem
}
.cmsb76-md\:w-28 {
width: 7rem
}
.cmsb76-md\:gap-6 {
gap: 1.5rem
}
.cmsb76-md\:p-6 {
padding: 1.5rem
}
.cmsb76-md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem
}
}
@media (min-width: 1024px) {
.cmsb76-lg\:ml-6 {
margin-left: 1.5rem
}
.cmsb76-lg\:w-max {
width: max-content
}
.cmsb76-lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.cmsb76-lg\:flex-row {
flex-direction: row
}
.cmsb76-lg\:gap-8 {
gap: 2rem
}
.cmsb76-lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.cmsb76-lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.cmsb76-lg\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
.cmsb76-lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}
@media (min-width: 1280px) {
.cmsb76-xl\:overflow-y-auto {
overflow-y: auto
}
}
@media (min-width: 1536px) {
.cmsb76-\32xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
}</style>
<div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true"><style>
    #hyvaverse-spotlight-section {
        background-color: #0F172A;
    }

    .blog-page #hyvaverse-spotlight-section {
        border-radius: 24px;
        overflow: hidden;
        margin: 20px 0 10px;
    }

    .blog-page .hyvaverse-teaser-columns-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1540px) {
        .blog-page .hyvaverse-teaser-columns-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .blog-page .hyvaverse-teaser-columns-grid .hyvaverse-column-headline {
            font-size: 20px;
        }
    }
</style>
<section class="hyvaverse-teaser cmsb76-relative cmsb76-py-16 cmsb76-md:py-24 cmsb76-overflow-hidden">
    <video autoplay loop muted playsinline class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-object-cover">
        <source src="/media/wysiwyg/jajuma-hyvaverse/planet-earth-rotating-in-hyvaverse-with-shiny-light.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </source></video>
    <div class="cmsb76-absolute cmsb76-top-0 cmsb76-left-0 cmsb76-w-full cmsb76-h-full cmsb76-opacity-40"></div>

    <div class="cmsb76-relative cmsb76-z-10 cmsb76-container cmsb76-mx-auto cmsb76-px-4 cmsb76-sm:px-6 cmsb76-lg:px-8">
        <p class="hyvaverse-eyebrow-title cmsb76-block cmsb76-uppercase cmsb76-text-center cmsb76-text-base cmsb76-sm:text-lg cmsb76-bg-sky-500/30 cmsb76-text-sky-200 cmsb76-rounded-full cmsb76-font-semibold cmsb76-py-2 cmsb76-px-5 cmsb76-mt-0 cmsb76-mb-6 cmsb76-mx-auto cmsb76-leading-tight cmsb76-lg:w-max cmsb76-shadow-md">
            Your Portal to Peak Hyvä Performance
        </p>

        <div class="hyvaverse-title-area cmsb76-flex cmsb76-flex-col cmsb76-lg:flex-row cmsb76-gap-5 cmsb76-items-center cmsb76-justify-center cmsb76-text-center">
            <img src="/media/wysiwyg/takeoff/Takeoff-Hyvanaut.png" alt="JaJuMa Hyvänaut Riding The Hyvä Rocket" class="hyvanaut-emblem cmsb76-w-24 cmsb76-h-24 cmsb76-md:w-28 cmsb76-md:h-28 cmsb76-p-2.5 cmsb76-mx-auto cmsb76-rounded-full cmsb76-shadow-xl cmsb76-border-2 cmsb76-border-sky-400/50 cmsb76-object-cover">
            <h2 id="hyvaverse-main-title" class="hyvaverse-teaser-main-title cmsb76-font-black cmsb76-text-4xl cmsb76-sm:text-5xl cmsb76-lg:text-6xl cmsb76-mt-0 cmsb76-uppercase cmsb76-text-slate-100 cmsb76-tracking-tight">
                The JaJuMa <span class="cmsb76-text-sky-300">Hyväverse</span>
            </h2>
        </div>

        <div class="hyvaverse-partner-badges-container cmsb76-flex cmsb76-justify-center cmsb76-items-center cmsb76-gap-4 cmsb76-md:gap-6 cmsb76-my-6 cmsb76-flex-wrap">
            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <path d="M726.596 0H17.4035C7.79181 0 0 9.67065 0 21.6V194.4C0 206.329 7.79181 216 17.4035 216H726.596C736.208 216 744 206.329 744 194.4V21.6C744 9.67065 736.208 0 726.596 0Z" fill="#000938"></path>
                    <path d="M132.47 125.008L122.084 88.7458H107.615L122.816 135.329H127.395L119.7 158.137H134.405L157.702 88.7458H143.139L132.47 125.008Z" fill="#0CF292"></path>
                    <path d="M195.869 88.7458L184.634 120.249L173.47 88.7458H159.096L177.246 134.339H192.046L210.174 88.7458H195.869Z" fill="#0CF292"></path>
                    <path d="M245.767 91.7852C242.132 89.217 237.412 87.5676 232.241 87.5676C219.213 87.5676 208.638 97.9351 208.638 111.578C208.638 125.221 219.331 135.541 232.195 135.541C237.412 135.541 242.132 133.915 245.767 131.276V134.363H258.938V88.7692H245.767V91.7852ZM244.917 118.034C242.769 121.356 238.992 123.595 234.579 123.595C228.064 123.595 222.446 118.199 222.446 111.531C222.446 104.863 228.159 99.5374 234.579 99.5374C238.946 99.5374 242.769 101.776 244.917 105.145V118.034Z" fill="#0CF292"></path>
                    <path d="M85.6637 87.5681C80.3529 87.5681 75.6322 89.5003 71.7612 92.5869V63.9114H54.4362L49.9751 77.2006H58.4489V134.34H72.4221V105.476C74.4048 102.507 77.9926 99.6793 82.9021 99.6793C88.8738 99.6793 93.2405 103.143 93.2405 112.332V134.363H107.143V112.332C107.143 94.519 96.5686 87.5681 85.6874 87.5681H85.6637Z" fill="#0CF292"></path>
                    <path d="M238.567 63.8875H223.249L218.788 77.2002H234.083L238.567 63.8875Z" fill="#0CF292"></path>
                    <path d="M239.134 77.2002H254.452L258.938 63.8875H243.619L239.134 77.2002Z" fill="#0CF292"></path>
                    <path opacity="0.6" d="M308.973 57V158.5" stroke="#0CF292"></path>
                    <path d="M384.278 99.4242C383.093 93.8127 378.915 90.6952 372.305 90.6952C362.451 90.6952 358.585 99.5489 358.585 107.904C358.585 116.321 361.516 125.175 371.93 125.175C379.289 125.175 385.151 120.062 385.151 112.642H372.055V106.906H392.136V130.225H387.459L385.713 124.052H385.588C382.532 128.604 378.354 131.098 371.556 131.098C358.647 131.098 351.476 121.371 351.476 107.904C351.476 94.4986 359.645 84.772 372.367 84.772C383.842 84.772 389.953 90.9446 391.45 99.4242H384.278ZM412.527 131.16C402.611 131.16 396.625 124.302 396.625 114.326C396.625 104.412 402.611 97.429 412.527 97.429C422.443 97.429 428.43 104.35 428.43 114.264C428.43 124.24 422.443 131.16 412.527 131.16ZM412.527 126.11C419.013 126.11 422.069 120.935 422.069 114.326C422.069 107.654 419.013 102.542 412.527 102.542C405.979 102.542 402.986 107.654 402.986 114.326C402.986 120.935 405.979 126.11 412.527 126.11ZM432.566 85.6449H438.677V130.225H432.566V85.6449ZM466.814 102.292H466.939V85.6449H473.113V130.225H466.939V126.484H466.814C465.131 128.729 462.013 131.098 457.024 131.098C448.916 131.098 442.805 124.801 442.805 114.326C442.805 103.851 448.916 97.4914 457.024 97.4914C462.013 97.4914 465.131 99.7983 466.814 102.292ZM458.021 126.048C463.509 126.048 466.939 121.496 466.939 114.326C466.939 107.093 463.509 102.604 458.021 102.604C452.034 102.604 449.166 108.091 449.166 114.326C449.166 120.561 452.034 126.048 458.021 126.048ZM492.514 130.225V85.6449H511.098C519.517 85.6449 525.753 89.5729 525.753 98.9254C525.753 108.278 519.517 112.144 511.098 112.144H499.373V130.225H492.514ZM499.373 106.22H510.786C515.962 106.22 518.581 103.913 518.581 98.9254C518.581 93.8751 515.962 91.5681 510.786 91.5681H499.373V106.22ZM550.183 102.292H550.308V98.4266H556.482V130.225H550.308V126.484H550.183C548.499 128.729 545.381 131.098 540.392 131.098C532.285 131.098 526.173 124.801 526.173 114.326C526.173 103.851 532.285 97.4914 540.392 97.4914C545.381 97.4914 548.499 99.7983 550.183 102.292ZM541.39 126.048C546.878 126.048 550.308 121.496 550.308 114.326C550.308 107.093 546.878 102.604 541.39 102.604C535.403 102.604 532.534 108.091 532.534 114.326C532.534 120.561 535.403 126.048 541.39 126.048ZM562.67 98.4266H568.782V104.475H568.906C570.528 100.484 573.147 97.6784 577.45 97.6784C578.573 97.6784 579.446 97.7408 580.381 97.8655V103.726C579.57 103.602 579.009 103.539 578.323 103.539C572.773 103.539 568.782 107.717 568.782 113.765V130.225H562.67V98.4266ZM582.642 98.4266H587.257V88.2012H593.368V98.4266H599.48V103.477H593.368V121.434C593.368 124.801 594.304 125.549 596.923 125.549C597.921 125.549 598.42 125.487 599.542 125.299V130.225C597.921 130.537 596.985 130.599 595.613 130.599C590.437 130.599 587.257 128.604 587.257 121.247V103.477H582.642V98.4266ZM604.054 130.225V98.4266H610.166V102.417H610.29C611.974 99.9854 615.279 97.4914 620.767 97.4914C626.629 97.4914 631.369 100.858 631.369 108.153V130.225H625.195V109.837C625.195 105.597 623.324 102.729 618.772 102.729C613.533 102.729 610.166 105.909 610.166 110.71V130.225H604.054ZM650.645 131.16C640.542 131.16 634.929 123.99 634.929 114.264C634.929 104.288 640.916 97.429 650.645 97.429C660.311 97.429 665.737 103.789 665.737 113.64C665.737 114.513 665.737 115.448 665.674 115.947H641.228C641.353 121.309 644.471 126.172 650.77 126.172C656.382 126.172 658.502 122.556 659.126 120.436H665.3C663.679 126.546 659.001 131.16 650.645 131.16ZM650.458 102.417C645.344 102.417 641.602 105.909 641.228 111.146H659.313C659.313 106.158 655.883 102.417 650.458 102.417ZM670.209 98.4266H676.321V104.475H676.446C678.067 100.484 680.686 97.6784 684.989 97.6784C686.112 97.6784 686.985 97.7408 687.92 97.8655V103.726C687.109 103.602 686.548 103.539 685.862 103.539C680.312 103.539 676.321 107.717 676.321 113.765V130.225H670.209V98.4266Z" fill="#0CF292"></path>
                </svg>
            </a>

            <a href="/en/jajuma-develop/hyva-extensions" title="Hyvä Development Services - Hyvä Technology Partner Agency" target="_blank">
                <svg width="744" height="216" viewbox="0 0 744 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Technology Partner official badge</title>
                    <rect width="744" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.496 128.154V166.5H242.784V128.154H229.716V120.432H264.564V128.154H251.496Z" fill="#0A144B"></path>
                    <path d="M269.057 166.5V120.432H299.417V128.154H277.769V139.308H296.909V147.03H277.769V158.778H299.417V166.5H269.057Z" fill="#0A144B"></path>
                    <path d="M322.557 167.292C319.521 167.292 316.771 166.808 314.307 165.84C311.887 164.828 309.797 163.332 308.037 161.352C306.321 159.372 305.001 156.93 304.077 154.026C303.153 151.078 302.691 147.668 302.691 143.796C302.691 139.924 303.153 136.492 304.077 133.5C305.001 130.464 306.321 127.934 308.037 125.91C309.797 123.842 311.887 122.28 314.307 121.224C316.771 120.168 319.521 119.64 322.557 119.64C326.693 119.64 330.125 120.52 332.853 122.28C335.581 124.04 337.759 126.702 339.387 130.266L331.929 134.226C331.269 132.158 330.191 130.508 328.695 129.276C327.199 128 325.153 127.362 322.557 127.362C319.301 127.362 316.705 128.462 314.769 130.662C312.877 132.862 311.931 135.942 311.931 139.902V147.162C311.931 151.166 312.877 154.246 314.769 156.402C316.705 158.514 319.301 159.57 322.557 159.57C325.153 159.57 327.265 158.866 328.893 157.458C330.565 156.05 331.775 154.312 332.523 152.244L339.585 156.402C337.913 159.834 335.691 162.518 332.919 164.454C330.147 166.346 326.693 167.292 322.557 167.292Z" fill="#0A144B"></path>
                    <path d="M371.635 147.03H352.429V166.5H343.717V120.432H352.429V139.308H371.635V120.432H380.347V166.5H371.635V147.03Z" fill="#0A144B"></path>
                    <path d="M402.792 166.5V120.432H423.516C425.628 120.432 427.52 120.784 429.192 121.488C430.908 122.148 432.36 123.116 433.548 124.392C434.736 125.624 435.638 127.12 436.254 128.88C436.87 130.64 437.178 132.576 437.178 134.688C437.178 136.844 436.87 138.802 436.254 140.562C435.638 142.278 434.736 143.774 433.548 145.05C432.36 146.282 430.908 147.25 429.192 147.954C427.52 148.614 425.628 148.944 423.516 148.944H411.504V166.5H402.792ZM411.504 141.42H422.724C424.396 141.42 425.716 140.98 426.684 140.1C427.652 139.176 428.136 137.878 428.136 136.206V133.17C428.136 131.498 427.652 130.222 426.684 129.342C425.716 128.462 424.396 128.022 422.724 128.022H411.504V141.42Z" fill="#0A144B"></path>
                    <path d="M465.665 166.5L461.97 154.752H445.602L441.972 166.5H433.128L448.572 120.432H459.396L474.708 166.5H465.665ZM453.917 128.352H453.587L447.714 147.294H459.858L453.917 128.352Z" fill="#0A144B"></path>
                    <path d="M487.569 166.5H478.857V120.432H499.647C501.759 120.432 503.651 120.762 505.323 121.422C506.995 122.082 508.403 123.05 509.547 124.326C510.735 125.558 511.637 127.054 512.253 128.814C512.913 130.574 513.243 132.532 513.243 134.688C513.243 137.856 512.517 140.584 511.065 142.872C509.657 145.16 507.523 146.788 504.663 147.756L514.101 166.5H504.399L495.819 148.746H487.569V166.5ZM498.789 141.42C500.461 141.42 501.781 140.98 502.749 140.1C503.717 139.176 504.201 137.878 504.201 136.206V133.17C504.201 131.498 503.717 130.222 502.749 129.342C501.781 128.462 500.461 128.022 498.789 128.022H487.569V141.42H498.789Z" fill="#0A144B"></path>
                    <path d="M538.129 128.154V166.5H529.417V128.154H516.349V120.432H551.197V128.154H538.129Z" fill="#0A144B"></path>
                    <path d="M568.231 142.872L563.479 133.302H563.281V166.5H555.031V120.432H564.601L578.461 144.06L583.213 153.63H583.411V120.432H591.661V166.5H582.091L568.231 142.872Z" fill="#0A144B"></path>
                    <path d="M598.508 166.5V120.432H628.868V128.154H607.22V139.308H626.36V147.03H607.22V158.778H628.868V166.5H598.508Z" fill="#0A144B"></path>
                    <path d="M642.834 166.5H634.122V120.432H654.912C657.024 120.432 658.916 120.762 660.588 121.422C662.26 122.082 663.668 123.05 664.812 124.326C666 125.558 666.902 127.054 667.518 128.814C668.178 130.574 668.508 132.532 668.508 134.688C668.508 137.856 667.782 140.584 666.33 142.872C664.922 145.16 662.788 146.788 659.928 147.756L669.366 166.5H659.664L651.084 148.746H642.834V166.5ZM654.054 141.42C655.726 141.42 657.046 140.98 658.014 140.1C658.982 139.176 659.466 137.878 659.466 136.206V133.17C659.466 131.498 658.982 130.222 658.014 129.342C657.046 128.462 655.726 128.022 654.054 128.022H642.834V141.42H654.054Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Hyvä Development Services - Hyvä Gold Contributor Agency" target="_blank">
                <svg width="732" height="216" viewbox="0 0 732 216" fill="none" class="cmsb76-w-44 cmsb76-h-auto cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" xmlns="http://www.w3.org/2000/svg">
                    <title>JaJuMa Hyva Contributor official badge</title>
                    <rect width="732" height="216" rx="24" fill="#F6F7FF"></rect>
                    <rect width="193.5" height="216" fill="#0A23B9"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M82.1696 96.8455C88.7785 91.6058 96.8291 88.3102 105.895 88.3102C124.452 88.3102 142.5 100.145 142.5 130.479V168H118.775V130.479C118.775 114.845 111.322 108.929 101.15 108.929C92.7612 108.929 86.662 113.747 83.2711 118.816V168H59.4616V70.6484H45L52.612 48H82.1696V96.8455ZM133.024 68.1033L138.96 50.5396H118.204L112.297 68.1033H133.024ZM116.369 48H142.5L134.849 70.6484H108.757L116.369 48Z" fill="#14FFAF"></path>
                    <path d="M251.298 167.292C248.262 167.292 245.512 166.808 243.048 165.84C240.628 164.828 238.538 163.332 236.778 161.352C235.062 159.372 233.742 156.93 232.818 154.026C231.894 151.078 231.432 147.668 231.432 143.796C231.432 139.924 231.894 136.492 232.818 133.5C233.742 130.464 235.062 127.934 236.778 125.91C238.538 123.842 240.628 122.28 243.048 121.224C245.512 120.168 248.262 119.64 251.298 119.64C255.434 119.64 258.866 120.52 261.594 122.28C264.322 124.04 266.5 126.702 268.128 130.266L260.67 134.226C260.01 132.158 258.932 130.508 257.436 129.276C255.94 128 253.894 127.362 251.298 127.362C248.042 127.362 245.446 128.462 243.51 130.662C241.618 132.862 240.672 135.942 240.672 139.902V147.162C240.672 151.166 241.618 154.246 243.51 156.402C245.446 158.514 248.042 159.57 251.298 159.57C253.894 159.57 256.006 158.866 257.634 157.458C259.306 156.05 260.516 154.312 261.264 152.244L268.326 156.402C266.654 159.834 264.432 162.518 261.66 164.454C258.888 166.346 255.434 167.292 251.298 167.292Z" fill="#0A144B"></path>
                    <path d="M290.542 167.292C287.506 167.292 284.756 166.786 282.292 165.774C279.828 164.762 277.716 163.244 275.956 161.22C274.24 159.196 272.898 156.71 271.93 153.762C270.962 150.814 270.478 147.382 270.478 143.466C270.478 139.594 270.962 136.184 271.93 133.236C272.898 130.244 274.24 127.736 275.956 125.712C277.716 123.688 279.828 122.17 282.292 121.158C284.756 120.146 287.506 119.64 290.542 119.64C293.578 119.64 296.328 120.146 298.792 121.158C301.256 122.17 303.368 123.688 305.128 125.712C306.888 127.736 308.23 130.244 309.154 133.236C310.122 136.184 310.606 139.594 310.606 143.466C310.606 147.382 310.122 150.814 309.154 153.762C308.23 156.71 306.888 159.196 305.128 161.22C303.368 163.244 301.256 164.762 298.792 165.774C296.328 166.786 293.578 167.292 290.542 167.292ZM290.542 159.57C293.842 159.57 296.46 158.47 298.396 156.27C300.376 154.07 301.366 150.99 301.366 147.03V139.902C301.366 135.942 300.376 132.862 298.396 130.662C296.46 128.462 293.842 127.362 290.542 127.362C287.242 127.362 284.602 128.462 282.622 130.662C280.686 132.862 279.718 135.942 279.718 139.902V147.03C279.718 150.99 280.686 154.07 282.622 156.27C284.602 158.47 287.242 159.57 290.542 159.57Z" fill="#0A144B"></path>
                    <path d="M328.684 142.872L323.932 133.302H323.734V166.5H315.484V120.432H325.054L338.914 144.06L343.666 153.63H343.864V120.432H352.114V166.5H342.544L328.684 142.872Z" fill="#0A144B"></path>
                    <path d="M378.366 128.154V166.5H369.654V128.154H356.586V120.432H391.434V128.154H378.366Z" fill="#0A144B">
                    </path>
                    <path d="M403.979 166.5H395.267V120.432H416.057C418.169 120.432 420.061 120.762 421.733 121.422C423.405 122.082 424.813 123.05 425.957 124.326C427.145 125.558 428.047 127.054 428.663 128.814C429.323 130.574 429.653 132.532 429.653 134.688C429.653 137.856 428.927 140.584 427.475 142.872C426.067 145.16 423.933 146.788 421.073 147.756L430.511 166.5H420.809L412.229 148.746H403.979V166.5ZM415.199 141.42C416.871 141.42 418.191 140.98 419.159 140.1C420.127 139.176 420.611 137.878 420.611 136.206V133.17C420.611 131.498 420.127 130.222 419.159 129.342C418.191 128.462 416.871 128.022 415.199 128.022H403.979V141.42H415.199Z" fill="#0A144B"></path>
                    <path d="M434.541 166.5V159.504H440.613V127.428H434.541V120.432H455.463V127.428H449.325V159.504H455.463V166.5H434.541Z" fill="#0A144B"></path>
                    <path d="M461.063 120.432H482.381C484.273 120.432 485.967 120.718 487.463 121.29C489.003 121.862 490.301 122.654 491.357 123.666C492.413 124.678 493.205 125.932 493.733 127.428C494.305 128.88 494.591 130.486 494.591 132.246C494.591 134.006 494.349 135.502 493.865 136.734C493.425 137.922 492.809 138.912 492.017 139.704C491.269 140.496 490.389 141.09 489.377 141.486C488.409 141.882 487.397 142.102 486.341 142.146V142.542C487.353 142.542 488.431 142.74 489.575 143.136C490.763 143.532 491.841 144.17 492.809 145.05C493.821 145.886 494.657 146.986 495.317 148.35C495.977 149.67 496.307 151.32 496.307 153.3C496.307 155.148 495.999 156.886 495.383 158.514C494.811 160.098 493.997 161.484 492.941 162.672C491.885 163.86 490.631 164.806 489.179 165.51C487.727 166.17 486.143 166.5 484.427 166.5H461.063V120.432ZM469.775 159.108H481.919C483.591 159.108 484.889 158.69 485.813 157.854C486.737 156.974 487.199 155.72 487.199 154.092V151.848C487.199 150.22 486.737 148.966 485.813 148.086C484.889 147.206 483.591 146.766 481.919 146.766H469.775V159.108ZM469.775 139.638H480.533C482.117 139.638 483.349 139.22 484.229 138.384C485.109 137.504 485.549 136.294 485.549 134.754V132.708C485.549 131.168 485.109 129.98 484.229 129.144C483.349 128.264 482.117 127.824 480.533 127.824H469.775V139.638Z" fill="#0A144B"></path>
                    <path d="M509.777 120.432V148.746C509.777 152.354 510.459 155.06 511.823 156.864C513.231 158.668 515.585 159.57 518.885 159.57C522.185 159.57 524.517 158.668 525.881 156.864C527.289 155.06 527.993 152.354 527.993 148.746V120.432H536.573V147.624C536.573 151.012 536.243 153.938 535.583 156.402C534.967 158.866 533.955 160.912 532.547 162.54C531.139 164.168 529.291 165.378 527.003 166.17C524.759 166.918 522.031 167.292 518.819 167.292C515.563 167.292 512.813 166.918 510.569 166.17C508.369 165.378 506.565 164.168 505.157 162.54C503.749 160.912 502.737 158.866 502.121 156.402C501.505 153.938 501.197 151.012 501.197 147.624V120.432H509.777Z" fill="#0A144B"></path>
                    <path d="M563.199 128.154V166.5H554.487V128.154H541.419V120.432H576.267V128.154H563.199Z" fill="#0A144B">
                    </path>
                    <path d="M596.864 167.292C593.828 167.292 591.078 166.786 588.614 165.774C586.15 164.762 584.038 163.244 582.278 161.22C580.562 159.196 579.22 156.71 578.252 153.762C577.284 150.814 576.8 147.382 576.8 143.466C576.8 139.594 577.284 136.184 578.252 133.236C579.22 130.244 580.562 127.736 582.278 125.712C584.038 123.688 586.15 122.17 588.614 121.158C591.078 120.146 593.828 119.64 596.864 119.64C599.9 119.64 602.65 120.146 605.114 121.158C607.578 122.17 609.69 123.688 611.45 125.712C613.21 127.736 614.552 130.244 615.476 133.236C616.444 136.184 616.928 139.594 616.928 143.466C616.928 147.382 616.444 150.814 615.476 153.762C614.552 156.71 613.21 159.196 611.45 161.22C609.69 163.244 607.578 164.762 605.114 165.774C602.65 166.786 599.9 167.292 596.864 167.292ZM596.864 159.57C600.164 159.57 602.782 158.47 604.718 156.27C606.698 154.07 607.688 150.99 607.688 147.03V139.902C607.688 135.942 606.698 132.862 604.718 130.662C602.782 128.462 600.164 127.362 596.864 127.362C593.564 127.362 590.924 128.462 588.944 130.662C587.008 132.862 586.04 135.942 586.04 139.902V147.03C586.04 150.99 587.008 154.07 588.944 156.27C590.924 158.47 593.564 159.57 596.864 159.57Z" fill="#0A144B"></path>
                    <path d="M631.179 166.5H622.467V120.432H643.257C645.369 120.432 647.261 120.762 648.933 121.422C650.605 122.082 652.013 123.05 653.157 124.326C654.345 125.558 655.247 127.054 655.863 128.814C656.523 130.574 656.853 132.532 656.853 134.688C656.853 137.856 656.127 140.584 654.675 142.872C653.267 145.16 651.133 146.788 648.273 147.756L657.711 166.5H648.009L639.429 148.746H631.179V166.5ZM642.399 141.42C644.071 141.42 645.391 140.98 646.359 140.1C647.327 139.176 647.811 137.878 647.811 136.206V133.17C647.811 131.498 647.327 130.222 646.359 129.342C645.391 128.462 644.071 128.022 642.399 128.022H631.179V141.42H642.399Z" fill="#0A144B"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M242.515 67.1642C245.136 65.016 248.415 63.834 251.804 63.8161C259.066 63.8161 266.121 68.4374 266.149 80.3678V95.1182H256.869V80.3961C256.869 74.2281 253.955 71.9081 249.975 71.9081C248.578 71.9242 247.208 72.2868 245.987 72.9634C244.765 73.64 243.731 74.6092 242.977 75.7843V95.0899H233.659V56.8936H228L230.98 48H242.515V67.1642ZM358.621 66.6359C356.214 64.9779 353.4 64.0094 350.482 63.8351C347.565 63.6607 344.655 64.2871 342.068 65.6466C339.481 67.006 337.314 69.0468 335.803 71.5483C334.291 74.0498 333.493 76.9169 333.493 79.8395C333.493 82.7622 334.291 85.6292 335.803 88.1307C337.314 90.6322 339.481 92.673 342.068 94.0325C344.655 95.3919 347.565 96.0183 350.482 95.844C353.4 95.6696 356.214 94.7011 358.621 93.0432V95.0992H367.401V64.6648H358.621V66.6359ZM358.055 84.1779C357.121 85.6518 355.734 86.7826 354.103 87.4003C352.471 88.0181 350.683 88.0892 349.007 87.6032C347.331 87.1171 345.859 86.1001 344.811 84.7051C343.763 83.3101 343.197 81.6125 343.197 79.8678C343.197 78.1231 343.763 76.4256 344.811 75.0306C345.859 73.6356 347.331 72.6185 349.007 72.1325C350.683 71.6464 352.471 71.7176 354.103 72.3353C355.734 72.953 357.121 74.0839 358.055 75.5578V84.1779ZM276.092 64.6175L283.024 88.8557L290.154 64.6175H299.868L284.316 111H274.507L279.647 95.7499H276.592L266.444 64.6175H276.092ZM317.846 85.6679L325.335 64.6175H334.889L322.779 95.0897H312.904L300.804 64.6175H310.386L317.846 85.6679ZM353.83 48.0098H343.607L340.626 56.894H350.831L353.83 48.0098ZM357.18 48.0098H367.413L364.414 56.894H354.209L357.18 48.0098Z" fill="#0A144B"></path>
                </svg>
            </a>

            <a href="/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Hyvä Certified Developers" target="_blank">
                <img src="https://www.jajuma.de/media/wysiwyg/badges/hyva-associate-2025-192.png" width="60" height="60" class="cmsb76-object-contain cmsb76-rounded-lg cmsb76-shadow-lg cmsb76-bg-white/5 cmsb76-p-1.5 cmsb76-backdrop-blur-sm cmsb76-border cmsb76-border-white/10 cmsb76-transition-transform cmsb76-duration-300 cmsb76-hover:scale-105" alt="Hyvä Certified Developers" loading="lazy">
            </a>
        </div>

        <div class="hyvaverse-main-cta-container cmsb76-text-center">
            <a href="/en/hyvaverse-guide" class="hyvaverse-main-cta-button btn-primary cmsb76-inline-flex cmsb76-items-center cmsb76-justify-center cmsb76-px-4 cmsb76-py-2 cmsb76-lg:px-6 cmsb76-text-lg cmsb76-lg:text-xl cmsb76-font-bold cmsb76-rounded-lg cmsb76-shadow-xl cmsb76-focus:outline-none cmsb76-focus:ring-4 cmsb76-focus:ring-sky-300/70 cmsb76-focus:ring-offset-2 cmsb76-focus:ring-offset-slate-900 cmsb76-transition-all cmsb76-ease-in-out cmsb76-duration-300 cmsb76-transform cmsb76-hover:scale-105 cmsb76-hover:shadow-2xl cmsb76-!text-[#402c05] hyvaverse-teaser-shine" title="Explore the central hub of JaJuMa's Hyvä knowledge, services, and insights.">
                <span>🚀 Launch into the JaJuMa Hyväverse Hub</span>
                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" class="cmsb76-flex-shrink-0 cmsb76-w-10 cmsb76-h-10 cmsb76-ml-4 cmsb76-lg:ml-6" width="245.000000pt" height="210.000000pt" viewbox="0 0 245.000000 210.000000" preserveaspectratio="xMidYMid meet">

<g transform="translate(0.000000,210.000000) scale(0.100000,-0.100000)" fill="#402b05" stroke="none">
<path d="M307 2010 c-3 -8 -13 -38 -21 -66 -20 -63 -56 -98 -121 -116 l-50
-14 51 -17 c62 -21 108 -68 125 -127 16 -60 26 -69 35 -34 19 78 64 134 126
153 53 17 54 27 5 40 -66 17 -97 50 -122 128 -13 38 -25 61 -28 53z"></path>
<path d="M2026 1890 c-20 -70 -51 -104 -101 -115 l-30 -6 43 -21 c43 -21 74
-55 87 -97 7 -24 8 -24 22 10 19 46 41 69 87 90 l39 17 -41 11 c-45 13 -75 46
-89 101 -9 34 -10 34 -17 10z"></path>
<path d="M1056 1814 c-101 -18 -175 -49 -264 -108 -219 -145 -338 -397 -304
-643 7 -48 20 -116 29 -150 l18 -63 44 0 c24 0 72 4 105 10 34 5 111 16 171
25 146 22 224 38 445 92 192 47 566 166 587 186 9 9 8 28 -2 77 -20 99 -34
137 -76 217 -99 191 -272 315 -498 357 -99 19 -150 19 -255 0z"></path>
<path d="M1898 1474 c-22 -7 -22 -17 -3 -54 15 -29 18 -30 85 -30 88 0 259
-25 307 -45 40 -17 38 -23 -22 -78 -79 -73 -470 -235 -770 -320 -277 -79 -347
-94 -660 -144 -162 -25 -568 -26 -642 0 -29 10 -56 23 -59 29 -4 6 25 40 63
77 49 46 93 76 146 101 l76 35 1 48 c0 57 -5 58 -90 16 -147 -71 -257 -161
-284 -234 -16 -41 -16 -46 0 -77 27 -52 69 -79 161 -103 89 -24 406 -21 603 5
85 11 164 22 175 25 11 2 61 12 110 21 106 19 329 70 365 83 14 5 72 23 130
41 58 17 121 37 140 45 19 7 100 39 180 70 349 136 500 241 500 346 0 58 -38
94 -135 127 -40 14 -342 26 -377 16z"></path>
<path d="M1685 829 c-167 -59 -364 -110 -645 -168 -48 -10 -278 -41 -304 -41
-20 0 31 -43 91 -76 251 -141 508 -138 750 8 72 44 180 158 221 234 52 100 50
100 -113 43z"></path>
<path d="M2085 815 c-19 -83 -59 -128 -124 -141 -46 -10 -45 -18 5 -33 50 -15
109 -75 119 -122 9 -39 20 -36 33 9 16 52 65 99 121 116 l46 14 -30 7 c-83 21
-113 51 -153 155 l-10 25 -7 -30z"></path>
<path d="M375 475 c-24 -98 -70 -149 -147 -161 -21 -4 -38 -9 -38 -13 0 -4 21
-13 48 -20 61 -18 118 -76 133 -137 13 -50 20 -48 39 9 22 68 102 137 160 137
32 0 15 17 -25 24 -47 9 -99 40 -113 68 -6 13 -20 46 -31 73 l-19 50 -7 -30z"></path>
</g>
</svg>
            </a>
            <p class="hyvaverse-main-cta-subtext cmsb76-mt-4 cmsb76-text-sm cmsb76-sm:text-base cmsb76-text-slate-300 cmsb76-mx-auto">
                Your command center for all things Hyvä.
            </p>
        </div>

        <p class="hyvaverse-teaser-intro-link cmsb76-text-center cmsb76-mt-6 cmsb76-mb-8">
            <a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance" title="Discover JaJuMa's 4-Year Journey as Hyvä Pioneers & Gold Partners – Our Passion for Performance." class="cmsb76-inline-flex cmsb76-items-center cmsb76-!text-white cmsb76-hover:text-sky-100 cmsb76-transition-colors cmsb76-duration-300 text-md cmsb76-sm:text-lg cmsb76-font-medium cmsb76-group">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="cmsb76-w-6 cmsb76-h-6 cmsb76-mr-2.5 cmsb76-flex-shrink-0 cmsb76-align-middle cmsb76-rounded-md cmsb76-transition-transform cmsb76-duration-300 group-hover:scale-110">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                </svg>
                Our Hyvänauts' Journey: 4 Years of Hyvä Passion & Performance
            </a>
        </p>

        <div class="cmsb76-mt-2.5 cmsb76-p-4 cmsb76-md:p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-xl cmsb76-border cmsb76-border-white/20 cmsb76-rounded-3xl cmsb76-shadow-2xl cmsb76-xl:overflow-y-auto cmsb76-max-w-7xl cmsb76-mx-auto">
            <div class="hyvaverse-teaser-columns-grid cmsb76-grid cmsb76-grid-cols-1 cmsb76-lg:grid-cols-3 cmsb76-gap-6 cmsb76-lg:gap-8">
                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path>
                        </svg>
                        Explore Our Hyvä Galaxy
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes" title="Expert Hyvä store development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🚀</span>Establishing Your Home Planet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop" title="Custom Hyvä development" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚙️</span>Charting Unexplored Sectors <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-performance-optimization" title="Expert Hyvä Performance Optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💨</span>Engaging the Afterburners:<br>Performance Tuning <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/hyva-extensions" title="Innovative Hyvä extensions" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔌</span>Advanced Ship Modules <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jajuma-develop/performance-optimization-extensions" title="Hyvä performance optimization" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>Achieving Light Speed Performance <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/jauma-takeoff-magento-hyva-rapid-launch-accelerator" title="JaJuMa Takeoff: Hyvä Powered eCommerce Accelerator" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛫</span>JaJuMa
                                Takeoff: Ready for Launch <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.922 4.79c4.774-1.628 7.161-2.441 8.445-1.157s.47 3.67-1.157 8.445l-1.108 3.251c-1.25 3.667-1.875 5.5-2.906 5.652c-.277.04-.563.016-.837-.072c-1.02-.327-1.558-2.26-2.636-6.126c-.239-.857-.358-1.286-.63-1.614a2 2 0 0 0-.262-.261c-.328-.273-.756-.392-1.614-.631c-3.866-1.078-5.799-1.616-6.126-2.636a1.86 1.86 0 0 1-.072-.837c.152-1.03 1.985-1.656 5.652-2.906z"></path>
                        </svg>
                        Navigate the Knowledge Stars
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="/en/jajuma-shop/top-10-reasons-for-hyva-themes" title="Top 10 Reasons & Benefits for Hyvä" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🔝</span>
                                Mission Briefing:<br>Top 10 Reasons to Join the Fleet <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-checkout-guide" title="Hyvä Checkout: Boost Conversions with Hyvä Checkout" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🛒</span>
                                The Wormhole Effect:<br>A Checkout That Converts Faster <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-ui-your-secret-weapon-for-blazing-fast-magento-stores-heres-how-to-master-it" title="Hyvä UI: Your Secret Weapon for Blazing-Fast Magento Stores (Here’s How to Master It)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💎</span>
                                Starship Schematics:<br>Mastering the Hyvä UI <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/hyva-commerce-the-next-evolution-for-your-magento-store" title="Hyvä Commerce: The Definitive Guide to Magento's Next Evolution (Powered by JaJuMa Expertise)" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">💫</span>
                                The Next Frontier:<br>Hyvä Commerce for Magento <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/supercharge-your-magento-2-store-luma-hyva-the-ultimate-guide-to-lcp-optimization" title="LCP Optimization Guide" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">⚡</span>
                                Escaping the Gravity Well:<br>An LCP Optimization Guide <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/magento-page-speed-roi-calculator" title="Unlock More Revenue: Calculate the ROI of a Faster Magento & Hyvä Store." class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">📈</span>
                                The Quantum Leap Revenue Simulator <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="/en/blog/go-css-less-fix-render-blocking-hyva-performance-optimization" title="Go CSS-less: The Modern Hyvä Strategy to Eliminate Render-Blocking CSS" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">☄</span>
       							Achieving Zero-Drag Performance:<br>The CSS-less Strategy <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>
						<li><a href="/en/blog/magento-vs-shopify-why-ownership-wins" title="Magento vs Shopify Comparison: Why Platform Ownership, GDPR Compliance, and Long-Term Freedom Matter" class="cmsb76-flex cmsb76-gap-4 cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">🌌</span>
     							Navigating the Shopify Nebula:<br>Why Ownership Wins <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
						</li>

                    </ul>
                </div>

                <div class="hyvaverse-teaser-column cmsb76-p-6 cmsb76-bg-white/10 cmsb76-backdrop-blur-sm cmsb76-rounded-xl cmsb76-shadow-xl cmsb76-border cmsb76-border-white/10 cmsb76-flex cmsb76-flex-col cmsb76-transition-all cmsb76-duration-300 cmsb76-hover:shadow-sky-500/20 cmsb76-hover:border-sky-500/50">
                    <h3 class="hyvaverse-column-headline cmsb76-flex cmsb76-items-center cmsb76-text-lg cmsb76-2xl:text-xl cmsb76-font-semibold cmsb76-text-sky-300 cmsb76-mb-5 cmsb76-pb-3 cmsb76-border-b cmsb76-border-sky-400/30">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hyvaverse-column-icon cmsb76-w-8 cmsb76-h-8 cmsb76-mr-3 cmsb76-p-1.5 cmsb76-text-sky-300 cmsb76-flex-shrink-0 cmsb76-bg-white/20 cmsb76-rounded-full cmsb76-shadow-lg">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.327 20.539q-1.2 0-2.033-.833t-.832-2.033t.832-2.033t2.033-.832t2.033.832t.832 2.033q0 .512-.172.976t-.497.837v-.29q.808.402 1.685.603T12 20q3.35 0 5.675-2.325T20 12h1q0 1.864-.71 3.506q-.711 1.642-1.926 2.857q-1.216 1.216-2.858 1.926Q13.864 21 12 21q-1.067 0-2.084-.238q-1.018-.237-1.98-.731q-.361.263-.77.385q-.408.122-.839.122M12 14.866q-1.2 0-2.033-.833T9.135 12t.832-2.033T12 9.135t2.033.832t.833 2.033t-.833 2.033t-2.033.833M3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q1.067 0 2.085.238q1.017.237 1.978.731q.362-.244.77-.366q.41-.122.84-.122q1.2 0 2.023.823t.823 2.023t-.823 2.033t-2.023.832t-2.032-.832q-.833-.833-.833-2.033q0-.512.172-.976t.497-.837v.29q-.808-.402-1.685-.603Q12.916 4 12 4Q8.65 4 6.325 6.325T4 12z"></path>
                        </svg>
                        Witness the Trajectory
                    </h3>
                    <ul class="hyvaverse-link-list cmsb76-space-y-0.5 cmsb76-list-none cmsb76-p-0 cmsb76-flex-grow">
                        <li><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes" title="Explore Hyvä Demo Shop" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">▶</span>Launch the Flight Simulator<br>(Demo Shop) <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/jajuma-your-gold-standard-hyva-development-agency-a-4-year-journey-of-passion-and-performance#case-study-rosemarie-schulz" title="Showcase: Project Rescue" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>The 60-Day Rescue Voyage <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                        <li><a href="https://www.jajuma.de/en/blog/a-delicious-ecommerce-recipe-baking-a-super-fast-magento-store-in-weeks-with-hyva-and-jajuma" title="Showcase: Quick Launch" class="cmsb76-flex cmsb76-gap-4  cmsb76-!text-white cmsb76-hover:bg-slate-700/60 cmsb76-!no-underline cmsb76-px-2.5 cmsb76-py-1.5 cmsb76-rounded-lg cmsb76-transition-all cmsb76-duration-200 cmsb76-ease-in-out cmsb76-group cmsb76-relative cmsb76-text-sm cmsb76-sm:text-base cmsb76-leading-relaxed"><span class="cmsb76-min-w-[18px]">✨</span>Mission Log:<br>A Starship Built in Record Time <span class="arrow cmsb76-absolute cmsb76-right-3 cmsb76-top-1/2 cmsb76--translate-y-1/2 cmsb76-opacity-0 group-hover:opacity-100 cmsb76-transition-opacity cmsb76-duration-200 cmsb76-text-white">→</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hyvaverse-teaser-shine {
        position: relative;
        overflow: hidden;
    }

    .hyvaverse-teaser-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: teaser-shine-move 6s infinite;
        pointer-events: none;
    }

    @keyframes teaser-shine-move {
        0% {
            left: -75%;
        }

        100% {
            left: 125%;
        }
    }
</style></div></div></div></div></div>]]></description>
              <pubDate>Sat, 15 Mar 2025 00:00:00 +0000</pubDate>
              <category><![CDATA[JaJuMa-Shop]]></category>
           </item>
    </channel>
</rss>
