Eira — Premium Cosmetic Theme

Step 1 — Install the Theme

1. 1
   Purchase and download Eira from the Shopify Theme Store or your purchase receipt.
2. 2
   In Shopify Admin, go to Online Store → Themes.
3. 3
   Click Add theme → Upload zip file and upload the downloaded .zip file.
4. 4
   Once uploaded, click Customize to begin setup, or Publish to make it your live theme.

Step 2 — Import Demo Content (Optional)

Eira includes a demo content importer that sets up sample pages, navigation menus, and sections to match the theme preview.

1. 1
   In the Theme Editor, click Actions → Import demo content.
2. 2
   Select the demo preset that matches your store style.
3. 3
   Click Import — existing content is not overwritten.

Step 3 — First-Time Setup Checklist

Complete these steps in the Theme Editor (Online Store → Themes → Customize):

• Upload your logo — Theme Settings → Header → Logo
• Set brand colours — Theme Settings → Colors → Brand palette
• Set typography — Theme Settings → Typography
• Configure header — layout, sticky behaviour, transparent header
• Build your navigation menus — Shopify Admin → Navigation
• Set up the footer — columns, newsletter, social links, payment icons
• Configure the announcement bar — promo messages and countdown
• Set up the cart — Drawer or Page mode, free shipping threshold
• Add Homepage sections — Hero Banner, Featured Products, Testimonials
• Enable Quick View & Wishlists — Theme Settings → Product Cards
• Configure product page — tabs, size guide, trust badges
• Set up collection filters — install Search & Discovery app first
• Add social media links — Theme Settings → Social Media
• Set favicon — Theme Settings → Favicon
• Test on mobile — use the mobile preview in the Theme Editor

Step 4 — Connect Required Apps

Step 5 — Go Live

1. 1
   Remove the password page — Shopify Admin → Online Store → Preferences → uncheck password protection.
2. 2
   Connect your custom domain — Settings → Domains.
3. 3
   Set up payment methods — Settings → Payments.
4. 4
   Enable shipping rates — Settings → Shipping and delivery.
5. 5
   Test a complete purchase using Shopify's Bogus Gateway test payment method.

Colors

Eira uses Color Schemes — up to 6 pre-defined background + text + button color combinations. Changing a scheme instantly updates every section assigned to it.

Typography

Buttons

Product Cards

Cart

Social Media

Fill in your social media profile URLs here — used across the theme wherever social icons appear (footer, announcement bar, mobile menu).

Animations

Favicon

Upload your store's favicon under Theme Settings → Favicon. Use a square PNG or SVG, minimum 32×32px. A 512×512px file is recommended.

Custom CSS

Eira provides a Custom CSS input in the Theme Editor for adding CSS overrides without editing theme files.

1. 1
   Go to Online Store → Themes → Customize.
2. 2
   Click Theme settings (bottom of the left panel).
3. 3
   Scroll to Custom CSS and paste your CSS rules.

Eira exposes CSS custom properties for consistent overrides:

:root {
  --color-brand: #D4A0A0;   /* primary brand colour */
  --color-accent: #8B4B6B;  /* accent / button colour */
  --font-heading: 'Cormorant Garamond', serif;
}

Custom Liquid (Additional Scripts)

For adding JavaScript or Liquid that runs on every page, go to Theme Settings → Custom code and use the Header or Footer script fields. For complex edits, use Edit code (Online Store → Themes → Actions → Edit code).

Section Limits

Shopify enforces a limit of 25 sections per template. Blocks within a section have a separate limit — typically 16–50 blocks depending on the section type.

Metafields

Metafields let you attach custom data to products, collections, customers, and orders — then display that data in your theme.

1. 1
   Go to Shopify Admin → Settings → Custom data.
2. 2
   Select the resource (Products, Collections, etc.) and click Add definition.
3. 3
   Set name, namespace, key, and type — then add values to individual products/collections.

Common cosmetic use cases for Eira's Product metafield blocks:

Color Swatches Configuration

Colour swatches are generated automatically from variant option values. To control which option names trigger swatch rendering:

1. 1
   Go to Theme Settings → Product → Swatch option names.
2. 2
   Enter a comma-separated list of option names, e.g. Color, Colour, Shade, Finish.
3. 3
   Upload swatch images to Settings → Files — name each file exactly after the variant value (e.g. rose-gold.png).

Building Menus in Shopify Admin

Build your menus at Shopify Admin → Online Store → Navigation. Eira reads Shopify menus directly and supports three levels deep:

Top-level link (e.g. "Shop")        ← appears in the header nav bar
  ├─ Child link (e.g. "Serums")     ← appears in dropdown or mega menu columns
  ├─ Child link (e.g. "Moisturisers")
  └─ Child group (e.g. "By Skin Type")
       ├─ Grandchild (e.g. "Dry Skin")  ← sub-links in mega menu columns
       └─ Grandchild (e.g. "Oily Skin")

Header Section Settings

Layout

Desktop Navigation Behaviour

Mobile Menu Drawer

On screens narrower than 1024px, the desktop nav is replaced by a hamburger button (☰). Features of the mobile drawer:

• All top-level links listed vertically
• Links with children show an accordion toggle — tap to expand
• Mega Menu Promo Images appear at top of expanded accordion
• Sign In link and social media icons at the bottom
• Swipe left to close, or press Escape
• Focus trap keeps keyboard navigation inside the drawer

Predictive Search Drawer

The search drawer opens when the search icon is tapped. Results appear live as the customer types, showing: products (with image, title, price), blog articles, pages, and popular search terms before typing starts.

How Mega Menus Work

Mega menus are powered by two things: (1) a Shopify menu item with children, and (2) a Mega Menu block in the Header section linked by matching its title. When both exist and the title matches, Eira replaces the standard dropdown with the rich mega menu panel.

Setting Up — Step by Step

1. 1
   Go to Shopify Admin → Navigation → Main Menu and add child links under a top-level item.
2. 2
   In the Theme Editor → Header, click Add block → Mega Menu.
3. 3
   In Menu Item Title, type the exact name of your top-level link (case-insensitive), e.g. Shop.
4. 4
   Choose a layout and fill in the layout-specific settings.

Layout 1: Columns + Products

Navigation links as columns on the left, product cards from a collection on the right. Product cards show image, title, price, and an AJAX Add to Cart button.

Layout 2: Columns + Promo Image

Navigation columns on the left, a promotional image card with title, subtitle, and button on the right. The Promo Image also appears at the top of the mobile accordion for that nav item.

Layout 3: Collection Cards

Child menu links displayed as visual collection image cards. Each collection must point to a Collection page for its image to load.

Interaction Behaviour

Enabling the Cart Drawer

1. 1
   Go to Theme Editor → Theme Settings (paintbrush icon).
2. 2
   Open the Cart group.
3. 3
   Set Cart Type to Drawer.

Cart Drawer Settings

How to Enable

1. 1
   Go to Online Store → Themes → Customize.
2. 2
   Open Theme Settings → Product Cards.
3. 3
   Toggle Enable Quick View to ON.

Quick View Modal Contents

Behaviour

Modal opens with a smooth fade + scale animation. Closing: click ✕, click outside, or press Escape. Focus is trapped inside the modal (WCAG 2.1 AA compliant). On mobile, the modal slides up as a bottom sheet. Quick View content is fetched via the Section Rendering API on demand — zero performance cost until triggered.

Classic vs New

Classic Account Pages

Free Apps (Official Shopify)

Reviews & UGC

Email & SMS Marketing

Wishlist & Loyalty

Settings

Announcement Blocks

Layout

Logo

Search

Banner Settings

Slide Block Fields

Content Settings

Collection Tab Blocks

Add up to 6 Collection Tab blocks. Each tab shows a different set of products. When at least one tab is added, an All tab appears first automatically.

Section Settings

Product Card Features

• Colour Swatches — Clicking a swatch swaps the card image without a page reload
• Quick Add — Adds the default variant to cart via AJAX with a toast confirmation
• Sale Badge — Automatically displays when a compare-at price is set
• New Badge — Displays on products published within the last 30 days
• Low Stock Badge — Appears when inventory drops below the configured threshold
• Wishlist Button — Heart icon saves the product (requires compatible app)

Media Settings

Product Info Blocks

Settings

Benefit Blocks

Add up to 4 benefit/feature blocks that appear alongside the product:

Settings

Filter Types Supported

Key Settings

Settings

Settings

Settings

Adding Sections to Pages

Since Eira is an OS 2.0 theme, you can add any section below the page content — product grids, testimonials, newsletter signup, or custom sections. Go to Theme Editor → Pages → Default Page and click Add section below the main content block.

Settings

Footer Column Blocks

Each column is a block with a Column Heading and a Menu (choose a Shopify navigation menu to display as links). Most stores use 3–4 columns. Create separate menus for each footer column in Shopify Admin → Navigation.

Section Settings

Video Blocks

Each video block contains:

Section Settings

Step Blocks

Add up to 8 step blocks. Each step represents one part of the skincare routine:

Settings

How to Update Your Theme

1. 1
   Download the latest version from your purchase receipt or the Shopify Theme Store.
2. 2
   In Shopify Admin, go to Online Store → Themes.
3. 3
   Click Add theme → Upload zip file and upload the new version.
4. 4
   Click Customize to review, then Publish when ready.

Version History