Lumae — theme guide
Lumae is a warm, product-first Shopify theme for beauty, wellness, and modern lifestyle brands. This guide covers initial setup, merchandising, product pages, navigation, cart behavior, and common support questions.
Getting started
After installing the theme, open Online Store → Themes → Customize.
1. Add your brand
Open Theme settings → Branding to upload a logo and favicon. If no logo is uploaded, Lumae displays the brand text configured in the same panel. Adjust the logo width until it remains legible on both desktop and mobile.
2. Set the color system
Open Theme settings → Colors. Lumae ships with a warm neutral background, dark green actions, and terracotta sale states. Every important surface uses one of the theme color settings, so merchants can rebrand the theme without editing CSS.
Maintain a contrast ratio of at least 4.5:1 for body text and 3:1 for large text, icons, focus indicators, and borders.
3. Choose typography
Open Theme settings → Typography to choose display and body fonts. The default scale uses large editorial headings with compact supporting text. Test long product and collection titles after changing fonts because character width can vary significantly.
4. Choose the cart experience
Open Theme settings → Cart and select either:
- Drawer: keeps the shopper on the current page after adding a product.
- Page: redirects the shopper to the full cart page.
Both versions support quantities, order notes, selling-plan information, discounts, unit pricing, taxes, and accelerated checkout.
Header and navigation
The header supports a logo or brand text, predictive search, Shopify’s account component, cart status, and navigation up to three levels deep.
When a top-level menu item contains children, desktop displays an image-led mega menu. Collection images are used first; if a collection has no image, Lumae falls back to the first product image. Mobile renders the same hierarchy inside an accessible drawer.
Keep top-level labels short. Use collection images with a consistent ratio for the cleanest mega-menu composition.
Homepage sections
Cinematic hero
A media-first, full-bleed opener. Select a Shopify-hosted video (muted, looping, paused automatically for reduced-motion visitors) or an image; still images breathe with a slow, cinematic drift that can be turned off. Configure the kicker, heading, supporting text, and two actions. The overlay strength keeps text readable over any footage.
Shop the ritual
Lumae’s signature merchandising section. Curate up to four steps — each a product with a step label and a short note — and shoppers add the entire ritual to the cart with one button. The section honors the cart type (drawer or page), shows the combined price, and falls back to plain product links when JavaScript is unavailable.
FAQ
An accordion of questions and answers built on native disclosure elements, so it works without JavaScript and stays fully keyboard accessible. Add up to twelve entries.
Blog posts
Surface the latest articles from any blog with image, date, title, and excerpt. While a store has no published posts, the section shows placeholder cards.
Lumae hero
The Lumae hero combines editorial copy with a product collage generated from a selected collection. Configure the eyebrow, heading, body text, two actions, and badge in the section settings. With no usable collection images, the section displays stable placeholders instead of a broken layout.
Featured collection
Choose a collection, product count, desktop and mobile columns, and whether to show a view-all action. Product cards support sale and sold-out states, unit pricing, swatches, and quick add.
Featured product
Select a product to create a complete shopping surface on any JSON template. The section supports images, hosted video, external video, 3D models, variant swatches, quantity, add to cart, accelerated checkout, app blocks, description, payment terms, and Custom Liquid blocks.
Collection list
Use collection lists for category discovery. Lumae uses each collection image, or the first product image when the collection has no image.
Image with text
Pair an image with a heading, supporting copy, and action. Test both portrait and landscape images and set the focal point in Shopify when the subject needs to stay visible across breakpoints.
Testimonials
Display customer quotes as a grid or carousel. Only publish authentic customer feedback and obtain permission before identifying a customer or company.
Newsletter
Collect email subscribers using Shopify’s customer form. Successful signups are stored in the customer list with email marketing consent.
Custom section and Custom Liquid
The Custom section accepts reusable theme blocks such as text, images, buttons, groups, spacing, and Custom Liquid. The standalone Custom Liquid section is available on every JSON template for integrations or small merchant-authored Liquid fragments.
Product pages
Product information is block-based. Vendor, title, price, variant picker, quantity, purchase actions, description, collapsible rows, SKU, share, pickup availability, app blocks, and Custom Liquid can be reordered or removed from the editor.
Breadcrumbs
Product, collection, article, blog, page, and search templates open with a breadcrumb trail. Product pages use the collection the shopper browsed from when Shopify provides it, and fall back to the product’s first collection.
Assurances
Add the Assurances block to the product template for up to three short reassurance lines — shipping, returns, or credentials. Write your own copy; the theme never invents claims.
Savings
When a product carries a compare-at price, the product page shows the percentage saved next to the sale price, calculated from the real prices.
Variants and swatches
Variant options can display as pills or dropdowns. When Shopify provides a swatch image or color, Lumae displays it with the option value. Unavailable combinations remain visible and are marked as unavailable.
Selecting a variant updates price, compare-at price, availability, SKU, pickup availability, quantity limits, URL, and associated media.
Product media
Product media supports images, hosted videos, YouTube or Vimeo videos, and 3D models. Add meaningful alt text to product images in the Shopify admin. Test products that mix different media types before publishing them.
Pickup and subscriptions
Pickup availability appears when locations and local pickup are configured in Shopify. Selling-plan selections and allocations are preserved in cart line items when a compatible subscription app supplies them.
Collections and search
Collection and search templates support storefront filtering, sorting, responsive product grids, pagination, quick add, sale states, swatch filters, and empty-result messaging.
Configure filters with Shopify Search & Discovery. When no filters are configured, the filter action remains hidden.
Predictive search in the header returns products, pages, and articles. The full search page supports sorting and filtering without removing the submitted search term.
Cart
The cart drawer and cart page support:
- Quantity changes and item removal.
- Variant and selling-plan details.
- Line-level and cart-level discounts.
- Unit prices.
- Order notes.
- Subtotal and accelerated checkout.
Taxes and shipping are described as calculated at checkout unless Shopify reports that taxes are included.
Accessibility
Lumae includes keyboard-operable menus, dialogs, filters, product options, and forms; visible focus styles; reduced-motion handling; live regions for cart and variant changes; and responsive touch targets.
Accessibility also depends on merchant content. Always provide image alt text, use descriptive link labels, maintain heading order, and recheck contrast after changing colors.
Frequently asked questions
Why are filters missing?
Install Shopify Search & Discovery and configure at least one storefront filter for the relevant market and collection.
Why does the mega menu show a product image?
The linked collection has no collection image. Add one in Products → Collections if you want to control the menu artwork explicitly.
Why is a color option shown as text instead of a swatch?
Configure a swatch color or image for that option value in Shopify. Lumae falls back to the option label when Shopify provides no swatch data.
Why is pickup availability missing?
Confirm that local pickup is enabled, inventory exists at a pickup-enabled location, and the Pickup availability block is present on the product template.
Why does Add to cart open a page instead of the drawer?
Open Theme settings → Cart and change the cart type to Drawer.
Can apps add content to the product page?
Yes. The main product and Featured product sections support Shopify app blocks. They also include Custom Liquid blocks for integrations that provide a Liquid snippet.
Support
Use the public support form linked from the Shopify Theme Store listing. Include the store URL, theme version, affected page, browser and device, steps to reproduce, and screenshots when possible.
Support requests receive an automatic confirmation. The target response time is two business days, with critical storefront bugs prioritized immediately.
Can't find what you need?
Contact Lumae support