How to Setup Separate Theme for Desktop and Mobile in Magento 2

How to Setup Separate Theme for Desktop and Mobile in Magento 2

 An increasing number of people turn to their smartphones not just to make calls but also to browse news, shopping, and work too!

In 2021, 72.9% of all retail E-commerce is expected to be generated via M-Commerce as per Statista.

Thus,  Magento 2 store owners cannot afford to ignore the traffic that comes from mobile devices. Preparing the Magento 2 store for M-Commerce is much needed now than ever.

If you are using a theme for Magento 2 store, it may be possible that it works fine on the desktop but looks messy on the mobile screen!

To offer your customers a consistent look and feel on every screen, the store owner can setup a separate theme for desktop and mobile in Magento 2 which activates a different theme based on the screen sizes.

Also, a theme appropriate for mobile may not be as good for a desktop or tablet screen. In such cases, follow the below solution to offer a uniform in-store experience to all the visitors across all the devices.

Steps to Setup Separate Theme for Desktop and Mobile in Magento 2

1. Login to the admin panel and go to Content > Configuration from admin panel.

content/configuration

2. Select your website and click on “Edit” button.

click edit

3. Open the “Design Rule” tab and click on “Add New User Agent Rule” under “User Agent Rules” section.

Add new user rule

4. Enter the “Search String” and select the theme that you want to apply in mobile and click on “Save Configuration” button.

Search String contains the name of devices i.e:

Theme config
Here are the two different layouts after applying the above solution.

Magento Luma theme in the Mobile Device:

Mobile device
Magento Blank theme in the desktop:

Desktop

That’s it.

You can also refer to the video tutorial to Setup Separate Theme for Desktop and Mobile in Magento 2 from our Magento 2 video tutorial series:
How to Setup Separate Theme for Desktop and Mobile in Magento 2 1

If you have any doubts about this method, just mention them in the Comments section below.

I would be happy to help.

Feel free to share the solution with Magento 2 community via social media.

Thank You.

Related Posts:

  1. How to Install a Theme in Magento 2
  2. How to Create Child Theme in Magento 2
  3. 18 Best Free Magento Themes for 2021
  4. Best Magento 2 Themes – Premium Responsive Themes for Magento 2 in 2021

Get Weekly Updates

Never miss Magento tips, tricks, tutorials, and news.

Thank you for subscribing.

Something went wrong.

5
(based on 12 Reviews)

He is a Magento developer at Meetanshi with a jolly, extrovert, & friendly personality. He loves playing cricket and is a passionate foodie!

Leave a reply:

Your email address will not be published.