Elaris theme documentation

Elaris is a Shopify theme for luxury and fragrance brands. This guide covers set-up, every section and setting, and the built-in features that usually need an app.

Before you edit theme code, duplicate the theme. In your Shopify admin go to Online Store → Themes, click … next to Elaris, then Duplicate. Edit the copy. If something goes wrong you can go back to the original. Theme support does not cover code changes; for custom work, we recommend hiring a Shopify Partner.

1. Getting started

1. Add the theme. Go to Online Store → Themes → Theme library, then add Elaris.
2. Open the editor. Click Customize. Use the page picker at the top to switch between templates: Home, Product, Collection and so on.
3. Set up the basics in Theme settings (the gear icon):
   • Logo: logo, mobile logo, favicon and logo width. If there is no logo image, a text logo is shown.
   • Colors: color schemes and the text color used over photography.
   • Typography: heading, body and accent fonts.
4. Build your menus in Content → Menus:
   • main-menu is used by the header.
   • footer is used by the footer menu blocks.
   • The customer account menu is customer-account-main-menu.
5. Add your policies in Settings → Policies. The footer "Policies" block lists them automatically.
6. Preview on mobile with the device toggle at the top of the editor before you publish.

2. Theme settings

Color schemes

Every section has a Color scheme setting, and you edit schemes in Theme settings → Colors. When two neighbouring sections use the same scheme, the space between them shrinks automatically so they read as one area.

3. Sections

Add these with Add section. Some sections are only offered on certain templates, as the last column shows.

These sections are already part of a template, so they aren't in the Add section list:

• Related products and Recently viewed are on the product template. Related products come from Shopify's Search & Discovery app.
• Contact form is on the Contact page template (page.contact). It has name, email, phone and message fields, and can show your email, phone, address and opening hours beside the form.

Header

• Menu style: dropdown or mega menu. Menus with a third level, or with a promo, always open as a mega menu.
• Menu promo: an image card inside a dropdown. Type the name of the top-level menu item, for example "Shop".
• Transparent header: overlays the header on the first section of the home page until the visitor scrolls.
• Search and sticky header: each can be turned on or off.
• Customer account menu: shows sign-in or the account menu, which uses Shopify's new customer accounts.

The Announcement bar sits above the header. It holds up to 5 messages, each with an optional link. Messages can rotate automatically, show arrows, and be dismissible by visitors.

Footer

• Blocks:
  • Brand: your logo or brand name, a short text, contact details (address, email, phone), social icons and "Follow on Shop". Social icons link to the profiles set in Theme settings → Social media.
  • Menu, Text, and Policies. The Policies block lists your store policies and can add extra links from a menu.
• Other options: "Follow on Shop", payment icons, policy links, a copyright line, and a band with your brand name repeated in large type across the top of the footer.
• Country/currency and language selectors appear in the footer when you sell in more than one market or language. Each can be turned off.

4. Product page

The product template is made of blocks. You can reorder, hide or add them:

• Vendor, Title, Rating: the rating needs a reviews app that writes the standard reviews.rating metafield.
• Price: shows the compare-at price, unit price, and Shop Pay Installments when eligible. A tax/shipping note is added automatically. You can show currency codes.
• Fragrance notes: top, heart and base notes.
• Variant picker:
  • Options are shown as buttons. Options with swatches set in your admin show as color or image swatches automatically.
  • Supports combined listings: choosing an option can open a different product.
• Stock counter: shows "Only N left" at or below a threshold, and optionally "In stock" above it. This needs inventory tracking turned on.
• Buy buttons:
  • Quantity, add to cart, and dynamic checkout buttons.
  • For gift cards, a recipient form: email, name, message, send date.
• Pickup availability: shows local pickup locations and stock for the selected variant.
• Complementary products: "Pairs well with". Set these up in the Search & Discovery app.
• Countdown timer, Description, Collapsible row, Text note, Share, Custom Liquid, and app blocks. A collapsible row can show its own text or the content of a page, such as your shipping page.

The section also has a sticky add-to-cart bar, which appears once the main buy button scrolls out of view, and an optional breadcrumb.

The media gallery supports:

• images, videos, YouTube/Vimeo and 3D models;
• thumbnails;
• a mobile swipe gallery.

Set an image's focal point in Content → Files. Elaris keeps the focal point visible when it crops images.

5. Collection, search and cart

• Collection filters:
  • Filters come from Search & Discovery, including color swatch and image filters.
  • Filters appear in a sidebar on desktop and a drawer on mobile.
  • Sorting and a product count are included.
  • Pagination can be numbered pages, a "Load more" button, or infinite scroll.
• Search results include products, articles and pages, and the same filters. Predictive search shows suggestions while the visitor types.
• Cart:
  • It is a drawer or a full page, set in Theme settings → Cart.
  • Discounts, selling plans (subscriptions), line-item properties, the cart note, and accelerated checkout buttons are all supported.
• Free shipping bar:
  • It shows how far the customer is from free shipping, in the cart drawer and on the cart page.
  • Turn on Theme settings → Cart → Show free shipping progress bar, then enter the Free shipping threshold in your store currency. A threshold of 0 hides the bar.
  • The bar only displays a message. You still need a matching free shipping rate in Settings → Shipping and delivery.

6. Built-in features (no app needed)

Welcome popup (email sign-up with discount code)

The popup is in the footer section group. Open Footer in the editor and select Welcome popup.

1. Create the code. In Discounts, create the code first, for example WELCOME10. Then enter that exact code in the popup.
2. Choose how visitors get the code:
   • After signing up: grows your email list. Sign-ups become customers with email marketing consent, tagged newsletter, popup.
   • Shown right away: no sign-up is needed.
3. Choose when it appears:
   • after a delay, after scrolling, or on exit intent (desktop);
   • whether to show it on mobile;
   • whether to show it on the home page only;
   • how many days to wait before showing it again.

Signed-in customers who already accept email marketing never see the popup. It doesn't show on the cart, password or customer account pages, and it waits while another dialog is open, such as the age verifier, cart drawer or quick view.

Custom product badges

1. Check that Theme settings → Product cards → Show custom badges is on. It is on by default.
2. Add a badge in either of two ways:
   • Add a product tag such as badge:New or badge:Limited edition. You can change the badge: prefix in Badge tag prefix.
   • Fill in a custom.badges product metafield (single line text, or a list of single line text).
3. Optionally, change Accent badge keywords. The default is limited, exclusive, bestseller. Badges that contain one of these words use the accent color.

A card shows up to 2 custom badges. Sale and Sold out badges are shown automatically.

Image with text

• Inset image: optional. It's a smaller framed image that overlaps the corner of the main image.
• Turning seal: a circular badge that turns slowly on the image corner.
  • Set its text in Seal text. About 30–40 characters fits best; end with a separator, for example "Aged six weeks · Sourced in Grasse · ".
  • Seal center takes a short word, year or monogram. A star shows if it's blank.
  • Turn the seal off with Show turning seal.
  • Visitors who reduce motion in their device settings see it still.
• Heading: make a word italic to show it in the accent color, for example "Perfumery as a quiet luxury".
• Steps: add Numbered step blocks.
  • They show as a timeline: a row on desktop and a vertical line on mobile.
  • Choose Roman numerals (I, II, III) or numbers (01, 02, 03) in Step numbers.
• Image position: left or right on desktop.

Hotspot spotlight

Add Hotspot spotlight from Add section. There are two presets: Scent notes (3 pins) and Brand highlight (4 pins, image beside the callouts).

1. Choose the main image. You can add a separate mobile image; it uses the same pin positions, so keep the composition similar.
2. Add up to 6 Hotspot blocks. Move each pin with its Horizontal and Vertical position sliders. Selecting a block in the editor highlights its pin.
3. Give each hotspot a label, heading, text, an optional small image, and an optional link.
4. Optionally, pick a product to show a card with its price and an add to cart button below the image.

Under Image, choose:

• the Aspect ratio and Image shape (Arch or Rectangle);
• whether to Show offset frame, a thin accent outline behind the image;
• the Hotspot style: numbers or plus icons.

Under Layout, choose:

• the Desktop layout: the image in the center with callouts on both sides, or the image beside the callouts;
• the Image position on desktop (left or right) for the side layout;
• whether to Show connector line;
• an optional Background word, shown very large and outlined behind the section. Leave it blank to hide it.

On desktop, hovering a pin highlights its callout and, if turned on, draws a connector line. On mobile, the callouts become a swipeable row, and tapping a pin scrolls to its card.

Age verifier

Add Age verifier to the footer group. Set the question, the button labels, where to send visitors who decline, and how many days to remember the answer.

Quick view and quick add

In Theme settings → Product cards:

• Quick view opens a product's details, variants and add to cart in a dialog without leaving the page.
• Quick add adds single-variant products straight from the card.

Color swatches on cards

Swatches use the colors and images you set on your product options (Products → option → swatch). Hovering a swatch previews that variant's image.

7. Languages and markets

Elaris includes English, French, Spanish, German, Italian and Arabic. Arabic uses a right-to-left layout.

• Edit storefront text in Online Store → Themes → … → Edit default theme content.
• Add more languages in Settings → Languages.

8. SEO and structured data

Elaris outputs the following automatically:

• canonical URLs;
• Open Graph and X/Twitter tags;
• structured data for Product (with variants, price, stock and reviews), Organization, Breadcrumb and Article.

Set page titles and descriptions in each product, collection or page's Search engine listing. The Structured data theme settings add your return policy to product results.

9. Frequently asked questions

How do I change the font? Go to Theme settings → Typography and choose from Shopify's font library.

The rating stars don't show. Install a reviews app that writes to the reviews.rating product metafield, such as Shopify Product Reviews, Judge.me or Okendo. Then add the Rating block to the product template.

The free shipping bar shows the wrong amount. Check that Free shipping threshold matches your free shipping rate. The threshold is a single amount: it is not converted when a customer shops in another currency. If you sell in several currencies, set it for your main market and check the free shipping rates in your other markets.

The welcome popup doesn't appear. Check each of these:

• It is enabled in the footer group.
• You aren't signed in as a customer who already accepts email marketing.
• You haven't closed it recently. Test in a private window.
• If Show on mobile is off, it won't appear on phones. If Show on the home page only is on, it won't appear on other pages.
• It never appears on the cart page.

Where do sign-ups go? To Customers, with email marketing consent, tagged newsletter, popup.

How do I show different images for each color? Assign a variant image to each variant. The gallery and swatches switch to it automatically.

Can I add an app block? Yes, in the product information section and the featured product section: use Add block → Apps. For anywhere else, apps that offer embeds are turned on in App embeds in the editor sidebar, and the Custom Liquid section or block can hold an app's code snippet.

How do I update Elaris? When an update is available, Online Store → Themes shows a notice. Updating creates a new copy that keeps your settings and content. Review the copy, then publish it. Code edits you made to the old copy are not carried over.

How do I get help? Read our support policy and contact us. We reply within 2 business days.