Sillara — Merchant guide
Welcome to Sillara, a luxury fragrance theme for Shopify. This guide covers everything you need to set up, style, and run your store — no apps required. Sillara works entirely with Shopify's built‑in features; every optional enhancement below degrades gracefully when you leave it empty.
This is the E9 Theme Store documentation deliverable. It is the page linked from the theme's theme_documentation_url. Host it publicly (GitHub Pages, a help‑center article, or your docs site) before submission and paste that URL into Theme settings → Theme information (see §12).1. What Sillara is
Sillara is an Online Store 2.0 theme built for perfume and fragrance brands. It ships with:
- 3 style presets (Sillara, Neroli, Ambre) you can switch with one click.
- Fragrance‑native storytelling sections — scent pyramid, olfactory story, ritual & ingredients, scent spotlight — alongside all the standard sections (hero, featured collection, rich text, testimonials, newsletter, FAQ, blog).
- A rich product page with variant swatches, unit pricing, pickup availability, gift‑card recipient fields, quick‑view, and an app‑free reviews display.
- App independence — no third‑party app is required for anything in the theme.
- Built‑in SEO/AEO structured data and accessibility to WCAG AA.
Everything is edited from the Shopify theme editor (Online Store → Themes → Customize). You don't need to touch code.
2. 5‑minute quick start
- Add the theme to your store and click Customize.
- Pick a preset. In the editor, open Theme settings (bottom of the left sidebar) → the preset selector at the very top → choose Sillara, Neroli, or Ambre. See §3.
- Add your logo & brand details. Theme settings → Brand & social: upload your logo and favicon, set the brand name, social links, contact email/phone. See §5.
- Set your fonts (optional). Theme settings → Typography. Defaults are Cormorant (headings) + Jost (body). Any Shopify‑library font works.
- Build your menus. Online Store → Navigation → edit your Main menu and Footer menu. The header supports mega‑menus (see §7 Header).
- Fill the homepage. On the Home template, add/reorder sections and set their content. See §7.
- Publish. When it looks right, click Publish.
That's the minimum. The rest of this guide explains each area in depth.
3. Theme presets
A preset sets all colours, the accent hue, and the two dark "chrome" bands (announcement bar + footer) in one move. Switch presets from Theme settings → the preset dropdown at the top. Presets never touch your content or section layout — only styling.
| Preset | Personality | Ground | Accent |
|---|---|---|---|
| Sillara (default) | The flagship look — deepest, cool, midnight. A dark, dramatic canvas. | Near‑black #0A0D0C | Gold |
| Neroli | Lightest, fresh, daylight. Ivory paper, cool and airy. | Ivory #F7F6EF | Sage |
| Ambre | Light, warm, cream. A 60‑30‑10 cream/espresso/amber scheme. | Cream #F4E6CF | Amber |
Tip: presets are a starting point. After choosing one you can fine‑tune any colour in Theme settings → Colors (see §4).
4. Colour schemes
Sillara uses Shopify's colour scheme groups. There are two schemes:
- Scheme 1 — your main/light band (most sections).
- Scheme 2 — the dark "chrome" band, used by default for the announcement bar and footer, and available for any hero or call‑to‑action section that wants a dramatic dark treatment.
Every section has a "Colour scheme" setting in its editor panel, so you can alternate light and dark bands down the page. To recolour a scheme globally, go to Theme settings → Colors and edit the scheme's roles:
- Background / Surface — the page and panel/card backgrounds.
- Text — body ink.
- Accent / Accent 2 — the primary and secondary accent (buttons, links, highlights). Accent hue is what most distinguishes the presets.
- Note / Chrome / Hairline / Button label — supporting tones for captions, chrome bars, borders, and button text.
Contrast: the shipped presets all meet WCAG AA. If you change accent or text colours, keep enough contrast — the theme editor previews it live.
You can also set the input corner radius here (applies to form fields and buttons).
5. Global theme settings
Open Theme settings (gear icon / bottom of the editor sidebar). Groups:
Typography
- Heading font — default Cormorant (an elegant high‑contrast serif from Shopify's font library). Used for headings, product names, taglines.
- Body font — default Jost. Used for body copy and UI.
- Both use Shopify's font picker, so any Shopify‑library font is available. (Custom uploaded fonts aren't supported — a Shopify Theme Store rule.)
Layout
- Max page width — the maximum content width on large screens.
- Min page margin — the minimum breathing room at the screen edges.
Colors
- Colour schemes — edit scheme 1 & 2 (see §4).
- Input corner radius — rounding on inputs and buttons.
Brand & social
- Logo and Favicon (the browser‑tab icon).
- Brand name — used as the text wordmark when no logo image is set, and in structured data.
- Social links — Instagram, Facebook, TikTok, YouTube, Pinterest, X. Only the ones you fill in appear.
- Contact email / phone — surfaced in the footer and used by structured data.
Search‑engine & AI answers (AEO / structured data)
Sillara ships built‑in structured data to help your products appear in Google rich results and AI answer engines. All optional:
- Show rating structured data — emit review stars in search results (uses your review metafields — see §8).
- No‑index filtered collection URLs — keeps faceted/filtered URLs out of the index to protect crawl budget.
- Returns policy structured data — enable, then set country, window (days), and whether returns are free.
- Shipping structured data — enable, then set country, rate, and min/max delivery days.
Filling these in improves how your storefront is represented in search and AI answers. They're safe to leave off if you prefer.
6. Pages & templates
Sillara includes ready‑made templates so the store is usable the moment you install it. Customize each from Online Store → Themes → Customize → (template picker at the top).
| Template | What it is |
|---|---|
Home (index) | Your homepage. Fully section‑based — add/reorder anything. |
Product (product) | The fragrance product page. See §8. |
Collection (collection) | A product grid with AJAX filtering & sorting. |
Collections list (list-collections) | An index of all your collections. |
Cart (cart) | The full cart page (a slide‑out cart drawer is also available — see §9). |
Blog (blog) & Article (article) | Your journal/blog listing and post pages, with comments. |
Page (page) | Standard content pages (About, etc.). |
Contact (page.contact) | A contact page with a built‑in contact form. |
Search (search) | Predictive/full search results. |
| 404 | Friendly not‑found page. |
| Password | The storefront password page shown while your store is locked. |
7. Sections reference
Add sections with Add section in the editor. Each section's panel has its own settings, blocks, and a Colour scheme control. Only sections with content render — empty ones stay hidden on the live site.
Header
The site header with logo, navigation, search, account, and cart. Supports mega‑menu blocks: add a Mega menu block, set its Menu title to exactly match a top‑level menu item, and add a featured image + heading + link to show a promotional "featured push" panel inside that menu — on both desktop and the mobile drawer.
Announcement bar
A thin promo bar above the header (e.g. "Complimentary 2 ml sample with every order"). Dark scheme‑2 by default.
Footer
Brand wordmark, tagline, menu columns, social icons, localization (country/language) and the bottom bar. Dark scheme‑2 by default.
Store address (market‑aware). Add one or more Address blocks to show a boutique/store address. Each block has a Market (United States / United Kingdom / Australia, or Default for everyone else), a Switch label (the short text on the button, e.g. UK), and the Address text. With more than one block, the footer shows a small US / UK / AU switcher — visitors see the address for their own market first and can tap another; with a single block the switcher is hidden. The heading above it is the footer's Address heading setting (default "Visit").
Storytelling / fragrance‑native sections
| Section | Use it for |
|---|---|
| Hero | A full‑width opening statement with image, heading, and CTA. |
| Olfactory story | A narrative "story" block for a fragrance (pulls the product's story metafield on the PDP, or set copy directly elsewhere). |
| Scent pyramid | The top / heart / base note pyramid (reads note metafields on the PDP). |
| Ritual and ingredients | A two‑column ingredients / how‑to‑wear block, with an IFRA/transparency note. |
| Scent spotlight | Feature one fragrance with imagery and copy. |
| Featured collection | A curated product row from any collection. |
| Collection list | Showcase several collections as cards. |
| Image with text | A classic image + text pairing. |
| Rich text | A centered editorial text block. |
| Testimonials | Customer quotes. |
| Product reviews | App‑free star rating + review display (reads review metafields — see §8). |
| Personalization | Engraving / gift‑message style block. |
| FAQ | Accordion of questions & answers. |
| Newsletter | Email signup (uses Shopify customer marketing consent). |
| Blog posts | Latest journal posts. |
| Recently viewed / You may also like | Automatic product recommendations. |
8. Product pages & fragrance metafields
The product page works out of the box with just your product title, images, price, and variants. To unlock the rich fragrance storytelling (scent pyramid, specs, olfactory story, transparency, star ratings), populate the metafields below on each product. Every one is optional — a section simply hides the part it has no data for.
How to add metafields
- Settings → Custom data → Products → Add definition.
- Create each definition with the exact namespace and key and the type shown below.
- Then open a product → scroll to Metafields → fill in the values.
Fragrance metafields (sillara namespace)
| Namespace · key | Type | Powers |
|---|---|---|
sillara.concentration | Single line text | PDP specs (e.g. "Eau de Parfum") |
sillara.perfumer | Single line text | PDP / credits |
sillara.top_notes | List of single‑line text | Scent pyramid — top tier |
sillara.heart_notes | List of single‑line text | Scent pyramid — heart tier |
sillara.base_notes | List of single‑line text | Scent pyramid — base tier |
sillara.longevity | Single line text | PDP specs |
sillara.sillage | Single line text | PDP specs |
sillara.ingredients | Rich text | Ritual & ingredients / transparency |
sillara.story_title | Single line text | Olfactory story heading |
sillara.story | Rich text (multi‑line) | Olfactory story body |
Review metafields (reviews namespace — Shopify standard)
| Namespace · key | Type | Powers |
|---|---|---|
reviews.rating | Rating | Star display + rating structured data |
reviews.rating_count | Integer | Number of reviews shown |
These use Shopify's standard reviews namespace, so they're compatible with review apps that write to it — but no app is required; you can set them manually.
Other product‑page features (no metafields needed)
- Variant swatches — colour/size variants render as pickers automatically; single‑variant products skip the picker.
- Unit pricing — shows automatically for products sold by measurement.
- Pickup availability — appears when you've enabled local pickup for a location.
- Gift‑card recipient fields — gift‑card products can be sent to a recipient with a scheduled message.
- Quick view — every product card opens a slide‑up quick‑view sheet to pick a variant and add to bag without leaving the grid.
9. Cart & checkout
- Cart drawer vs cart page — Sillara includes both a slide‑out cart drawer and a full cart page. Configure the drawer in its section settings.
- Add‑to‑cart feedback — adding an item plays a "fly to cart" animation using the real product image; the cart count updates without a forced page reload.
- Dynamic checkout & payment terms — the theme uses Shopify's native payment button and (where applicable) payment‑terms display, so Shop Pay / accelerated checkout and installments appear automatically when enabled in your payment settings.
10. Localization & translations
- All storefront copy is translatable. Sillara ships English (
en.default) and uses Shopify's translation system, so you can add languages via Settings → Languages (or a translation app) with no code. - The footer includes a country/region and language selector (from your Markets settings).
- Prices, dates, and units follow the shopper's selected market/locale.
- If you edit wording, do it through theme translations, not by editing code — this keeps every language in sync.
11. Accessibility & performance
Sillara is built to WCAG AA:
- Semantic HTML, visible keyboard focus, and ARIA labels on icon buttons and dialogs.
- Respects reduce‑motion system preferences (animations soften/disable).
- AA colour contrast in all shipped presets.
- Built on logical CSS properties — an RTL-ready foundation (full right-to-left support is planned for a future release).
For performance:
- Images use responsive sizing and lazy‑load below the fold (the hero LCP image loads eagerly).
- No required apps, no heavy frameworks — the theme is vanilla and lightweight.
- Keep your own uploaded images reasonably sized; the theme handles responsive variants for you.
12. Before you submit / go live (Theme Store)
If you're preparing this theme for the Shopify Theme Store or a client launch:
- Theme information — Theme settings → Theme information: set a real documentation URL (this page's public URL) and support URL/email, bump the theme version, and confirm the author.
- Presets — confirm all 3 presets look right with your content.
- Demo content — seed representative products, collections, and a blog so the store looks complete on install.
- Support — publish a support contact form / email that replies within 2 business days (a ready template ships in
docs/support/theme-support-form-template.html). - Run
shopify theme check— it must report 0 offenses. - Screenshots — capture 3–5 per preset for the listing.
13. FAQ
Do I need any apps? No. Every feature works with Shopify's built‑in functionality. Review apps that write to the standard reviews.* metafields are compatible but optional.
How do I change the gold/sage/amber accent colour? Theme settings → Colors → edit the scheme's Accent roles. Or switch presets (§3).
My scent pyramid / specs / story aren't showing. Those sections read product metafields (§8). Add the metafield definitions and fill in values for the product. Empty fields are hidden by design.
Can I use my own fonts? You can pick any font from Shopify's font library (Typography settings). Custom font uploads aren't supported — that's a Shopify Theme Store requirement, not a theme limitation.
How do mega‑menus work? Add a Mega menu block in the Header section, set its Menu title to match a top‑level navigation item exactly, and add a featured image/heading/link. It appears on desktop and in the mobile drawer.
Why is the footer/announcement bar dark? They default to colour scheme 2 (the dark chrome band). Change their Colour scheme setting to swap.
Can I turn off the cart drawer? Configure it in the cart‑drawer section settings; the full cart page is always available at /cart.
Does it support right-to-left languages? Not yet in full. The theme is built on logical CSS properties, so the groundwork for right-to-left is in place, but full RTL layout isn't enabled in this version — it's planned for a future release.
14. Support
- Documentation: this page.
- Support: use the support contact form/email published for the theme (replies within 2 business days).
- When reporting an issue, include your store URL, the theme name & version, the page it happens on, and a screenshot — it speeds up troubleshooting.
Sillara — a luxury fragrance theme for Shopify.