Neem Tres
Cart 0 item Rs. 0.00
Cart 0 item Rs. 0.00
Home
Shop
Wishlist
Home
Shop
Our Story
FAQ
Contact

manifest.json (Web App Manifest)

  1. Home
  2. manifest.json (Web App Manifest)

manifest.json — Web App Manifest for Neem Tres

The Web App Manifest tells browsers (Chrome, Edge, Firefox, Safari) how to display Neem Tres when installed as a Progressive Web App (PWA) or added to a home screen. It also influences how your site appears in browser UI, address bar branding, and "Install App" prompts.

Manifest Configuration

{
  "name": "Neem Tres",
  "short_name": "Neem Tres",
  "description": "Premium handwoven Indian sarees. Banarasi silk, Kasavu cotton, Ikat, and embroidered sarees from artisan communities across India.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#2C2C2C",
  "lang": "en",
  "scope": "/",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["shopping", "fashion", "lifestyle"],
  "screenshots": []
}

Implementation Instructions

  • Upload icon-192.png (192×192px) and icon-512.png (512×512px) to your Shopify theme Assets
  • Create a manifest.json file in your theme assets with the above content (update icon paths to full CDN URLs)
  • Add this tag inside <head> in theme.liquid:
    <link rel="manifest" href="{{ 'manifest.json' | asset_url }}">
  • Also add theme color meta tag:
    <meta name="theme-color" content="#2C2C2C">

Brand Colors

  • Theme Color: #2C2C2C (dark charcoal — used in browser chrome when site is in standalone mode)
  • Background Color: #FFFFFF (white — used on splash screen)

What This Enables

  • Chrome on Android: "Add to Home Screen" with branded icon and name
  • Microsoft Edge: Install as App with correct branding
  • Safari iOS: When added to home screen, uses apple-touch-icon (set separately)
  • Google Search: May trigger "Install" rich result for your store
  • Browser address bar: Displays theme color in supported browsers

After implementing in your theme, validate at web.dev/measure or Chrome DevTools → Application → Manifest.

Compare 0