Design Studio: sections, blocks and settings

Design Studio is where you build your app: the home page, your own pages, the header, the menu and the tab bar. Everything you change goes into a draft. Your customers only see it after you publish.

Find your way around

• Top bar: your theme’s name, the page you’re editing (pick Home page, one of your pages, or Add a page), undo and redo, More actions (⋯) and Publish.
• Left panel: the page’s parts in order. Header and Menu at the top, your sections under Template, and Tab bar at the bottom.
• Middle: a live preview of your real app. Switch phones (iPhone 17 Pro, Pixel 10, iPhone SE), light and dark mode, zoom, and pages such as Shop, Search and Cart. Tap a section in the preview to select it.
• Right panel: the settings for whatever you selected.

The icons on the left of the top bar switch between Sections, Theme settings, Templates, AI assistant and Translate.

Add, move and remove sections

Sections are the building blocks of a page, such as a hero banner, a featured collection or a countdown.

1. Under Template, click Add section.
2. Search or browse the groups (Hero & banners, Products, Navigation, Content, Engagement) and pick one. It’s added after the section you selected, already filled with your store’s collections.
3. Drag a section by its handle to move it. With the keyboard: press Space, use the arrow keys, then press Space again.
4. Use the eye button to hide a section without deleting it. Select a section to Duplicate it or Remove section.

Tip: Removing a section doesn’t ask first. If you remove one by mistake, use Undo.

A page can have up to 40 sections.

Sections on Scale and up

Six sections are included in Scale and up: Recommended for you, Trending in the app, Video, Testimonials, Countdown and Newsletter sign-up. On other plans they show a “Scale plan” badge.

Blocks: the items inside a section

Some sections repeat items, called blocks: slides in a hero banner, messages in an announcement bar, categories in a category grid, tiles, testimonials and trust badges. Open the section in the left panel to see its blocks, then use Add slide, Add tile and so on. Each section has its own limit, for example up to 6 slides.

Change a section’s settings

Select a section to edit its text, images, collections and links in the right panel.

On Scale and up, Section style lets you set each section’s background and text colours, spacing, corners and title style. On other plans, sections follow your theme settings.

Theme settings: colours, fonts and more

Open Theme settings to style the whole app at once: Colors (including light, dark or follow the device), Typography, Icons, Buttons, Corners, Spacing, Images, product cards and grid, product page, collection pages, search, cart and features.

To change the app name, logo and header style, select Header in the left panel.

Ask the AI design assistant (Growth and up)

With nothing selected, the right panel shows Describe a change. Type what you want, such as “Make the hero a summer sale with the swimwear collection”, and click Suggest a change. You can preview the suggestion before you choose Apply to draft. Each request uses 2 AI credits.

Saving, undo and versions

• Studio saves your draft automatically a moment after you stop editing. You can also press Cmd+S or Ctrl+S. The top bar shows “All changes saved” when it’s done.
• Undo and Redo go back up to 100 steps while you’re editing.
• To keep a copy you can return to, choose More actions → Save as a version.

To restore an earlier version, go to Theme Library, open your theme’s ⋯ menu and choose Version history. Restore puts that version into your draft without changing your live app.

Tip: If the top bar says “This draft was changed in another window”, someone else (or the AI assistant) changed the draft. Choose Reload to see their changes, or Keep my edits.

Publish your changes

Click Publish when you’re happy. Installed apps pick up the new design the next time they open, with no App Store or Google Play review.

If you see “Fix these before saving”, correct the listed fields first. Publish stays off until they’re fixed.

Only changes to the app itself, such as a new icon or app name, need a new store release. See Publishing to the App Store and Google Play.