How to Create the Perfect Magento 2 Theme [Plus the 5 Best Magento 2 Themes Available]

Magento 2 is a fantastic backend commerce platform, providing advanced services for enterprise-level and rapidly scaling online brands.

But what’s the best solution for your frontend layer (or everything your shopper interacts with) as you grow your ecommerce business?

For accelerating your customer base and accommodating new product lines, you need a fast-loading, scalable, and robust storefront able to provide an outstanding shopping experience to every visitor.

And there are several routes you can take to create the storefront of your dreams with Magento (or Adobe Commerce)— from using one of the many out-of-the-box themes available—to designing your own custom theme, to using a unified Frontend Platform for headless flexibility.

Today, we’ll walk through the options, running through the best Magento themes on the market, and covering what’s involved in creating a custom theme.

Try out the jump links below for skipping to what you’re most interested in:

• What you need from your Magento 2 theme
• How to install a theme in Magento 2
• The best Magento 2 themes available
• How to create a new storefront theme from scratch
• The pros and cons of a custom Magento 2 theme
• Exploring a frontend platform (or headless flexibility) for Magento 2

The characteristics you need from your Magento 2 theme

Before we get into the details of which specific Magento 2 or Adobe Commerce themes offer the best options for your online store and how you can install them, let’s look at all of the things that any good theme needs to do.

Here’s your checklist for evaluating any Magento 2 theme for your ecommerce brand:

• Is user-friendly & has great UX: You need site visitors to be able to navigate easily and intuitively around your site and for product pages to be quickly accessible, without bounce-inducing friction.
• Loads quickly: Similar to great UX, your site needs to be fast loading. Seconds, and even fractions of seconds, can make a substantial difference to your bounce and conversion rates. Make sure the Magento 2 theme you’ve chosen is speeding up rather than slowing down your online store.
• Looks amazing: It sounds obvious, but don’t just evaluate a prospective theme by its technical capabilities. Any theme you choose needs to wow your customers. A great look and feel creates a positive impression of your brand and contributes to the overall shopping experience. You need to have an implicit understanding for the best ecommerce web designs and aim to carry it out with whichever theme you choose.
• Is highly customizable: There are some very good off-the-shelf Magento 2 themes, but unless you want your store to look exactly like every other store out there, ensure you have the ability to easily customize your theme to create the look, feel, and UX that your brand requires.
• Is responsive: You’ll need to make sure your theme is optimized for mobile: elements on your pages should load quickly and seamlessly on various devices aligned to the ever-growing focus on mobile commerce.
• Facilitates messaging: However you promote products or categories—with banners, pop-ups, or other CTAs—you need your theme to be capable of displaying your messaging without the need for complex workarounds or heavy customizations.
• Supports strong SEO: Magento 2 has great SEO features in its platform, but if you do too much coding-level customization of your theme, you can inadvertently offset the SEO capabilities of your store by changing the HTML and CSS code that helps your site rank. Either pick a theme that does what you need without making coding changes, or work with a developer who understands SEO deeply.
• Supports multiple channels: Delivering omnichannel experiences is hard if you have to recreate content for every channel. A theme that can push content to several channels without the need for manual changes can ultimately make omnichannel much easier.

And of course, once you’ve found the theme you’d like, next up, you need to install it. Which leads us to…

How to install a theme in Magento 2

There are a few different ways to install your Magento 2 theme. How you do it will depend on a) what kind of theme you want to install, and b) how it’s packaged up prior to installation.

In assembling the best resources for you on this:

• Magento developer Sanjay Jethva has produced an easy-to-follow, step-by-step guide for installing your Magento 2 theme, broken down by installation type.

• And, if you need something a bit more in-depth, Adobe’s documentation is a great resource and will help you through the process in detail.

How can I change a theme in Magento 2?

Once your theme is installed, you can easily change from the default Magento theme to the one you want to use for your storefront.

• You can load your new theme from the admin panel.
• Just head to the content section and follow these steps.

#cta-visual-fe#<cta-title>Create an incredible, high-performing ecommerce experience<cta-title>See how Shogun Frontend can help you deliver elevated shopping and speed with Adobe Commerce. Learn more

So, what is the best Magento 2 theme?

There are a huge number of Magento themes to choose from. You can pick one of Adobe’s own themes or go for a third-party option. You can even decide to create your own theme completely from scratch—something we’ll cover later in this post.

But, with all the choices, what’s the best option for your business? Remember that the requirements of your store will be unique, and there is no one-size-fits-all option, so keep in mind the checklist we covered earlier and what your priorities are.

All that said, here are five of the best and most popular Magento 2 themes available to you:

1. Porto

One of the most widely used Magento 2 premium themes, Porto offers a clean design and a lot of layout flexibility and choice. Despite being able to choose from over 25 homepage layouts, Porto is a lightweight theme, meaning your pages are quick to load.

One of the most attractive features of Porto from an SEO perspective is the flexibility it provides when creating your menus and categories. You can configure the depth of your menus and display images from your product categories on your homepage. It allows you to create fast and intuitive navigation and move visitors quickly to your product pages.

2. Market

This theme, developed by Magentech, is good for online brands operating stores with extensive product categories. It’s been a big hit with Magento customers as it integrates with several of the most popular Magento extensions, especially marketplace extensions.

• The theme is fully responsive, meaning you don’t have to worry about redesigning your content for mobile.

• Like Porto, Market has the Mega Menu feature, allowing you lots of flexibility when configuring your menu.

Extensions like Ajax Layered Navigation are available with Market theme and provide extra search functionality. But be careful not to load up on too many extensions when customizing your theme—they can have a negative impact on your page load times.

3. Claue

Another lightweight theme that allows Magento store owners to choose from a wide variety of homepage layouts. Claue is based on Luma, one of two default Magento themes, but has advanced features and integrates with all of the most popular Magento extensions.

It comes with the MGS Page Builder extension, which is a useful drag-and-drop editor, allowing store designers to edit content right from the CMS. It is now available in a PWA, which will increase the performance of this already fast theme.

Some of the most notable extensions it supports are :

• Mega Menu
• Ajax Cart Pro
• Ajax Layered Navigation
• Blog support
• Store Locator
• Magento Banners

4. Argento

This third-party Magento theme is one of the most well-known, with over 5,000 stores running on it. Argento will install their theme for you and offer updates and support for a $25 monthly subscription.

Even though it’s a third-party theme, it’s built according to the same rules that in-house Magento themes use, so will integrate with any extension that’s built in the same way.

It also offers:

• Mobile responsiveness
• Compatibility with all major browsers
• 7 styles to choose from
• SEO package
• 20+ Extensions included for free

5. Pearl

Another popular third-party theme, Pearl boasts that it’s the most documented Magento 2 theme available. Its price tag includes access to a self-service center and email support.

Pearl comes in three formats:

• Essential – A basic option that doesn’t include many extensions or advanced features. This one’s suitable for single store or smaller brands.
• Professional – A more advanced (and expensive) option that comes with free installation, several extensions, and homepage, data, and analytics setup.
• Professional Custom – This comes with all the Professional features, plus a pre-launch audit and homepage, shipping, and data setup. It also includes 50 hours’ free development, which you can use to customize the theme, and custom hosting.

Potential downsides of off-the-shelf Magento 2 themes

Pre-packaged Magento themes have many advantages: they’re quick and easy to set up, provide a professional-looking storefront, and are usually designed in such a way as to integrate with the ecommerce extensions you’ll need to power your store.

However, there are some drawbacks to using a pre-designed theme you should be aware of, including:

• Their capabilities might not match your ambition. As you scale, you’ll also need to scale your storefront functionality. More product lines mean more categories and more elaborate menus and navigation. Trying to shoehorn these requirements into what’s provided by an off-the-shelf Magento theme could damage the customer experience and cause friction points on the customer journey.
• Lack of speed. Often, with themes, you’ll struggle to achieve the sub-second load times that are optimal for ecommerce stores. This is especially true the more extensions you add. Every extension you add requires code to run, and every bit of code on your site has an impact on performance. If you’re using an off-the-shelf theme, do a speed test to see how fast your site is running.
• Fairly uniform stores. Some of the most popular themes have thousands of stores running on them. At the very least, a good theme will have hundreds of downloads. This can create a cookie-cutter effect, where the look and feel of your storefront is very similar to other online brands. You lose the uniqueness you need to differentiate in today’s market, which is essential.

How to create a new storefront theme from scratch

With the potential downsides of a third-party theme to consider, many brands opt for creating their own theme entirely. A Magento 2 custom theme is a theme that’s built entirely from scratch to meet the exact needs of your online store and brand.

This can be a good solution if you have a very strong handle on your tech stack. You’ll need to be sure you can take on the challenge of designing, building, and maintaining a bespoke theme. This can often require having the staff for maintenance of a theme on hand, or at least readily available.

There are several agencies that will develop a custom Magento theme for you, so you don’t have to worry about the technical details. But these bespoke services can be expensive and you may need to pay ongoing costs for maintenance and any third-party contracts involved in the theme development and delivery process.

If you have a strong team of in-house developers, you could decide to build a theme yourselves, although this is not something that should be taken on by inexperienced teams.

If you do decide to go it alone, here’s a brief workflow to give you some idea of what you should expect:

1. Use a Magento 2 template. Magento comes with two pre-installed ‘starter’ themes – Blank and Luma. If you’re building your own theme, there will be common elements that you’ll need regardless of the kind of store you’re building, so using a basic template will save you a lot of time.
   • Luma is more advanced than Blank, so use Luma if you’re happy with working from a more established foundation,
   • use Blank if you want to do a lot of the development yourself.

1. Create your theme in the directory. This is where you show Magento your theme exists. Go into the Magento root directory and go to app>design>frontend, then create a folder with the name of your theme.

1. Declare your theme with a theme.xml file. This file gives Magento basic information about your theme. If you’re creating a theme from a Blank or Luma template, this is the place to tell Magento what the ‘parent’ theme is. It’s this step that generates the foundations of your theme as the code for your theme will be created according to your parent theme.

Your theme.xml file will sit in the theme directory you’ve just created.

#cta-paragraph-fe#The code you need to insert in the theme.xml file can be found on the Adobe developers’ site, along with a more detailed technical walkthrough of the theme creation process.

1. Use Composer to distribute your theme. Magento uses Composer to manage dependencies (packages or libraries of code needed to make the theme work). To enable composer, add a composer.json file to your theme directory folder (again, you can find an example on Adobe’s site.)

1. Register your theme. You need to add a registration.php file to your theme directory folder to register it on the Magento system.

1. Customize your theme. The above steps are the basics for creating a theme completely from scratch in Magento. But you’ll have inherited a lot of specifications from the parent theme, so now you need to customize things like your image sizes, add a logo, and add your own static CSS, fonts, images, and JS files to your theme. This is the hard part, and if you’re serious about creating a Magento 2 theme robust enough to handle your online brand’s requirements, you should work with developers to make it a reality.

The pros and cons of a custom Magento 2 theme

Creating a Magento 2 theme from scratch is no doubt a big undertaking but can be very rewarding for your business. Before you start down the custom Magento theme route, you’ll need to decide whether it will be worth the time and effort and will give you the shopping experience you need.

Here are some benefits and drawbacks of a custom approach to help you decide:

Pros of a custom theme:

• Design the site you want. Going this route, you get complete control over the layout, look, and feel of your site. You can map out your site with homepage, product pages, categories, and more, and create the optimal site navigation for your customer journeys.
• Create a unique store. Rather than use an off-the-shelf Magneto theme that hundreds or thousands of other stores might be using, you can create something more memorable and special for your customers.
• Complete control of your tech stack. When you build your own theme, you’re not reliant on a theme vendor for updates and maintenance. If you have a team of developers that want to take a hands-on approach to managing your site, this extra control could be an advantage.

Cons of creating a custom Magento theme:

• Takes up developer resources. Even if you have an expert team of in-house developers ready to go, you will need to allocate their time to the theme development and deployment project. It means they won’t be able to work on other (perhaps more meaningful revenue-driving projects).
• Often involves large costs. You will either need to allocate developer budget and resources to creating a theme, or partner with a development agency. The development and support costs here can be considerable, so you’ll need to consider your store’s GMV and stage of growth.
• Long lead times. Designing, developing, and deploying a custom theme is far more complicated than installing a pre-packaged Magento 2 theme. And all the time you’re planning and creating your theme, your site visitors will still be having the same customer experiences that you’re hoping to update and improve.
• You may not end up with what you envisioned. Theme development is a complex and involved process. It’s not always possible to predict the problems and technical issues that will crop up, and you might end up with several workarounds for issues that you set out to eliminate entirely. This is not ideal if you’ve invested a lot of time and money into a theme development project.
• You might outgrow it sooner than you think. The pace of change in ecommerce is breathtaking, just think back to a few years ago, when omnichannel was in its infancy and not a widely used retail practice. Add in the changing requirements of your brand as you scale and the need to adapt to changing circumstances is clear. You might be hesitant to change an expensive and laboriously produced theme.

Explore the option of a frontend platform for headless flexibility

Ok, so you’ve scaled past the pre-built Magento theme phase and feel an off-the-shelf theme may be too slow or inflexible. But you also don’t want the headaches, expense, and long lead times associated with designing a custom Magneto theme.

What’s the alternative?

Well, like many forward-thinking brands—you can explore gaining total frontend control via headless commerce (and a flexible frontend layer atop Adobe Commerce, which is headless enabled).

Shogun frontend is a unified frontend platform that gets you flexibility, unrivaled speed, and the ability to craft totally unique design—without performance tradeoffs or developer reliance.

The low-code environment means your non-technical team members can make changes quickly with an intuitive Experience Manager. Further, by restructuring Adobe Commerce with a headless architecture, this means you can create consistent experiences across platforms and channels.

Using a unified frontend platform can free your teams up to focus on the core needs of your scaling business and the experience that differentiates your storefront—while technical frontend considerations for your stack are handled by a dedicated team of experts that you partner with. You outsource all the infrastructure, so you can focus on what’s most important (afterall, your content delivery network isn’t what your shopper is going to notice and keep coming back for!)

Shogun Frontend is built with underlying progressive web app technology, meaning you can achieve sub-second load times, even on mobile.

The speed inherent in PWA technology will also help boost your SEO, with Google rewarding fast-to-load sites that aren’t hampered by heavy add-ons or elaborate coding changes.

A flexible frontend decoupled from your backend also gives you a lot more flexibility when it comes to integrating with third parties and swapping out parts of your tech stack as your needs change.

It’s an approach that can future-proof your business, as well as providing lightning-fast, ultra-responsive customer experiences in the here and now.

#cta-visual-fe#<cta-title>Create an incredible, high-performing Adobe Commerce<cta-title>Shopping experience. See how Shogun Frontend can help you deliver elevated shopping and speed. Learn more