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.
2. Select your website and click on “Edit” button.
3. Open the “Design Rule” tab and click on “Add New User Agent Rule” under “User Agent Rules” section.
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:
|
1 |
/iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini/ |
Here are the two different layouts after applying the above solution.
Magento Luma theme in the Mobile Device:
Magento Blank theme in the desktop:
That’s it.
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:
- How to Install a Theme in Magento 2
- How to Create Child Theme in Magento 2
- 18 Best Free Magento Themes for 2021
- Best Magento 2 Themes – Premium Responsive Themes for Magento 2 in 2021
4 Comments
HI,
I have created separate theme but in landscape view, its not working
Hello Goutam,
Please be informed that you don’t need to set a separate theme for a landscape view as it is the default theme selection by Magento.
Thank You
Thank you Kishor, for your solution, but by this way i have a problem with my homepage wich use block and slideshow from Infortis ultimo but the block doesn’t fit for Magento Luma … how to do 2 diffrent desing for the home page ?
Hello Marina,
No, it’s not possible to design homepage differently as you mentioned.
Thank You