Yes. Your shop fits the phone's screen width, every store theme has its own layout rules for small screens, and on phones the shop shows a separate header made for a small screen. Still, open your shop on your own phone after every big change, because most shoppers will see it there.
Where to find it
- Your shop's look: Admin › Online store › Store design › Store themes. There are 30 themes built on 10 home page layouts, and each layout has its own rules for small screens.
- Landing pages: Admin › Online store › Pages & blog › Landing pages. The drag-and-drop builder has three screen buttons at the top: computer, tablet and phone. The phone button shows the page 375 pixels wide, about the size of a phone.
How it works
On a phone your shop shows:
- A phone header with the menu button, your logo, the language switch, an account button (Sign in, or My account for a signed-in customer) and the cart. Track order, Reviews and Dark / light mode are inside the menu. Tablets get the same header.
- A bottom bar on phones and tablets with Home, Categories, Cart, WhatsApp (or Call) and Account.
- A search box under the header. The "Popular searches" it suggests come from Store design › Search bar.
- Your categories as small buttons in a row the shopper can scroll sideways.
- Light product photos. Product cards use a smaller WebP copy of the main photo (up to 600 pixels), and the product page uses a WebP copy of each photo. Both are made by themselves when you upload, and photos load as the shopper scrolls down.
Good to know
- Check on a real phone. Open your shop address on your phone and try the whole path: home page, a product, choose a size, order. Do it again after changing the theme, sliders or menu.
- Photos. The product form recommends 800×800 photos. Square photos of the same size keep a category page neat on a small screen.
- Short names. Long product names get cut or wrap on a phone. Put the important words first.
- Keep photos reasonably small. A WebP copy of a huge photo is still heavy on mobile data.
- Landing pages: before sharing an ad link, press the phone button in the builder and check every block.
Common problems
- Something looks fine on a computer but crowded on a phone. Check the text or picture you added yourself (a long banner text, a wide picture). Shorten the text or use a narrower picture.
- A product video is wider than the phone screen. In the product's Video Embedded Code, change
width="560"towidth="100%"and save.
Related
Still need help?
Ask in our Facebook group — the team and other shop owners answer there.
Ask the community →