How to preview mobile version on desktop

How to preview mobile version on desktop

There are 5 simple steps as below: 

Step 1: Open Chrome's developer tools with F12.

Step 2: Click the 'Toggle device toolbar' button to turn Device Mode on or off. (Icon is blue when Device Mode is on).


Step 3: (Optional) Select which mobile device you want to simulate with the 'Viewport controls'.


Step 5: Refresh the webpage (Ctrl+Shift+R)



    • Related Articles

    • What's the difference between Mobile Menu app & Smart Menu?

      Smart Menu can build a mega menu on desktop, and also show on mobile. Why needs a separate Mobile Menu app? See comparison table below to know the difference. Mobile Menu Smart Menu Purpose ✔ Build mobile menu ✘ Build menu on desktop ✔ Build mega ...
    • FAQs for Mobile Menu

      Is the Free plan really free? Yes, it is 100% free and forever free to use. We won't even ask for a credit card. By default, when you install Mobile Menu, you will be in Free plan. You only get charged once you upgrade to Premium plan. What is the ...
    • How to set up Sticky Bar? (Version 2)

      GENERAL SETTING Visibility Enable on desktop: allow your sticky button to appear on desktop version.  Enable on mobile: allow your sticky button to appear on mobile version. "Enable on mobile"  works on screen width that is below 992 pixels Display ...
    • How to display Smart Menu on preview theme?

      In some cases, Smart Menu may not appear on preview themes.  This article will help you to display Smart Menu in preview mode of Shopify: Step 1: In Shopify Admin, select Online Store > Themes > Click on the “Customize” button to You can also display ...
    • Add Mobile Menu app to your store

      After creating your menu in Mobile Menu app (not Smart Menu), you can go to Display settings tab to: Replace theme menu: select a current menu on your store to be replaced with Mobile Menu OR Add an extra menu separately with floating button, not ...