Shopify Private App – Ingredient Dictionary, Media Gallery & Bioactives Display
Budget: $50 – $500 USD
Project Brief: Shopify Private App – Ingredient Dictionary, Media Gallery & Bioactives Display
1. Overview
We are building a Shopify Private App that enriches our storefront with structured and visually dynamic content experiences across product pages and landing pages. The app should enable centralized content management for:
1.1 Ingredient Dictionary
1.2 News & Media Gallery
1.3 Bioactives Gallery
1.4 Dynamic Embedding into Product Pages
2. Core Modules & Features
2.1 Ingredient Dictionary
Frontend:
2.1.1 A-Z listing with anchor navigation
2.1.2 Search bar for quick filtering
2.1.3 Each entry links to a detail view (modal or page)
2.1.4 Option to display relevant products using this ingredient
Backend:
2.1.5 Add/Edit/Delete ingredients via admin panel
2.1.6 Fields: Name, Description, Benefits, Optional Image, Related Products
2.1.7 Tagging or linking to Shopify product IDs
2.2 Media Gallery
Frontend:
2.2.1 Grid-style layout for articles, videos, and media content
2.2.2 Filter by category (e.g. Press, Events, Features)
2.2.3 Modal or lightbox for viewing media
Backend:
2.2.4 Upload image or link video
2.2.5 Add title, description, media type, and category
2.2.6 Optional display ordering
2.3 Bioactives Gallery
Inspired by: https://nanosingaporeshop.com/pages/bioactives
Frontend:
2.3.1 Grid layout of scientific/clinical ingredients ("bioactives")
2.3.2 Each bioactive opens a popup/modal or redirects to its full detail section
2.3.3 Visual icons or logos for each compound
Backend:
2.3.4 Fields: Name, Short Label, Detailed Description, Visual Icon/Image, Associated Benefits, Optionally Linked SKUs
2.4 Product Page Integration (Reusable Blocks)
2.4.1 Embed content on product pages dynamically:
- Ingredients used in this product
- Bioactives used in this formula
- Media mentions or featured content
2.4.2 Implementation:
- App Blocks or dynamic Liquid snippets
- Content matched via product metafields, tags, or product ID linkage
- Optional toggle in the admin to control visibility per product
3. Technical Stack & Requirements
3.1 Shopify Admin API and Storefront API
3.2 App database: Firebase, Supabase, or Shopify Metafields
3.3 Admin UI: Shopify Polaris (if embedded)
3.4 Clean responsive UI (mobile-optimized)
3.5 Support for Shopify Online Store 2.0
3.6 Sections/blocks must be drag-and-drop compatible
4. Deliverables
4.1 Functional Shopify private app with:
- Ingredient Dictionary management UI and frontend
- Media Gallery manager and embed views
- Bioactives Gallery UI and display
- Product page embed tools (snippets or app blocks)
4.2 Documentation for admin use and integration
4.3 Deployment and environment setup guide
1. Overview
We are building a Shopify Private App that enriches our storefront with structured and visually dynamic content experiences across product pages and landing pages. The app should enable centralized content management for:
1.1 Ingredient Dictionary
1.2 News & Media Gallery
1.3 Bioactives Gallery
1.4 Dynamic Embedding into Product Pages
2. Core Modules & Features
2.1 Ingredient Dictionary
Frontend:
2.1.1 A-Z listing with anchor navigation
2.1.2 Search bar for quick filtering
2.1.3 Each entry links to a detail view (modal or page)
2.1.4 Option to display relevant products using this ingredient
Backend:
2.1.5 Add/Edit/Delete ingredients via admin panel
2.1.6 Fields: Name, Description, Benefits, Optional Image, Related Products
2.1.7 Tagging or linking to Shopify product IDs
2.2 Media Gallery
Frontend:
2.2.1 Grid-style layout for articles, videos, and media content
2.2.2 Filter by category (e.g. Press, Events, Features)
2.2.3 Modal or lightbox for viewing media
Backend:
2.2.4 Upload image or link video
2.2.5 Add title, description, media type, and category
2.2.6 Optional display ordering
2.3 Bioactives Gallery
Inspired by: https://nanosingaporeshop.com/pages/bioactives
Frontend:
2.3.1 Grid layout of scientific/clinical ingredients ("bioactives")
2.3.2 Each bioactive opens a popup/modal or redirects to its full detail section
2.3.3 Visual icons or logos for each compound
Backend:
2.3.4 Fields: Name, Short Label, Detailed Description, Visual Icon/Image, Associated Benefits, Optionally Linked SKUs
2.4 Product Page Integration (Reusable Blocks)
2.4.1 Embed content on product pages dynamically:
- Ingredients used in this product
- Bioactives used in this formula
- Media mentions or featured content
2.4.2 Implementation:
- App Blocks or dynamic Liquid snippets
- Content matched via product metafields, tags, or product ID linkage
- Optional toggle in the admin to control visibility per product
3. Technical Stack & Requirements
3.1 Shopify Admin API and Storefront API
3.2 App database: Firebase, Supabase, or Shopify Metafields
3.3 Admin UI: Shopify Polaris (if embedded)
3.4 Clean responsive UI (mobile-optimized)
3.5 Support for Shopify Online Store 2.0
3.6 Sections/blocks must be drag-and-drop compatible
4. Deliverables
4.1 Functional Shopify private app with:
- Ingredient Dictionary management UI and frontend
- Media Gallery manager and embed views
- Bioactives Gallery UI and display
- Product page embed tools (snippets or app blocks)
4.2 Documentation for admin use and integration
4.3 Deployment and environment setup guide