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:
/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.
Feel free to share the solution with Magento 2 community via social media.
Thank You.
