{"kind":"post","path":"/blog/blooms-and-beyond","post":{"metadata":{"title":"Blooms \u0026 Beyond Shopify Rebuild","summary":"A Jammu flower and gifting store got a cleaner, faster storefront that is easier to shop and trust. Under the hood, the rebuild moved Shopify Liquid to Hydrogen with stronger UX, SEO, cart, and delivery flows.","publishedAt":"2026-05-25","projectDate":"2026-05-06","ascent":"#0A2A66","links":[{"label":"Live store","href":"https://bloomsandbeyond.shop/","type":"website"},{"label":"Instagram","href":"https://www.instagram.com/bloomsandbeyond.jammu/","type":"social"},{"label":"Facebook","href":"https://www.facebook.com/profile.php?id=61584696810091","type":"social"}],"tags":["shopify","hydrogen","commerce","seo","react","webdev","fullstack"],"weight":0},"slug":"blooms-and-beyond","content":"\u003c!-- cover: /images/blog/blooms-and-beyond/cover.png --\u003e\n\nBlooms \u0026 Beyond was a working Shopify shop. I rebuilt its Liquid storefront in **Hydrogen** while Shopify kept products, carts, checkout, customers, and store operations.\n\n## Before And After\n\n\u003cimg src=\"/images/blog/blooms-and-beyond/mockup-home-hero.png\" alt=\"Blooms \u0026 Beyond Hydrogen home page with gift categories and product rows\" /\u003e\n\n### Homepage\n\nThe new home page leads with delivery, search, categories, occasions, a campaign, and bestsellers.\n\n\u003cdiv\n className=\"bp-before-after\"\n data-before-src=\"/images/blog/blooms-and-beyond/before-home-desktop.png\"\n data-before-alt=\"Blooms \u0026 Beyond Liquid storefront homepage before the Hydrogen rebuild\"\n data-before-label=\"Before: Liquid theme\"\n data-after-src=\"/images/blog/blooms-and-beyond/after-home-viewport.png\"\n data-after-alt=\"Blooms \u0026 Beyond Hydrogen storefront homepage after the rebuild\"\n data-after-label=\"After: Hydrogen rebuild\"\n data-aspect=\"1440 / 820\"\n\u003e\u003c/div\u003e\n\n\u003cp className=\"bp-evidence-caption\"\u003eMove the divider to compare the Liquid theme and Hydrogen rebuild.\u003c/p\u003e\n\n### Collection Browsing\n\nCollections now keep category links, stock, price, sort, and layout controls near the product grid.\n\n\u003cdiv\n className=\"bp-before-after\"\n data-before-src=\"/images/blog/blooms-and-beyond/before-flowers-desktop.png\"\n data-before-alt=\"Blooms \u0026 Beyond Liquid flowers collection before the Hydrogen rebuild\"\n data-before-label=\"Before: Liquid collection\"\n data-after-src=\"/images/blog/blooms-and-beyond/after-flowers-viewport.png\"\n data-after-alt=\"Current Blooms \u0026 Beyond flowers collection with filters, category sidebar, sort controls, and product grid\"\n data-after-label=\"After: final collection UX\"\n data-aspect=\"1440 / 820\"\n\u003e\u003c/div\u003e\n\n### Product Page\n\nThe product page puts the gallery, price, variants, gift note, quantity, delivery help, cart, FAQs, and recommendations in one order.\n\n\u003cdiv\n className=\"bp-before-after\"\n data-before-src=\"/images/blog/blooms-and-beyond/before-product-desktop.png\"\n data-before-alt=\"Blooms \u0026 Beyond Liquid product page before the Hydrogen rebuild\"\n data-before-label=\"Before: Liquid PDP\"\n data-after-src=\"/images/blog/blooms-and-beyond/after-product-viewport.png\"\n data-after-alt=\"Current Blooms \u0026 Beyond product page with gallery, gift note, quantity, add to cart, buy now, and delivery trust blocks\"\n data-after-label=\"After: final PDP flow\"\n data-aspect=\"1440 / 820\"\n\u003e\u003c/div\u003e\n\n### Mobile Shopping\n\nMobile keeps the menu, cart, location, search, categories, products, and support actions within reach.\n\n\u003cdiv className=\"bp-compare-stack bp-compare-stack--mobile\"\u003e\n\u003cdiv\n className=\"bp-before-after bp-before-after--phone\"\n data-before-src=\"/images/blog/blooms-and-beyond/before-home-mobile.png\"\n data-before-alt=\"Blooms \u0026 Beyond Liquid mobile homepage before the Hydrogen rebuild\"\n data-before-label=\"Before: Liquid mobile\"\n data-after-src=\"/images/blog/blooms-and-beyond/after-home-mobile.png\"\n data-after-alt=\"Current Blooms \u0026 Beyond mobile homepage with category rail, gift cards, and product sections\"\n data-after-label=\"After: mobile homepage\"\n data-aspect=\"390 / 844\"\n\u003e\u003c/div\u003e\n\u003cdiv\n className=\"bp-before-after bp-before-after--phone\"\n data-before-src=\"/images/blog/blooms-and-beyond/before-flowers-mobile.png\"\n data-before-alt=\"Blooms \u0026 Beyond Liquid mobile flowers collection before the Hydrogen rebuild\"\n data-before-label=\"Before: Liquid collection\"\n data-after-src=\"/images/blog/blooms-and-beyond/after-flowers-mobile.png\"\n data-after-alt=\"Current Blooms \u0026 Beyond mobile flowers collection\"\n data-after-label=\"After: mobile collection\"\n data-aspect=\"390 / 844\"\n\u003e\u003c/div\u003e\n\u003cdiv\n className=\"bp-before-after bp-before-after--phone\"\n data-before-src=\"/images/blog/blooms-and-beyond/before-product-mobile.png\"\n data-before-alt=\"Blooms \u0026 Beyond Liquid mobile product page before the Hydrogen rebuild\"\n data-before-label=\"Before: Liquid PDP\"\n data-after-src=\"/images/blog/blooms-and-beyond/after-product-mobile.png\"\n data-after-alt=\"Current Blooms \u0026 Beyond mobile product page with gallery, price, quantity, and WhatsApp support\"\n data-after-label=\"After: mobile product\"\n data-aspect=\"390 / 844\"\n\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n## Commerce Architecture\n\n| Layer | Work |\n|---|---|\n| Shopify | Keeps products, collections, customers, carts, checkout, and admin data. |\n| Hydrogen | Owns routes, loaders, product UI, cart actions, search, and customer pages. |\n| Storefront API | Supplies typed catalog and content data to each route. |\n| Oxygen | Runs the production storefront and its release workflow. |\n\nThe quick cart supports add, update, and remove actions. Product choices stay in the URL. Gift notes use cart line values, and order notes stay editable in the cart.\n\n## Delivery And Support\n\nEligible orders show same-day Jammu delivery. The cart states the 15 km delivery area and builds a cart-aware WhatsApp quote for longer routes.\n\nWhatsApp also supports urgent timing, detailed personalization, address questions, and product changes before checkout.\n\n## SEO And Release Checks\n\nThe shared SEO helper creates titles, descriptions, canonical URLs, social metadata, and route rules. Product, organization, search, and florist JSON-LD describe key pages.\n\nSitemap routes cover products, pages, collections, blogs, and articles. Account pages use `noindex` and `no-store` rules.\n\nThe release workflow installs dependencies, runs lint, tests, type checks, builds the Hydrogen app, and deploys to Oxygen."}}