Imagine investing thousands of dollars in advertising campaigns for your Magento store, and getting disappointing results. If you can relate, you are not alone. Many of our Magento clients are struggling with the same challenge.

Recently, one of our Magento clients shared this issue with us. Despite paying attention to each advertising aspect, i.e. whether bidding on the most effective keywords, working with a big budget, or using highly engaging marketing copy, he could not achieve his expected advertising goals.

We looked into it to figure out various factors that might be affecting ad performance. Surprisingly, we found that “Slow Magento Website Speed” could be the culprit behind not so performing ads.

The question is obvious, how a technical aspect like Magento website speed can impact advertising performance and cost? In this blog, we’ll uncover the connection between Magento website speed and advertising performance, and understand how your slow eCommerce website can cost you extra advertising dollars.

Let’s get started with it.

Connection Between Magento Website Speed and Ad Performance

Imagine users visiting your website after seeing your advertisement, and getting greeted by a slow-loading website. Do you think they’ll wait patiently for your website to load slowly? 

No, people enjoy slow motion in movies and TikTok, not on a website. They’ll likely hit the back button and leave. As a result, your bounce rate increases instead of your revenue.

When it comes to advertising, your primary objective is to grab the attention of your target audience by achieving a high ad rank with the lowest possible CPC (cost-per-click). To achieve this, you need a good quality score (learn more).

So, even when you have a beautifully designed ad landing page but your Magento website loads slowly like a tortoise, your advertising efforts, and budget will be wasted. And due to the high bounce rate of your site, your Ads will get low-quality scores, leading to an increase in your CPC amount.

Let me say this with more clarity.

The bounce rate is not the only thing that your slow-loading Magento website will give you, it will also harm the user experience and question your brand’s reputation. And a poor user experience can affect your advertising campaigns in many ways. 

Let’s check how a low-quality score leads to a higher CPC in the below image.

For slow-loading websites, advertisers may need to bid higher to ensure their ads remain visible, resulting in an increased cost of advertising budget.

Now, this is the decision time.

Do you still want to spend extra dollars on your advertising campaigns or improve your website speed to lower your CPC? 

Option 2, right? That’s why I’m adding some possible areas you can work on to improve your Magento website speed that helps you minimize your advertising cost.

How to Speed Up Your Magento Store

So, you’ve learned the importance of Magento website speed. Now to provide your users with the best shopping experience, you can try your hands on these ways to improve your Magento website speed.

1. Choose the Server Closest to Your Location

2. Enable Cache in Your Magento Store

3. Use CDN (Content Delivery Network)

4. Minify CSS and JavaScript

5. Disable Javascript Bundling

6. Upgrade Magento to its Latest Version

7. Review and Update Your Third-Party Extensions

8. Disable/Uninstall Magento 2 Module

9. Disable Debug Logs

10. Clear Varnish Cache

You can find the detailed steps here: Magento 2 Speed Up | 13 Optimization Tips.

Working on these areas will help you improve your Magento site speed to a good extent, and will help you perform well on Google PageSpeed Insights and Lighthouse. But if you ask, is there any ultimate solution to let your Magento website load at its best?

I would say yes, that’s possible!! There is a theme that is specifically made to solve the website speed issues and guarantees you a “100/100 Google pagespeed score” for your Magento store.

So, are you ready to meet the ultimate solution to “Magento Speed Issues”?

Introducing “Hyvä Theme” for Accelerating Website Performance

As you’re working with Magento, you are possibly aware of Hyva Theme but let me also share a little information on what Hyva theme is and how it will help you improve Magento store speed.

The Hyvä Theme is the frontend theme for Magento that allows you to create lightweight and fast-loading eCommerce websites. It has the power to reduce your website load time dramatically. Where any basic Magento website takes at least 4-6 seconds to load, the Hyva theme can bring your Magento website load time to 1-2 seconds.

In short, the Hyva theme is “everything that your Magento store needs to load quickly“. And yes, the Hyva theme holds many more benefits that help you to improve your Ad quality score.

Let’s understand them.

How Hyva Theme Helps to Improve Your Ad Quality Score

One of the important parameters of Google Ad Quality Score is the “Landing Page Experience”—providing visitors with an excellent experience on your website.

And for an outstanding user experience, you can blindly trust the Hyva theme for your Magento website. Here’s how:

1. Speed—you can achieve a super fast website without compromising advanced functionality.
2. Responsive—you can focus on each and every user with different screen sizes.
3. Navigation—your visitors can roam easily throughout your website. 
4. SEO—you can surprise Google with better website structure, speed, and performance.
5. Advancement—using custom extensions won’t affect the website’s performance.

These are not all benefits that you get with the Hyva theme, there are more. To know each of them, you can visit our blog on Hyvä Theme Benefits That Your Store Needs.

Conclusion

In the end, I would only remind you that no one likes slow websites. And when it comes to advertising, your slow website will definitely hinder the overall success of your ad campaign. This is because factors such as advertising performance, ad budget, quality score, and website speed, are all interconnected.

If you improve your speed, you will see an improvement in your quality score. An improvement in quality scores will ultimately lead to better ad rankings and lower CPC, which means fewer advertising dollars will bring you better ad rankings.

This makes it 100% clear that a slow-loading website costs extra advertising dollars and still does not provide desired results. Moreover, we have witnessed an ultimate solution to improve Magento website speed, which is the “Hyva theme”.

Now, the decision is yours. You can invest your precious time in tried and tested methods to improve your Magento website speed or you can go ahead with a highly recommended solution—the Hyva theme.

PS: We aureate labs, a Magento agency, are an official supplier of Hyva Theme, and we’ve 10+ years of experienced Magento developers, who can help you with fixing your Magento speed issues or any other. Feel free to get in touch for hassle-free Hyva implementation in your Magento store.

Before opting for the Hyva theme makeover, you must be curious about what would be the expected outcomes.

Let’s take a look at some case studies that show how useful the Hyva theme has turned out for Magento store owners.

Hyva Theme Case Studies

In this section, I’m adding some real-life success stories of Hyva Theme, which has helped Magento store owners in improving their website speed & performance to a great extent.

1. Imaginfires Saw 296% Increase in Site Speed With Hyva Theme

Imaginefires, the UK’s top Bioethanol Fireplaces Supplier, experienced a poor website performance impacting their conversion rate. We have implemented the Hyva theme for improved functionality and features.

Having such a number of lighthouse scores was nearly impossible for the Magento platform before the Hyva theme. 

2. Grand Stores Achieves 104% Increase in Page Speed With Hyva Theme

We implemented Hyva Theme for Grand Stores, one of our clients, who was facing several challenges due to low page speed. As a result, they were able to improve their page speed by 104% than what it was. 

3. Hyva Theme Success Story of Australia’s Leading Food Equipment Importer & Supplier

Federal Hospitality Equipment came to us with an issue of the heavy and cluttered design of their website, which led to slow website speed and poor user experience.

We simplified their website design and implemented Hyva Theme. This resulted in better user experience and improvement in engagement rate.

All these case studies definitely describe that the Hyva theme is the perfect match for improving Magento website speed and performance without making any extra hassles.

Hyva theme may have been new, but it’s getting popular among developers and merchants for its eCommerce performance enhancement features, all at a lower cost than headless PWA.

But since it’s just the beginning, many Magento extensions are incompatible with Hyva. Businesses are still figuring out ways to develop compatibility between the Hyva theme and Magento extensions.

To address the Hyva compatibility issue, many third-party extension providers are working in tandem with Hyva. They are working towards a seamless integration experience for customers & developers. This article will cover 10 of these Hyva compatibility extension providers. 

Top 10 Best Hyva Compatibility Extensions Providers

Hyva Compatibility Extension Provider #1: Amasty

Amasty, founded in 2009, is an official partner of Adobe and is one of the best companies in offering Hyva compatibility extensions. It offers more than 300+ extensions of Magento and provides a wide range of Magento solutions and services to 100,000+ customers and partners worldwide. 

Amasty is also an official partner of Hyva and has almost 25 Hyva-compatible extensions published. They are working on 10+ extensions to make it compatible with Hyva. Here are some top extensions:

• Improved Layered Navigation
• One Step Checkout
• GiftCard
• Shop by Brand
• GDPR M2

Hyva Compatibility Extension Provider #2: Mageworx

Located in the USA, Mageworx has been a well-known Magento extensions provider since 2008; it is pioneered in developing SEO extensions and provides affordable extensions for businesses of any size. Their team of 30 people is certified, professional and experts in providing quality extensions and solutions that help merchants succeed. 

As a Magento extension developer, Mageworx believes it is extremely important that their extensions are compatible with the Hyva theme. Therefore they have made their best extensions compatible with Hyva. Here is the list of extensions. 

• Shipping Suite
• SEO Suite Ultimate
• Advanced Product Options
• Multi Fees

Hyva Compatibility Extension Provider #3: BSS Commerce

BSS Commerce has one of its offerings in Hyva compatibility extension services. Even with more than 40 compatible extensions, the company is continuously working to make each of its modules Hyva-compatible. 

It has been Adobe Bronze Solution as well as Hyva Partner since 2021. With more than 9+ years of experience in building Magento extensions and providing services to small, medium and Enterprise level businesses, it is the most reliable and efficient Magento solutions provider. 

This company is most active on the Hyva board and creates maximum issues on the board; here are some of their most popular Hyva-compatible extensions:

• Magento 2 Product Attachments
• Magento 2 Checkout Custom Field
• Magento 2 B2B Registration Form
• Magento 2 One-Step Checkout

Hyva Compatibility Extension Provider #4: AheadWorks

AheadWorks is the child company of Rave Digital, a pioneer in Magento Development and a Magento Professional Solutions Partner. Rave Digital has headquarters in the USA, roofing over 50+ Certified Magento Developers and excellence in providing end-to-end eCommerce solutions for leading B2C brands and global merchants. 

They have created very few Hyva-compatible extensions, which are very useful and effective in running the eCommerce business. Here are some of them:

• Help Desk Ultimate
• Popup Pro for Magento 2
• Automatic Related Products

Hyva Compatibility Extension Provider #5: MageComp

Magecomp was established in 2014 and is now one of the leading Magento extensions and services providers. Their team strength has certified Magento developers who provide traditional and customised Magento solutions and deliver the projects on time per the client’s business requirements. The best part of this company is they provide one year of free upgrades and free support for all their extensions and projects. 

They have the highest number of open issues listed on the Hyva board, which means they are making most of their extensions Hyva compatible and few of them are made compatible with Hyva.

In addition, they have almost 45+ extensions that are Hyva-compatible out of the box.

Below are a few compatible extensions. 

• Shoppable Instagram 
• Advanced Delivery Date
• WebP Images Support

Hyva Compatibility Extension Provider #6: Mirasvit

Mirasvit is considered one the top Magento extension providers, with 14 years of professional experience in building ready-to-use modules for the Magento platform. 

They provide quality products and can come up with the best solutions for the challenges faced by the merchants, which are also cost-effective. 

Mirasvit has around 15 Hyva-compatible extensions, and that few of them are listed below.

• Elastic Search Ultimate
• Advanced Product Feeds M2
• Advanced SEO Suite
• Advanced Reports

Hyva Compatibility Extension Provider #7: WebKul

Webkul is a 2010-based diversified company that provides extensions for many open-source eCommerce platforms such as Magento, Shopify, Woo commerce, Opencart, etc. 

It has developed the highest number of extensions in Magento, and they are hunting to create more. Most popular amongst customers across the globe, WebKul takes pride in offering end-to-end solutions and excellent customer service. 

Regarding Hyva-compatible extensions, Webkul has very few compatible extensions compared to the number of extensions they have. Though, what they have as their compatible extensions are very effective. Here is the list of them:

• Shopping List
• Look book Module
• Daily deals
• Recurring Payments

Hyva Compatibility Extension Provider #8: MagePlaza

Mageplaza offers a wide range of feature-rich and high-quality Magento 2 extensions for merchants and developers. They have over 220+ extensions for the latest Magento 2 version. 

They strongly emphasise providing the best and most innovative product features and outstanding technical support. Hence they are recognised as the most popular extension provider amongst merchants of all sizes of businesses. 

As they wanted to keep up with the latest themes, they have built some Hyva-compatible extensions, as mentioned below: 

• One step Checkout
• Social Login 
• Instagram Feed

Hyva Compatibility Extension Provider #9: RedChamps

RedChamps is known for providing innovative and scalable solutions for Magento store merchants. They have developed several Magento extensions and provide the best services to merchants to help them achieve their eCommerce business goals and requirements.  

This company has 25 Hyva-compatible extensions published on the Hyva board, and they don’t stop here. They are continuously working on creating more feature-ladened extensions. Below are the top extensions they provide: 

• Notification Bar
• Sample Products
• Coupon code error message
• Custom option Default value

Hyva Compatibility Extension Provider #10: MageFan

An eCommerce agency from Ukraine that started developing Magento 2 extensions in 2015 and has provided many cost-effective and feature-rich solutions. 

Their Magento extensions have been used and downloaded by more than 100K customers since the beginning till now. They strive to provide the best extensions to their customers despite the challenges they have faced in the last few years. 

Below are some of the Hyva-compatible extensions: 

• Blog
• WebP Images
• GeoIP Switcher
• Automatic Related Products 

Custom Hyva Theme Extension Compatibility

As we mentioned. One way to go about compatibility is to wait for your extension providers to create compatible extensions for your store. But that would lead to uncertainty and may make you wait until they deliver.

The second way is to hire an agency that can help you with custom hyva theme extension compatibility. Don’t worry if the extension of your Magento store is not listed in the above list. You don’t need to remove incompatible plugins with Hyvä. We are one of those agencies that make extensions compatible for your Hyva store.

You will get Hyva development, integration & maintenance support, all under one roof, Hyva theme service.  Feel free to contact our experts to get started today.

FAQs

Here are some Hyva compatibility extensions questions & answers:

What are Hyva compatibility extensions?

Hyva compatibility extensions are the Magento extensions that are made keeping Hyva themes in mind, or if they’re not compatible, they are turned compatible to work with Hyva themes. 

What are Hyva compatibility extension providers?

Hyva compatibility extension providers are the companies that offer Hyva-compatible extension solutions for Hyva-based stores to take advantage of Magento extensions on Magento 2.

Why do you need Hyva compatibility extensions?

As more and more merchants look forward to having a Hyva frontend theme, there’s a desperate need to have all the extension support as they did on Luma or Blank theme. But since the technology stack is new for Hyva, not all extensions are compatible with the theme.

So what do you do? Remove all the extension features that don’t support Hyva? No! You either

• wait for Hyva-compatible extensions developed by extension providers, or
• hire agencies that can bring incompatible Luma code into Hyva-compatible code as and when you need

All the incompatibility is at the frontend level, where the Hyva theme replaces Luma. The backend-related modules are compatible with Hyva as they are built on the Magento Open Source platform. 

Generally, Magento Stores uses/installs more or less similar kinds of extensions; it makes sense to share compatibility extensions than spending time over and again to make them compatible.

How to check whether the extension is compatible with the Hyva theme?

A Compatibility Module Tracker board is available to check whether the extension is compatible with the Hyva theme. Board is divided into six labels, each representing the status of the extension. Labels are as below:

Open: Extensions in open status means it is yet to be made compatible. 

Accepted: This means extensions are accepted to make it compatible.

In Progress: Extensions on which developers are working to make it compatible. 

Published: Extensions that are made available to use. 

Compatible: Extensions that are fully compatible with Hyva and can be used. 

Closed: Some extensions might be duplicates, or there is an alternative solution for that extension. 

Based on the statuses above, one can find compatible extensions per their requirements. 

References 

• Gitlab.Hyva
• hyva.io
• Amasty hyva theme extensions for Magento 2
• Amasty partners with Hyva
• Amasty-benefits of hyva theme
• BSS- hyva compatibility extension providers
• Mirasvit-why check hyva compatibility
• Magefan- hyva theme extensions
• Aheadworks- Magento 2 extensions
• Mageworx- Magento 2 themes ready
• Mageworx hyva compatibility
• Setubridge- Top Hyva benefits
• Setubridge- All Hyva-related answers
• Webkul- Hyva theme development
• Setubridge- Hyva development cost breakdown
• Foundationcommerce- Hyva theme stats
• Scandiweb- Hyva theme setup
• Yireo- Hyva compatibility native or fallback

Magento 2.4.4 is here! With this release, Magento has introduced several new features to improve your eCommerce store’s performance and security. Now you can get a website that runs on the latest version with 100% compliance.

This release includes all changes included in the 2.4.3 release and also contains multiple performance enhancements, especially in terms of checkout, cart, and catalog page load speed improvements. Therefore, it’s important for you to keep your Magento store up-to-date with the latest version available. 

In this post, we are going to highlight the features and benefits of the latest version of Magento. Also, you can find the best way to upgrade your Magento Store to  Magento 2.4.4.

Let’s get started!

Magento 2.4.4 Highlights

 Magento has released the latest version of Magento Commerce and Open Source 2.4.4 with various functional fixes and enhancements. This release includes significant performance and security improvements, bug fixes, and Release Notes updates.

Following are some of the highlights of this Magento 2.4.4 release:

1. Supports PHP 8.1 to accelerate your site performance by 15-20%
2. Added support for Elasticsearch 7.16 and MySQL 8
3. Introduced GraphQL coverage for e-commerce operations with B2B enhancements
4. Enhanced security with 2FA (Two Factor Authentication) for admins and Google reCAPTCHA for storefronts
5. Upgraded PayPal JavaScript SDK with support for checkout and payment authorization on mobile
6. Improved page rendering speed up to 50% with optimized use of JavaScript libraries in Magento UI library components
7. Expanded support for PWA Studio with new tools and capabilities that enable you to build PWA storefronts on top of Magento
8. Enhanced product security with support for Composer 2 and removal of deprecated core integration mechanism

Why Upgrade to Magento 2.4.4

With every new release, Magento brings a bunch of new features and functionalities that not only make the upgrade process easier but also help to bring your store to the latest technologies.

Let’s check what you can miss if you do not upgrade to Magento 2.4.4 version.

What’s new in Magento 2.4.4 for Merchants

• Shopping with the help of the Seller
• Adobe Sensei-powered Live Search
• Asset Management and a Better Media Gallery
• Purchase online and pick up in-store (BOPIS)
• Workflows for B2B Order Approval
• Tool for Site-Wide Analysis
• Composer Update Plugin
• Upgrade Compatibility Tool
• In-Product Guidance
• Latest PHP version 7.4

Magento users are now able to migrate their stores to the Magento 2.4.4 version to avail of all the above features. Let’s see the step-by-step instructions to upgrade Magento 2.4.4.

How to Upgrade Your Magento Store to version 2.4.4

Migrating an eCommerce store is not an easy task and you have to undergo a lot of trouble just for upgrading your store to the latest version. But when it comes to such a powerful platform like Magento, you can rest assured as the brand has been continually improving its core functionality through several upgrades. 

What is Magento Setup Upgrade?

Magento 2 is a powerful eCommerce platform that comes with a lot of flexibility and customization options. Although these features are what make it so popular, they also make it vulnerable to security issues and bugs. That’s why upgrades are crucial for keeping your website safe and in tip-top shape.

Before we start with the upgrade process, here are the things you should check before upgrading your store:

Compatibility: Verify that all your current extensions and themes are compatible with Magento 2.4.4

Review Changelog: Go through all the changes made in the new release to avoid any conflicts with your current setup.

Simple Steps to upgrade Magento store to 2.4

You can download the latest release of Magento from its official website. 

Note: To upgrade from any previous version of Magento, you must use Composer

To upgrade your Magento store to Magento 2.4.4 from a previous version, complete the following steps:

Step 1: Review prerequisites for upgrading to Magento 2.4

Step 2: Set up your environment for upgrades

Step 3: Backup your store

Step 4: Install upgrades using Composer

Step 5: Update the database schema and data

Step 6: Deploy static view files

Step 7: Disable Maintenance Mode

Step 8: Clear Static Files

Step 9: Recompile Your Store If Needed

There could be some possible issues you might face while performing the Magento upgrade. To fix those issues you can hire the best Adobe Certified Magento Developers.

Magento 2 Upgrade Service

Magento has been the gold standard for eCommerce platforms over the years. The new Magento 2.4.4 builds on top of that legacy. You can upgrade your old and antiquated Magento store for several store benefits..

Your business needs a reliable Magento development partner like Aureate Labs to give the best revisions and upgrades to your Magento Store. Let our certified Magento developers help you upgrade your store with the latest release of Magento.

So, if you’re still running a prior version of Magento 2.4.4 or an older version of Magento, it’s time to upgrade your store to get these latest improvements and enhancements that come with Magento 2.4.4. Get started with the best Magento 2 Upgrade Service. 

Wrap Up!

The latest release of Magento Open Source 2.4.4 and Commerce 2.4.4 is out now with new features, security enhancements, and performance improvements for both merchants and developers.

As we all know, Magento is an open-source platform that requires periodic upgrades to improve its efficiency and enhance its performance for a better user experience. Therefore, it’s time for you to upgrade your store with the latest release of Magento i.e., Magento 2.4.4 if you haven’t already done so by now!

Additional Notes

If you think you need a better alternative to boost your Magento store speed, you can go for the Hyva theme. Hyva theme has far more performance benefits than the traditional Luma theme.. Aureate Labs has a decade of experience in upgrading the user experience for the eCommerce businesses with its exceptional services. Want to know more about it? Check out our Hyva Theme Development service or contact us now!

We somehow feel your store has gotten the vaccination for slow page loads… 

And a sure-shot happiness booster as well.

How? Well, anyone looking to 

• increase conversion rates, 
• boost store profitability,
• & have early returns

… have access to the fastest Magento 2.0 theme ever, Hyvä themes. 

What is the Hyvä theme?

The Hyva theme is “Everything your current store offers + Lightning fast page speed.”

Don’t trust us yet? Here’s how Hyvä boosts your super-tired store.

What are the benefits of the Hyvä theme for merchants?

You’ll have “Hyvä theme Benefits” + “benefits of your current store” – “the downsides of your existing store.” Easy peasy? 

#1: Need for speed… most wanted! 

#A: Your users want speed! They love instant gratification. And their attention span is depleting in general (we’re not using the goldfish myth :D). So, it’s natural, speed is the most wanted thing from your store.

#B: Store speed is the first thing your users notice. Your older store gave one impression— “you didn’t care about your users.” You may feel you cared, but a dead-tired store flips your efforts upside down.

#C: 70% of customers feel page speed impacts their buying decisions. Enough reason to have a fast-loading website? The biggest takeaway from Hyvä is… check out number 4.

#D: 50% of users can give up videos and animations to have a fast surfing experience. But Hyvä themes make sure your users don’t have to give up on anything. Your users can achieve intergalactic glory without having to give up on visual content. 😀

#2: From dead conversion rates… to the daddy conversion rates…

e-Commerce site speed is one of the biggest fuels for conversion. You want your Magento store to be blazing quick because:

• initial 5 seconds of Page Load Time influence conversion rates.
• you also lose 4.42% of conversion rates with a 1-second page load delay (between seconds 0-5).

Now conversion rate correlates with e-Commerce performance. That’s sole reason why businesses are traveling length for conversion rate optimization.. This is why you need the Hyvä theme benefits to tickmark all the needs for web performance. Which it does! 

And with better page speed, 

• you spend less time optimizing your store and 
• invest more time in other key areas such as branding.

#3: Not free… but costs less in the long run!

Hyvä theme costs you 1,130 US Dollars… only 1,130 US Dollars more than your existing store! 😀 Now, what makes you buy such an expensive deal? Well, everything!

Let’s break it down for you…

1. You will spend money to fix site speed in Luma. Right?
2. You will tune your Luma store. Right?
3. You will overuse Luma functionalities because it’s free. Right?

Everything comes with an extra cost. Tuning and fixing other fronts will take you at least 50 more hours. Let’s say you pay 25 dollars to optimize your store. Where are you standing now?

The idea is clear: you don’t want the website to get clumsy. Otherwise, you pay again to optimize that… back to square one?

And for a matter of fact, we know merchants are somehow fed up with the slow Magento 2 storefront. The tweet sums it up:

#4: Early to market… and early to rise!

If Hyvä theme benefits implementation takes 100 hours, other technologies take thrice as much time.

So what it takes your store three months to get ready, let’s say, may take six months or even 9 months with existing technology. Of course, you don’t want it when time is a valuable commodity at the moment.

Your competitors are charging up with the latest themes and technology. You’re competing with 24 million e-Commerce businesses in the world. Don’t forget about businesses in the hybrid space. 

But what keeps us talking about the Hyvä theme is— it might even beat its record.

Take a look at the tweet:

So they Hare-d their way one month earlier to their Hyvä schedule. Well done, Hyvä!

#5: A vaccinated developer… is a non-spreader!

Hyvä theme benefits give a lot of control to you, but you may still need developers for high-end personalization.

Your developers have had toxic relationships with old themes. You might not be aware of it. But as we said— Hyvä rolled out as a vaccine for them. 

It would help if you had developers and designers in the best mental state. They’re more stressed than the industry thinks. Otherwise, they’ll spread their state to your website. 

And your website state would be passed on to the users. And you already know what that would result in…

• Terrible website
• Poor conversion rate
• Hysterised sales funnel
• Poor sales figure 🙁

Check the tweet… 

If transitivity theory existed in real life… it would be this tweet!

Happy Developers = Happy Merchants = Happy Customers.

Our final argument… 

You need Hyvä if your customers demand performance. Hands down! Hyvä is an optimal solution if you’re 

• creating a new website from scratch… Have Hyvä deployed straight away!
• migrating from Magento 1 to Magento 2... The fact you’re switching Magento versions, it’s best you migrate to Hyva at the same time. You avoid cost doubling.

You can also put in place Hyvä if you’re already on Magento 2. Hyvä migration may play a bit tricky. To benefit from Magento theme migration, you may want to leave it to experts.. So check out our Hyvä theme development service package now.

13 Tricks To Speed Up Magento 2 Store Without Developer 

Page speed decides if you’re traveling to the beautiful tropical of Hawaii or the overcrowded destinations. Sounds funny? Well, it’s not! :/

Slow Magento 2 stores may turn off 64% of your users. (1) 

Bad user experience = low traffic = bad conversion rate = terrible sales. With poor sales— eh! We don’t want to keep bugging you with the vacation spots again. 🙂

Merchants can speed up Magento 2 online stores themselves.

Anyway, you can still speed up Magento 2 store despite being a store merchant. Here’s why you’ll love the Magento performance optimization process. 

• First, you can have a blazing fast Magento store without hiring a Magento developer. 

• Second, the processes are easy to consume and execute.

First step to optimizing Magento speed— very important

Before you decide to take matters into your hands, make sure you know the Magento store’s current speed. Don’t worry! It’s not rocket science. 

• Paste your URL on free speed testing tools like GT Metrix. 

• Measure Magento store speed and performance.

• Save the snapshot for future references.

• Measure the numbers after having followed our Magento optimization steps.

Here’s what you can expect after page optimization.

Front-end comparison after Magento speed optimization…

Back-end comparison after Magento speed optimization…

13 quick ways to optimize Magento speed

Let’s quickly fix the speed of your Magento store.

Optimize Magento Step #1: Choose the server closest to your location

It may seem that you’re using the best Magento 2 web hosting services for your store. They all claim

• high performance

• secure network

• optimized servers

But you also need to know not all Magento 2 hosting providers perform across countries. Some may be the best hosts for Magento 2 in the USA, but terrible in the UK. 

So you’d like to go with the webserver 

• that’s located in your country, 

• also performs well in your location,

If your country doesn’t have web hosting partners, go for the closest country. You’ll also want to consider these factors while choosing Magento 2.0 hosting for speed:

1. Check for PCI compliant hosting service… Secure hosts are often speedy.
2. Make sure the hosting service tackles resource-hungry Magento.

Optimize Magento Step #2: Enable all caches in Magento 2 store

You’d want to enable all the caches in the Magento 2 store. 

Think of caching as an already loaded catapult. You just have to release it and

• save a few seconds 

• reach the target as early as possible

Akin to it, the Magento-cache-enable feature helps you pre-store data. This makes data retrieval and page loading a swift process.

Here’s how you can enable cache in Magento 2 store.

Optimize Magento Step #3: Enable Magento 2 flat catalog categories

Using flat catalog categories in Magento 2 will help you speed up the product collection. 

No matter what the size of your catalog is. Whether 500,000 or 400,000 SKUs— flat catalog products get updated every minute. Your users can expect two things out of it.

• a speedy catalog browsing

• a seamless buying experience

You can also expect great results from enabling Magento 2 flat catalog.

• low bounce rate

• better ranking signal

Optimize Magento Step #4: Minify CSS and JS in Magento 2

Combining all JS and CSS files can drastically improve page load time. You want to minify JavaScript and CSS in Magento 2 stores because that would mean 

• fewer files

• compressed data

Now, what does this mean to your users? They

• spend fewer data in a cumbersome store

• download only relevant data for interaction

• experience faster and responsive browsing

Your web server host also gets to handle fewer requests.

Here’s how you minify all js and CSS files in Magento 2.

Check out the resultant requests yourself.

Optimize Magento Step #5: Disable javascript bundling

Disabling JavaScript Bundling is one of our favorite optimization techniques. Why? Because it goes against the built intent. 😀

Magento 2 released the feature to reduce the server request for JavaScript files.

But guess what? It gave everything, but good performance. JS bundling, in reality, creates huge 5-10Mb files with all the Javascript code. You can imagine the file that size would only affect the website performance.

Here’s how you disable JS Bundling

Optimize Magento Step #6: Upgrade Magento version/ don’t miss on magento 2 updates

It has to be the most basic to-do’s of optimizing the Magento store. Soak up all the latest Magento updates and make sure your website is quick and safe for the users.

Here’s how you can update Magento 2 to the latest version.

Magento 2 update is usually easy. But not all upgrades are equal. Sometimes, updating Magento to the latest version can get painful. Courtesy of its technicalities and complexity.

In such cases, never shy from having experts handle core upgrade operations for you.

Optimize Magento Step #7: Review and update the third party Magento extension

You may compare Magento 2 core with third-party extensions. But the story is completely different for both. There’s very little you can do about Magento 2 core. They’re developed by experts and well-optimized already. 

But Magento extensions may 

• choke the website speed

• create frustrating user experience instead of adding value to their buying journey

Make sure you do a third-party extension audit. Turn extension on and off and observe the site’s speed. You want to do it more frequently for money and conversion pages. If

• you find a site abusing extension— update them

• you find it still abusing the site— remove the extension and write the vendor for a refund.

Here’s how you can update the Magento extension

Optimize Magento Step #8: Disable/uninstall Magento 2 module

Disabling unused extensions in Magento 2 is the easiest yet effective step you can take. 

You may have wanted Magento 2 modules in the past! But there’s no point in clinging to unused extensions. They only bring bad site speed and terrible user experience.

Here’s how you remove/uninstall unused Magento modules/extensions.

Optimize Magento Step #9: Disable debug logs

Debug logs take heavy resources in your store. These are the unnecessary large files in the system. The only catch with disabling debug logs in Magento 2 is it may not have the same effect in every store.

So you may find very little to no change as well. But it’s always worth checking if your debug logs are set to default (disabled).

Here’s how you turn off the debug mode in Magento 2.

Optimize Magento Step #10: Use built-in cache/clear varnish cache Magento

Varnish cache is as funny as JS bundling, at least, for us. Magento 2 recommends it for page optimization. But it only reduces the speed of your website. There’s a simple explanation to it. Varnish uses extra software. So it consumes more resources.

On the other hand, you can observe better page performance by disabling varnish. And also choosing the built-in cache application option as an alternative. 

Here’s how you can disable Varnish

Optimize Magento Step #11: Use a Content Delivery Network (CDN)

Do you need a CDN for a fast Magento 2 store? You need to use CDN in Magento 2 for an uninterrupted information flow between the servers. Constant traffic usually takes up a lot of bandwidth. 

Result? The bottleneck in the bandwidth affects information flow. Using a content delivery network (CDN) gives you control over data flow. You can reduce the stress on bandwidth by carrying on important requests first.

Even free CDN for Magento 2 can promise 

• better store infrastructure

• dynamic capacity

Optimize Magento Step #12: Use secure HTTPS connection along with HTTP/2 async file

You can speed up the Magento store by simply using the HTTPs connection for your website. Another addition would be choosing a hosting partner that allows Http/2. 

Here’s an online tool to identify if your site uses HTTP/2. Take a look at the example.

The problems with DIY Magento speed optimization

Look! We love that anyone can follow these steps to optimize their Magento store. But speeding up a slow Magento website has many more technicalities than you can imagine.

You may see better results with these page speed optimization techniques. But the market is getting more competitive. With the internet getting faster, your users will make you pay for every millisecond.

It is why you need page speed optimization experts to save every millisecond they can. You never know— what a millisecond may be worth in the coming Magento sphere.

Magento 2 Website Loading Very Slow? 15 Known Issues That Kill Site Performance

So you’re not the only one whose Magento site is running slow. Your competitors are looking to fix their Magento problems as well.

Looks like someone is having a far more terrible time than you… :/

But you know what— you can have your store play a little less devilish! The hack to it is finding what’s affecting the Magento performance.

So why not find out what’s slowing your Magento 2 site without further ado? This way, you can work on Magento performance optimization quickly. You can then give users the much-needed buying experience.

Why is Magento so slow? 

Magento is so slow because you may be using unnecessary themes, extensions, and customizations. Also, Slow hardware, far hosting server, not caching data, not enabling flat catalog, not minifying CSS and JS, and not updating your store lead to Magento’s slow performance. Remove unused extensions, turn off varnish cache, get CDNs, etc. to fast your slow Magento 2 store.

Now let’s check each one of them in detail.

#1: Your hosting server is too far

Your Magento 2.0 web hosting solution is probably located too far from your location. The farther the hosting provider, the slower the Magento store. Consider a Magento hosting company that is blazing fast, secure and nearest to your geography. 

#2: Your hardware is too slow

Maybe you should check the hardware you’re using to run the Magento store. Magento 2 stores have a hardware requirement benchmark. For example, your server needs to have Linux; your RAM needs to be above 2 GB. You can find a detailed list of Magento 2 technology stack requirements here.

#3: You’re not caching enough data

Maybe you’ve disabled data caching. So the browser is not saving HTTP requests, database queries, or images. Users have to wait to interact with the store because browsers don’t respond quickly. Consider caching for a quicker web load experience. It puts the snail on a rolling spree.

#4: You’re not enabling flat catalog

You could have reduced data fetching requests from the Magento database. All you had to do was to enable a flat catalog. Adobe suggested not to use the flat catalog for whatever reason. But many merchants and developers feel flat catalogs improve page optimization.

#5: You’re not minifying CSS and JS

Maybe you haven’t combined the CSS and JavaScript files. Not minifying your CSS and JS files may lead to bigger data files. And you already know bigger data files take more to load. Though Magento 2 stores are not slow by default, these mistakes reveal what makes them the snail.

#6: You’ve enabled JavaScript bundling

Maybe you took Magento’s advice too seriously this time. But JS bundling is one of the most common Magento issues. Magento started the so-called “technique” to make Magento run faster. But they didn’t know it was eating up the store from within. JS bundling creates 5-10 Mbs of files that load very slow.

Source

#7: You haven’t updated the Magento store yet

We all try to over-fix the store… Completely missing the fact we haven’t updated the store. Every new Magento update comes up with better speed and security features. You’re crumbing loopholes for hackers if you don’t update the stores timely.

#8: You fly your store on lots of third party extensions

Magento marketplace offers 3600+ extensions. It’s easier to get carried away if you’re trying to create a seamless experience for users. But at the end of the day, they’re not coded by your developers. They may have performance and security issues. So it’s always recommended to audit third-party Magento modules.

#9: You aren’t getting rid of the “the unused” Magento extension

We know it’s tough to get rid of the extensions that once served plenty of benefits. But with so many options, you may go overboard with extensions. The worst is— you’re probably not going to use them in the present and future. So when it’s about using Magento extensions, be as miser as you can. Begin your “clean my site campaign” with these unused extensions.

#10: Your debug log is on

Your debug log can hold large data files to slow down any Magento eCommerce store. They record database operations, errors, and system processes of transactions. Deleting them may or may not have any effect on your store. So better count your luck with it.

#11: You’re over-relying on Varnish cache

Magento 2 Varnish Cache came out as a “promising” speed booster. Later it turned out built-in cache boosts slow-loading websites more than Varnish. Maybe you haven’t turned it off yet!

#12: You’re missing big time on Content Delivery Network (CDN)

Maybe you feel your Magento webstore doesn’t need a CDN. But it would help if you acknowledged how CDN revolutionized web hosting services. We know it’s all the “technical stuff.” But we have always got your back. You might as well consider talking with one of our experts to get Aureate services for CDNs.

#13: You’re not running the store on HTTPS and HTTP/2 connection

Ask your web hosts— do they use HTTP2? And what about your website? Are you using HTTPS in your store? If you use HTTPS and HTTP2— your customers can experience page load improvement by 15%.

#14: You’ve picked up a cumbersome theme

We know you’re competing to give the best user experience. But a poor-coded “aesthetic” theme eats up the entire purpose. You should rather pick a simple theme that doesn’t ask you to compromise on the speed front.

#15: Your store has lots of unoptimized images & videos

You want to put high-quality images and videos for the users. But it defeats the purpose if it slows down your store and gives a bad user experience. Imagine what 1000s of un-optimized files can do to your website in synergy.

H2 How can I increase my Magento speed?

You can increase your Magento speed in 12 steps.

• Step 1: Choose the server closest to your location

• Step 2: Enable all caches in Magento 2 store

• Step 3: Enable Magento 2 flat catalog categories

• Step 4: Minify CSS and JS in Magento 2

• Step 5: Disable javascript bundling

• Step 6: Upgrade the Magento version/ don’t miss Magento 2 updates

• Step 7: Review and update the third-party Magento extension

• Step 8: Disable/uninstall Magento 2 module

• Step 9: Disable debug logs

• Step 10: Use built-in cache/clear varnish cache Magento

• Step 11: Use a Content Delivery Network (CDN)

• Step 12: Use a secure HTTPS connection along with an HTTP/2 async file

Magento Speed Issues Summary 

Magento speed issues are created because of slow and old hardware systems, far located hosting server, uncached data, disabled flat catalog, non-minified CSS & JS files, enabled JS bundles, not-up-to-date Magento store, plenty of third-party extensions, unused plugins, enabled debug log, enabled varnish cache, no CDN, heavy theme, and website on HTTP.

If you don’t get over these issues asap, your customers may abandon you without warning.

DIY store speeding is scary…

You’d never want to go through the Magento page optimization checklist. It’s long, scary, and, more importantly, it’s damn hard to execute.

But you’ve got the vetted experts to absorb the nightmare page optimization brings. So what are you waiting for? Contact us right now.

FAQs

As a good story is incomplete without its characters, similarly, your online eCommerce shop front is incomplete without a fast-performing and easy-to-use theme.

To fill this gap we recommend Hyvä themes: lighting fast, highly integrated, easy-to-operate website themes.

eCommerce is a booming industry. Especially with the pandemic-induced digitalization, almost every business is now working on building its own eCommerce page.

When businesses ask an eCommerce development company to build them a website, the efficiency and performance all come down to the platform on which they construct the website. By far, Magento eCommerce has been one of the widely used platforms for that purpose.

They use inbuilt themes to create and deploy a website. However, recent developments have led to a new and improved Hyvä theme developed by Hyvä.

In this blog, we will explain to you all the basics you need to understand when it comes to Hyvä themes. Also, be sure to check out our verdict on whether hiring a Hyva theme development service is really worth the hype.

Understanding of Magento and Luma Before Moving On To Hyvä Themes

Magento is a platform dedicated to designing web pages for your online store in the most optimized way. It facilitates programmers to create eCommerce websites in a short period of time.

With Magento, a programmer does not have to build every code from scratch. Instead, they already have a base on top of which the website gets built.

Since it is an open-source platform, it gained huge popularity among developers. Even popular companies like Nike and Samsung started their online store by using this platform.

There are many other similar platforms like Shopify and WooCommerce. However, there are some ways in which this particular platform stands out from the rest.

1. It’s open-source:

This means anyone can customize it. Customization further leads to improved scalability and flexibility. Assume that you own a business and want to start an eCommerce website for your brand.

You’ll need it to look different from your competitors. Hence, you need the platform to be highly customizable.

2. It doesn’t force you to choose a hosting service:

Many similar platforms only offer a very small list of hosting providers that you can choose from to host your website.

It’s not the case when it comes to Magento. You have the freedom to choose any hosting service you want.

3. It facilitates multi-platform integration:

If you need your customers to trust your eCommerce website, you need to provide them with several payment options. Third-party integration is what comes in handy right about now.

It lets you use the features of a third-party add-on to make it easy for the customer. You can readily install several web plugins and enhance the functionality of your online store.

4. It’s SEO friendly:

When developing a website, it is vital for you to optimize it. Optimizing it makes your website more visible and preferably rank better in the search engine results.

Magento gives you the best URL structure, keywords, meta tags, etc., to move your website up in the search results.

The Drawbacks

The only drawback of using Magento is the default frontend, Luma. The rollout of Magento 2 has only highlighted the flaws in Luma.

The thriving developer community has identified the various ways in which it lacks as a theme. Let us list them for you:

1. Very less speed:

The speed of a website is crucial to the brand’s growth. Customers have tonnes of other options to choose from, if not your website.

This is why many developers are pointing out that using Luma-based themes directly affects the speed of the website.

Mainly due to the use of outdated technologies like RequireJS, KnockoutJS, and Bootstrap. This makes the base code bulkier and thus needs heavy optimizations.

2. Not very mobile-friendly:

Magento 2’s default theme is nothing close to mobile-friendly. Due to the irremovable, unwanted codes in the architecture, the websites created using this aren’t any smoother on smaller devices.

3. So many dead codes:

Creating a website that doesn’t function as it should is a huge loss for your business. And developers are pointing out that there are so many dead codes in the architecture. Which makes certain functions of an eCommerce website unavailable for use by the customers.

4. Costs more than it should:

With it being open-source, you’d expect your development costs to go down. However, as there are tonnes of things that your developers need to optimize, it naturally takes a higher development time. Hence, the cost of making an eCommerce website soars. Read out how you can make your Magento store more profitable.

Hyvä Themes Development – The ultimate Frontend for Magento 2

To overcome all these issues in Luma, the creators have given Hyvä a fresh start by removing outdated technologies like RequiredJS, KnockoutJS, and bootstrap from the frontend architecture.

Instead, it runs on more advanced and relatively new technology stacks like Tailwind CSS and Alpine.js. Tailwind CSS is an advanced framework that manages to reduce the unwanted bulkiness you can see in traditional CSS. Similarly, Alpine.js combines the functions of several JavaScript files in a single framework.

These two are the only things that are fundamental for Hyvä. You can customize all the other components of a website. Thus, programmers can now create well-responsive eCommerce websites with a very lean structure.

The Core Principles of Hyvä Themes

We can say with confidence that Hyvä themes religiously follow all of these core principles:

1. Lesser complexity:

The main aim of Hyvä is to retain the functionalities while offering a simple structure. And with the ability to reset the native templates, you can be assured that there is much lesser complexity while building an online store.

2. Better Performance:

The websites created using Hyvä are significantly faster than the ones created using Luma. Thus, we can say that Hyvä heavily focuses on improving the speed of a website.

Many online shoppers do not like a laggy website. Hence, this principle is truly beneficial for online store owners.

3. Easy for the developers:

Hyvä Themes is built not only focusing on improving the customer experience of online stores but also on helping the developers.

The more simplified and lag-free UI lets you create and develop without any hindrance. Also, the learning curve for developers is quite minimal.

The creators of Hyvä made it so that it is easy to adapt. The Tailwind CSS and Alpine.js are the only things you need to get used to.

Other than that, your developers do not need any special training to operate the new theme builder.

And so far, Hyvä seems to adhere to all these core principles. Every review from the developer community has pointed towards it being a faster and more reliable frontend.

Why should you choose Hyvä Themes?

We can answer this simply by saying that it is the best alternative for you if you want to keep working with your Magento platform.

Other platforms mean that you have to train your employees for it and even recruit new ones to do the job more efficiently. Let us take a look at some of the benefits of the Hyva theme and why you should choose it:

1. The performance:

Like we had mentioned several times, the performance of Hyvä themes is way superior to Luma-based themes.

According to several tests, the Luma-based websites take more time to fully load all the elements and functions.

Whereas, Hyvä themes are faster both on desktops and mobile devices.

The primary difference between Luma Themed websites and Hyvä themed websites is their Time to Interactive (TTI) metric.

Hyvä themes give users the ability to interact with all the website functions in less than 2 seconds. While it takes almost half a minute for most Luma websites to become interactive.

2. Maintenance:

Many people think that having the default theme is the best way to avoid future maintenance. But, in this case, replacing your default theme with Hyvä means you’d be dealing with very little maintenance.

When it comes to Luma, any upgrades made by the Magento 2 platform impact the templates. Whereas, Hyvä removes all the default output.

Thus, any upgrades made by the Magento platform will not directly impact how your templates look on the website.

Another major benefit of using Hyvä is its ability to store HTML, CSS, and JS files in different components.

Thus, you can easily reduce the maintenance time by only selecting the component that needs changing.

3. Simplicity:

Time is crucial for a business. Hence, you must be able to deploy your website as soon as possible. Using Hyvä, you can reduce the time taken by the developers to create a fully functioning eCommerce website.

They are far more simple when compared to default Luma-based themes. They have a more complex architecture for every element you see on the website and not intertwined codes that make it tough for the developers.

With Luma themes, any changes you make to one part may impact the other components as well. But, with Hyvä, you can make changes without having to worry about it impacting other parts of the website.

Also, the newer versions Alpine.js and Tailwind CSS are much easier to use than the older frameworks like RequireJS, KnockoutJS, and Bootstrap.

All these efforts to make it simple not only help the developer but also the online store owner. They can start working on their marketing and sales faster than ever and that too on a website that has a faster response.

4. Usability and adaptability:

Imagine you already have a Magento 2 site. Now, if you want to replace your existing default theme with Hyvä, you can easily do so.

Without having to do a fresh installation of the platform and re-build custom functionality all over again.

But, you have to note that Hyvä doesn’t work on Magento 2.3 or lesser.

You need to update to Magento 2.4 or a newer version to access Hyvä seamlessly.

5. Thriving community:

Even the best of developers need help with some issues every now and then. For that purpose, Hyvä has an extensive community of developers all across the globe who actively discuss the theme.

Also, the time needed to learn the Hyvä frontend is much lower than the Luma frontend. Making it one of the best and easily adaptable frontends for Magento 2.

The Difference Between PWAs and Hyvä Themes

Progressive Web Apps are a great way of producing efficient websites. But they suit better for larger budgets.

Also, it takes a longer time to build using PWA than a Magento platform.

But, the traditional Magento platform lacked the performance of creating websites using PWAs.

The Hyvä frontend, however, takes a middle ground in these operations by offering the best of both worlds.

They offer you amazing performance whilst also reducing the time needed to build an eCommerce store. So, Hyvä is an option that will prove beneficial to most SMBs with smaller budgets.

Are Hyvä Themes really worth it?

Yes! They absolutely are worth all the money you pay. You need to pay a license fee for using the Hyvä theme.

Whereas, you do not need a license fee for using the default theme that comes with Magento 2. However, when you look a little deeper, you will find that Luma actually costs you more than Hyvä.

While using Hyvä, you only pay the license fee. But to optimize the speed for Luma, your developers need to spend more hours working on removing unnecessary codes.

Which naturally increases their pay. And not to mention, you need to use certain third-party extensions to speed up the performance of the Luma themes.

So, paying a fixed license fee for the Hyvä themes is a much better option than paying all that money to create a slow website.

A solvable downside of using Hyvä Themes

Remember, how we mentioned that Hyvä replaces older tech stacks like RequireJS, KnockoutJS, and Bootstrap with the latest and lightweight Tailwind CSS and Alpine.js?

Unfortunately, almost all third-party extensions for a web store are made up of default Luma-based themes.

This means Hyvä isn’t readily compatible with other third-party add-ons and extensions.

For a third-party extension to work on your website, you need to change the codes to Alpine.js and Tailwind CSS format and make it compatible.

Hence, your developers will be spending some time replacing frontend code written for the extension to function in your online store.

However, the average duration of this operation depends on the type and the number of third-party extensions you are going to use on this website.

But the good news is that many third-party extension vendors started making their extensions compatible with Hyvä as well so most of those will be ready to use for Hyvä based themes in the future.

Final Thoughts on Hyvä Themes

Hyvä Themes are here to stay for months or even years to come. This frontend has revolutionized the working of one of the most sought-after eCommerce platforms, Magento 2.

And almost everyone in the industry agrees that Luma is too bloated and slow for creating a well-functioning website.

Now that every business is focusing on its mobile users, it has become more crucial for them to create websites with better and faster performance.

Hence, Hyvä is the only viable option in the market for companies that lack a huge budget and those that already have a Magento eCommerce site. So contact us now to get hyva theme development done for your digital Magento store.

Let me discuss one interesting problem which I faced with Magento 2.

In Magento 2 Store, I’ve faced an issue with the product URL to access the product page. I need to remove the category path from the Product URL when I access any product page.

I found one admin configuration in Magento Admin at the below path to remove the category path from the product URL.

Path: Admin > STORES > Settings > Configuration > CATALOG > Catalog > Search Engine Optimization

• Set “Use Categories Path for Product URLs” option to No.
• After update this configuration, please clean config and full_page cache types and check the product URL.

Now, You can see the category path is removed when you access the product page from the product listing page.

But still, I can access the product page using the product URL with the category path.

For example,
Let’s take an example of the Magento Sample Data’s product name with “Olivia 1/4 Zip Light Jacket”

You can access the product detail page with below URLs by directly entering in the Address Bar of the browser:

• http://magento2.demo.ubertheme.com/women/tops-women/jackets-women/olivia-1-4-zip-light-jacket.html
  • It includes the category path in product URL
• http://magento2.demo.ubertheme.com/olivia-1-4-zip-light-jacket.html

Here, I need to prevent the product page access when the URL includes the category path.

So As a solution, I decided If I got the category path in product URL I’ll redirect it to the product URL without category path.

I’ve achieved this solution by creating an after Plugin on findOneByData() function of the Magento\UrlRewrite\Model\Storage\AbstractStorage model class.

Please follow the below steps to implement this solution to omit the category path from the product URL to access the product page.

Step 1: Create a custom module under app/code directory with two require file registration.php and etc/module.xml.

File Path: /app/code/Aureatelabs/DemoModule/registration.php

• Where Aureatelabs is a vendor name and DemoModule is a module name.

<?php
/**
 * DemoModule
 *
 * Do not edit or add to this file if you wish to upgrade to newer versions in the future.
 * If you wish to customize this module for your needs.
 *
 * @category   DemoModule
 * @package    Aureatelabs_DemoModule
 * @license    http://www.gnu.org/licenses/gpl-3.0.html
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Aureatelabs_DemoModule',
    __DIR__
);

File Path: /app/code/Aureatelabs/DemoModule/etc/module.xml

<?xml version="1.0" ?>
<!--
/**
 * DemoModule
 *
 * Do not edit or add to this file if you wish to upgrade to newer versions in the future.
 * If you wish to customize this module for your needs.
 *
 * @category   DemoModule
 * @package    Aureatelabs_DemoModule
 * @license    http://www.gnu.org/licenses/gpl-3.0.html
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
	<module name="Aureatelabs_DemoModule" setup_version="1.0.0">
	  <sequence>
            <module name="Magento_Catalog"/>
            <module name="Magento_UrlRewrite"/>
        </sequence>
	</module>
</config>

Step 2: Create a di.xml file under etc directory to define a plugin.

File Path: /app/code/Aureatelabs/DemoModule/etc/di.xml

<?xml version="1.0" ?>
<!--
/**
 * DemoModule
 *
 * Do not edit or add to this file if you wish to upgrade to newer versions in the future.
 * If you wish to customize this module for your needs.
 *
 * @category   DemoModule
 * @package    Aureatelabs_DemoModule
 * @license    http://www.gnu.org/licenses/gpl-3.0.html
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\UrlRewrite\Model\Storage\AbstractStorage">
        <plugin disabled="false" name="Plugin_Magento_Checkout_Block_Onepage" sortOrder="10" type="Aureatelabs\DemoModule\Plugin\FindOneByData"/>
    </type>
</config>

Step 3: Create a plugin class under Plugin directory.

File Path: /app/code/Aureatelabs/DemoModule/Plugin/FindOneByData.php

<?php

namespace Aureatelabs\DemoModule\Plugin;

use Magento\Framework\App\Config\ScopeConfigInterface;

/**
 * Class FindOneByData
 * @package Aureatelabs\DemoModule\Plugin
 */
class FindOneByData
{
    /**
     * @var ScopeConfigInterface
     */
    protected $scopeConfig;

    /**
     * FindOneByData constructor.
     * @param ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        ScopeConfigInterface $scopeConfig
    ) {
        $this->scopeConfig = $scopeConfig;
    }

    /**
     * @param \Magento\UrlRewrite\Model\Storage\AbstractStorage $subject
     * @param $result
     * @param array $data
     * @return mixed
     */
    public function afterFindOneByData(
        \Magento\UrlRewrite\Model\Storage\AbstractStorage $subject,
        $result,
        array $data
    ) {
        if(!empty($result) && !(bool)$this->scopeConfig->getValue('catalog/seo/product_use_categories')
            && $result->getEntityType() == 'product'
            && (strpos(trim($result->getRequestPath(), '/'), '/') !== false)
        ) {
            $requestPathArr = explode('/', $result->getRequestPath());
            if (count($requestPathArr) > 1) {
                $newRequestPath = end($requestPathArr);
                $result->setTargetPath($newRequestPath);
                $result->setRedirectType(301);
            }
        }
        return $result;
    }
}

This solution will work if the “Use Categories Path for Product URLs” option is set to No from the Magento backend. The Magento configuration path for this option is mentioned above.

Step 4: Please enabled and install the module using the below commands.

php bin/magento module:enable Aureatelabs_DemoModule
php bin/magento setup:upgrade
php bin/magento setup:di:compile

Please verify module functionality by entering product URL with category path directly in the address bar of the browser, it will redirect to the product URL without category path.

Enjoy Coding.

Thank you.

In this post, I will be guiding you to excluding JavaScript files from minifying. Sometimes it is required to load third-party JavaScript files in our custom module/theme & .min file is not available.

Use Case

• You are implementing a custom payment method module for the current project:
  • Here you found the payment gateway is providing minified javascript file(s) but file(s) name doesn’t have .min suffix like payment-abc.min.js
• At this point, you have a tight budget and ETA. You can’t just tell the client or payment gateway refused your request.

How minify js files work in  Magento 2?

At first, you have to enable minify JavaScript JS from Admin or using the command line in production mode.

\> php bin/magento config:set dev/js/minify_files 1

Disable JS merge if enable:
\> php bin/magento config:set dev/js/merge_files 0
\> php bin/magento cache:flush

Then run deploy command:

\> php bin/magento setup:static-content:deploy

Now open the Magento 2 website on the browser and open DevTools, in Network panel it will show the minify js loader file: requirejs-min-resolver.min.js. This file is responsible to open all js files in .min and contains RegEx rules to exclude js files from adding .min suffix. Magento creates this file when JS minify & production mode is enabled.

Let’s do it

Using the above test case:

• You are implementing a custom payment method module for the current project but JavaScript files of the payment gateway do not have .min suffix and you will  tell Magento 2 to add file path in the requirejs-min-resolver.min.js file.
• We will add an after plugin on the getExcludes method of Magento\Framework\View\Asset\Minification class. So you got an idea this class is responsible for minifying files in Magento 2.

In your di.xml file at app/code/Vendor/Payment/etc directory:

<type name="Magento\Framework\View\Asset\Minification">
    <plugin name="vendor_prevent_minification" type="Vendor\PaymentModule\Plugin\View\MinificationPlugin" />
</type>

Then create a plugin file: MinificationPlugin.php at app/code/Vendor/Payment/Plugin/View directory:

<?php

namespace Vendor\PaymentModule\Plugin\View;

use \Magento\Framework\View\Asset\Minification;

class MinificationPlugin
{
    /**
     * Exclude static componentry files from being minified.
     *
     * Using the config node `minify_exclude` is not an option because it does
     * not get merged but overridden by subsequent modules.
     *
     * @see \Magento\Framework\View\Asset\Minification::XML_PATH_MINIFICATION_EXCLUDES
     *
     * @param Minification $subject
     * @param string[] $excludes
     * @param string $contentType
     * @return string[]
     */
    public function afterGetExcludes(Minification $subject, array $excludes, $contentType)
    {
         // Here we are checking if not “js” then skip it
         if ($contentType !== 'js') {
            return $excludes; // Skip if contentType is not “js”
         }


         // Array variable adds path to exclude minify
         $excludes[]= 'https://webservices.paymentgateway.net/';
         return $excludes;
     }
}

Now change the Vendor/PaymentModule name as per your module and then run below commands:

\> php bin/magento cache:flush
\> php bin/magento setup:di:compile
\> php bin/magento setup:static-content:deploy

In browser, now check the payment js will open properly because file path is added in requirejs-min-resolver.min.js file.

Conclusion

Excluding JS files from minifying is an out-of-box feature of Magento 2 and it is very helpful when working with third-party services like Google ReCaptcha, Payment methods, shipping methods, email marketing, etc.

Let me know if you found the article helpful so that it will encourage me to write new blogs.

Thank you.

Here, In this blog, I’ll guide you to add columns in the tier price grid of the product. Sometimes it’s essential to understand client’s Magento web development requirements by overriding the core modules. Here, I am sharing a use case in which we’ve to override the tier price functionality.

Use Case: Our client has a few products which can be sold separately or in a bulk. Let’s take the example of soap. Users can purchase the soap single or in a pack of 8 to which they called family package and also there is one more option, Users can also purchase a pack of 24 to which they called Box.

To fulfill the client requirement we’ve decided to override the tier price functionality and divided the solution into the two parts. 

• Add a secondary unit column in tier price
• Display units on the frontend by using the dropdown.

This blog consists of a first solution which is, to add a column in the tier price grid. To do so, you have to do the below things in your extension.

1. Add a required field in the tier price table
2. Add a field in the grid
3. Override save & update handlers

Let’s follow the above steps and customize the tier price.

1. Add a required field in the tier price table:

Here, we’ll add the field in the tier price table using the database schema. To do so, create the db_schema.xml in the etc folder and add a below code in it.

<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
   <table name="catalog_product_entity_tier_price" resource="default" engine="innodb" comment="Tier Pricing Table">
       <column xsi:type="varchar" name="{KEY}" nullable="true" length="255" comment="comment" />
   </table>
</schema>

2. Add a field in the grid:

We’ll add a field in a tier price grid using the modifiers by the following way.  First we’ll create a di.xml in the etc/adminhtml and add a modifier pool in it.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
   <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
       <arguments>
           <argument name="modifiers" xsi:type="array">
               <item name="{identifier}" xsi:type="array">
                   <item name="class" xsi:type="string">{vendor}\{module}\Ui\DataProvider\Product\Form\Modifier\UpdateTierPricing</item>
                   <item name="sortOrder" xsi:type="number">200</item>
               </item>
           </argument>
       </arguments>
   </virtualType>
   <type name="{vendor}\{module}\Ui\DataProvider\Product\Form\Modifier\UpdateTierPricing">
       <arguments>
           <argument name="scopeName" xsi:type="string">product_form.product_form</argument>
       </arguments>
   </type>
</config>

Now, create a UpdateTierPricing.php at the Ui\DataProvider\Product\Form\Modifier and add the below code.

class UpdateTierPricing extends AbstractModifier
{
   /**
    * @var ArrayManager
    * @since 101.0.0
    */
   protected $arrayManager;

   /**
    * @var string
    * @since 101.0.0
    */
   protected $scopeName;

   /**
    * @var array
    * @since 101.0.0
    */
   protected $meta = [];

   /**
    * UpdateTierPricing constructor.
    * @param ArrayManager $arrayManager
    */
   public function __construct(
       ArrayManager $arrayManager
   ) {
       $this->arrayManager = $arrayManager;
   }

   /**
    * @param array $data
    * @return array
    * @since 100.1.0
    */
   public function modifyData(array $data)
   {
       // TODO: Implement modifyData() method.
       return $data;
   }

   /**
    * @param array $meta
    * @return array
    * @since 100.1.0
    */
   public function modifyMeta(array $meta)
   {
       // TODO: Implement modifyMeta() method.
       $this->meta = $meta;

       $this->customizeTierPrice();

       return $this->meta;
   }

   /**
    * @return $this
    */
   private function customizeTierPrice()
   {
       $tierPricePath = $this->arrayManager->findPath(
           ProductAttributeInterface::CODE_TIER_PRICE,
           $this->meta,
           null,
           'children'
       );

       if ($tierPricePath) {
           $this->meta = $this->arrayManager->merge(
               $tierPricePath,
               $this->meta,
               $this->getTierPriceStructure()
           );
       }

       return $this;
   }

   /**
    * @return array
    */
   private function getTierPriceStructure()
   {
       return [
           'children' => [
               'record' => [
                   'children' => [
                       {KEY} => [
                           'arguments' => [
                               'data' => [
                                   'config' => [
                                       'formElement' => Input::NAME,
                                       'componentType' => Field::NAME,
                                       'dataType' => Number::NAME,
                                       'label' => __('Label'),
                                       'dataScope' => '{KEY},
                                       'sortOrder' => 25,
                                   ],
                               ],
                           ],
                       ],
                   ],
               ],
           ],
       ];
   }
}

3. Override save & update handlers:

After performing the above steps we’ve added the field in the grid and the database. Now, we have to override the handlers using the preference.

To do so, we’ve to first create the SaveHandler.php in the Model directory. This file overrides the save functionality of tier price which will execute during the save the new product.

use Magento\Catalog\Model\Product\Attribute\Backend\TierPrice\SaveHandler;

class SavePriceHandler extends SaveHandler
{

   /**
    * Get additional tier price fields.
    *
    * @param array $objectArray
    * @return array
    */
   public function getAdditionalFields(array $objectArray): array
   {
       $percentageValue = $this->getPercentage($objectArray);

       return [
           'value' => $percentageValue ? null : $objectArray['price'],
           'percentage_value' => $percentageValue ?: null,
           {KEY} => $this->getSecondaryUnit($objectArray),
       ];
   }

   /**
    * @param array $priceRow
    * @return mixed|null
    */
   public function getSecondaryUnit(array  $priceRow)
   {
       return isset($priceRow[{KEY}]) && !empty($priceRow[{KEY}])
           ? $priceRow[{KEY}]
           : null;
   }
}

To update the tier price data while update the product need to create the UpdateHandler.php in the Model directory and copy the code from vendor/magento/module-catalog/Model/Product/Attribute/Backend/TierPrice/UpdateHandler.php and remove the updateValues function from the code and add below code in the file.

Note: Here, don’t forget to extend the UpdateHandler.

/**
* Update existing tier prices for processed product
*
* @param array $valuesToUpdate
* @param array $oldValues
* @return bool
*/
public function updateValues(array $valuesToUpdate, array $oldValues): bool
{

   $isChanged = false;
   foreach ($valuesToUpdate as $key => $value) {
       if ((!empty($value['value']) && (float)$oldValues[$key]['price'] !== (float)$value['value'])
           || $this->getPercentage($oldValues[$key]) !== $this->getPercentage($value)
           || $this->getSecondaryUnit($oldValues[$key]) !== $this->getSecondaryUnit($value)
       ) {
           $price = new \Magento\Framework\DataObject(
               [
                   'value_id' => $oldValues[$key]['price_id'],
                   'value' => $value['value'],
                   'percentage_value' => $this->getPercentage($value),
                   {KEY} => $this->getSecondaryUnit($value),
               ]
           );
           $this->tierPriceResource->savePriceData($price);
           $isChanged = true;
       }
   }

   return $isChanged;
}

/**
* Get additional tier price fields.
*
* @param array $objectArray
* @return array
*/
public function getAdditionalFields(array $objectArray): array
{
   $percentageValue = $this->getPercentage($objectArray);

   return [
       'value' => $percentageValue ? null : $objectArray['price'],
       'percentage_value' => $percentageValue ?: null,
       {KEY} => $this->getSecondaryUnit($objectArray),
   ];
}

/**
* @param array $priceRow
* @return mixed|null
*/
public function getSecondaryUnit(array  $priceRow)
{
   return isset($priceRow[{KEY}]) && !empty($priceRow[{KEY}])
       ? $priceRow[{KEY}]
       : null;
}

Create DataColumnUpdate.php in the Model directory. This file will load the saved data in the database.

class DataColumnUpdate extends Tierprice
{
   /**
    * @param array $columns
    * @return array
    */
   protected function _loadPriceDataColumns($columns)
   {
       $columns = parent::_loadPriceDataColumns($columns);
       $columns[{KEY}] = {KEY};
       return $columns;
   }
}

Now, you have to add the di.xml in the etc directory and add below code.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
   <preference for="Magento\Catalog\Model\Product\Attribute\Backend\TierPrice\UpdateHandler"
               type="{vendor}\{module}\Model\UpdatePriceHandler" />
   <preference for="Magento\Catalog\Model\Product\Attribute\Backend\TierPrice\SaveHandler"
               type="{vendor}\{module}\Model\Product\Attribute\Backend\TierPrice\SavePriceHandler" />
   <preference for="Magento\Catalog\Model\ResourceModel\Product\Attribute\Backend\Tierprice"
               type="{vendor}\{module}\Model\ResourceModel\Product\Attribute\Backend\DataColumnUpdate" />
</config>

Here, we’ve added the all necessary code to override the tier pricing functionality. Now, just execute the below command from the Magento root directory and verify your implementation.

php bin/magento setup:upgrade
php bin/magento setup:di:compile

I hope this solution will resolve your problem. Let me know your thoughts in the comment section. And if you have any queries with this blog, I will be happy to solve that. Thanks and cheers … 🙂

Also read: Convert the price from one current to another in Magento 2