AuraBeauty Luxury — Theme Documentation v2.1.0

Theme Documentation · Shopify OS 2.0

AuraBeauty
Luxury Theme

A fully customisable, editorial-grade Shopify 2.0 theme built for luxury beauty brands. Every section is designed to communicate refinement, trust, and the transformative power of a skincare ritual.

Version2.1.0
AuthorAdbeats Media
PlatformShopify OS 2.0
Sections28 Sections
CSS / JSlumiere.css (154 KB) · lumiere.js
Supportadbeatsmedia.com/themes/aurabeauty/support

Changelog

What's New in v2.1.0

Version 2.1.0 expands the Theme Settings panel significantly and adds several improvements across sections and templates.

🔤
Full Typography System

Choose from 25 heading fonts and 25 body fonts, all served via Google Fonts. Fine-tune 6 font sizes (hero headline, section title, sub-heading, large heading, body, small, label) with pixel-level range sliders directly in Theme Settings.

Theme Settings → Typography
🎨
Expanded Color Controls

The Colors panel now exposes 11 individually customisable variables — split into Backgrounds, Text Colors, and Accent Colors — including the previously hard-coded ivory, sand, taupe, gold-light, and body text colors.

Theme Settings → Colors
🔘
Buttons & Links Panel

New dedicated panel for primary and ghost button colors — background, text, hover state — without needing to edit CSS.

Theme Settings → Buttons & Links
⚙️
Advanced Settings Panel

New panel with global toggles: enable/disable scroll animations, show/hide breadcrumbs, switch cart between drawer and full-page mode, and inject custom CSS without editing files.

Theme Settings → Advanced
Featured Spotlight Callouts

The Featured Spotlight section now supports up to 4 Ingredient Callout blocks — floating labels pinned to any position on the product image using X/Y percentage coordinates.

sections/featured-spotlight.liquid
👟
Footer Layouts Expanded

Footer now offers 5 layouts (up from 4): Brand + columns, Centered minimal, Newsletter focused, Mega editorial, and a new Compact bar layout.

sections/footer.liquid
🧴
5 Product Templates

Ships with 5 additional named product templates pre-configured for specific products: face-wash, herbal-face-wash, herbal-hair-mask, herbal-hair-shampoo, and herbal-ubtan-face-mask.

templates/product.*.json
📱
TikTok Social Link

TikTok URL added to the Social Media settings group, joining Instagram, Pinterest, YouTube, and LinkedIn.

Theme Settings → Social Media

Architecture

File Structure

The theme follows the standard Shopify theme directory layout. All custom CSS and JavaScript lives in two dedicated asset files — lumiere.css and lumiere.js — keeping the codebase clean and maintainable.

AuraBeauty-Theme/
assets/
lumiere.css — All styles (154 KB)
lumiere.js — Cart drawer, animations, interactivity
demo-*.jpg — Demo/placeholder images (18 files)
config/
settings_schema.json — Theme editor settings definition
settings_data.json — Saved settings values (preset: AuraBeauty Luxury)
layout/
theme.liquid — Master HTML shell, cart drawer, mobile nav
locales/
en.default.json — English translations
sections/ — 28 section files
snippets/
icon.liquid — SVG icon renderer (35+ icons)
product-card.liquid
product-card-placeholder.liquid
stars.liquid
templates/
index.json — Homepage with all sections pre-configured
product.json — Default product template
product.face-wash.json — Named product template
product.herbal-face-wash.json — Named product template
product.herbal-hair-mask.json — Named product template
product.herbal-hair-shampoo.json — Named product template
product.herbal-ubtan-face-mask.json — Named product template
collection.liquid
cart.liquid
search.liquid
page.liquid
404.liquid
customers/ — account.liquid, login.liquid

Getting Started

Installation Guide

Upload the theme zip — In your Shopify admin, go to Online Store → Themes → Add theme → Upload zip file. Select the AuraBeauty-Theme.zip file and click Upload.
Publish the theme — Once uploaded, click Actions → Publish to make it your live theme, or keep it unpublished to customise first.
Create your main-menu navigation — Go to Online Store → Navigation and create a link list with the handle main-menu. The header and mobile nav both read from this list automatically.
Configure global settings — Open the Theme Editor (Customise), go to Theme Settings, and configure your Logo, Brand Colors, and Social Media links.
Customise each section — In the Theme Editor sidebar, click any section on the homepage to open its settings. Replace demo images and placeholder text with your brand content.
Connect a collection — For the Featured Collection section, assign a Shopify collection to display real products. All product cards automatically pull title, price, images, and variants.
Tip: Demo images ship with the theme inside assets/ and are displayed as placeholders in every section. You can leave them temporarily while you set up your store — they are only replaced when you upload your own images in the Theme Editor.

Design System

Color Palette

The theme uses a warm, luxury beauty palette defined as CSS custom properties in lumiere.css. In v2.1.0 all 11 core palette colors are customisable via Theme Settings — including the previously hard-coded tonal scale.

Backgrounds

Cream#FAF7F2
Ivory#F3EDE3
Sand#E8DFCF

Text Colors

Dark#1C1410
Text#2E2219
Muted#8A7560

Accent Colors

Bronze#A07850
Gold#C9A84C
Taupe#C4A882
Gold Light#E8D5A3
Changing colors: Go to Theme Editor → Theme Settings → Colors. All 11 colors propagate via CSS variables throughout every section. Changes take effect immediately in the Theme Editor preview.

Design System

Typography

Display / Headings — Cormorant Garamond (default, Google Fonts)

The Science of Luminous Skin

25 heading fonts available in Theme Settings. Weights used: 300, 400, 500 (regular + italic)

Body / UI — Jost (default, Google Fonts)

Where ancient botanicals meet modern dermatology.

25 body fonts available in Theme Settings. Weights: 200, 300, 400, 500.

New in v2.1.0: Both font families and all size scales are configurable in Theme Settings without editing any files. See the Typography Settings section below for the full controls reference.

Design System

Icon Library

Icons are rendered via snippets/icon.liquid as inline SVG. Each icon is a custom path (no external library) and inherits currentColor.

{%- render 'icon', name: 'leaf', size: 24 -%}
{%- render 'icon', name: 'sparkle', size: 20 -%}
{%- render 'icon', name: 'check', size: 16 -%}
Icon NameUse CaseCategory
leafClean / natural ingredientsBrand
flowerBotanical / floralBrand
dropletHydration / serumBrand
sparkleGlow / luxury highlightBrand
sunSPF / morning routineBrand
moonNight routineBrand
flaskClinically tested / labBrand
labScience / formulaBrand
globeSustainability / globalBrand
recycleRecyclable packagingBrand
cruelty-freeCruelty-free certificationBrand
shieldProtection / guaranteeTrust
heartWishlist / favouritesUI
starRating / awardsUI
awardAccoladesUI
checkComparison ✓ / verifiedUI
closeModal / drawer closeUI
arrow-rightCTA arrows / navigationUI
clockTime-sensitive / ritual timingUI
bottleProduct / packagingProduct
featherLightweight / gentleBrand
giftGifting / rewardsCommerce
shippingDelivery / fulfillmentCommerce
mailNewsletter / contactCommerce
instagramSocial linksSocial
pinterestSocial linksSocial
youtubeSocial linksSocial
linkedinSocial linksSocial
facebookSocial linksSocial
tiktokSocial linksSocial
x-twitterSocial linksSocial
Fallback: Any unrecognised icon name renders the sparkle path as default. To add new icons, append a when 'your-icon-name' case to snippets/icon.liquid.

Theme Settings

Global Settings

Found in Theme Editor → Theme Settings. These settings apply site-wide and are accessible in Liquid via settings.*.

Branding

SettingIDTypeDescription
Logo imagelogoimage_pickerSite-wide logo used in header and footer. Leave empty to use shop name as text.
Logo widthlogo_widthrange60–300 px, default 140 px
Faviconfaviconimage_pickerBrowser tab icon. Recommended: 32×32 or 64×64 px.

Colors

GroupSettingIDDefault
BackgroundsPage backgroundcolor_cream#FAF7F2
BackgroundsSection backgroundcolor_ivory#F3EDE3
BackgroundsBorder & dividercolor_sand#E8DFCF
Text ColorsPrimary text & buttonscolor_dark#1C1410
Text ColorsBody textcolor_text#2E2219
Text ColorsSecondary / muted textcolor_muted#8A7560
Accent ColorsPrimary accent (Bronze)color_bronze#A07850
Accent ColorsGoldcolor_gold#C9A84C
Accent ColorsTaupecolor_taupe#C4A882
Accent ColorsGold lightcolor_gold_light#E8D5A3

Social Media

PlatformID
Instagramsocial_instagram_link
Pinterestsocial_pinterest_link
YouTubesocial_youtube_link
LinkedInsocial_linkedin_link
TikTok Newsocial_tiktok_link

Theme Settings

Typography Settings New in 2.1.0

Found in Theme Editor → Theme Settings → Typography. Provides full control over typeface selection and font sizing without touching any files.

Heading Font

SettingIDRange / OptionsDefault
Heading typefacefont_heading_family25 Google Fonts optionsCormorant Garamond
Hero headline sizefs_hero48–120 px, step 276 px
Section title sizefs_3xl36–80 px, step 252 px
Sub-section heading sizefs_2xl24–64 px, step 242 px
Large heading / logo text sizefs_xl18–48 px, step 128 px

Body Font

SettingIDRange / OptionsDefault
Body typefacefont_body_family25 Google Fonts optionsJost
Body text sizefs_base12–20 px, step 114 px
Large body text sizefs_lg15–26 px, step 120 px
Small text sizefs_sm10–16 px, step 112 px
Label / tag text sizefs_xs8–14 px, step 110 px
Available heading fonts include: Cormorant Garamond, Playfair Display, EB Garamond, Libre Baskerville, Lora, Crimson Text, Merriweather, Spectral, Gilda Display, Bodoni Moda, and 15 more. Body fonts include Jost, Inter, DM Sans, Nunito, Raleway, Montserrat, Poppins, and 18 more.

Theme Settings

Buttons & Links New in 2.1.0

Found in Theme Editor → Theme Settings → Buttons & Links. Controls button colors globally without CSS edits.

ButtonSettingIDDefault
PrimaryBackgroundbtn_primary_bg#1C1410
PrimaryText colorbtn_primary_text#FAF7F2
PrimaryHover backgroundbtn_primary_hover#A07850
GhostText & border colorbtn_ghost_text#1C1410
GhostHover colorbtn_ghost_hover#A07850

Theme Settings & Sections

Header Section

The header is grouped via sections/header-group.json. It supports 5 distinct layout presets, sticky behaviour with a frosted-glass backdrop, and an optional CTA button alongside the cart / account icons.

Navigation source: The header automatically reads links from the Shopify navigation list named main-menu. Create or edit this list under Online Store → Navigation.

Theme Settings → Header

SettingIDDefault
Header backgroundheader_bg#FAF7F2
Nav link colorheader_text#2E2219
Header bottom borderheader_border#E8DFCF
Header layoutheader_layoutlogo-left

Section Settings (sections/header.liquid)

SettingIDDefaultNotes
Layout stylelayout_styleclassic5 options: classic · logo-left · logo-left-compact · centered-stacked · bold-cta
Header logologoOverrides the global logo for the header only
Logo width (desktop)logo_width150 pxRange: 60–320 px
Logo width (mobile)logo_width_mobile110 pxRange: 50–220 px
Sticky headerstickytrueFixes header to top on scroll
Frosted glassenable_blurtrueBackdrop blur on scroll
Show bottom bordershow_bordertrueDecorative 1 px bottom border
Show account iconshow_accounttrue
Show search iconshow_searchtrueLinks to the native Shopify search page
Show cart iconshow_carttrueOpens the AJAX cart drawer
Show CTA buttonshow_ctafalseOptional "Shop Now" style button in the nav
CTA textcta_textShop Now
CTA linkcta_urlDestination URL for the CTA

Theme Settings

Advanced Settings New in 2.1.0

Found in Theme Editor → Theme Settings → Advanced. Global switches and a custom CSS field.

SettingIDDefaultNotes
Enable scroll animationsenable_animationstrueDisabling removes all IntersectionObserver-driven entrance effects
Show breadcrumbsshow_breadcrumbstrueGlobal toggle for the breadcrumb on product and collection pages
Cart stylecart_typedrawerdrawer = slide-out AJAX panel · page = full cart page at /cart
Custom CSScustom_cssInjected in a <style> tag in the <head> — no file editing required

Homepage Sections

Hero Banner

Hero Core Blocks sections/hero.liquid

Full-screen editorial hero with a background image, centred copy, a floating product frame (right column), a stat strip at the bottom, and a scroll-indicator line. Supports animated entrance via .animate-up and .animate-fade.

eyebrowtextSmall eyebrow label above heading — e.g. "New Collection · Botanical Series 2025"
heading_line1textFirst line of the H1 heading
heading_line2_italictextSecond line rendered in italic (Cormorant Garamond italic)
heading_line3textOptional third heading line
subheadingtextareaHero body copy (max ~180 characters recommended)
primary_btn_texttextPrimary CTA button label — default "Discover the Collection"
primary_btn_urlurlDestination URL for the primary CTA
secondary_btn_texttextSecondary text link label
hero_imageimage_pickerFull-bleed background image (rendered at 1800 px wide)
product_imageimage_pickerHero product shot (rendered at 700 px, floated right)
product_tagtextIngredient tag below product image — e.g. "24K Gold · Bakuchiol · Hyaluronic Acid"

Blocks: Add up to 4 Stat blocks (number + label). These appear in the bottom stat strip. Default values: 12k+ Happy Devotees · 4.9 Average Rating · 98% Would Recommend · 18 Months of R&D.

Sections

Announcement Bar

Announcement Bar sections/announcement-bar.liquid

A single-line banner at the very top of the page for promotions, shipping thresholds, or new launches. Grouped inside header-group.json so it scrolls away with the header.

show_announcementcheckboxShow or hide the announcement bar
announcement_texttextBar text — default "Free Shipping on Orders Over ₹2,000 · New: Midnight Repair Mask"
Bar background and text color are controlled globally via Theme Settings → Announcement Barannouncement_bg (default #1C1410) and announcement_text (default #E8D5A3).

Sections

Marquee Bar

Marquee Bar sections/marquee-bar.liquid

An infinite-scrolling ticker strip, typically placed just below the hero. Items are separated by the · character in a single text field.

marquee_texttextAll items in one field, separated by · — default "Clean Beauty · Cruelty Free · Vegan Formulas · Dermatologist Tested · Sustainable Packaging · Rare Botanicals · Gold-Infused · Paraben Free"

Sections

Icon Strip

Icon Strip Blocks sections/icon-strip.liquid

A horizontal row of icon + heading + text pairs, typically used just below the hero or marquee bar to communicate USPs. Each block selects an icon from the library and provides a short heading and optional body text. Supports dark mode and a configurable column count.

darkcheckboxDark background variant
columnsrangeNumber of columns (default 4)

Blocks: Each item block has icon (from icon library), heading, and text. Default items: Clean Beauty · Cruelty-Free · Sustainable · Clinically Proven.

Sections

Collection Tiles

Collection Tiles Blocks sections/collection-tiles.liquid

A grid of editorial category tiles, each linking to a collection. Each tile has an optional overlay icon, a product count badge, a title, subtitle, and a CTA arrow link. Supports dark mode.

darkcheckboxRender section with dark background
eyebrowtextSection eyebrow label — default "Curated Edits"
heading_beforetextHeading text before the italic part
heading_italictextItalic part of the section heading

Tile blocks: Each tile has: image, overlay icon, count badge, title, subtitle, CTA label, and link URL.

Sections

Ingredient Spotlight

Ingredient Spotlight Blocks sections/ingredient-spotlight.liquid

A tab-driven ingredient showcase. Each ingredient block has an image, origin label, headline, body text, a list of key benefits, and a "used in" product link. Ideal for Bakuchiol, 24K Gold, or Hyaluronic Acid storytelling. Supports dark mode. Tab navigation is handled by inline JavaScript within the section.

Sections

Brand Promise

Brand Promise Blocks sections/brand-promise.liquid

A two-column brand values section. Headline + body text on the left, a vertical list of value pillars (icon + title + text) on the right. An optional stat strip below shows key metrics. Defaults to dark background.

Blocks: Value Pillar (limit 4) — icon, title, text. Stat (limit 4) — number, label. Default pillars: Clean Formulas · Cruelty-Free · Refill & Recycle · Clinically Proven.

Sections

Image with Text

Image with Text sections/image-with-text.liquid

A versatile 50/50 split section with an image on one side and editorial copy (eyebrow tag, heading, body text, CTA button) on the other. Image position (left or right) is configurable via image_right. Optional background color picker.

imageimage_pickerSection image
image_rightcheckboxPlace image on right. Default: false
tagtextEyebrow text — default "Our Story"
headingtextSection heading
texttextareaBody copy
btn_label / btn_linktext / urlCTA button
bgcolorCustom background color (optional)

Sections

Ritual / Story

Ritual / Story Blocks sections/ritual-story.liquid

A split-layout section combining a numbered step-by-step ritual guide (left) with a staggered grid of value cards (right). Steps are auto-numbered 01, 02, 03…. Value cards display with a gold dot, title, and description.

Blocks: Step (title + description) and Value Card (title + description). First two value cards go in column 1; subsequent cards go in the staggered column 2.

Sections

How It Works

How It Works Blocks sections/how-it-works.liquid

An educational section explaining the product mechanism or brand process. Supports two layout variants: cards (icon cards in a row) and timeline (vertical step list). Optionally includes a full-width image above or below the steps.

Blocks: Add step/card blocks with icon (from icon library), title, and description text.

Sections

Before / After

Before / After Blocks sections/before-after.liquid

A drag-to-compare slider component. Each block pairs a before and after image with a draggable handle. Supports mouse, touch, and keyboard (arrow keys). Fully accessible with ARIA role="slider" and aria-valuenow. Supports dark mode and an optional CTA button below.

Use square or consistent-ratio images for the cleanest results. The before image is clipped with CSS overflow: hidden as the handle moves.

Sections

Testimonials

Testimonials Blocks sections/testimonials.liquid

A grid of review cards with star ratings (via snippets/stars.liquid), quotes, customer name, title/location, and a "Verified Purchase" badge. A summary stat strip below shows aggregate review metrics.

Blocks: Testimonial (quote, name, role, rating 1–5) and Summary Stat (number + label). Default stats: 4.9 Average Rating · 2,184 Verified Reviews · 98% Would Recommend · 50k+ Bottles Sold.

Sections

UGC / Instagram Feed

UGC / Instagram Feed Blocks sections/ugc-feed.liquid

A community photo grid (3–5 configurable columns) simulating an Instagram feed. Each post has an image, caption, username, like count, a video badge, and an optional product tag link that appears on hover as an overlay CTA.

handletextInstagram handle displayed above the grid — e.g. "@aurabeauty"
columnsrangeGrid columns (3–5). Default: 4
btn_labeltextFollow button text below the grid

Sections

Lookbook Gallery

Lookbook Gallery Blocks sections/lookbook-gallery.liquid

An editorial masonry-style image gallery with optional captions. Suitable for beauty look photography, campaign imagery, or editorial lifestyle shoots. Each image block accepts an image and optional caption text.

Sections

Shoppable Hotspots

Shoppable Hotspots Blocks sections/shoppable-hotspots.liquid

A lifestyle or flat-lay image with interactive product pins. Click a pin to open a popover product card showing category, name, price, and an "Add to Bag" CTA. Pin positions are set as percentage X/Y coordinates. Closing behavior is fully handled — clicking outside or opening another pin closes the active one.

x_posrangeHorizontal pin position as % from left (5–95). Per block.
y_posrangeVertical pin position as % from top (5–95). Per block.

Sections

Bundle Builder

Bundle Builder Blocks sections/bundle-builder.liquid

An interactive step-by-step bundle builder. Customers progress through numbered steps and select products via checkboxes. A sticky summary sidebar shows selected products, calculates the bundle total, and shows savings based on a configurable discount percentage.

discount_pctrangeBundle discount percentage (0–40%, step 5). Default: 15%
summary_titletextSummary sidebar heading — default "Your Bundle"
btn_labeltextBundle CTA button label — default "Add Bundle to Bag"
disclaimertextSmall print below the CTA — default "Discount applied at checkout."
Note: The bundle builder uses as the default currency symbol in its JavaScript total display. To change, edit the var currency = '₹' line inside bundle-builder.liquid.

Sections

Product Finder Quiz

Product Finder Quiz Blocks sections/product-quiz.liquid

A multi-step skin quiz with a progress bar and animated question transitions. After the final question, a product match card is displayed with an optional product image, name, description, and CTA link. Includes a "Retake Quiz" restart button. Defaults to dark background.

Question blocks: Each block has a question and up to 4 answer options. The section settings define the result card (shared across all answers). For personalised results per answer path, this section can be extended with a JavaScript answer-tracking map.

Sections

Comparison Table

Comparison Table Blocks sections/comparison-table.liquid

A feature-by-feature comparison table for up to 4 products. Columns display image, name, price, and a CTA button, with an optional "Best Seller" highlight badge. Feature rows use smart rendering: yes / show a check icon; no / / empty show a dash; any other text renders as-is.

Blocks: Product Column and Feature Row. Feature rows have a label and values val_1val_4 corresponding to each product column.

Sections

Journal Preview

Journal Preview Blocks sections/journal-preview.liquid

A blog/editorial preview grid. Each article block has a featured image, category tag, title, excerpt, date, and read-more link. Includes optional section-level "View All" CTA. Supports dark mode.

Default articles feature content about herbal layering, REETHA for hair, and overnight skin renewal.

Sections

Promo Boxes

Promo Boxes Blocks sections/promo-boxes.liquid

Up to 3 large image-overlay promo boxes side by side. Each box has a background image, overlay gradient, eyebrow tag, title, and a CTA button. The grid adapts to 1, 2, or 3 columns based on the number of blocks added.

Sections

Press Logos

Press Logos Blocks sections/press-logos.liquid

"As Seen In" logo row. Each logo block can use an uploaded image or fall back to displaying the publication name as text. Each logo is optionally linkable. Background color is customisable via a color picker.

Default publications: Vogue · Elle · Harper's Bazaar · Allure · Marie Claire.

Sections

Newsletter

Newsletter Blocks sections/newsletter.liquid

A centered email signup section with a decorative icon, heading, benefit perk chips, email input, and a submit button. Uses the native Shopify customer form — no third-party app needed. Displays a success message upon submission.

eyebrowtextSection eyebrow — default "The Inner Circle"
heading_line1 / heading_italictextTwo-part heading — defaults "Beauty" + "Elevated"
placeholdertextInput placeholder — default "Your email address"
button_texttextSubmit button — default "Join Now"
disclaimertextSmall disclaimer below the form

Perk blocks: Add perk blocks — each with a short label. Default perks: 10% Off First Order · Early Access · Expert Skincare Tips.

Submitted emails are automatically tagged with newsletter in your Shopify Customers list for easy segmentation.

Sections

Video Section

Video sections/video-section.liquid

Embeds a YouTube or Vimeo video in a responsive 16:9 iframe. Paste the full video URL — the section automatically extracts the video ID for both platforms. Autoplay (muted) can be toggled. Optional eyebrow tag and heading above the video.

Autoplay Note: Autoplay is set to muted per browser autoplay policies. Unmuted autoplay will not work in modern browsers.

Sections

Countdown Banner

Countdown Banner sections/countdown-banner.liquid

A full-width urgency banner with a live countdown timer (hours, minutes, seconds). Configure the target date via a date field, plus optional promotional message, tag, subtext, and CTA button. Supports dark mode.

Sections

FAQ Accordion

FAQ Accordion Blocks sections/faq-accordion.liquid

An accessible accordion FAQ using the native HTML <details> element for no-JS accessibility with enhanced styling. Each block provides a question and rich-text answer.

Sections

Custom HTML

Custom HTML sections/custom-html.liquid

A free-form HTML block for embedding third-party widgets, trust badge scripts, custom banners, or any markup not covered by existing sections. Content is rendered with {{ section.settings.custom_html }}.

Templates

Template Files

The theme ships with templates for all core Shopify pages plus 5 named product templates pre-configured for specific SKUs. JSON templates allow OS 2.0 drag-and-drop customisation; Liquid templates contain bespoke page layouts.

🏠
Homepage
templates/index.json
🧴
Product (default)
templates/product.json
🧴
Face Wash
product.face-wash.json
🌿
Herbal Face Wash
product.herbal-face-wash.json
💆
Herbal Hair Mask
product.herbal-hair-mask.json
🚿
Herbal Hair Shampoo
product.herbal-hair-shampoo.json
Herbal Ubtan Mask
product.herbal-ubtan-face-mask.json
🗂️
Collection
templates/collection.liquid
🛒
Cart
templates/cart.liquid
📄
Page
templates/page.liquid
🔍
Search
templates/search.liquid
👤
Account
customers/account.liquid
🔐
Login
customers/login.liquid
404
templates/404.liquid
Named product templates: To assign a named template to a product, go to the product in Shopify admin and change the Theme template field (under Online Store) to the matching template name (e.g. herbal-face-wash).

Templates

Product Page Section

Product Information sections/main-product.liquid

The full product page section with a media gallery (thumbnails + main image), breadcrumb, star rating (via product metafields), variant selector, quantity input, Add to Bag button, trust strip, and a tabbed accordion for Description / Ingredients / How to Use / Shipping.

FeatureDetail
Gallery layoutThumbnail strip (left) + main image. Clicking a thumbnail updates the main image via JavaScript.
Variant selectorButton-style variant selector (not a dropdown). Selected variant is highlighted with an active state.
Add to bagAJAX form submission via action="/cart/add" triggering the cart drawer on success.
Star ratingReads from product.metafields.reviews.rating and reviews.rating_count. Requires a ratings metafield or reviews app.
BreadcrumbCollection → Product. Toggle globally via Theme Settings → Advanced → show_breadcrumbs.
Accordion tabsDescription, Ingredients (rich text), How to Use, Shipping Info.
Mobile sticky ATCSticky "Add to Bag" bar shown on mobile once the inline button scrolls off screen.
Schema markupFull Product JSON-LD with name, URL, image, description, SKU, price, and availability.

Templates

Cart Page

The theme has two cart experiences, switchable via Theme Settings → Advanced → Cart style.

🛒
Cart Page

Standard Shopify cart page at /cart. Shows line items with image, title, variant, quantity stepper, and line total. Includes order summary with subtotal, shipping note, and Checkout button.

templates/cart.liquid
📤
Cart Drawer (AJAX)

Opens as a side panel from any element with data-cart-trigger. Fetches /cart.js and renders dynamically. Supports quantity updates and item removal without page reload. Floating Bag button shows live item count.

lumiere.js

Templates

Homepage Template

The homepage (templates/index.json) ships pre-configured with a curated editorial layout. The default section order is:

#SectionKey Default Content
1HeroStats: 12k+ Happy Devotees · 4.9 Average Rating · 98% Would Recommend · 18 Months of R&D
2Marquee Bar"Clean Beauty · Cruelty Free · Vegan Formulas · Dermatologist Tested · Sustainable Packaging · Rare Botanicals · Gold-Infused · Paraben Free"
3Press LogosVogue · Elle · Harper's Bazaar · Allure · Marie Claire
4Icon StripClean Beauty · Cruelty-Free · Sustainable · Clinically Proven
5Collection TilesSoft & Glowing Skin (Herbal Face Care) · Silky & Strong Hair (Herbal Hair Care)
6Featured CollectionLinked to frontpage collection — 4 products
7Featured Spotlight24K Gold Radiance Serum — disabled by default, enable in Theme Editor
8Image with Text"Beauty as a daily devotion" brand story
9Ritual / Story3 ritual steps + 4 value cards
10Brand PromiseDark bg · 4 pillars · 4 stats
11Testimonials3 reviews + 4 summary stats
12Journal Preview3 article blocks — Rituals, Ingredients, Wellness
13Newsletter3 perk chips — 10% Off · Early Access · Expert Skincare Tips

Snippets

Snippets Reference

icon.liquid

Renders an inline SVG by name. Takes name (required) and size (optional, default 24). Contains 35+ custom-drawn icons. Unrecognised names fall back to sparkle.

render 'icon', name, size
stars.liquid

Renders a star rating row. Takes rating (1–5) and optional size. Used by Testimonials and the Product Page.

render 'stars', rating, size
🧴
product-card.liquid

Renders a single product card with image, title, price, and a quick-add button. Used by the Featured Collection section. Respects the card_show_ratings and card_show_vendor global settings.

render 'product-card'
product-card-placeholder.liquid

Renders a styled placeholder card when no product image is available. Maintains grid layout consistency.

render 'product-card-placeholder'

JavaScript — lumiere.js

Cart Drawer

The AJAX cart drawer is the centrepiece of assets/lumiere.js. It uses event delegation for robustness — any element with data-cart-trigger will open the drawer, and any element with data-cart-close will close it.

Function / EventDescription
openDrawer()Adds .is-open to #cart-drawer, sets aria-hidden="false", adds .drawer-open to body, calls renderDrawer()
closeDrawer()Removes classes and resets aria state
renderDrawer()Fetches /cart.js, builds HTML for each line item, updates the footer with subtotal and checkout button, syncs FAB and header cart counts
data-cart-triggerAttribute on any element (FAB, header bag icon) to open the drawer on click
data-cart-closeAttribute on overlay and close button to close the drawer
Quantity changeDelegated listener on #cart-drawer-body for [data-qty-change] — PATCHes to /cart/change.js and re-renders
Escape keyCloses the drawer on keydown Escape

JavaScript — lumiere.js

Header Scroll Behaviour

The header scroll logic uses an IntersectionObserver to watch the hero section and adds a .scrolled class to #site-header once the hero leaves the viewport, triggering the frosted-glass background.

// Behaviour controlled by .scrolled class on #site-header
// CSS in lumiere.css:
// .site-header.scrolled {
//   background: rgba(250,247,242,.85);
//   backdrop-filter: blur(12px);
// }

JavaScript — lumiere.js

Scroll Animations

AuraBeauty uses a lightweight IntersectionObserver-based animation system. Elements with the classes below are revealed as they enter the viewport. Animations can be globally disabled via Theme Settings → Advanced → enable_animations.

ClassAnimationUsage
.animate-upTranslate Y + fade in (0.6s ease)Hero heading, hero CTA, section cards
.animate-up--d1Same with 100ms delayHero heading line 2
.animate-up--d2Same with 200ms delayHero subheading
.animate-up--d3Same with 300ms delayHero CTA buttons
.animate-up--d4Same with 400ms delayHero stat strip
.animate-fadeOpacity fade in only (0.8s ease)Hero product image frame
Accessibility: All animations respect prefers-reduced-motion. Users with reduced motion enabled see elements immediately without transitions.

Support

Credits & Support

🏷️
Theme Information

Name: AuraBeauty Luxury
Version: 2.1.0
Author: Adbeats Media
Platform: Shopify OS 2.0
Preset: AuraBeauty Luxury

💬
Support & Documentation

Docs: adbeatsmedia.com/themes/aurabeauty/documentation
Support: adbeatsmedia.com/themes/aurabeauty/support

🖋️
Fonts Used

Cormorant Garamond (Google Fonts) — Default headings
Jost (Google Fonts) — Default body & UI
Both switchable via Theme Settings → Typography

🌐
No Dependencies

AuraBeauty has zero third-party JavaScript dependencies. All functionality is vanilla JS — no jQuery, Alpine, or external libraries required.

AuraBeauty Luxury Theme

v2.1.0 · Adbeats Media · Shopify OS 2.0