Setting up Multi-Tab Shop Screen

Understand what the multi-tab shop screen does

• Creates a tabbed shop experience inside your mobile app.
• Best for merchants with a large catalog that has both:
  • Breadth: many major categories
  • Depth: many subcategories within each category
• Helps you use more screen space to showcase different shop sections more clearly.

Setting up multi-tabs

Step 1: Create the shop screens you want to use as tabs

• Go to App Studio.
• Open the Shop screen section.
• Click Add Screen to create as many shop screens as needed.
• Give each screen a relevant name based on its purpose or category.

Step 2: Enable the tab experience by grouping screens

• Open the screen selector for your shop screens.
• Click Manage Screens to view all available shop screens.
• Create a tab group and give it an internal name.
  • Example: Default Shop Screen Tabs
  • This name is internal only and is not shown to users.
  • You can use drag and drop or add screens directly from the list.Add the screens you want included in that tab group.
• Click Save and Publish when finished.

Step 3: Preview and edit the tabbed shop screens

• Return to the main Shop menu.
• In the screen selector, you’ll now see which screens belong to the same tab group.
• Select a screen such as Women to preview it.
• Important: the preview is display only.
  • You cannot interact with the tabs in preview mode.
• To edit a different tab, select that screen and update its components directly.
  • Use drag and drop to place the content you want on that specific shop screen.

Step 4: Create additional tab groups if needed 

• You are not limited to one tab group.
• You can create another group, such as Tab Group 2.
• Add other shop screens to that new group if you want a separate tabbed experience.
• Key limitation:
  • A screen can belong to only one tab group at a time.
  • It cannot exist in multiple tab groups simultaneously.

Step 5: Remove a screen from a tab group when needed

• To remove a screen from a tab group, either:
  • Drag it out of the group, or
  • Click the three dots and choose Remove from group.
• Do not click Delete Screen unless you want to remove the entire shop screen.
  • Deleting the screen removes access to it completely.
• If you only want to ungroup it, remove it from the tab group instead.
• Save and publish after making changes.

Link users to a specific tabbed shop experience

• The Shop nav icon always opens the screen with the Default badge.
• To send users to a different tab group, link to any shop screen inside that group — from a component, the homepage, or any other entry point.

• On the Home screen, add a component such as a carousel.
• Set its link destination to a screen, then select from shop screen inside the tab group.
• Tapping it opens the multi-tab shop screen, with that screen's tab active.

• Linking to any screen inside a tab group opens the tabbed shop experience.
• The selected destination determines which tab is active when the user arrives.