Designer-First Pakistani Couture Theme

Atelier

Designer-first Pakistani couture Shopify theme — drops, museum-label PDP, couture commission, editorial journal.

Designer-led Pakistani couture houses (Asim Jofa, Sana Safinaz, Annus Abrar tier) and luxury MENA ateliers selling 20–200 SKUs in seasonal drops, USD 600 – 12,000, with made-to-order and atelier-visit workflows.

AuthorSMB Resource Group
Version1.0.0
StatusIn review
Designer-first navigationDrop-first home pageMuseum-label PDPCouture commission flowAtelier journal (editorial blog)Page-style cartBilingual English + Urdu NastaliqHairline editorial system
Atelier home page — current-drop hero
Why Atelier

For the house, not the catalog.

Designer-led couture is sold on point of view, not SKU breadth. Atelier is the first Shopify theme designed around the house — five named designers, a current drop, a museum-label specimen page, and a journal that reads like a season programme.

Built for the designer, not the catalog

Designer-first navigation, drop-first home

Atelier inverts the standard PLP flow. The header opens with named designers (5 by default), the home page leads with the current seasonal drop, and collections are merchandised as boutique cards — never a generic grid.

Couture, not e-commerce

Museum-label PDP + commission preset

The default product page is a single full-bleed specimen with a museum-style info panel — small caps, hairlines, fabric origin, atelier notes. A commission preset switches the CTA from "Add to bag" to a dedicated 4-step couture commission inquiry.

Editorial as a first-class surface

Atelier Journal — six tone-classed templates

A dedicated journal blog template with full-bleed editorial hero, drop-cap body, signature block, related-articles strip, and six tone classes (karigar, fabric, studio, archive, lookbook, quote) for image-less articles to render beautifully out of the box.

Page-style cart, deliberate checkout

Cart is a destination, not a drawer

Couture purchases are considered. Atelier ships a full-page cart with line-item museum captions, an inquiry-or-checkout split, and a "Reserve for fitting" affordance — not a noisy drawer that interrupts the editorial spell.

Codebase Fork of Shopify Skeleton Theme
Online Store 2.0 JSON templates, section groups, app blocks everywhere
Industry fit Designer-led Pakistani couture · MENA luxury ateliers
Catalog size 20–200 SKUs · AOV USD 600 – 12,000
Languages at launch English + Urdu (Nastaliq) · Arabic optional for MENA
Theme version 1.0.0
Author SMB Resource Group
Color presets 2 — Atelier (warm ink + brass), Atelier Noir (charcoal + brass)
Display typography Playfair Display (Shopify font picker)
Body typography Inter (regular + caption 500)
Urdu typography Noto Nastaliq Urdu (direct Google Fonts load)
Spacing scale 4 presets — Compact, Standard, Editorial, Gallery (default)
Tracking presets 3 — Crisp, Standard, Relaxed (display + body + overline)
Cart type Page (default) · Drawer optional
Companion apps Product Add-ons & Size Chart (optional, @app block)
Theme features

Everything a designer house actually uses.

A header that names the designer first. A home page that leads with the drop. A product page that reads like a museum label. A commission flow. A journal. Nothing else.

DSN

Designer-first header

The main nav opens with named designers — five out of the box, configurable per merchant. Drops, Boutique (PLPs), Atelier (about + journal + commission) sit to the right. Flat, hairline-divided, no mega-menu noise.

DRO

Current-drop hero + drop overview template

sections/current-drop-hero.liquid drives the home above-the-fold with the active seasonal drop. A dedicated templates/collection.drop.json renders any collection as a long-form drop landing page with an ink hero, BTS strip, and editorial product rows.

MUS

Museum-label product page

templates/product.json is the museum-label specimen — large serif title, hairline-bordered info panel with small-caps labels (fabric, origin, atelier note, dimensions), variant chips below the panel, single accent CTA. No tabs, no accordions.

COM

Commission preset + 4-step flow

templates/product.commission.json swaps the CTA for "Begin a commission" and surfaces estimated lead time. The companion templates/page.commission.json is a guided 4-step inquiry (silhouette → fabric → measurements → contact) with the originating product pre-attached.

JNL

Atelier Journal

templates/blog.journal.json renders a timeline of articles grouped by month. templates/article.journal.json drives the full-bleed hero variant with edition label, 88px serif headline, byline upper-right, drop-cap body, and Atelier signature between hairlines.

TONE

Six journal tone classes

Articles without a featured image render through one of six tone gradients with a matching bundled illustration: karigar (ochre/brown), fabric (bone/tan), studio (ink/oxblood), archive (mineral/black), lookbook (brass/brown), quote (dark ochre).

BTQ

Boutique card grid

sections/boutique-card-grid.liquid replaces the generic collection-list. Large hero card top-left, three smaller stacked cards right — no slider, no overlays, hairline-only chrome. Used on home + Atelier landing.

CART

Page-style cart

sections/cart.liquid is a destination page, not a drawer. Line items render with their museum captions, fitting / commission notes are exposed inline, and the footer splits "Reserve a fitting" against "Continue to checkout".

MTM

Made-to-Measure inquiry

A standalone templates/page.mtm-inquiry.json with a WhatsApp-first form (name, garment, event date, measurements upload, language). Captured fields post to Shopify's native contact endpoint and surface in admin.

URD

English + Urdu Nastaliq typography

Atelier ships Playfair Display (display), Inter (body + caption 500) and Noto Nastaliq Urdu loaded directly via Google Fonts to bypass Shopify's font-picker exclusion. Optional Arabic Naskh layer available for MENA presets.

HAIR

Hairline editorial system

Every divider, every panel border, every PLP card edge is a single 1px hairline computed from the text colour (12% and 22% alpha tokens). The signature look that ties the theme together — never adjusted by accident.

APP

App-block ready

Main product, featured product, and cart sections expose @app blocks. Drops in the SMB Product Add-ons & Size Chart app cleanly — and any other Shopify app that targets product page blocks.

Theme tour

The editorial vocabulary of a designer house.

Drop hero, museum-label PDP, hairline boutique grid, full-bleed journal, page-style cart — every surface tuned for considered couture, not impulse fashion.

Atelier home — current-drop hero, Khansa Riaz · Aabnoos · Couture Spring 2026
Home · Current-drop hero
Drop overview template — ink-background hero with serif drop title
Drops · Overview template
Boutique card grid — large hero card + three stacked cards
Boutique card grid
Museum-label product page — full-bleed specimen with hairline-bordered info panel
PDP · Museum label
Commission preset PDP — "Begin a commission" CTA with estimated lead time
PDP · Commission preset
Commission flow — 4-step inquiry page (silhouette, fabric, measurements, contact)
Commission · 4-step flow
Collection PLP — Atelier hairline grid with museum captions
Collection · PLP
Atelier Journal — editorial timeline grouped by month
Journal · Timeline
Journal article — full-bleed editorial hero with 88px serif headline
Journal · Article
About Atelier — origin story page with hairline biographic blocks
About Atelier
Made-to-Measure inquiry — WhatsApp-first form with fitting CTA
Made-to-Measure inquiry
Page-style cart with line-item museum captions and fitting/checkout split
Cart · Page style
Atelier mobile home — current-drop hero stacked
Mobile · Home

Install & first-run setup

Atelier is a Skeleton-based theme — install it via Shopify CLI for development or upload the zipped theme through Online Store → Themes → Add theme for production.

  • Run shopify theme dev --store your-dev-store.myshopify.com from the theme directory for hot-reload development.
  • After install, set the active language to English and add Urdu (and Arabic, if you ship MENA) via Settings → Languages. Atelier loads Noto Nastaliq Urdu directly from Google Fonts because Shopify's font picker doesn't include it.
  • Pick a preset in Online Store → Themes → Customize → Theme settings → Color scheme: Atelier or Atelier Noir.
  • Set the section spacing scale (Compact, Standard, Editorial or Gallery — the Atelier default) and tracking preset (Crisp, Standard, Relaxed) from Theme settings → Layout.
  • Connect the optional Product Add-ons & Size Chart app from the Shopify App Store — the theme exposes the required @app blocks on the main product section.

Color presets & typography

Atelier ships two color schemes built on the same palette tokens: background, text, accent, brass, mineral, bone. All schemes meet Shopify's contrast requirements (4.5:1 body, 3:1 large + non-text).

  • Atelier (default): warm ink text #1B1410 on bone #F6EFE0, brass accent #B9893E, mineral grey #6E7066. The daytime / lookbook preset.
  • Atelier Noir: charcoal base #1A1A1A, bone text, brass accent — for evening, archive and lookbook brands.
  • Hairlines: every divider is computed from text-color at 12% (--hairline) and 22% (--hairline-strong) alpha. Don't override directly.
  • Fonts: Display serif (Playfair Display), Body sans (Inter), Caption (Inter 500), Urdu (Noto Nastaliq Urdu, loaded direct from Google Fonts), optional Arabic (Noto Naskh Arabic / Reem Kufi). The first three via Shopify's font picker.
  • Spacing scale: four presets fed to a --section-y CSS variable — Compact (40–80px), Standard (48–96px), Editorial (56–108px), Gallery (64–120px, Atelier default).

Home page composition

The home page is built from JSON-defined sections — every one editable in the Theme Editor. The default templates/index.json ships with the order below.

  • announcement-bar — hairline strip, atelier-appointments tagline default.
  • header — designer-first nav, hairline-divided, predictive search.
  • current-drop-hero — above-the-fold hero featuring the active seasonal drop (image + serif headline + drop label).
  • designer-statement — a single editorial paragraph from the house designer, full-width, with hairlines above and below.
  • boutique-card-grid — large hero card + three stacked cards. Replaces the generic collection-list.
  • atelier-process-strip — three-step process (Inquire → Fit → Deliver), iconography only.
  • journal-preview — 3-up grid of latest articles from the journal blog, with the six tone-class fallbacks for image-less articles.
  • atelier-locations — two-column atelier addresses with appointment CTAs.
  • newsletter-inline — single-line inline form, hairline-only chrome.
  • footer — link lists, payment icons, mobile country/lang selectors.

Drops — hero + overview template

Atelier treats drops as a first-class merchandising surface. The home page features the active drop via sections/current-drop-hero.liquid; any collection can be rendered as a long-form drop landing page via templates/collection.drop.json.

  • Apply: Collections → [collection] → Theme template → "drop".
  • drop-hero — ink-background hero with serif drop title, season label, and a release date line. Optional cover image.
  • bts-strip — behind-the-scenes mosaic (3–6 tiles) for atelier process imagery.
  • editorial product rows — same grid system as the boutique PLP, but interleaved with chapter intros.
  • Demo: the Atelier dev store ships with Aabnoos · Couture Spring 2026 as the seeded drop.

Product page & blocks

The default product page (templates/product.json) is the museum-label specimen — a single full-bleed image, a hairline-bordered info panel with small-caps labels, variant chips, and a single accent CTA. Three blocks (museum-label, heritage-provenance, app/custom-liquid) are exposed for merchants who want more detail.

  • Default block order: gallery (vertical thumbs right, hairline border), title (Playfair Display, 48–72px clamp), museum-label panel, variant picker (text chips, no swatch dots), quantity, buy button, Shop Pay Installments, heritage-provenance (optional), @app block, Custom Liquid.
  • Museum-label block: editable rows — Fabric, Origin, Atelier note, Dimensions, Lead time, Care. Small caps, hairlines between rows. No accordions, no tabs.
  • Below main: related-products (4-up hairline grid), optional commission-cta band.
  • Commission preset: apply product.commission.json per product via Theme template picker. Swaps "Add to bag" for "Begin a commission" → links into the 4-step commission flow with the product pre-attached.

Commission preset & 4-step flow

The couture commission flow is Atelier's commercial spine. A dedicated 4-step inquiry page (templates/page.commission.json) accepts inquiries — and the commission product preset wires existing SKUs into the same flow with the product attached.

  • Step 1 — Silhouette: select the garment family (lehenga, peshwas, sari, gharara, etc.). Pre-filled if entering from a commission-preset PDP.
  • Step 2 — Fabric: choose from house fabrics or "specify your own". Optional sketch upload.
  • Step 3 — Measurements: guided form (bust, waist, hip, length, shoulder, sleeve) or upload existing measurement sheet.
  • Step 4 — Contact: name, email, WhatsApp, city, preferred date, language preference, opt-in.
  • Submission: Shopify's native contact-form endpoint with custom hidden metadata for linked_product_id, silhouette, fabric, event_date, whatsapp_number. Redirect to a thank-you page with appointment scheduling copy.

Atelier Journal

The journal is the editorial backbone of the theme. templates/blog.journal.json renders a timeline of articles grouped by month. templates/article.journal.json drives the full-bleed editorial article with hero, byline, drop-cap body, signature, and a 3-up related-articles strip.

  • Apply: create a blog with handle journal in Shopify admin. The home page journal-preview section auto-pulls from that handle.
  • Article hero variants: set article.template_suffix == 'journal' for the full-bleed treatment; default is an inline hero. A theme setting can force-flag every article into the journal treatment.
  • Tone classes (image-less articles): six bundled gradients + illustrations — karigar (ochre/brown), fabric (bone/tan), studio (ink/oxblood), archive (mineral/black), lookbook (brass/brown), quote (dark ochre). Tagged via journal-tone:karigar on the article or auto-picked by handle.
  • Edition label: articles support a article.metafields.atelier.edition_label single-line text for "Atelier 14" or "Issue 03" type prefixes above the byline.
  • Drop-cap: theme setting toggles a serif drop-cap on the first paragraph of every article.
  • Signature block: configurable per-section signature name + line, rendered between hairlines after the body.

Bilingual (English + Urdu Nastaliq) sections

Atelier ships the same bilingual-headline pattern as Mehfil — an English headline (Playfair) paired with an Urdu headline rendered in Noto Nastaliq Urdu. Pairing is typographic only — it does not switch page direction.

  • Font loading: Noto Nastaliq Urdu is loaded directly from Google Fonts in layout/theme.liquid because Shopify's font picker doesn't include it. The merchant's type_urdu_font picker (default Work Sans) is the fallback.
  • Direction: Atelier is LTR. The Urdu pairing is decorative editorial content — not full RTL localization. RTL is delivered by a sibling theme (Modesta, planned).
  • Optional Arabic: add Noto Naskh Arabic via the Shopify font picker for MENA presets — pair with Reem Kufi for display.

Made-to-Measure inquiry

In addition to the structured 4-step commission flow, Atelier ships a lighter templates/page.mtm-inquiry.json — a single-page WhatsApp-first inquiry form for measurement work outside the commission programme.

  • Form fields: name, email, WhatsApp, garment of interest (auto-filled from referrer), preferred fitting date, city + country, comments, file upload (sketch/inspiration), language preference (English / Urdu / Arabic), opt-in to follow-up email.
  • Endpoint: Shopify's native contact-form endpoint with hidden metadata for linked_product_id, fitting_date, whatsapp_number.
  • Submission: redirect to thank-you page — "Your atelier will reach out within 2 business days. We respond via WhatsApp or email — whichever you prefer."

Page-style cart

Atelier defaults to a full page cart, not a drawer. Couture purchases are considered — the cart is a destination that reads like an editorial summary. Drawer + notification cart types remain available via theme settings for merchants who prefer them.

  • Page cart: two-column layout. Line items left (96px image, museum caption, qty stepper, remove). Summary panel right (subtotal, fitting notes, two-CTA split: "Reserve a fitting" vs "Continue to checkout").
  • Museum captions: line-item metadata renders inline — fabric, origin, atelier note — pulled from the product's museum-label metafields.
  • Subscription / pre-order: line-item badges when applicable; selling-plan picker exposed.
  • Checkout: full-width brass button + accelerated checkout buttons (Shop Pay, Apple Pay, Google Pay) in native colors.
  • Discounts on cart: standard cart surfaces, native promo code field.

Metaobject & metafield reference

KeyTypeUsed by
metaobject: artisanMetaobject definitionHeritage Provenance block
artisan.nameSingle line textHeritage Provenance — karigar / atelier name
artisan.regionSingle line textHeritage Provenance — workshop region
artisan.craft_techniqueSingle line textHeritage Provenance — craft (Zardozi, Mukaish…)
artisan.portraitFileHeritage Provenance — square portrait
artisan.bioRich textHeritage Provenance — bio body
product.atelier.museum_labelRich textPDP — museum-label info panel rows
product.atelier.fabricSingle line textPDP & cart museum caption — fabric line
product.atelier.originSingle line textPDP & cart museum caption — origin line
product.atelier.atelier_noteSingle line textPDP & cart museum caption — atelier note
product.atelier.lead_timeSingle line textPDP museum panel + commission CTA lead time
product.atelier.commission_enabledBooleanPDP — show "Begin a commission" CTA (commission preset)
product.atelier.urdu_headlineSingle line textPDP — bilingual headline (Urdu Nastaliq)
collection.atelier.drop_labelSingle line textDrop template — "Couture Spring 2026" style label
collection.atelier.release_dateDateDrop template + current-drop-hero — release date line
article.atelier.edition_labelSingle line textJournal article — "Atelier 14" / "Issue 03" prefix

All custom metafields use the atelier namespace for theme-owned fields, and the details namespace for shared (Mehfil-compatible) ones. If you also install the Product Add-ons & Size Chart companion app, additional custom.* metafields are managed by the app and consumed by its app-block on the product page.

Launch checklist

Before going live, walk this list — it mirrors the Theme Store submission bar, even if you're installing Atelier on your own merchant store.

  • All 15 required JSON templates present + 3 Liquid templates (gift card, layout, password).
  • Header + footer wired as section groups.
  • Main product section includes an @app block and a Custom Liquid block.
  • Color scheme set to Atelier or Atelier Noir; contrast checked (4.5:1 body, 3:1 large + non-text).
  • Urdu Nastaliq language added if you intend to ship bilingual content. Noto Nastaliq Urdu is loaded automatically via Google Fonts.
  • Demo content uses designer-house vocabulary (Drop, Atelier, Commission, Fitting) — not generic e-comm copy.
  • Heritage / Artisan Provenance metaobject defined if you intend to surface karigar stories on PDPs.
  • Commission page published (/pages/commission) and commission-preset products link into it.
  • Journal blog with handle journal created. At least three articles published so the home journal-preview renders.
  • Cart type chosen (Page is the Atelier default).
  • Lighthouse perf ≥ 60 avg on product + collection + home, desktop AND mobile. Accessibility ≥ 90.
  • No banned imagery: no marigolds, diyas, tilak/bindi, sindoor, or Hindu wedding iconography. No real designer names — Atelier ships with the fictitious house "Khansa Riaz" by default.
Support & updates

Built and supported by the SMB engineering team.

Updates, bug fixes and merchant support are handled by the same engineers who wrote the theme. Email us — we respond within one business day.

Contact support →