Edit your site in mobile view

Switch to mobile view

1. Open the editor.
2. Click the phone icon in the top bar. The page narrows to phone width and a banner says Editing Mobile View.
3. Click the phone icon again to go back to Desktop view.

Adjust the layout for phones

Click a section, then drag and resize its elements as usual. The first change you make in mobile view creates a separate phone layout for that section. Your desktop layout stays as it was.

Finish your text and add new elements in Desktop view first. Once a section has its own phone layout, later text edits may not carry over between the two views. Then switch to mobile view to fix positions and sizes.

Hide a section in mobile view

1. In mobile view, right-click the section.
2. Click the eye icon, Hide on Mobile.
3. The section shows a Hidden on Mobile badge in the editor, and phone visitors won't see it.
4. To hide something on computers only, do the same in Desktop view and choose Hide on Desktop.

Reset a mobile layout

To undo phone changes for one section, select it, open Block Settings and click Reset to Auto Layout under Mobile Layout.

To reset every section on the current page, click the reset arrow on the Editing Mobile View banner and confirm. This brings back the automatic phone layout based on your desktop design.

Tips for better mobile pages

Keep headlines short so they fit on two lines. Make buttons wide enough to tap with a thumb.

Hide large decorative sections on phones if they push your products too far down.

After you publish, open your store on your own phone and place a test order.