Build your home screen with sections

Your home screen is a stack of sections. You add the ones you want, set each one's options, and drag them into the order you like, with a live phone preview on the right that updates as you go. There is no code and nothing to publish to see it: the preview is the real mobile app rendering your content.

Where you build it

Open App builder in Shopify. It starts on Homepage, with the editor on the left and phone preview on the right. Use the workspace picker above the editor to switch between Screens, Design and Shopper experience. You can search for a tool by its name or purpose; for the home screen, stay on Homepage.

Step 1: add your first section

When the home screen has no sections yet, the editor shows an empty state that says Click Add to get started. Use the Add button at the top of the section list to open a categorised menu of the sections you can place (grouped into Header, Products, Content and Integrations).

Pick a section to drop it onto the screen, then select it in the list to open its options in the editor. Repeat to stack as many sections as you want.

The sections you can add

A few of the most common building blocks for a home screen:

• Sales Hero - a full-width banner at the top with your headline, image and a call to action.
• Collection Carousel - a horizontally scrolling row of products pulled from one of your Shopify collections.
• Featured Collections - a set of collection tiles that send shoppers into those collections.
• Customer Reviews - social proof to build trust on the home screen.
• Store Locator - your shops with a Directions button, and optionally each shop's opening hours and a Call button.

You are not limited to these; the Add menu lists every section type available for the home screen, and you can add more than one of the same kind.

Store opening hours and phone

Shopify does not store opening hours, so you enter them in the Store Locator section: open a store with Edit, then set its phone number, its time zone (it starts as your store's time zone) and the hours for each day. A day can have up to three openings, and a closing time before the opening time runs past midnight. Copy Monday to weekdays fills Tuesday to Friday from Monday.

The app then shows each store's line, such as "Open until 19:00" or "Opens Mon 10:00", worked out in that store's time zone, and a Call button for a store with a phone number. Turn either off for the whole section with Show opening hours and Show Call button. Holiday hours are not supported yet, so a one-off closure still shows the usual hours: change the day's hours while it applies.

Step 2: arrange and preview

Drag sections up and down in the list to reorder them; the phone preview re-renders in the new order immediately. You can also hide a section without deleting it, duplicate one, or rename it in the list so a long home screen stays readable. What you see in the preview is what your customers will get.

Where the products come from

Sections like Collection Carousel and Featured Collections are filled from your Shopify catalogue automatically - you pick a collection in the section's options rather than re-entering products. That means the collections you set up in Shopify are what these sections can show, so create and organise your collections in your Shopify admin first.

After you build

Once your home screen reads the way you want, you can move on to the bottom-tab menu, custom pages and product templates, brand the app with your colours, logo and fonts, and finally publish. Each of those has its own guide in this help centre.