Chapter 01 · Installation & Global Settings
Getting started & preset guide
Averdane is an Online Store 2.0 Shopify theme engineered for fashion houses, tailoring ateliers, and contemporary apparel brands. Every garment system—from gallery choreography and sibling colorways to unit-switching size guides, online alterations, and material libraries—runs natively on Shopify without third-party app dependencies.
1. Install Averdane and duplicate before editing
- Add Averdane from the Shopify Theme Store to your store library.
- In your Shopify admin, go to Online Store → Themes.
- Before editing any code or making major structural experiments, click the actions menu (
…) next to Averdane and select Duplicate to keep a clean backup copy. - Click Customize to launch the Shopify Theme Editor. Use the template switcher at the top bar to move between Home page, Products, Collections, and specialized editorial pages.
2. Choosing a preset and Layout style
Averdane includes four distinct architectural presets—each pairing a structural layout grammar with curated Shopify fonts and light/dark color schemes:
Typography: Syne + Host Grotesk + IBM Plex Mono.
Signature: Sharp 0 px gallery edges, warm silk ground, hairline ledger dividers, and thumbnail rail PDP.
Typography: Space Grotesk + Inter + Roboto Mono.
Signature: Exposed architectural grid rules, cool mineral paper, cobalt accent, and two-column PDP grid.
Typography: Cormorant + Plus Jakarta Sans + IBM Plex Mono.
Signature: Passe-partout framed plates, warm parchment ground, bronze walnut accent, and editorial collage PDP.
Typography: Fraunces + DM Sans + Space Mono.
Signature: Softened organic radii, sunlit limestone palette, terracotta accent, and airy resort pacing.
Unlike themes that tie structural geometry to font names, Averdane stores structural architecture separately under Theme settings → Layout → Layout style (Averdane, Monolith, Salon, or Solstice). You can swap any heading font, body font, or color scheme while keeping your chosen preset’s grid proportions, border weight, and corner geometry intact.
3. Color schemes and contrast rules
Open Theme settings → Colors. Averdane ships with two paired schemes per preset—raw-silk (warm daylight ground) and charcoal-ink (deep evening ground)—and lets you create additional schemes as needed. Every section exposes a Color scheme picker.
| Role label | Where it appears | Contrast guidance |
|---|---|---|
| Background | Primary page canvas. | Base surface for body text contrast checks. |
| Surface | Panels behind product media, form inputs, and elevated sheets. | Keep close to Background so borders remain crisp. |
| Container | Tags, metadata badges, callout boxes, and subtle hover fills. | Maintain at least 4.5:1 contrast with Text. |
| Text | Primary body copy, headings, and the ground of reversed dark bands and the footer. | At least 4.5:1 against Background and Container. |
| Border & Divider | Structural hairlines, input outlines (Border), and subtle row rules (Divider). | Border requires at least 3:1 contrast with Background. Never use Border for text. |
| Accent & Soft accent | Store wordmark, active nav underlines, chalk indicators (Accent); reversed-ground highlights on dark bands/footer (Soft accent). | Accent needs 4.5:1 against Background; Soft accent needs 4.5:1 against Text. |
| Button & Button label | Primary call-to-action button fill and label text. | Maintain at least 4.5:1 between Button and Button label. |
4. Typography and Favicon
- Typography (Theme settings → Typography): Select three native Shopify fonts (no external font files required):
- Heading font: Sets the store wordmark, page titles, section display headings, and product titles.
- Body font: Sets navigation links, buttons, descriptions, and long-form editorial copy.
- Figures and labels font: Sets prices, garment sizes, item counts, and index codes. Choosing a monospaced font keeps size charts and prices vertically aligned.
- Favicon (Theme settings → Favicon → Favicon): Upload a square PNG or SVG mark; Shopify automatically scales it to
32 × 32 px.
5. Header, mega menu, localization, and customer accounts
In the Theme Editor, select the Header section inside the Header group to configure storefront navigation:
- Logo & Maximum logo width: Upload your brand mark and set its maximum width. Logos automatically fit inside the header height so square and tall monograms never stretch the bar. When left blank, your store name renders cleanly in the Heading font.
- Main menu: Connect a menu from Online Store → Navigation. Top-level items with nested child links automatically open an architectural dropdown / mega menu. If top-level items exceed available horizontal room on narrower viewports, overflow items move gracefully into the menu drawer instead of wrapping awkwardly.
- Secondary menu: Optional right-aligned menu for up to three concise utility links on wide screens (such as About, Journal, or Stockists).
- Sale link & Sale link badge: Highlight a seasonal archive or sale collection with an optional short badge (for example
-30%). - Customer accounts (
<shopify-account>): Averdane integrates Shopify’s native Customer Accounts component in both desktop and mobile headers. Connect a Customer account menu to surface custom links when signed-in shoppers open their account menu, and enable customer accounts under Settings → Customer accounts. - Country/region and language: Enable Show country/region selector and Show language selector when selling across multiple Shopify Markets or translated locales (including full RTL layout support for Arabic and Hebrew).
6. Cart drawer, gift options, and predictive search
Cart configuration (Theme settings → Cart)
- Cart type: Choose Drawer (slides out over the current page when a piece is added) or Page (keeps shoppers on the page with inline confirmation and links to
/cart). - Open drawer after a product is added: Toggle whether adding a garment automatically opens the bag drawer or quietly updates the bag counter.
- Show order note: Enables a collapsible special-instructions field saved to
cart.note. - Show gift options & Show gift packing request: Adds a “This order is a gift” checkbox with a gift message field and optional complimentary gift-packing request saved as order cart attributes (
Gift,Gift message,Gift packing). Note: Cart attributes do not add a fee; to charge for gift wrapping, offer a wrap product or app. - Show complementary products: Suggests pairings in the bag using complementary products configured in the free Shopify Search & Discovery app, automatically skipping items already in the bag.
- Free shipping threshold: Enter an amount in your store’s base currency (matching your free-shipping rate in Settings → Shipping and delivery) to display a dynamic progress bar. Leave at
0to hide. Automatically hidden when shoppers browse in a secondary currency. - Empty bag: Pick a Collection to suggest and optional Button link so an empty bag guides shoppers back into your wardrobe.
Predictive search (Theme settings → Search)
- Enable predictive search: Live-queries products, collections, journal articles, pages, and query suggestions as shoppers type.
- Categories menu, Popular searches, & Featured collection: Populate the search layer before shoppers begin typing and provide helpful recovery paths when a query returns zero results.