{"id":1562,"date":"2021-02-03T16:10:00","date_gmt":"2021-02-03T16:10:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/setup-separate-theme-for-desktop-and-mobile-in-magento-2\/"},"modified":"2025-07-17T09:43:23","modified_gmt":"2025-07-17T04:13:23","slug":"setup-separate-theme-for-desktop-and-mobile-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/setup-separate-theme-for-desktop-and-mobile-in-magento-2\/","title":{"rendered":"How to Setup Separate Theme for Desktop and Mobile in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">An increasing number of people turn to their smartphones not just to make calls but also to browse news, shopping, and work too!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In 2021, 72.9% of all retail E-commerce is expected to be generated via M-Commerce as per&nbsp;<a href=\"https:\/\/www.statista.com\/statistics\/806336\/mobile-retail-commerce-share-worldwide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Statista<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thus,\u00a0\u00a0Magento 2\u00a0store 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To offer your customers a consistent look and feel on every screen, the store owner can&nbsp;<em><strong>setup a separate theme for desktop and mobile in Magento 2&nbsp;<\/strong><\/em>which activates&nbsp;a different theme based on the screen sizes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Setup Separate Theme for Desktop and Mobile in Magento 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Login to the admin panel and go to&nbsp;<strong>Content &gt; Configuration<\/strong>&nbsp;from admin panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/01\/ss1-1024x342.jpg\" alt=\"content\/configuration\" class=\"wp-image-12806\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2. Select your website and click on \u201c<strong>Edit<\/strong>\u201d button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/01\/ss2.jpg\" alt=\"click edit\" class=\"wp-image-12807\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. Open the \u201c<strong>Design Rule<\/strong>\u201d tab and click on \u201c<strong>Add New User Agent Rule<\/strong>\u201d under \u201c<strong>User Agent Rules<\/strong>\u201d section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/01\/ss3.jpg\" alt=\"Add new user rule\" class=\"wp-image-12808\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">4. Enter the \u201c<strong>Search String<\/strong>\u201d and select the&nbsp;<strong>theme<\/strong>&nbsp;that you want to apply in mobile and click on \u201c<strong>Save Configuration<\/strong>\u201d button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Search String contains the name of devices i.e:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/blockquote>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini\/<\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/01\/ss4-2.jpg\" alt=\"Theme config\" class=\"wp-image-12816\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><br>Here are the two different layouts after applying the above solution.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Magento Luma theme in the Mobile Device:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/01\/MicrosoftTeams-image.jpg\" alt=\"Mobile device\" class=\"wp-image-12813\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><br><strong>Magento Blank theme in the desktop:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/01\/desktop-ss.png\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/01\/desktop-ss.png\" alt=\"Desktop\" class=\"wp-image-12814\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to share the solution with Magento 2 community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank You.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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,&#8230;<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1562","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1562"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1562\/revisions"}],"predecessor-version":[{"id":14519,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1562\/revisions\/14519"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}