Device preview

Most shoppers will see your page on a phone, so check every page at each size before you publish.

Switch the preview size#

The device switcher in the top bar changes the width of the canvas:

The canvas lays out sections the same way your storefront does at that width, so what you see here is what shoppers see.

Try the page as a shopper#

While editing, clicks select things instead of following links. Press Preview in the top bar to use the page normally — open tabs and accordions, pick options, follow links — then press Edit to go back. Use this with the device switcher to test the mobile experience.

Different styles for different screen sizes#

Some settings can change with the screen width. At the top of the Style tab (and in Layout) there is a breakpoint bar:

• Base — applies to every screen, starting with phones;
• ≥700 — applies from 700 px wide and up;
• ≥900 — applies from 900 px wide and up.

For example, to make a heading larger on desktop only, pick ≥900 and change its font size. Phones keep the Base size. The breakpoint bar follows the device switcher, so switching the preview to Desktop selects the matching breakpoint.

Layout per screen size#

In the Layout tab, Container controls how a group arranges its contents: Arrange (Theme, Stack, Row or Grid), Gap, Align, Distribute, Columns, Min column and Wrap. Setting these at Base and ≥900 is the easiest way to get a single column on mobile and several on desktop.