Neart

A soft, calming design for wellness, spa, and self-care brands.

Who it's for

Wellness products, spa services, skincare, aromatherapy, yoga studios, meditation apps, and self-care brands. If your store helps people slow down and feel good, Neart sets the right mood.

The vibe

Warm taupe and lavender tones. The palette is deliberately quiet — soft backgrounds, muted buttons, and gentle accents that create a sense of calm. The serif heading font adds understated luxury. Nothing shouts. Everything breathes.

Color schemes

Neart includes four color schemes. You can use any of them on any section, and edit the colors at any time.

Scheme 1 — Light

Heading text

Body text sample

Button

Scheme 2 — Dark

Heading text

Body text sample

Button

Scheme 3 — Accent

Heading text

Body text sample

Button

Scheme 4 — Bold

Heading text

Body text sample

Button

Font pairing

Role	Font	Weight
Headings	Lora	Bold (700)
Body	Nunito Sans	Regular (400)

Lora is a warm, balanced serif with moderate contrast — refined without feeling fragile. Nunito Sans is warm and rounded for easy reading. Together they feel elegant without being pretentious.

Recommended sections

These sections are a natural fit for Neart's calming aesthetic:

• Parallax — A full-width atmospheric image to set the mood
• Image with text — Your brand philosophy or founder's story
• Featured collection — Signature products with room to breathe
• Testimonials — Customer transformation stories
• Rich text — Ingredient philosophy or sourcing story
• Newsletter — Wellness tips and exclusive offers

Catalog size

Best for small to medium catalogs (10–150 products). The intimate, editorial design works best when each product gets space to shine.

Live demo — Neart preset homepage

---

Target merchant profile

Celtic for "strength" — Neart is the clean, science-backed wellness preset for Shopify merchants selling supplements, sports nutrition, and natural health products. The pulse-rhythm visual signature (a small accent dot that beats gently beside niche section headings, and holds still for customers who ask for reduced motion) conveys vitality and science — right for supplement brands competing against Myprotein, Holland & Barrett, and direct-to-consumer nutrition brands on Shopify.

Neart serves merchants who:

• Sell dietary supplements, vitamins, minerals, protein, adaptogens, or botanical extracts
• Operate direct-to-consumer in EU, UK, or international markets
• Publish ingredient transparency, dosage guidance, and evidence-based content
• Offer routine/stack compositions (morning stack, pre-workout stack, recovery routine)

Supplement brands, sports-nutrition retailers, and natural-health direct-to-consumer businesses with 10–200 SKUs. Revenue model: strong subscription/repeat-purchase on consumables; customer education (ingredient quality, dosage, evidence) is the primary differentiation vs commodity competitors.

Visual signature details

The Neart preset loads assets/preset-neart.css when settings.preset is neart. This CSS:

• Applies the pulse-rhythm motif — a small accent dot that sits inline at the end of the Usage calculator and Routine timeline headings, breathing between 50% and 85% opacity on a slow four-second cycle
• Washes the niche section backgrounds with a soft accent gradient, and gives ingredient cards a rounded surface that lifts on hover
• Reduced-motion guard: under @media (prefers-reduced-motion: reduce) the pulse animation is cancelled and the dot rests at a steady opacity — customers who have set reduced motion in their OS accessibility settings see a still dot. This is required for WCAG 2.1 AA 2.3.3 compliance.

Header signature — calm science-led wellness chrome

The header (a shared component across all presets) wears Neart's strength signature in its quietest register — measured, grounded vitality, not gym-bro force. It is loaded from assets/neart-visual.css. The palette is warm sand-stone and umber with one calm vital-green accent — not neon green:

• Sand-stone frosted bar — a warm sand-stone chrome (backdrop-filter: blur(16px)), calm and grounded. On the homepage hero it carries a warm-stone umber scrim; on scroll it settles to solid sand-stone with a soft sand-toned shadow.
• Vital-pulse underline — each nav link grows a 3px sand-stone → vital-green gradient underline wrapped in a calm vital-green pulse glow. It drives in from the start edge while thickening to full mass (scaleX from transform-origin: inline-start combined with a scaleY weight-gain) — like a measured load-bar taking weight. No other preset combines drive-in and thicken.
• Vitality-capsule affordances that steady — at rest the icon controls are bare; on hover/focus they become fully-rounded capsules (the supplement-capsule shape) that steady on a grounded double-ring — an outer vital-green halo plus an inset calm ring — coming to rest centred with a subtle settle (not a lift, seat-down, or heat-up).
• Vital-green cart badge — the item-count bubble is vital-green with linen-light digits.
• Grounded-ritual mobile drawer — the panel opens onto a warm sand-stone surface with a thin vital-green steady hairline at the top (the daily-ritual cue) and a vital-green leading edge.

The signature is decoration only — colour, border, blur, and the underline animation. It adds no menus; your navigation comes from your Shopify menu. It is right-to-left safe (the vital-pulse drives in from the logical start, with an explicit mirror for right-to-left) and reduced-motion safe (the vital-pulse appears instantly when reduced motion is requested). See the Header guide for the live demo.

Ingredient list section (sections/ingredient-list.liquid)

A card-grid ingredient transparency section showing each ingredient with dosage, sourcing, and allergen information. Designed for supplement brands that want to foreground ingredient quality as a trust signal.

What it does

• Renders a grid of ingredient cards — one card per ingredient block, marked up as a <ul> with one <li> per card for list-browsing accessibility. Three columns on desktop, two on tablet, one on mobile; the count is fixed, not a setting
• Each card: ingredient name, amount and unit, dosage-form chip, sourcing line, allergen chip, and a cautions note
• The allergen chip is built from the 14 EU allergen checkboxes you tick on the block, and renders with role="img" and an aria-label for screen-reader users
• An optional Certificate of Analysis link closes the section under the grid
• The section renders from its own Ingredient blocks, so it works on any page — a standalone ingredients page, the homepage, or a product page

Schema settings

Setting	Type	Default	Description
color_scheme	color_scheme	scheme-1	Section background
subheading	text	—	Eyebrow line above the heading
heading	text	Key ingredients	Section heading
supporting_text	text	—	Lede paragraph under the heading
related_article_handle	article	—	Optional blog post to link from the section
coa_url	url	—	Link to your Certificate of Analysis PDF or page
enable_structured_product_usage_data	checkbox	false	Emit structured product usage data in JSON-LD

Where to find it in the theme editor: Sections → Ingredient list → Section settings tab.

Adding ingredient blocks

1. Click Add block → Ingredient. You can add up to 12 per section.
2. Enter the Ingredient name, the Amount (e.g., "400") and Unit (mg, g, mcg, IU, or ml), the Dosage form (capsule, softgel, tablet, scoop, sachet, drops, or gummy), and a Sourcing note (e.g., "Aquamin Magnesium, Ireland").
3. Tick every EU allergen the ingredient contains, add an allergen note for anything the checkboxes do not cover, and fill in Cautions where they apply.
4. Repeat for each active ingredient.

Allergen guidance (EU FIC / MHRA)

The EU Food Information for Consumers Regulation (EU 1169/2011) requires the 14 regulated allergens to be clearly indicated. If any ingredient contains or may contain an allergen:

• Tick the checkbox for each regulated allergen on the ingredient block — the chip is assembled from those checkboxes and uses the regulatory allergen name automatically, in every locale
• Use the allergen note for statements the checkboxes do not cover, such as "May contain traces of nuts" from shared production lines
• Do not rely solely on the chip — also include allergen statements in your product description and packaging

Usage calculator section (sections/dosage-guide.liquid)

An evidence-based reference panel with two modes — one fixed line of guidance, or a calculator — closed by a footnote you write. It is listed as Usage calculator in the theme editor; the underlying file keeps its historical dosage-guide name. Designed to replace or complement generic dosage instructions in your product description.

The arithmetic is an amount per a measure, with both units named by you, so it is not a supplement-only component. For Neart the units are milligrams per kilogram of body weight; a paint shop would set litres per m². Nothing in the base theme says "dose" — the vocabulary on your storefront is the vocabulary you type in.

What it does

• Fixed guidance (the default) renders your usage guidance as a single row in a supplement-facts-style panel — for example "200mg — Take 1 capsule daily with food"
• Calculator mode replaces that row with a numeric input labelled by your Per unit setting. It multiplies what the customer types by your Amount and shows the result in your Amount unit. For Neart that is milligrams per kilogram of body weight — reserve it for sports products where per-kg dosing is standard (creatine loading, protein targets), not for vitamins, minerals, or fixed-dose supplements
• The result sits in a role="status" live region so screen readers announce each new figure, and a visually hidden description states the formula in your own units — "5 mg / kg body weight" — rather than a sentence the theme guessed at
• Above the Maximum you set, the Caution text you wrote surfaces alongside the amount. The theme authors none of it. The amount stays on screen; the Maximum is the caution threshold, not a cap on the field.
• Both modes close with your Footnote, if you write one. The theme ships none: a component that also serves paint and fertiliser cannot assert medical advice on every store. Neart's own demo store fills it in with "This guide is informational only. Talk to a healthcare professional for personalised advice." — that wording is a good starting point.

Schema settings

Setting	Type	Default	Description
color_scheme	color_scheme	scheme-1	Section background
subheading	text	—	Eyebrow line above the heading
heading	text	How to use	Section heading
supporting_text	text	—	Lede paragraph under the heading
dosage_mode	select	Fixed guidance	One fixed line, or the calculator
serving_size_text	text	—	The guidance line shown in fixed-guidance mode
related_article_handle	article	—	Optional blog post to link from the section
amount_per_measure	number	5	The rate the calculator multiplies by
amount_unit	text	—	What the answer is measured in ("mg")
measure_unit	text	—	What the shopper measures ("kg body weight")
max_measure	number	200	Above this measure your caution surfaces beside the amount
max_measure_warning	text	—	Your caution wording. Blank ships no caution
caveat	text	—	Your closing footnote. Blank ships no footnote
enable_structured_product_usage_data	checkbox	false	Opt-in to emit structured product usage data in JSON-LD

Where to find it in the theme editor: Sections → Usage calculator → Section settings tab.

Claims safety — what wording to use and avoid

The dosage section is designed to display label-direction copy, not health claims. See the Neart support pack for the full medical-claim risk-avoidance guide. Quick reference:

Safe wording	Risky wording (avoid)
"Take 2 capsules daily"	"Treats magnesium deficiency"
"For best results, take with food"	"Clinically proven to reduce anxiety"
"Do not exceed stated daily intake"	"Doctor-recommended dose for..."
"As part of a balanced diet"	"Medical guideline: take X for Y"

The enable_structured_product_usage_data setting is false by default. What it emits, and when, is described under Schema settings reference below.

Routine timeline section (sections/routine-builder.liquid) + How-To-Use mode

The Routine timeline renders a morning-to-evening routine as a sequence of steps, each with a time label, an icon, copy, and an optional linked product. It is listed as Routine timeline in the theme editor; the underlying file keeps its historical routine-builder name.

What it does (Routine timeline)

• Each routine-step block: time-of-day label (free text — "Morning", "Pre-workout", "Before bed", whatever you type), icon (None, Sun, Moon, Coffee, Droplet, Energy, or Heart), heading, description, optional image, and an optional product picker
• On a wide screen the steps run side by side under a single hairline spine, with one filled node marking each step. The line starts at the first node and stops at the last. On a phone the spine turns on its side and runs down the edge of the screen. Choose Grid in the Layout setting to drop the spine and card the steps instead. Up to 6 steps per section
• Link a step to a product and it renders a compact, read-only product card with the price, which takes the customer through to the product page — no add-to-cart, no quantity stepper. (For a routine a shopper builds and buys, use the bundle builder instead.)
• A claims disclaimer prints under the timeline
• A timeline with no steps renders nothing at all on the storefront — no heading, no disclaimer, no empty band. The theme editor still shows the section, with a reminder to add steps, so you can find and finish it. A section holding only an app block stays visible, because the app block is real content

How-To-Use mode (via process-steps.liquid with variant: instructional)

The Process Steps section with variant: instructional renders an ordered instructional guide (semantic <ol> + <li>) for how to use a product range. It is what the how-to-use page template leads with.

Each block defines one instruction step: heading, instruction body (richtext), an optional icon and an optional supporting image. The numbers are drawn from the block order — there is no step-number field to type, so re-ordering the steps re-numbers them.

Schema settings

Setting	Type	Default	Description
color_scheme	color_scheme	—	Section background
heading	text	Your daily routine	Section heading
subheading	text	—	Labelled Eyebrow in the editor: a short kicker above the heading, set in small uppercase type. Put sentences in supporting_text instead
supporting_text	text	—	Labelled Text in the editor: lede paragraph under the heading
disclaimer	textarea	(see below)	Disclaimer printed below the routine; clear it to hide the line
layout	select	Timeline	Timeline or grid

The disclaimer ships with a deliberately neutral default — "Individual results may vary." — because the section is not a supplements component and a theme cannot know what your market requires. The Neart demo pages set the fuller supplements wording themselves, which is where that kind of copy belongs. Replace it with text appropriate to what you sell and where you sell it, or clear the field to drop the line entirely. Nothing the theme ships makes you compliant with anything.

Schema settings reference

niche_metafield_namespace setting (cart dietary-tag block)

The cart dietary-tag block carries this setting so you can repoint it if you migrate metafield conventions; it defaults to uisce_neart. The dosage guide and ingredient list sections are fixed to uisce_neart, and the two product-page blocks derive their namespace from your preset. Key metafields:

Key	Type	Used by
dosage_per_kg	number_decimal	Dosage info product-page block; Product + additionalProperty JSON-LD
timing	single_line_text_field	Dosage info product-page block timing row; Product + additionalProperty JSON-LD
ingredients	multi_line_text_field (comma-separated)	Ingredient list product-page block
dietary_tag	list.single_line_text_field	Dietary tag chips on cart lines and order line items

The dosage guide's own calculator does not read a metafield — it multiplies the measure the customer types by the section's Amount setting.

enable_structured_product_usage_data setting (dosage guide and ingredient list sections)

This optional setting on the dosage-guide section (sections/dosage-guide.liquid) and the ingredient-list section (sections/ingredient-list.liquid) gates one extra JSON-LD object. Default: false.

What it emits, exactly (snippets/medical-recommendation-jsonld.liquid):

• a MedicalGuidelineRecommendation whose guidelineSubject is a DietarySupplement — a fixed shape, whatever the product is;
• recommendedIntake.frequency from the product's uisce_neart.timing metafield, defaulting to daily;
• nothing else. uisce_neart.dosage_per_kg gates emission but its value is not emitted, and no dosage-guide section setting appears in the object.

It publishes only on a product page whose product carries that gate metafield; elsewhere it emits nothing.

Left off, the product still carries the default Product + additionalProperty JSON-LD. Whether the extra object is something your store should publish is yours to determine for your markets — the theme ships it off and does not decide for you.

Per-preset PDP blocks (Neart)

Two blocks are available in the Neart product template (listings/neart/templates/product.json):

Block handle	Description
dosage-info	Compact dosage summary — dosage per kg and suggested timing from the uisce_neart metafields
ingredient-list	Plain bulleted ingredient list, split from the comma-separated uisce_neart.ingredients metafield

Niche-specific structured data

The Neart preset extends snippets/json-ld.liquid to emit Product + additionalProperty JSON-LD for supplement products. This schema activates when the product has uisce_neart.dosage_per_kg populated.

The default output is Product with additionalProperty entries for dosage data — the same pattern used by Gaoth and Tine, and a plain product description rather than a medical one.

To validate:

curl -s "https://your-store.myshopify.com/products/magnesium-400mg" \
  | grep -A 10 '"additionalProperty"'

Demo-data setup

The scripts/populate-niche-neart.mjs provisioner creates:

• The four uisce_neart metafield definitions
• 8 supplement products (Magnesium, Vitamin D3, Omega-3, Creatine, Zinc, Ashwagandha, B-Complex, Iron) with uisce_neart metafields pre-populated (sourced from NIH/EFSA/ISSN authoritative reference data), and backfills the same metafields onto products already in the store
• Three pages — How to use, Dosage, and Ingredients — each bound to its Neart page template
• Three main-menu links: How to use, Dosage, Ingredients

It reads your store credentials from .env.stores, so the command takes no arguments:

node scripts/populate-niche-neart.mjs

Add --dry-run to see what it would create without writing anything. Re-running it produces no duplicates.

Manual setup steps

1. Dosage page: Create page, assign the dosage page template, handle dosage.
2. Ingredients page: Create page, assign the ingredients page template, handle ingredients. Add ingredient blocks for your product formulations.
3. How-to-use page: Create page, assign the how-to-use page template, handle how-to-use. Add process-steps blocks for your usage protocol.
4. Create metafield definitions for the uisce_neart keys above.
5. Review the claims disclaimer on each Routine timeline section — it ships with default wording, so edit it to suit your market.

Recommended apps

App / Type	Use case	Connection method
Recharge / Bold / Appstle Subscriptions	Subscribe & save for repeat supplement orders	Enable subscription selling plans via the app; link each routine step to a subscription product and the step's product card carries the customer through to the plan picker on that product page.
Shopify Subscriptions (native)	Basic subscription functionality (available on all Shopify plans)	Enable via Shopify Admin → Products → Selling plans; theme displays plans automatically in the product selling-plan picker.
MyFitnessPal / Apple Health / Strava	Wellness tracking integration (note: no native theme integration)	These are consumer apps used alongside the theme, not integrated. Mention them in your blog content/FAQ as part of a routine. No theme code changes needed.

Behavior callouts

Reduced motion is always respected by the Neart pulse

The pulse dot (assets/preset-neart.css) animates by default. Under @media (prefers-reduced-motion: reduce) the animation is cancelled and the dot rests at a steady opacity, so customers with reduced motion enabled in their OS settings see a still dot instead. This behavior is correct and required for WCAG 2.1 AA 2.3.3 compliance — do not remove the reduced-motion rule.

The body-weight calculator is opt-in only

Display mode defaults to Fixed guidance, which suits most products: a single printed direction is what the label carries for most vitamins and minerals (magnesium, vitamin D, zinc). Switch to Calculator where the amount genuinely scales with the person — creatine loading, beta-alanine, protein intake targets. Reaching for it on every product makes a calculation look load-bearing where the label gives one answer for everyone.

Link products to routine steps for the full experience

A step with no product linked still renders its time label, icon, heading, and description — the product card is simply left out. A Routine timeline with no steps at all renders nothing on your storefront; it shows a prompt in the theme editor only. Link each step to a Shopify product via the product picker to show prices and give customers a route through to the product page. The demo routine ships with the step copy written and no products linked, so add your own.

enable_structured_product_usage_data stays false

The default is false, and leaving it there is the right call for most stores. Off, the product still publishes Product + additionalProperty — dosage data as ordinary product attributes. On, it adds a second object that is always a MedicalGuidelineRecommendation about a DietarySupplement, whatever the product is. Turning that on is a decision about what your store asserts, and it is yours to make for your markets.

Pre-submission checklist

Shopify Theme Store checklist (Neart-specific)

• [ ] At least 4 products with uisce_neart.timing and uisce_neart.ingredients populated
• [ ] Usage calculator page has a Display mode chosen, with Usage guidance filled in for fixed-guidance mode or Amount, Amount unit and Per unit set for calculator mode
• [ ] Footnote written on every Usage calculator placement — the theme ships none
• [ ] Ingredient list has at least 3 ingredient blocks with real data
• [ ] Routine timeline has at least 3 product-linked steps with time labels
• [ ] The claims disclaimer on each Routine timeline section reads correctly for your market
• [ ] enable_structured_product_usage_data is false (default), or on deliberately and you know what it publishes
• [ ] Page dosage uses the dosage page template
• [ ] Page ingredients uses the ingredients page template
• [ ] Page how-to-use uses the how-to-use page template
• [ ] The Neart pulse dot animates on desktop and holds still under prefers-reduced-motion: reduce (test in browser Accessibility settings)
• [ ] settings.preset is set to neart in Theme settings

Google Rich Results (Neart — Product + additionalProperty JSON-LD)

curl -s "https://your-store.myshopify.com/products/magnesium-400mg" \
  | grep -A 10 '"additionalProperty"'

EU/UK regulatory notices

The dosage guide ships its own safety copy, translated into all 50 locales — you do not have to write or translate it:

• The panel's closing footnote is not a theme string any more — it is the caveat section setting, blank until you write it. Neart's demo store writes "This guide is informational only. Talk to a healthcare professional for personalised advice."; a store that leaves it blank publishes no footnote at all.
• The above-maximum caution is no longer a theme string: it is the Caution setting on the section, in your own words, and it is empty until you write it.

Market-specific wording — EU Food Supplement Directive, MHRA borderline products, US DSHEA — is yours to add. Put it in the Routine timeline's Disclaimer, in your product descriptions, or in a Rich text section on your dosage page. The Neart support pack has wording guidance for each market.