Get Started

Lumiera is a WordPress theme built for spas, massage salons, beauty and aesthetic clinics, and wellness businesses — with booking-friendly layouts, service & team showcases, and a full WooCommerce shop. This guide walks you through installing it, configuring it, and using every builder module, step by step.

Server Requirements

Lumiera is built on standard, well-supported WordPress technology. Confirm these with your host before installing.

Installation

Install the theme first, then the addons plugin — the order matters, since the theme's admin notices link directly to installing the required plugin.

1. Install the theme

1. Upload — In wp-admin, go to Appearance → Themes → Add New → Upload Theme, select lumiera.zip, click Install Now, then Activate.
2. Open the Setup Wizard — Activation does not redirect you automatically. Instead, look for either of these two entry points:
   • A "Complete Lumiera Theme Setup" notice box at the top of the Plugins page, with a blue Complete Setup button.
   • A new Lumiera item added to the main wp-admin sidebar menu (just above Posts) — click it to open the wizard directly.

2. Install the required & recommended plugins

On the Plugins step of the wizard (or any time under Appearance → Install Plugins), Lumiera lists the following:

3. Create a child theme (recommended)

Use the wizard's Child Theme step to generate one automatically. Any custom PHP snippets, hook overrides, or template edits should go in the child theme — this keeps your customizations safe when you update Lumiera.

4. Import the demo content

On the Demo Import step, pick a demo (if multiple are offered) and click Import. This installs pages, the Header/Footer/Mega Menu templates, sliders, blocks, menus, widgets and matching Steelthemes Options in one operation.

5. Finish

The Done step confirms setup and links you to Lumiera → Steelthemes Options to start personalizing your site.

Theme Options Panel & Uses

Reachable at Lumiera → Steelthemes Options in the wp-admin sidebar. This single panel controls global behaviour across the whole site, grouped into the 23 tabs below (each with its own icon in the left-hand tab list).

Layout

Found under Steelthemes Options → Layout. Controls the site's structural defaults, separate from any one page's design.

Typography

Found under Steelthemes Options → Typography.

1. Custom fonts (optional) — Enable Custom Fonts, then use the repeater to upload your own font's WOFF2/WOFF/TTF/OTF/EOT files under a name you choose. That name then becomes selectable anywhere a font-family field appears.
2. Primary / Secondary fonts — Enable each independently and set family, size, weight, style, line-height, subset, text-transform and letter-spacing.
3. Body & headings — Enable Body Typography and/or H1–H6 individually; each heading also gets a lighter mobile-only override (family and size only) so large desktop headings can shrink gracefully on small screens.

Custom Icons

Found under Steelthemes Options → Custom Icons. Lets you bring in your own icon font instead of (or alongside) the theme's built-in icon set.

1. Generate an icon font with a tool such as icomoon.io/app or fontello.com.
2. Enable Custom Icons, then upload the EOT, WOFF2, WOFF, TTF and SVG files it generates.
3. Copy the CSS definitions from that font's own style.css into the Icon CSS Definitions box (e.g. .phone:before { content: "\e900"; }).

Using an icon once it's set up

Header Builder

Headers are built as normal Elementor templates, using a dedicated Headers custom post type — not hard-coded PHP — so you can design an unlimited number of header layouts.

1. Create the header — Go to Lumiera → Headers → Add New, give it a name, and click Edit with Elementor to design it (logo, nav menu widget, icons, buttons, search, cart, etc. — all available as Elementor widgets).
2. Publish it.
3. Turn on custom headers — In Steelthemes Options → Logo / Header / Footer, switch on Header Custom Enable / Disable first — the style dropdowns below stay hidden until this is on.
4. Assign it — Use Select Header Style to pick this header as the site-wide default.

Context-specific headers

You are not limited to one header. Separate dropdowns let you assign a different header for:

Sticky header

Toggle Header Sticky Enable/Disable, then choose a (usually simplified) header design to appear once the visitor scrolls, again with separate options for archive, shop, and shop-single contexts.

Footer Builder

Footers work exactly like headers: a dedicated Footers post type, built with Elementor, then assigned globally.

1. Go to Lumiera → Footers → Add New, design it with Elementor (widget areas, links, newsletter, socials, copyright bar, back‑to‑top), and publish.
2. In Steelthemes Options → Logo / Header / Footer, switch on Footer Custom Enable / Disable first, then set Select Footer Style as the default, with separate dropdowns available for Shop Pages and Shop Single Pages.

Back to Top button

Enable/disable it, set a two/three-color gradient, and choose its screen position from the same tab.

Mega Menu

Mega menus are also Elementor-built content, attached to individual navigation menu items — so any single top-level menu item can drop down into a fully custom multi-column panel (great for showcasing service categories or featured treatments).

1. Design the panel — Go to Lumiera → Mega Menus → Add New, build the content with Elementor (columns, images, service links, promo banners), and publish.
2. Attach it to a menu item — Go to Appearance → Menus, expand the menu item you want to convert, tick Show as Mega Menu, then pick your Mega Menu template from the Select Mega Menu dropdown that appears.
3. Save the menu. That item's dropdown now renders your full-width Elementor design instead of a plain sub-menu list.

Sliders

Sliders have their own Sliders custom post type and Elementor widget, so hero/banner sliders are built visually rather than through a settings form.

1. Go to Lumiera → Sliders → Add New, name it and open with Elementor.
2. Add slides using the theme's Slider widget (each slide can hold its own image/video background, heading, text and buttons), then set transition, autoplay and navigation options in the widget panel.
3. Publish, then drop that slider anywhere — most commonly at the top of your homepage — either by inserting it as an Elementor "Template" widget, or by placing it in a header that includes a hero area.

Blocks (Reusable Elementor Sections)

The Blocks post type is Lumiera's version of "saved sections" — build a piece of content once (a CTA band, a promo strip, a testimonial group) and reuse it across many pages, editing it in one place to update everywhere it's placed.

1. Go to Lumiera → Blocks → Add New, design the section in Elementor, and publish.
2. On any Page/Post, add Elementor's Template widget (or the theme's Block widget, where available) and select the Block to insert it.

Menu Settings

Lumiera registers one primary navigation location (Primary Menu) and extends the standard WordPress menu editor at Appearance → Menus with extra per-item controls. Click a menu item to expand it and reveal these fields:

Geo Location & Delivery Settings

Lumiera Addons includes a location-based delivery/filtering system for WooCommerce: shoppers set (or auto-detect) their location in a floating panel, and the shop can filter which products are shown and calculate distance-based delivery charges.

Enabling it

1. Go to Steelthemes Options → WooCommerce Plugins and turn on Geo Filter Enable to activate the location panel and product filtering on the shop.
2. Under the same settings group, turn on Delivery options to enable distance-based delivery pricing (flat charge, radius-based tiers, and an extra surcharge beyond a base radius).

Setting product/store locations

Open any WooCommerce product for editing — a Location meta box lets you pin one or more locations (label, latitude/longitude, city) for that product by typing an address into the built-in map search (powered by OpenStreetMap/Photon, no API key required) or entering coordinates manually.

What the shopper sees

A floating panel (bottom corner, all shop-facing pages) lets the visitor:

Once set, the shop query is filtered to nearby products only (if strict mode is on), and a delivery-charge notice is shown reflecting the flat rate, the matching radius tier, or the extra surcharge for being beyond the base radius.

WhatsApp Sharing & Ordering

Lumiera includes a Share on WhatsApp button as part of the Product Builder's sharing widget. This is a share/marketing feature that opens WhatsApp with a pre-filled product title and link for the customer to send to themselves or a friend. For actual order-via-WhatsApp checkout, install the separate WhatsApp Order for WooCommerce – Lumiera plugin.

Built-in WhatsApp Sharing

1. Go to Lumiera → Steelthemes Options → WooCommerce Single Settings → Social Sharing Settings and toggle WhatsApp on. Facebook, Twitter, Skype, Telegram and Instagram can be enabled independently.
2. If you're using a custom single-product Elementor template built with the Product Builder, add the theme's Product Sharing widget and enable WhatsApp from its widget settings.
3. The Share on WhatsApp button will appear alongside the other enabled sharing icons on the product page.

WhatsApp Order for WooCommerce – Lumiera

For complete order-via-WhatsApp functionality, install the separate WhatsApp Order for WooCommerce – Lumiera plugin. It requires WooCommerce and adds a complete WhatsApp ordering system on top of Lumiera's sharing functionality.

What the plugin adds

1. Order on WhatsApp popup: Displays an order button on shop, single product, cart and checkout pages. Customers can enter their name, WhatsApp number, email and delivery address before sending the order to your store's WhatsApp number.
2. WooCommerce payment gateway: Adds Order on WhatsApp as a checkout payment method. The customer completes checkout normally and is redirected to WhatsApp with the order details pre-filled. A WooCommerce order is created with a configurable status such as Pending.
3. Multiple WhatsApp numbers: Add multiple store numbers for different departments or branches and allow customers to select the appropriate number.
4. Shareable cart links: The cart's Share on WhatsApp button can generate a link containing the complete cart, including products, variations and quantities. Opening the link automatically adds the same items to the customer's cart.
5. Order status notifications: Optionally send customers WhatsApp notifications when their order is confirmed or its status changes. Message templates can use placeholders such as {name}, {order_id} and {status}.
6. Floating WhatsApp chat: Add a configurable floating WhatsApp chat button with a custom position and label, independent of the order and sharing buttons.
7. Display rules: Restrict the buttons to logged-in users, hide the standard add-to-cart button, limit ordering to specific products or categories, display the buttons only on mobile, and customize button text, colors, padding and borders.

Setup

1. Install and activate WhatsApp Order for WooCommerce – Lumiera. WooCommerce must be installed and active.
2. Open the plugin's settings and add your WhatsApp number or numbers.
3. Configure the order and share button styles, message templates and display rules.
4. To enable WhatsApp ordering as a checkout payment method, go to WooCommerce → Settings → Payments and enable Order on WhatsApp.

Lumiera Product Builder

Found under Lumiera Product Builder in the wp-admin sidebar. This tool lets you replace WooCommerce's default single-product and shop/archive templates with your own Elementor designs, site-wide.

How it works

1. Build a single-product template — Lumiera Product Builder → Product Single Templates → Add New, design it in Elementor using the dedicated product widgets (Gallery, Title, Price, Rating, Add to Cart, Tabs, Related, Upsell, Cross-sell, Meta, Breadcrumb, Sharing, Video, 360° view, Excerpt, Data Features), then publish.
2. Build an archive/shop template the same way under Product Archive Templates, if you want a fully custom shop grid layout.
3. Activate them — go to Lumiera Product Builder → Settings, choose your published template from the Select Single Product Template and/or Select Archive Template dropdown, and click Save.

Selecting "Use Default WooCommerce Template" in either dropdown reverts that area back to the theme's built-in WooCommerce templates.

Other Shop Features

Beyond Geo Delivery, Sharing and the Product Builder, Lumiera Addons ships several standard shop-conversion features, each with its own on/off switch inside Steelthemes Options → WooCommerce tabs:

Built-in SEO Settings

Found under Lumiera → Steelthemes Options → SEO Settings. Lumiera ships its own lightweight on-page SEO module — meta tags, Open Graph, schema and an XML sitemap — so a separate SEO plugin isn't required for the basics.

What you can configure

Instagram Settings

Found under Lumiera → Steelthemes Options → Instagram Settings. Connects one or more Instagram accounts so their photos can be pulled into an Elementor Instagram Feed widget anywhere on the site.

1. Get an access token — go to developers.facebook.com/apps, create an app, add the Instagram Basic Display product, add your Instagram account as a test user, and generate a token.
2. Add the account — in the Instagram Settings tab, use the repeater to add a row: an Account Label (a friendly name, e.g. "@Lumiera Main") and the Access Token you generated.
3. Use it — add Elementor's Instagram Feed widget to any page; the account label you set appears as a selectable source in the widget's dropdown.

Posts & Pages, Explained Simply

If you're new to WordPress, here's the plain-language version of how content works in Lumiera.

Pages

Use Pages → Add New for anything static: Home, About, Contact, Services overview, Privacy Policy. Every page has a Page Attributes box where you can choose a Lumiera page template:

Click Edit with Elementor on any page to build it visually using the theme's widgets, sliders, and blocks described above.

Posts (Blog)

Use Posts → Add New for blog articles/news. Configure the blog listing layout, image sizes and single-post appearance in Steelthemes Options → Blog Settings. Posts support Featured Images, Categories, Tags, and post formats (gallery, video, quote, link, audio, etc.) that change how a post is styled in the listing.

Custom Post Types

Lumiera adds several dedicated content types for a spa/salon business, each with its own admin menu, categories/tags, and Steelthemes Options tab for archive/card styling.

The common pattern

Almost every builder-style post type (Header, Footer, Mega Menu, Slider, Block, Product Templates) follows the same three steps: 1) Add New → design it with Elementor, 2) Publish, 3) Assign/select it somewhere else (a Theme Option dropdown, a menu item field, or the Product Builder settings page). If a new template "isn't showing up," the assignment step is almost always the one that was missed.

Troubleshooting

Layout looks broken / missing icons, widgets, or WooCommerce features

The Lumiera Addons plugin isn't installed or active. Go to Plugins and confirm it's listed and active; if not, install it from lumiera-addons.zip as described in Installation.

Elementor widgets from the theme are missing

Confirm both Elementor and Lumiera Addons are active and up to date, then hard-refresh the Elementor editor. Elementor caches its widget list — under Elementor → Tools → Regenerate CSS & Data often resolves widgets that "disappeared" after an update.

Header/Footer/Mega Menu/Slider/Block edits aren't showing on the live site

1. Confirm the item is Published, not Draft.
2. Confirm it's actually selected in the relevant place (Steelthemes Options dropdown, menu item field, or Product Builder settings) — publishing alone doesn't assign it.
3. Clear any page-caching plugin and your browser cache.

Demo import fails or stalls partway through

Almost always a hosting resource limit. Ask your host to raise max_execution_time, memory_limit, and upload_max_filesize (see Server Requirements), then try again — the importer can usually resume rather than starting over.

Geo Location panel doesn't detect the visitor's location

Browser geolocation only works over HTTPS. If your site is on HTTP, the auto-detect button will silently fail — install an SSL certificate, or have shoppers use the address search field instead.

Mega Menu dropdown shows blank / empty

The linked Mega Menu template is either unpublished or was deleted. Re-check Appearance → Menus → the menu item → Select Mega Menu and pick a currently published template.

Product Builder template not applying to a specific product

Remember the Product Builder assignment is global (all products / all archives use the same chosen template) — it's not per-product. If one product needs a different layout, override it directly on that product with Elementor's page-level template option instead.

Changes to Steelthemes Options don't seem to save or apply

Rule out a caching plugin (server-side or CDN-level) serving a stale version of the page. Also check for JavaScript errors in the browser console on the options screen, which is usually caused by a conflicting plugin.

General update checklist before contacting support

• WordPress, PHP, Elementor, Lumiera, and Lumiera Addons are all on their latest versions.
• Deactivate other plugins one by one to isolate a conflict.
• Switch to a default WordPress theme temporarily to confirm whether an issue is theme-related or site-wide.
• Check Tools → Site Health for flagged PHP/server issues.

FAQ

Do I need Elementor Pro?

The free Elementor plugin plus Lumiera Addons covers the theme's own headers, footers, mega menus, sliders, blocks and product templates. Elementor Pro is only needed if you want its own extra widgets/features on top of what the theme already provides.

Can I use both WooCommerce and Fluent Cart?

The setup wizard has you choose one eCommerce engine during setup; pick whichever matches how you plan to sell online.

Will theme updates overwrite my customizations?

Only if you edit the parent theme's files directly. Use the child theme generated in the wizard (or create one manually) for any custom code, and keep Header/Footer/Mega Menu/Slider/Block/Product Template edits inside their own post types — those are database content, not theme files, so they're update-safe by default.

Where do I back up my Steelthemes Options before making big changes?

Steelthemes Options → Backup & Restore lets you export your current settings to a file you can re-import later or move to another install.