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 Dosage guide 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 contraindications 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 Contraindications 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

Dosage guide section (sections/dosage-guide.liquid)

An evidence-based dosage reference panel with two modes — per-serving guidance or a body-weight calculator — closed by a healthcare-professional caveat. Designed to replace or complement generic dosage instructions in your product description.

What it does

• Per serving (the default) renders your serving-size guidance as a single row in a supplement-facts-style panel — for example "200mg — Take 1 capsule daily with food"
• Body weight calculator mode replaces that row with a numeric body-weight input. It multiplies the weight the customer types by the section's own Dosage per kg setting and shows the result in mg. 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 explains the formula: "We multiply your body weight in kilograms by 5 mg per kg to suggest a starting amount"
• Above the Maximum weight you set, a non-clinical warning surfaces: "Do not exceed the stated daily intake shown on the product label."
• Both modes close with the same caveat, which always renders and needs no setting: "This guide is informational only. Talk to a healthcare professional for personalized advice."

Schema settings

Setting	Type	Default	Description
color_scheme	color_scheme	scheme-1	Section background
subheading	text	—	Eyebrow line above the heading
heading	text	Dosage guide	Section heading
supporting_text	text	—	Lede paragraph under the heading
dosage_mode	select	Per serving (recommended)	Per-serving guidance, or the body-weight calculator
serving_size_text	text	—	Serving-size guidance shown in per-serving mode
related_article_handle	article	—	Optional blog post to link from the section
dosage_per_kg	number	5	Milligrams per kilogram used by the calculator
max_weight_kg	number	200	Above this weight the calculator surfaces an extra caveat
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 → Dosage guide → 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"	"MedicalRecommendation: take X for Y"

The enable_structured_product_usage_data setting is false by default. Leave it false unless you have completed a jurisdiction-specific compliance review — see Schema settings reference below.

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

The Routine Builder 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.

What it does (Routine Builder)

• 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
• Renders as a timeline of connected step cards, or as a grid — your choice in the Layout setting. Up to 6 steps per section
• Link a step to a product and it renders a compact product card with the price, which takes the customer through to the product page
• A claims disclaimer prints under the timeline

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 page.how-to-use.neart template leads with.

Steps mode: each block defines one numbered instruction step with: step number, heading, instruction body (richtext), optional supporting image.

Schema settings

Setting	Type	Default	Description
color_scheme	color_scheme	—	Section background
heading	text	Your daily routine	Section heading
subheading	text	—	Eyebrow line above the heading
supporting_text	text	—	Lede paragraph under the heading
claims_disclaimer	textarea	(see below)	Disclaimer printed below the routine; clear it to hide the line
layout	select	Timeline	Timeline or grid

The claims disclaimer ships with wording in place: "Individual results may vary. Food supplements are not intended to diagnose, treat, cure or prevent any disease." Edit it to match your market, or clear the field to drop the line entirely.

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 weight the customer types by the section's Dosage per kg 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 whether the theme emits structured product usage data in the JSON-LD output. Default: false. Leave it false unless:

1. You have a written compliance review confirming your product qualifies as a medicinal device or prescription-adjacent product in your jurisdiction
2. You have reviewed MHRA Borderline Medicines guidance (UK/IE) and FDA 21 CFR guidance (US)

For the vast majority of food-supplement merchants (EU FSD, MHRA Category A/B), the default Product + additionalProperty JSON-LD is correct and safer.

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. This is Theme Store-safe and avoids triggering enhanced medical-content scrutiny.

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 guide, 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 guide page: Create page, assign the page.dosage.neart template, handle dosage.
2. Ingredients page: Create page, assign the page.ingredients.neart template, handle ingredients. Add ingredient blocks for your product formulations.
3. How-to-use page: Create page, assign the page.how-to-use.neart 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

Dosage display mode defaults to Per serving (recommended) for good reason: weight-based dosing implies a clinical/medicinal presentation for most vitamins and minerals (magnesium, vitamin D, zinc), where fixed per-serving directions are the standard. Switch to Body weight calculator (ergogenic products only) for products where weight-based dosing is scientifically supported — creatine loading, beta-alanine, protein intake targets. Using it across every supplement creates a borderline-medicinal appearance that risks regulatory scrutiny.

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

Unless you have completed the jurisdiction-specific compliance review described in Schema settings reference above, leave this setting false. The default Product + additionalProperty JSON-LD schema emits dosage data safely via structured data without triggering enhanced medical-content scrutiny from Google and Facebook.

Pre-submission checklist

Shopify Theme Store checklist (Neart-specific)

• [ ] At least 4 products with uisce_neart.timing and uisce_neart.ingredients populated
• [ ] Dosage guide page has a Dosage display mode chosen, with Serving size guidance filled in for per-serving mode or Dosage per kg set for calculator mode
• [ ] 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) unless compliance-reviewed
• [ ] Page dosage uses the page.dosage.neart template
• [ ] Page ingredients uses the page.ingredients.neart template
• [ ] Page how-to-use uses the page.how-to-use.neart 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:

• sections.dosage_guide.healthcare_caveat — "This guide is informational only. Talk to a healthcare professional for personalized advice." Renders under the panel in both modes.
• sections.dosage_guide.warning_above_range — "Do not exceed the stated daily intake shown on the product label." Surfaces when a customer enters a body weight above your Maximum weight.

Market-specific wording — EU Food Supplement Directive, MHRA borderline products, US DSHEA — is yours to add. Put it in the Routine timeline's Claims 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.