--- title: How to Setup Dynamic Collection Tabs from Shopify Metafields in the Reactiv Mobile App description: Automatically populate collection tabs on your mobile app's product listing pages. Learn how to connect a Shopify metafield in Reactiv, add the Collection Tabs Slider, and keep app navigation in sync with your website. --- [Skip to content](https://info.reactiv.ai/reactiv-help-center/how-to-set-up-dynamic-collection-tabs-from-shopify-metafields-in-the-reactiv-mobile-app#main-content) ![logo-mono-light](https://info.reactiv.ai/hubfs/logo-mono-light.svg) Open main navigation Close main navigation - [Contact us](https://info.reactiv.ai/reactiv-help-center/how-do-i-contact-customer-support-reactiv-support-center) [Contact us](https://info.reactiv.ai/reactiv-help-center/how-do-i-contact-customer-support-reactiv-support-center?hsLang=en-ca) Answers, documented. - There are no suggestions because the search field is empty. 1. [Reactiv Help Center](https://info.reactiv.ai/reactiv-help-center?hsLang=en-ca) 2. [Building Your App](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca) 3. [Other Screens](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#other-screens) September 13, 2026 # How to Setup Dynamic Collection Tabs from Shopify Metafields in the Reactiv Mobile App ### **Understand the goal of the feature** ![](https://loom.com/i/be4b25d2438444e0950d5c0597eee5ab?workflows_screenshot=true) - 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** ![](https://info.reactiv.ai/hs-fs/hubfs/Screenshot%202026-07-24%20at%203-41-00%E2%80%AFPM-png.png?width=670&height=329&name=Screenshot%202026-07-24%20at%203-41-00%E2%80%AFPM-png.png) - 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. ![](https://loom.com/i/3d24e0bc84fe4ba6bae68935219c116f?workflows_screenshot=true) #### **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. ![](https://loom.com/i/e1f171a8306d472b84ab0158d3884de7?workflows_screenshot=true) #### **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** ![](https://info.reactiv.ai/hs-fs/hubfs/Simulator%20Screenshot%20-%20iPhone%2017%20Pro%20-%202026-07-24%20at%2012-35-34-png.png?width=1206&height=2622&name=Simulator%20Screenshot%20-%20iPhone%2017%20Pro%20-%202026-07-24%20at%2012-35-34-png.png) - 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.   - [Getting Started With Reactiv](https://info.reactiv.ai/reactiv-help-center/getting-started-with-reactiv?hsLang=en-ca) - [Building Your App](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#main-content) - [App Settings](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#app-settings) - [Your Home Screen](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#your-home-screen) - [Misc. App Building Blocks](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#misc-app-building-blocks) - [Other Screens](https://info.reactiv.ai/reactiv-help-center/building-your-app?hsLang=en-ca#other-screens) - [Publishing Your App](https://info.reactiv.ai/reactiv-help-center/publishing-your-app?hsLang=en-ca#main-content) - [iOS App](https://info.reactiv.ai/reactiv-help-center/publishing-your-app?hsLang=en-ca#ios-app) - [Building Your Reactiv Clips](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#main-content) - [Success with Reactiv Clips](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#success-with-reactiv-clips) - [Customizing Your Reactiv Clips Experiences](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#customizing-your-reactiv-clips-experiences) - [Initializing Your Reactiv Clips](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#initializing-your-reactiv-clips) - [About Reactiv Clips](https://info.reactiv.ai/reactiv-help-center/building-your-reactiv-clips?hsLang=en-ca#about-reactiv-clips) - [Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#main-content) - [Analytics & Push Notifications](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#analytics-push-notifications) - [App Install Attribution](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#app-install-attribution) - [Back in Stock Alerts](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#back-in-stock-alerts) - [Chat & Customer Support](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#chat-customer-support) - [Conversion Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#conversion-integrations) - [Discovery, Search & Personalization](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#discovery-search-personalization) - [Fraud Protection](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#fraud-protection) - [Loyalty](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#loyalty) - [Order Fulfillment](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#order-fulfillment) - [Product Recommendations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#product-recommendations) - [Order Tracking & Returns](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#order-tracking-returns) - [Product Bundles](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#product-bundles) - [Reviews Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#reviews-integrations) - [Subscriptions](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#subscriptions) - [Video Shopping](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#video-shopping) - [Wishlist Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#wishlist-integrations) - [Profile Integrations](https://info.reactiv.ai/reactiv-help-center/integrations?hsLang=en-ca#profile-integrations) - [Platform Highlights](https://info.reactiv.ai/reactiv-help-center/platform-highlights?hsLang=en-ca) - [Success with Reactiv](https://info.reactiv.ai/reactiv-help-center/success-with-reactiv?hsLang=en-ca#main-content) - [Sending Push Notifications](https://info.reactiv.ai/reactiv-help-center/success-with-reactiv?hsLang=en-ca#sending-push-notifications) - [Building with AI](https://info.reactiv.ai/reactiv-help-center/building-with-ai?hsLang=en-ca) - [FAQ](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#main-content) - [Performance & Data](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#performance-data) - [General & Billing](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#general-billing) - [Getting Started](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#getting-started) - [Technical Issues & Troubleshooting](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#technical-issues-troubleshooting) - [App Management](https://info.reactiv.ai/reactiv-help-center/faq?hsLang=en-ca#app-management) - [Research](https://info.reactiv.ai/reactiv-help-center/research?hsLang=en-ca) [![logo-mono-dark](https://info.reactiv.ai/hubfs/logo-mono-dark.svg "logo-mono-dark")](http://reactiv.ai) Copyright © 2026, Reactiv