Miswah Jewellery: a custom Shopify theme for jewellery, with 77 collections built by script
A jewellery website development case study. Yukti AI built the custom Shopify theme that runs miswah.in, the online store of Miswah Jewellery: a material-first mega menu, 77 collections and their menus created by script, a jewellery product page, an AJAX cart and a wishlist with no app fee. It sits on Shopify's free Dawn theme and was built in about 7 days.
Miswah Jewellery is an Indian online jewellery brand that sells on Shopify. Its store is organised around engagement rings, wedding rings, fine jewellery and gifts, and around the order in which jewellery is chosen: material first (lab-grown diamond, moissanite or natural gemstone), then style, metal and carat weight. Yukti AI built the custom Shopify theme for that: a token-based design system where the brand colour is one edit, 23 custom sections on Dawn, a 103-item mega menu, 77 collections created and published through the Shopify Admin API, a tag-driven bulk product import, and a QA harness that passes 13 of 13 end-to-end checks with 0 theme-check errors.
Quick facts
| Client | Miswah Jewellery — an Indian online jewellery brand (miswah.in) |
|---|---|
| Industry | Jewellery e-commerce: a catalogue structured around lab-grown diamond, moissanite and gemstone rings, wedding bands, fine jewellery and gifts |
| Core challenge | A catalogue browsed by material, style and shape; 77 collections and a 103-item menu that Shopify keeps as store data, not theme code; a premium look without a paid theme |
| Solution | Custom Shopify theme on Dawn + scripted store structure + tag-driven bulk import + automated QA |
| Theme | 23 custom sections, 7 snippets, 13 templates; about 11,100 lines of custom Liquid, JavaScript and CSS |
| Navigation | 6 top-level items, 103 menu items, 15 mega-menu columns, 77 collections |
| Variant structure | Metal Type (925 silver, 10K, 14K, 18K, platinum) and Diamond Size / Total Carat Weight, handled by the product page and the import pipeline |
| Quality checks | 13/13 end-to-end browser checks; 0 errors in shopify theme check |
| Build time & status | About 7 days; live at miswah.in |
What is a custom Shopify theme for jewellery? A storefront whose menu, collections and product page follow how jewellery is chosen: material, style, shape, metal and carat weight.
What did Yukti AI build? Miswah Jewellery's whole storefront layer, plus the scripts that create its collections and menus and bulk-import products. It is live at miswah.in.
What does a jewellery store need that a generic Shopify theme does not give?
A jewellery buyer chooses a material first (lab-grown diamond, moissanite or a natural gemstone), then a style, a shape, a metal and a carat weight. A generic Shopify theme offers a flat menu, a standard product page and a variant dropdown. It does not organise a catalogue around those decisions, and that was the gap Miswah Jewellery's store had to close.
Miswah's shoppers enter the catalogue from different doors:
- Couples buying engagement rings, wedding bands and bridal sets, who think in stone and style: a lab-grown diamond halo, a moissanite solitaire.
- Gift buyers shopping for her or for him, for an anniversary, birthday or Valentine's Day, or within a budget.
- Men's jewellery buyers, and made-to-order customers served by a Custom Design menu entry and enquiry sections.
Underneath sits one product problem: a ring comes in several metals and carat weights, each a variant with its own price, and every page must share one vocabulary.
In jewellery e-commerce the catalogue architecture is the product: if menu and product data disagree, shoppers land on empty pages.
What makes jewellery ecommerce website development on Shopify hard?
Most of the work in a jewellery Shopify store is not the homepage. It is the structure: dozens of collections, a large mega menu and products that land in the right collections. On Shopify much of that is store data that a theme upload does not carry, so it usually gets built by hand. This is the part of Shopify store development that decides whether a jewellery catalogue stays tidy as it grows.
- Menus and collections do not travel with the theme.
shopify theme pushmoves theme files only, so a 77-collection mega menu would otherwise be rebuilt by hand on every store. - Too big to type safely. 103 menu items entered by hand invite errors and cannot be re-derived later.
- Quiet Shopify traps. Collections created through the Admin API are unpublished by default and return a 404 until published to the Online Store.
- A premium look without a premium theme. A paid theme was considered and ruled out on cost.
- Wishlists cost money or force a login. Apps charge monthly; metafield wishlists need the shopper to sign in.
Shopify jewellery store setup: the usual way vs Miswah's build
The usual way a jewellery store is assembled on Shopify, compared with how Miswah's was built.
The usual way
- A paid theme is bought, then bent to fit
- Collections created one by one in the admin
- Mega menu typed item by item, per store
- Products assigned to collections by hand
- Wishlist from a monthly-fee app
- Testing means clicking around
How Miswah's store was built
- 23 custom sections on the free Dawn theme
- 77 collections created and published by one script, matched by handle
- Main and footer menus upserted from one structure file
- Imported products placed in collections by tag rules
- Wishlist in the browser: no app, no fee, no login
- 13 automated end-to-end checks, 0 theme-check errors
Why custom sections on Dawn, and not a premium theme or Horizon?
Nearly every section of Miswah's storefront is custom, so the base theme only supplies plumbing: cart, cart drawer, predictive search, customer accounts, checkout hand-off and localization. Dawn, Shopify's free MIT-licensed theme, does all of that in plain Liquid that can be overridden freely. The design layer and custom sections are base-theme agnostic, so the choice does not lock the design in.
Buy a premium theme
A finished look, but a licence fee and someone else's section markup. Considered for Miswah and ruled out on cost.
Build on Horizon
Shopify's newer theme-block architecture constrains custom section markup without giving anything back for a build this custom.
Build on Dawn (chosen)
Free, MIT-licensed, with tested cart, search, accounts and checkout hand-off, and out of the way of 23 custom sections.
How the theme and the store are put together
How does a token-based design system keep a Shopify theme consistent?
The colours, font sizes, spacing values and radii of Miswah's theme are defined once, in one generated file, dr-tokens.css, written by a script and never edited by hand. A base layer (dr-base.css) and a shared component layer (dr-components.css) sit on top, so every custom section uses the same buttons, spacing and card, and the store reads as one brand.
| Design rule | Value in Miswah's theme |
|---|---|
| Typefaces | Figtree throughout; Niconne for one decorative script word |
| Corners and buttons | Border-radius 0; uppercase links and buttons with 0.1em tracking |
| Type scale | Flat: the h1 is 32px on desktop, 28px on mobile |
| Spacing | Four section spacings (35, 60, 80, 100px) in a 1340px container with 15px gutters |
| Brand colour | Miswah green #14452f, with #eff8f2, #eaf2ec, #d6e8dc and #4e6b58 |
A brand recolour in one edit
The green ramp lives in one BRAND map inside the generator. The token file's five palette slots are var() references to it, so a future brand colour is one edit plus a re-run. The project also documents where a colour can still hide on Shopify, such as schema defaults, settings_data.json and colours baked into image files. A script writes the token values into Dawn's colour schemes, so the cart, search, account and 404 pages match without CSS overrides.
How does a jewellery mega menu with 103 items and 15 columns work?
Miswah's main navigation has six top-level items. The Engagement Rings, Wedding Rings, Fine Jewellery and Gifts mega menus split into separate Lab Grown Diamond, Moissanite and Gemstone columns, with Featured and Education columns alongside: 15 mega-menu columns and 103 menu items in all, plus a hover image preview and four promo image slots. A Custom Design entry leads to made-to-order enquiries.
Material-first suits a lab-grown diamond and moissanite jewellery store: the two can look alike in a thumbnail but are different buying decisions, so they never share a column. Inside each column, every style is its own collection.
The header, dr-header, is 1,232 lines of Liquid with 30 theme-editor settings. On desktop it has two rows: a utility column (phone link, virtual appointment link, shipping note), centred logo, currency selector and icons, then the mega navigation. It includes predictive search; on phones it collapses to one row with a slide-out drawer.
A detail that is easy to get wrong: Shopify wraps every section in its own element, so a sticky rule on the header's inner div travels zero pixels. The rule sits on Shopify's section wrapper instead.
How were 77 Shopify collections and the menus created by script?
Shopify keeps menus and collections as store data, not theme code. Instead of building them by hand, Yukti AI described the whole structure in one file, structure.json (6 top-level items, 103 menu items, 15 columns, 77 collections), and wrote a Node.js script, setup.js, that builds it in a Shopify store through the Admin GraphQL API (2025-01).
- Collections: creates or updates all 77, matched by handle.
- Publishing: publishes each to the Online Store with
publishablePublish, since API-created collections are unpublished by default. - Menus: upserts the main menu and two footer menus (7 and 6 items), matched by handle.
- Safety: prints a dry run by default and writes only with
--apply;--only=runs one job.
The script is idempotent, so running it twice changes nothing, and it reads the target store from one environment value, so the same command replays the whole structure onto another Shopify store.
The 77 collections, by family
| Collection family | What it covers |
|---|---|
| Lab-grown diamond engagement rings | Solitaire, Halo, Three Stone, Pavé, Nature Inspired, Old Cut, Rose Cut, Antique Cut, Coloured |
| Moissanite rings | Split by ring style, each style its own collection |
| Gemstone and birthstone rings | Sapphire, Emerald, Morganite, Opal, Tanzanite, Tourmaline |
| Bands and men's | Wedding, eternity, curved and anniversary bands; men's rings and jewellery |
| Fine jewellery and gifts | Earrings, pendants, bracelets, bridal sets; gifts for her, for him, anniversary, birthday, Valentine's Day and budget bands |
| Merchandising | Best Seller, New Arrival, Trending, Ready to Ship |
How do bulk product import and tag-driven collection rules work on Shopify?
Yukti AI built a bulk import pipeline for Miswah's store, so products do not have to be keyed in one by one. It creates each product with the Admin API's productSet mutation, assigns its collections and publishes it. Collection membership is decided by tags (stone type, style, shape and carat band), so tags rather than hand-picking decide where a piece appears, and the product page reads its spec line from tags too.
- Idempotent by handle: a re-run updates products instead of duplicating them.
- Images uploaded only on create, so media is never duplicated.
- Trial runs and rollback:
--limitimports a small batch first, and the products the pipeline creates carry a tag, so they can be removed in one pass with--purge. - Jewellery variants: Metal Type (925 Silver, 10K, 14K, 18K, Platinum) and Diamond Size / Total Carat Weight become real Shopify variants.
The tag rules are effectively a first draft of Shopify smart-collection rules. With 77 collections, hand assignment is where a store quietly breaks: a halo ring missing from the halo collection, or a menu link that opens an empty page.
What is on a jewellery product page built for Shopify?
Miswah's product page, dr-main-product, is 1,042 lines of Liquid. A two-column image mosaic fills the left 7/12 on desktop and becomes a carousel with thumbnails below 992px; the buy box fills the right 5/12. The shopper picks Metal Type and Diamond Size as swatches, and price, SKU and spec line update at once.
The buy box is built from 14 block types the team can reorder in the theme editor, including a swatch variant picker, buy buttons with optional dynamic checkout, a trust list, collapsible rows, a shipping note and @app blocks for review or financing widgets. The spec line prints stone, cut, colour, carat and clarity from product tags, with the SKU opposite, so it works on an imported catalogue.
Variant data is written into the page as inline JSON, so changing an option needs no network request. The shop's money format is passed in from Liquid, so prices stay correctly formatted after a variant change, and description tables written by the merchant scroll inside their own box, so they cannot widen the page on a phone.
Below the buy box sit a complete-the-set upsell fed from a chosen collection, related rings, a tabbed FAQ on shipping, payments and returns, and a custom-design call to action.
The jewellery product card
Each card has square 1:1 media with a hover image, a status badge, a stone-type badge, the title, a price row with a Save % pill and a wishlist heart. The rating row reads the reviews.rating metafield written by Judge.me or Shopify's Product Reviews app; a product with no reviews shows plain stars and no count, because an invented number would be worse than none.
How do the collection filters work without JavaScript?
Collection pages use Shopify's native storefront filtering in a left sidebar: collapsible groups with checkboxes for list filters and minimum and maximum boxes for price. The panel submits as a plain GET form, so filtering works even if JavaScript fails to load. Sorting, a product count and pagination sit alongside the grid.
Above the grid, the collection banner (23 theme-editor settings) uses a split layout and can pull in each collection's own description, with two side images, two reassurance lines, a breadcrumb, an overlay and a button. The grid has settings for products per page, desktop columns, a separate mobile column choice, gap, badges, vendor, wishlist hearts and ratings. Below it, the collection template continues with a style-help band, testimonials, category tiles, an eight-question FAQ and a rich-text SEO copy block, so a collection page answers buying questions as well as listing products.
How were the AJAX cart and a wishlist with no app fee built?
The cart keeps Dawn's tested engine and replaces only what shoppers see. The wishlist is written into the theme and stores saved pieces in the shopper's browser, so it needs no app subscription and no login. Both choices cut risk and running cost instead of rebuilding what Shopify's own theme already does well.
AJAX cart. The cart sections keep Dawn's filenames and every hook Dawn's cart.js depends on (section fetches, item and quantity ids, the contents wrapper, live-region ids), with Miswah's own markup inside. Quantity changes, remove, live totals, a live header badge and an empty state all work, and quantity rules, line-item errors and drawer sync did not have to be rewritten.
Wishlist. dr-wishlist.js saves pieces to localStorage. Every card has a heart, the header shows a count, and a wishlist page lists saved items. The documented trade-off: the list lives in one browser, and moving it to customer accounts means swapping only its read and write calls.
What can Miswah's team change without a developer?
The homepage, collection and product sections of Miswah's theme are all built from settings and blocks in Shopify's theme editor, so the store team can change banners, tabs, images, FAQs and the order of sections without a developer. Changes are previewed in the editor before they are saved, so nobody has to touch Liquid code.
The homepage is composed of 14 sections, including a hero slider with separate desktop and mobile images, category tabs for ring styles and for shapes, a features grid, a trust strip, a product carousel with collection tabs, collection tiles, promotional bands for custom-made rings, gifting, craftsmanship and expert appointments, and an FAQ group. Each can be edited, reordered or switched off, and an image picked in the editor always takes priority over the theme's built-in image. The header has 30 settings, the collection banner 23, the footer 21 and the wishlist page 12, and the product page's buy box is made of 14 block types that can be reordered.
Who gets what from the build
Shopper
Browses the material-first menu, filters, picks metal and carat swatches, saves a wishlist and checks out.
Store team
Edits every section and block, picks images and the upsell collection, and manages products.
Developer
Runs setup.js, the product import, the token generator, Shopify CLI and the test harness, with the handover notes as the manual.
How a shopper moves from the mega menu to checkout
How was the Shopify theme tested before it went live?
The theme ships with its own QA harness instead of a manual click-through. A Puppeteer script runs 13 end-to-end checks in real Chrome against the running theme; the last run passed 13 of 13 with no JavaScript errors. Shopify's linter, shopify theme check, reports 0 errors, and a layout sweep at 1440px and 390px found and fixed four defects.
A second layer renders the design system as static pages in real Chrome, using the actual stylesheet blocks extracted from the theme's sections, so a design change can be checked before it reaches the store. Theme check's 12 warnings all sit in untouched Dawn files, and its warning for invalid scoped CSS classes is treated as an error.
- Cart checks: renders as a grid, quantity and remove on one line, both items shown, total and header badge update, remove works.
- Wishlist checks: toggles on cards, saves, updates the header count, lists items on its page.
- Page checks: search, the 404 page and the collections index load.
The sweep fixed a mobile carousel gutter, an undersized cart icon, the blog's missing empty state and a wishlist unreachable on mobile.
Is the store built for shoppers on phones?
Yes. Every template was checked at 390px with no horizontal overflow. On a phone the header becomes one row with a drawer, the gallery becomes a carousel with thumbnails, the grid has its own mobile column setting, and footer menus fold into accordions.
What documentation comes with the theme?
The repository ships four working documents so whoever maintains the store next does not start from zero: STATUS.md, BUILD.md, DECISIONS.md (the reasoning behind each choice) and GOTCHAS.md, which records about 30 Shopify platform traps with symptoms and fixes. One example: range settings need three or more steps, or the whole theme upload fails.
The documented path to set the store up on another Shopify store is short: shopify theme push moves the theme, setup.js --apply creates the collections and menus, then pages, products and apps follow. The theme is standard Liquid on Dawn with vanilla JavaScript and CSS, so any Shopify developer can pick it up.
How it was built in about 7 days
Map the catalogue
The material-first navigation and 77-collection tree written as one structure file.
Design system
Token generator, base and component layers, and the Miswah green ramp.
Custom sections
Header, homepage, collection, product, cart, wishlist and footer on Dawn.
Store data by script
Collections and menus created and published through the Admin API; the product import pipeline built.
Test and document
Theme check, 13 end-to-end checks, the layout sweep and the handover notes.
Shopify theme development: technology and integrations
Miswah's store runs on Shopify Online Store 2.0 (JSON templates, section groups and theme blocks), written in Liquid on Dawn with vanilla JavaScript and CSS custom properties. Store structure is set up, and products can be bulk-imported, through the Shopify Admin GraphQL API; development runs through Shopify CLI.
Inside the store: Online Store channel publishing, Dawn's AJAX cart engine behind custom markup, native filtering and sorting, predictive search, hosted customer accounts, dynamic checkout buttons, @app block slots, and reviews.rating support for Judge.me or Shopify Product Reviews.
Full technical stack
- Liquid on Dawn — sections, and snippets with LiquidDoc headers.
- Vanilla JavaScript — carousel, accordion, product and wishlist scripts, plus Dawn's cart.js.
- Admin GraphQL API 2025-01 — collections, publishablePublish, menus, productSet.
- Node.js, Python, Shopify CLI, Puppeteer, Git — setup, import, tokens, tests.
How much does a custom Shopify jewellery store cost?
Shopify store projects at Yukti AI start from ₹60,000. The final figure depends on scope: custom templates and sections, catalogue size and variants, scripted setup, integrations, migration, and content and SEO. It is a one-time build with a fixed quote, agreed after a free workflow audit.
| What moves the quote | In Miswah's build |
|---|---|
| Custom templates and sections | 23 custom sections across 13 templates |
| Catalogue structure | 77 collections, a 103-item material-first menu |
| Scripted setup and import | setup.js for collections and menus; a tag-driven import |
| Features in the theme | An app-free wishlist; ratings from the reviews metafield |
Integrations such as Razorpay, Shiprocket, WhatsApp automation or a link to a custom ERP add scope when needed. Shopify's plan and app subscriptions are billed by Shopify directly. See Shopify store development in Surat for how projects run.
Planning a jewellery website? Where this approach fits
Yukti AI is a Shopify development company in Surat, at 220, Leonard Square, Yogichowk, Varachha, building stores and business software for brands across India. The Miswah build suits lab-grown diamond and moissanite brands that need material-first navigation, bridal stores with many styles, metals and carat weights, and any store with too many collections to set up by hand.
Beyond storefronts, Yukti AI built a custom jewellery ERP and CRM for Lumera Fine Jewellery in Surat, and builds jewellery software, diamond software and AI automation for diamond and jewellery businesses for the trade. On Shopify it also built a bakery catalogue with WhatsApp ordering for La Yellow Berry in Surat. Every build is listed under Yukti AI case studies.
Questions jewellery brands ask about a custom Shopify store
Explore more
Shopify Store Development
Custom Shopify themes and catalogue stores for brands across India.
Jewellery Software
Inventory, metal ledger, catalogue, GST billing and CRM for jewellers.
Diamond Software
Stock, buyer portals and trading workflows for Surat's diamond trade.
Case study: La Yellow Berry
A bakery catalogue with WhatsApp ordering, built as an app inside a Shopify store.
Case study: Lumera Fine Jewellery
A custom jewellery ERP and CRM with GST invoicing.
All case studies
Every Yukti AI build — jewellery, e-commerce, manufacturing, trading and services.
Summary
- Yukti AI, a software company in Surat, Gujarat, built the custom Shopify theme that runs miswah.in, the online store of Miswah Jewellery, in about 7 days.
- Miswah Jewellery's theme runs on Shopify's free Dawn theme with 23 custom sections and a token-based design system.
- Miswah Jewellery's mega menu is material-first, splitting engagement rings, wedding rings, fine jewellery and gifts into Lab Grown Diamond, Moissanite and Gemstone columns, with 103 items across 15 columns.
- Yukti AI created and published Miswah Jewellery's 77 Shopify collections and its menus with one idempotent script on the Shopify Admin GraphQL API.
- Yukti AI built a bulk product import pipeline for Miswah Jewellery's store that assigns collections from tags and creates Metal Type and Total Carat Weight variants.
- Miswah Jewellery's store has an AJAX cart on Dawn's cart engine and a wishlist with no app fee and no login, and the theme passed 13 of 13 end-to-end checks with 0 theme-check errors.