Install the theme
- In your Shopify admin, go to Online Store > Themes and add the theme from the Theme Store.
- Select Customize to open the theme editor. The home page, product page and collection page already have their sections in place. Images show as placeholders until you add your own.
- Before you publish, work through the store setup below so product pages, filters and the routine finder have the data they read.
Theme settings
Open Theme settings (the paint brush icon in the theme editor).
Logo and favicon
- Logo: any aspect ratio works. Use Logo width on desktop, Logo width on mobile and Maximum logo height to size it. Without a logo, the header shows your store name.
- Favicon: a square image, at least 32 × 32 px.
Colors
The theme has five color schemes. Each scheme sets a background with its matching text, secondary text, lines and borders, image and card background, accent, and two button styles. Every section has a Color scheme setting, so changing a scheme here updates every section that uses it.
Keep text at a 4.5:1 contrast ratio against its background (3:1 for large headings, icons and form field borders). The default schemes meet these ratios.
Typography
- Headings: font, size, and Use italic for heading accents (headings can start a new italic line with the heading block setting “Start italic text on a new line”).
- Body: font and size. Bold and italic styles load automatically.
Layout
Page margin on desktop, Image corner radius and Button corner radius.
Animations
- Reveal sections on scroll: sections fade in as they enter the screen.
- Use smooth scrolling
- Show page transitions
- Use custom cursor: desktop only.
Animations never run in the theme editor, and they’re turned off for visitors who ask their device to reduce motion.
Cart
- Cart type: a drawer that slides in, or the cart page.
- Drawer color scheme, Show order note.
- Show free shipping progress: set Free shipping from to your threshold, and the two texts shown below and above it.
- Empty cart: heading, text, link, and a collection of suggested products.
Search
Show results while typing turns on predictive search in the header search panel. Show product prices adds prices to those results.
Currency format
Show currency codes prints prices as “$58 USD”. Turn it on if you sell in more than one currency.
Social media
Add the full URL of each account. Icons show in the footer’s Social media block for every account you fill in.
Store setup the theme reads
Product metafields
Create these in Settings > Custom data > Products. Turn on Storefront access for each. Every one is optional: a product without the value simply hides that line.
| Namespace and key | Type | Used for |
|---|---|---|
aune.number |
Integer | The product number, shown as “Nº 04” on cards, product pages and the Numbered products section. |
aune.step |
Single line text | The routine step, such as “Serum”. Falls back to the product type. The Routine finder matches steps with it. |
aune.benefit |
Single line text | One-line benefit under the title on cards and the product page. |
aune.highlights |
List of single line text | The Highlights block, for example “Morning and evening”. |
aune.actives |
List of single line text | The Actives block and card actives line. Write text as “2% Sea fennel extract”: the theme splits the dose from the name. |
aune.active_images |
List of files | Optional images for the Actives block, in the same order as aune.actives. Actives without one use the block’s Image for other actives. |
aune.contents |
List of products | For a set: the products in it. The Set contents block lists them with their prices and the saving. |
aune.sets |
List of products | The sets a product is part of, linked by the Also in sets block. |
aune.how_to_use |
Rich text or multi-line text | A Collapsible tab with Content set to “How to use”. |
aune.ingredients |
Multi-line text | A Collapsible tab with Content set to “Actives and ingredient list”. |
Blog posts can also use aune.products (List of products): the products shown in the Products in post section.
Ingredients
The Ingredient index and Ingredients sections use Ingredient blocks: add one per ingredient with its name, Latin name, image, short line, origin and benefit. Give the Ingredient index the same names, so its links jump to the right row. In the Ingredients section, Products shown: Products that contain it finds the products whose aune.ingredients text names the ingredient’s Latin name, so you don’t have to pick them by hand.
Product tags
| Tag | What it does |
|---|---|
label:Reserve |
Adds a label pill on cards and next to the product number. Any text after label: works. |
badge:New |
Adds a badge on product cards. Sale and Sold out badges are automatic. |
skin:dry, concern:redness, time:am (any words) |
Used by Routine finder answers (“Recommend products tagged”). |
Menus
- The header uses main-menu. Nested links become the mega menu: top-level links are the bar, second-level links are column headings, third-level links are the column lists. Add Menu feature blocks in the Header section to show an image card in a panel.
- The footer’s Menu blocks default to footer. Add more Menu blocks for more columns.
Filters
Collection and search filters come from the Search & Discovery app (free, by Shopify). In Filters, add Availability, Price, Product type, Vendor and your product options (for example Size). The theme shows whatever filters the app has turned on.
If a filter shows on search but not on a collection, Shopify is still indexing it. It can take up to 48 hours; editing and saving one product in the collection starts it again.
Product recommendations
- Related products are automatic.
- Complementary products (“Complete the routine”) are set per product in Search & Discovery > Product recommendations.
Gift cards
Create a gift card product in Products > Gift cards. The product page shows a recipient form when Show recipient form for gift cards is on in the Buy buttons block.