Understand the goal of the feature
- The purpose of Dynamic Collection is to automatically populate subcategory links / collection tabs on a category or product listing page.
- Instead of manually building the navigation in the app, the mobile app can read the same Shopify metafield that powers the website.
- This keeps the website and mobile app collection navigation in sync.
Step 1: Prepare the Shopify metafield or metaobject
- In Shopify, create the metafield or metaobject that stores the list of collections you want to display.
- In the example, a Women’s Sale collection already exists and contains products.
- The metafield should represent the collection links that the mobile app will later use to generate the subcategory buttons.
Step 2: Allow the mobile app to read the collection metafield
- In Reactive Mobile App Builder, go to App Settings.
- Open Metafield settings.
- Under Collections, enable the metafield that stores the list of collections.
- Save the setting so the app is allowed to access that data.
Step 3: Open the Product Listing page in App Studio
- After saving the metafield permissions, go to App Studio.
- Use the page selector to open Product Listing.
- Change the preview to the specific collection you want to test, such as Women Sale or another collection page.
Step 4: Add the Collection Tabs Slider component
- On the Product Listing page, add the Collection Tabs Slider component.
- Place it at the top of the page, in the header area, where the subcategory links should appear.
- This component is what will display the collection buttons/tabs to users.
Step 5: Choose between manual or metafield-driven collections
- The component gives you two ways to populate the tabs:
- Static/manual collections: manually choose the collections to show.
- Metafield-driven collections: pull the collection list automatically from Shopify.
- For this workflow, choose the metafield-driven option.
Step 6: Select the custom collection tabs metafield and save
- Choose Custom Collection Tabs from the metafield options.
- Click Save.
- The preview in dashboard will not show the final result, but the configuration is now set.
Step 7: Verify the dynamic behaviour in the mobile app
- When the mobile app loads, it will dynamically pull the values from the selected metafield.
- Those values will appear as buttons/tabs on the collection page.
- Tapping a button takes the user to the corresponding collection page.