Documentation — Nocturne theme
Documentation · v1.0.0

Nocturne theme guide

Setup, every section and block, the product page, gift cards, filtering, performance, and FAQs.

Demo: Open the live demo Support: [email protected]

Thank you for choosing Nocturne, a dark-luxury theme for fine jewelry, watches, beauty and elevated fashion. This guide covers setup, every section, and FAQs.

1. Quick start (15 minutes)

  1. Add the theme — Online Store → Themes → Add theme → Upload zip file → select nocturne-theme.zip. Click Customize to open the theme editor.
  2. Add products — Products → Add product (or Import a CSV). Give each product a few images, a Type (Rings, Necklaces, Earrings, Bracelets) and variants.
  3. Create collections — Products → Collections → Create collection. Use Automated collections with the condition Product type is equal to … so they fill themselves.
  4. Build your menus — Online Store → Navigation. Edit Main menu and Footer menu (the theme uses both). Nested items become dropdowns.
  5. Set the hero image — In Customize, open the Hero section and upload an image.
  6. Pick fonts & colors — Customize → Theme settings → Typography / Colors.

2. Theme settings (Customize → Theme settings)

Colors

Nocturne ships three color schemes. Each scheme defines a background plus a paired foreground (text, buttons, borders) so contrast always stays accessible.

  • scheme-1 — primary dark (near-black + champagne gold)
  • scheme-2 — warm dark (used for announcement bar, footer, newsletter)
  • scheme-3 — light (optional, for a light section or page)

Every section has a Color scheme picker, so you can alternate light/dark down the page.

Typography

  • Heading font — a high-contrast serif is recommended (default: Playfair Display).
  • Body font — a clean grotesque (default: Work Sans).
  • Heading/body size sliders scale type globally.

Layout

  • Page width — 1200–1600px.
  • Space between sections — global vertical rhythm.
  • Button corners — sharp / soft / pill.

Cart

  • Cart type — Drawer (slide-in, recommended) or Page.
  • Show order note — lets customers add a note at checkout.

Brand

  • Favicon, and social links (Instagram, Facebook, Pinterest, TikTok) shown in the footer.

3. Sections & blocks

Header (header group)

Logo (image or text wordmark), main menu with dropdowns, search drawer (predictive), account, and cart. Includes a mobile menu drawer. Settings: logo, logo height, menu, scheme.

Announcement bar

Rotating messages above the header. Add/remove Announcement blocks; each can link out.

Hero

  • Layout: Split (text + image side by side) or Overlay (full-bleed image, centered text).
  • Eyebrow, heading (supports italic via <em>), body, two buttons, image, scheme.

Shows products from a chosen collection. Settings: heading/eyebrow/subheading, collection, products to show, columns, "View all" button.

Image with text

Editorial split. Image left/right + blocks: eyebrow, heading, text, signature, button.

Collection list

"Shop by category" grid. Add a Collection block per category with an image override, title and subtitle.

Multicolumn

Value propositions / USPs. Add Column blocks (number, heading, text).

Rich text

Centered statement or press quote. Blocks: eyebrow, quote, heading, text, caption, button.

Newsletter

Email capture wired to Shopify customers (tagged newsletter).

Custom Liquid

Paste app snippets or custom markup anywhere. There's also a Custom Liquid block on the product page for app integrations.

Brand blurb + social, menu columns, text column, payment icons, country/language selectors, and a Follow on Shop button. Toggle each in the footer settings.

4. Product page

The product section is block-based — drag to reorder or remove any of: Title · Price · Variant picker · Quantity · Buy buttons · Pickup availability · Description · Assurances · Collapsible rows · Share · Custom Liquid · plus app blocks.

  • Variant swatches — set an option named Color or Metal and add swatches in Settings → Variants. Round swatches appear automatically; other options show as buttons.
  • Variant images — assign an image to a variant and the gallery switches when selected.
  • Media — supports image, video, external video and 3D models.
  • Dynamic checkout & Installments — toggle in the Buy buttons block.
  • Recommendations — Related and Complementary sections are added below the product.

5. Gift cards

The theme includes a gift-card template with a QR code and Apple Wallet button. Create a gift-card product: Products → Add product → Gift card. Issued cards render at their unique URL automatically.

6. Collections, search & filtering

  • Filtering & sorting — enable Shopify Search & Discovery (free app) → Filters, then toggle filtering/sorting in the Collection section. Filters render in the left sidebar.
  • Predictive search — click the search icon in the header; results appear as you type.

7. Performance tips

  • Upload images at roughly the size they display (hero ~2200px wide; product ~1400px). The theme already serves responsive srcset sizes and lazy-loads below the fold.
  • Avoid stacking many third-party apps in the header/Custom Liquid — they affect speed.

8. FAQ

The homepage shows placeholder products. Assign a collection in the Featured collection and Collection list sections.

My menu/dropdown is empty. Online Store → Navigation → edit Main menu. Add items; add sub-items for dropdowns.

Swatches show as text, not color circles. Name the option Color or Metal and add swatch values in Settings → Variants.

The cart opens as a full page, not a drawer. Theme settings → Cart → Cart type → Drawer.

Filters don't appear on collections. Install Shopify Search & Discovery, configure filters, and enable filtering in the Collection section.

How do I change the gold accent? Theme settings → Colors → edit the Accent color on each scheme.

9. Support & updates

Email [email protected]. We respond within 2 business days. Bug fixes and compatibility updates are released as new theme versions with notes.