Aurel documentation

Aurel is an editorial theme for brands that make things slowly. This guide covers both editions — Shopify (Online Store 2.0) and WordPress (block theme with WooCommerce) — which share one design system and one motion engine.

Overview

Everything in Aurel follows three rules:

1. Type does the heavy lifting. Variable Fraunces uses optical sizing, so the same family looks delicate at display sizes and sturdy at small sizes. Headings support an italic accent word in your accent colour.
2. Everything is fluid. Type and spacing are defined as clamp() ranges between 360px and 1440px screens, so layouts never jump at breakpoints.
3. Motion is quiet and optional. Animations are slow at the end and fast at the start (expo-out easing), travel short distances and never run for visitors who ask their system to reduce motion.

What's in the package

Shopify — install

1. In Shopify admin go to Online Store → Themes.
2. Choose Add theme → Upload zip file and select aurel-shopify.zip.
3. When the upload finishes, choose Customize to open the theme editor, or Publish to make it live.

Shopify — first-time setup

1. Menus. Online Store → Navigation. Aurel uses main-menu for the header and footer for the footer. A Shop mega menu listing every collection is added automatically (Header → Automatic Shop menu), so keep the main menu short — for example Journal, About, FAQ, Contact. Nest items three levels deep to get a classic mega menu instead.
2. Header. Theme editor → Header. Choose logo position, sticky behaviour and whether the header should sit transparently over the homepage hero.
3. Hero. Upload a wide image (at least 2400 × 1400px) and an optional portrait image for mobile. Set the image's focal point in the image picker — Aurel respects it. Put a word in italics to colour it with your accent.
4. Collections. Pick collections in Featured collection and each block of Collection scroller.
5. Free-shipping bar. Theme settings → Cart → Free shipping threshold (in your store currency; 0 hides it).
6. Wishlist & compare. Work out of the box: the header heart opens a wishlist drawer and a “Compare now” bar opens a side-by-side pop-up once two products are picked — no pages and no app needed; lists are saved on the visitor's device. Optional: create pages using the page.wishlist and page.compare templates and select them in Theme settings → Wishlist & compare if you prefer full pages.
7. Pop-up. Theme editor → Footer → Pop-up: enable it, choose newsletter or age verification, the delay, how often it repeats and the discount code to reveal after sign-up (create the code under Discounts).
8. Demo images. Until you add your own images, sections show Aurel's bundled demo images so the store never looks empty. Switch this off in Theme settings → Demo content once your own images are in.
9. Demo products. Optional: import demo-content/shopify-products-ostra.csv (or -maren / -solene) in Products → Import, then add images from demo-content/images. If you host the images somewhere public first, run IMG_BASE=https://your-cdn/folder/ node tools/make-shopify-csv.js to fill image and per-colour variant image columns automatically.

Shopify — sections

Shopify — theme settings

Shopify — product page

Gallery layouts: grid, stacked, or slider with a thumbnail rail (Product page section → Gallery layout). Extra blocks: delivery estimate (skips weekends), countdown, wishlist & compare buttons, and a custom text field saved on the order (engraving, monogram). Pick a size guide page in the Variant picker block and a “Size guide” link opens it in a pop-up next to the size option. Product cards can show quick view, wishlist, compare and colour swatches that swap the photo to that colour's variant image (Theme settings → Product cards). Collections can use page numbers, a load-more button or infinite scroll. Header layouts: logo centre, logo left, or stacked with an inline search field; the mega menu can show two image cards.

Blocks can be reordered freely: title, rating (from any reviews app using Shopify's standard metafields), price (with unit price and Shop Pay Installments), description, variant picker (swatches for colour options), inventory status, buy buttons (quantity rules, selling plans, gift-card recipient form, dynamic checkout), pickup availability, perks list, collapsible tabs, text, custom Liquid, share, complementary products and app blocks.

Media supports images, Shopify video, YouTube/Vimeo and 3D models (with “View in your space”). Selecting a variant with its own image brings that image forward. A sticky add-to-cart bar appears once the main button scrolls away.

Shopify — filters & search

Built-in filters — no app needed. Collection pages filter instantly by category (product type), colour swatches, size, any other option, brand, tags (optional), price (histogram with a dual slider) and an in-stock switch. Every option shows a live count, active filters appear as removable chips, and the filter state is kept in the URL so filtered pages can be shared and the back button works. Collection page section settings: filter bar or drawer, brand and tag facets, product-type quick chips, grid density toggle (2/3/4 columns) and sorting.

Prefer Shopify's own filtering? Set Filter engine → Shopify Search & Discovery in the Collection page section and choose filters in the free Search & Discovery app (metafield filters, custom ordering). Predictive search in the header shows products, collections, pages, articles and query suggestions as you type.

Shopify — dark mode

Theme settings → Dark mode: Off, Automatic (follows the visitor's device), Toggle (default — a sun/moon switch in the header; the choice is remembered) or Always dark. Set the dark background, surface, text, muted text, accent and button colours in the same group. A tiny script in the page head applies the mode before the page paints, so there is no white flash.

Shopify — languages

Storefront text ships in English, French, German, Spanish, Italian, Dutch and Portuguese (Brazil). Add languages in Settings → Languages; Aurel's translations are used automatically and can be edited in Online Store → Themes → … → Edit default theme content. A country/currency and language selector appears in the footer when you sell in more than one market or language.

Shopify — customer accounts

Aurel includes styled templates for login, register, account overview, order detail, addresses, account activation and password reset. They are used when Settings → Customer accounts is set to Classic customer accounts. With the new customer accounts, Shopify hosts these pages and the header account icon links to them automatically.

Shopify — store pages & menus

Aurel ships page templates for About (page.about), Contact (page.contact, with contact form), FAQ (page.faq), Wishlist and Compare. Create the page in Online Store → Pages and choose the template on the right. Suggested menus: main menu — Journal, About, FAQ, Contact (the Shop menu is automatic); footer menu — Search, FAQ, Contact, Shipping, Returns. Policies from Settings → Policies are added to the footer automatically.

WordPress — install

1. Appearance → Themes → Add New → Upload Theme, choose aurel-wordpress.zip, then Activate.
2. Optional: install and activate WooCommerce for the shop templates, then upload and activate aurel-commerce-kit.zip (Plugins → Add New → Upload) for quick view, wishlist, compare, swatches and the store blocks.
3. Settings → Reading → A static page: choose a Home page and a Posts page (e.g. “Journal”). The Front Page template contains the full homepage.
4. Settings → Permalinks → Post name.

WordPress — first-time setup

1. Navigation. Appearance → Editor → Navigation. Create your menu; the header uses it automatically.
2. Homepage content. Appearance → Editor → Templates → Front Page. Click any text or image to edit it.
3. Logo. The header uses the Site Title as a wordmark with an accent full stop. Replace it with a Site Logo block if you prefer an image logo.
4. Motion. Appearance → Aurel motion to switch animations, cursor or progress line.
5. Demo content. Optional, on a fresh site: with WP-CLI run wp eval-file demo-content/wp-demo-content.php demo-content/images demo-content/demo-maren.json (or demo-ostra.json / demo-solene.json). It builds the full demo: products with per-colour variation images, pages, homepage, header layout, style variation and Commerce Kit settings.

WordPress — patterns

Find them in the block inserter under Patterns → Aurel: Hero, Slideshow, Marquee, Featured products, Editorial split, Collections scroller, Collection grid, Icons with text, Logo list, Stats, Testimonials, Journal, Newsletter, Quote, FAQ, CTA banner and Page intro — plus three complete homepages under Aurel — full pages (homeware, fashion, beauty). Build any landing page by stacking them on a page that uses the Page — no title template.

Motion is controlled with plain CSS classes, so it survives editing: add au-reveal (fade-rise), au-split-text (line reveal for headings), au-stagger (children appear one by one), au-reveal-media (clip reveal for images), au-parallax (image drift) or au-magnetic (buttons) under Block → Advanced → Additional CSS classes.

WordPress — WooCommerce

Aurel ships block templates for the product page, shop and category archives and product search. Product cards cross-fade to the first gallery image on hover and show an add-to-cart button over the image. The header includes WooCommerce's mini cart and account blocks. Cart and checkout use WooCommerce's block templates, restyled to match.

Product layouts: the default template shows a slider with thumbnails and zoom; on any product choose the Product — slider with thumbnails (WooCommerce's gallery block with a thumbnail rail) or Product — stacked gallery template in the product editor's Template setting. Header layouts: Appearance → Editor → Patterns → Template parts offers Header (logo centre), Header — logo left and Header — stacked; swap the header in any template.

Aurel Commerce Kit (WordPress plugin)

Everything store-specific lives in the companion plugin so it keeps working if you ever change theme. Settings: Appearance → Commerce Kit.

Carts are updated through WooCommerce's Store API and the Mini-Cart opens after every add, exactly like WooCommerce's own buttons.

Demos & import

WordPress — style variations

Appearance → Editor → Styles offers Ivory, Noir, Sage, Maren — fashion and Solène — beauty (the last two also switch fonts). Each changes the whole palette — including the night and sand section schemes — while keeping every contrast pair at WCAG AA or better.

Motion

The engine is a single 7 KB (gzipped) file with no dependencies. All scroll effects share one requestAnimationFrame loop that sleeps when the page is still.

Typography

Display sizes use tight tracking (−2.5% to −3.5%) and small caps labels use wide tracking (+14%). Italic accents drop 40 units of weight to balance the italic's heavier colour.

Colour

The palette is built from warm neutrals: pure grey is never used, every neutral leans slightly towards the accent hue. Default contrast ratios: text on background 15:1, muted text 5.5:1, accent text 5.4:1, text on accent buttons 5.8:1.

Accessibility & performance

• Skip link, landmark regions, visible focus rings, focus trapping in drawers, Esc to close.
• Touch targets are at least 44 × 44px.
• Split headings keep the full sentence for screen readers via aria-label.
• Everything is visible without JavaScript; if the script fails to load, content reappears automatically after 4 seconds.
• Responsive images with srcset, lazy loading below the fold and fetchpriority="high" on the hero.
• JavaScript, gzipped: motion engine 8 KB, commerce kit 9 KB, Shopify layer 7 KB, WooCommerce adapter 4 KB. No jQuery, no frameworks.

FAQ

Credits & licences

• Fraunces — The Fraunces Project Authors, SIL Open Font License 1.1.
• Inter Tight — The Inter Project Authors, SIL Open Font License 1.1.
• Instrument Serif — The Instrument Serif Project Authors, SIL Open Font License 1.1.
• Cormorant — The Cormorant Project Authors, SIL Open Font License 1.1.
• DM Sans — The DM Sans Project Authors, SIL Open Font License 1.1.
• Demo images — original procedural renders made for Aurel, CC0 1.0 (free to use for any purpose).
• Icons — original Aurel icon set.
• Code — WordPress edition: GPL v2 or later. Shopify edition: licensed per store under the marketplace's terms.

Changelog

1.3.0 — 2 October 2026 — Theme styles are now Aurel, Maren and Solene, each with its own home page when installed from the Theme Store; countdowns use real end dates only; editor text follows Shopify's style guide.

1.2.2 — 2 October 2026 — Marquee keeps scrolling (slower) for visitors with “reduce motion” on instead of turning into a scroll bar; pauses on hover and keyboard focus; with Animations off it shows as a centred line.

1.2.1 — 2 October 2026 — Theme styles now also switch header layout, product gallery layout and demo images; fixed theme settings for fonts, buttons, radius and page width being overridden by the stylesheet; style-neutral homepage copy; logo-left header fits small phones; lookbook no longer causes sideways scroll on mobile.

1.2.0 — 1 October 2026 — Built-in collection filters (no app) with price histogram, swatches, live counts and shareable URLs; dark mode with header toggle; storefront translations (FR, DE, ES, IT, NL, PT-BR); customer account templates; collage collection cards and automatic Shop mega menu; wishlist drawer and compare pop-up without pages; bundled demo images; styled sort menu and grid density toggle; faster loading.

1.1.0 — 30 September 2026 — Two new demos (Maren fashion, Solène beauty) and presets; quick view, wishlist, compare, recently viewed, card swatches with image swap, shoppable lookbook, countdown, before/after, bundles, size guide, delivery estimate, custom text field, promo/age pop-up, load more and infinite scroll; slideshow, collection grid, featured product, icons with text and logo list sections; three header and three product-gallery layouts; Aurel Commerce Kit plugin for WordPress.

1.0.0 — 30 September 2026 — Initial release.