Setting up Aurelia
Aurelia works the moment it is installed — every section carries sample copy so the storefront is never blank. This guide covers the handful of things that need a real decision from you, in the order they matter.
1. Choose a theme style
Customize → Theme settings → Colors
Aurelia ships three styles, each a complete palette rather than a single accent swap:
| Style | Background | Foreground | Accent | Reads as |
|---|---|---|---|---|
| Ivory | #FBFAF7 |
#211E1A |
#7E6132 |
Warm, gallery-white. The default. |
| Noir | #1C1917 |
#F4F1EA |
#C9A96A |
Dark, high-jewelry, gold on near-black. |
| Champagne | #F3EBDD |
#2A241C |
#7E6132 |
Soft, tonal, less clinical than Ivory. |
Pick one when you install the theme. Everything else in the storefront — buttons, borders, badges, overlays, form fields, dividers — is derived from those three colours, so you never adjust them one by one.
Each style also defines three colour schemes. A section's Color scheme setting picks one of them, which is how you get a dark editorial band inside an otherwise light page without touching CSS. The schemes are contrast-checked to WCAG 2.1 AA in all three styles; if you edit them, keep body text at 4.5:1 or better against its background.
2. Set your logo and fonts
Theme settings → Brand — upload a logo (transparent PNG or SVG) and set its width. If you leave the logo empty the shop name is set in the heading font, which for many jewelry brands is the better answer.
Theme settings → Typography — the defaults are Playfair Display for headings and Montserrat for body. Both are served by Shopify, so there is no third-party font request and no layout shift on load.
3. Build the navigation
Online Store → Navigation first, then Customize → Header.
- Main menu — the header renders whatever menu you select. Two levels of nesting produce dropdown columns; three levels produce columns with sub-links.
- Mega menu — add a Mega menu block to the Header section, and type the
exact title of the top-level menu item it belongs to (for example
Jewelry). A mega menu can list either the menu's own child links or the newest products from each child collection, and can carry up to two promotional tiles. If a tile's image and heading are left empty, the chosen collection supplies its image, title, and product count automatically. - Utility bar — the thin row above the header. It appears only if you give it something to hold: a secondary menu, social links, or the country/language selectors. Leave all four empty and the row is not rendered at all.
- Transparent header — on by default, and applies only to the homepage when the first section is a hero. The header dissolves to solid as soon as the page scrolls.
4. Create the pages the theme expects
Two templates need a page to attach to. Online Store → Pages → Add page, then set Theme template in the sidebar:
| Page to create | Template to assign | Why |
|---|---|---|
| Wishlist | wishlist |
Gives the header's heart icon somewhere to link to |
| Contact | contact |
Adds the styled contact form, hours, and detail blocks |
A third page is optional but recommended: a size guide page holding your ring, bracelet, and chain sizing charts. Create it as an ordinary page, then select it under Customize → Product → Size guide page. The product page opens it in a dialog rather than navigating away.
5. Turn on filtering
Collection filtering and sorting are built into the theme but driven by Shopify's own filter data. Install Search & Discovery (free, by Shopify) and add the filters you want under Search & Discovery → Filters — typically Availability, Price, and your metal, stone, and size options. The theme picks them up with no further configuration; until you add them, the collection page shows sorting only.
6. Set the cart and checkout details
Customize → Cart drawer:
- Free shipping threshold — in your store currency, e.g.
200. The drawer shows a progress bar and how much is left to qualify. Set it to0to hide the bar entirely, which is the right call if you do not offer free shipping. - Terms checkbox — off by default. Turn it on only if your jurisdiction requires explicit terms acceptance; it adds friction to every checkout.
Customize → Product:
- Delivery estimate — on by default, showing "Order today — arrives Aug 5 to Aug 10". Set the minimum and maximum business days to match your real fulfilment window. The estimate skips Sundays and localises the date format.
- Assurance points — the three short lines under the buy button ("Complimentary shipping", "30-day returns", "Lifetime care"). Write your own; the defaults are placeholders.
- Engraving — off by default. Turning it on adds a personalization field whose text is previewed live on the product photo and carried through to the order as a line-item property.
- Price per wear — on by default. Shows the price divided across ten years of regular wear, the standard justification metric for a considered purchase.
Optional extras
Newsletter popup — Customize → Popup. Off by default. When enabled it appears after the delay you set, remembers a dismissal for 30 days, and never opens on top of the cart drawer or another dialog.
Back-in-stock alerts — automatic. Any sold-out product shows an email capture form in place of the buy button. Submissions arrive at your store's customer service email (Settings → Store details → Customer email) with the product title and URL in the body.
Gift finder — add the Gift finder section, then one Result block per occasion-and-budget combination you want to answer, each pointing at a collection. Combinations you do not define simply are not offered in the quiz.
Ring sizer — add the Ring sizer section anywhere, most usefully on the size guide page. It has no settings: the shopper calibrates the screen against a bank card, then matches a ring against on-screen circles to read US, UK, and EU sizes.
Lookbook — upload one editorial image, then add a Hotspot block per product with its horizontal and vertical position as percentages. Each hotspot opens the product in quick view without leaving the page.
Before you launch
- [ ] Replace every piece of sample copy — the heroes, statement, value props, and assurance lines all ship with placeholder text
- [ ] Add real policy pages (Settings → Policies); the footer and cart drawer link to whichever ones exist
- [ ] Upload a favicon (Theme settings → Brand)
- [ ] Check the storefront at 375px wide — the mobile buy bar, drawer navigation, and quick add all behave differently there
- [ ] Place one live test order to confirm engraving text and gift notes reach the order correctly