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 (subtle animated SVG motif with a mandatory prefers-reduced-motion guard) 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 a pulse-rhythm SVG motif — a decorative waveform element behind niche-anchor section headings (.niche-anchor--neart selector)
• Reduced-motion guard is mandatory: The SVG animation is wrapped in @media (prefers-reduced-motion: no-preference) — customers who have set prefers-reduced-motion: reduce in their OS accessibility settings see a static motif. This is required for WCAG 2.1 AA 2.3.3 compliance.
• Clean sans-serif heading weight, high contrast, wide spacing — science-forward, not lifestyle-editorial

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 CSS grid of ingredient cards — one card per ingredient block
• Each card: ingredient name, dosage per serving, sourcing/origin note, allergen chip (optional), function/benefit (richtext), optional "Learn more" link
• Allergen chip renders with role="img" and an aria-label for screen-reader users
• Ingredient list is semantic HTML (<ul> + <li> per card for list-browsing accessibility)
• The section reads ingredient data from product metafields via uisce_neart.ingredients (JSON array) when linked to a product, or from section blocks for editorial/standalone use

Schema settings

Setting	Type	Default	Description
heading	text	—	Section heading
subheading	richtext	—	Introductory copy
columns_desktop	range 2–4	3	Grid columns on desktop
show_allergen_chip	checkbox	true	Show allergen warning chip when allergen data present
niche_metafield_namespace	text	uisce_neart	Namespace prefix for ingredient metafields
color_scheme	color_scheme	scheme-1	Section background

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

Adding ingredient blocks

1. Click Add block → Ingredient.
2. Enter: Ingredient name, Dosage per serving (e.g., "400mg"), Sourcing note (e.g., "Aquamin Magnesium, Ireland"), Allergen (optional — e.g., "Contains milk"), Function/benefit (richtext — 1–2 sentences), optional link URL.
3. 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:

• Add the allergen chip text to the block (e.g., "Contains soy", "May contain nuts")
• The chip text must use the regulatory allergen name (e.g., "Celery", not "Celery extract")
• 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 section with a serving-size calculator, structured dosage instructions, and a claims-safe disclaimer slot. Designed to replace or complement generic dosage instructions in your product description.

What it does

• Renders structured dosage instructions: dosage form, serving size, servings per container, directions (when to take, with food?, cycle length)
• Optional body-weight calculator mode: merchant can enable an advanced calculator input (body weight in kg) for products where weight-based dosing applies (e.g., creatine loading, protein per kg). This mode is opt-in and limited to eligible products — it should not be used for vitamins, minerals, or fixed-dose supplements
• role="status" aria-live region announces the calculated result for screen readers (e.g., "Based on 70 kg: take 2 capsules (400 mg)")
• Disclaimer slot: every dosage section includes a non-advisory safety copy block using sections.dosage_guide.disclaimer_text locale key — default text: "Follow the product label. Do not exceed the stated daily intake."

Schema settings

Setting	Type	Default	Description
heading	text	—	Section heading
serving_size	text	—	Serving size label (e.g., "2 capsules (400 mg)")
servings_per_container	number	—	Servings per container for context
dosage_form	text	—	Form descriptor (e.g., "Capsule", "Powder", "Softgel")
directions	richtext	—	When to take, with food, timing instructions
enable_weight_calculator	checkbox	false	Show the body-weight dose calculator (eligible products only)
weight_calculator_label	text	—	Label above weight input (e.g., "Your body weight (kg)")
max_daily_servings	number	4	Maximum daily servings cap (safety upper limit)
disclaimer_text	richtext	—	Safety/claims disclaimer text (non-advisory copy required)
niche_metafield_namespace	text	uisce_neart	Namespace prefix for dosage metafields
enable_structured_product_usage_data	checkbox	false	Opt-in to emit structured product usage data in JSON-LD
color_scheme	color_scheme	scheme-1	Section background

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 structured morning/evening/workout stack display with product-linked slots, timing labels, serving cues, and optional compatibility notes.

What it does (Routine Builder)

• Each routine-step block: daypart label (Morning / Pre-workout / With meals / Evening / custom), linked product picker, serving cue (e.g., "1 scoop in water"), timing notes (e.g., "30 min before training"), optional dietary badges (Vegan / Dairy-free / etc.), optional compatibility/stacking note
• Renders as a visual step sequence (ordered list pattern, not decorative waveform)
• Stack slots are product-linked via product picker: clicking a slot navigates to the product PDP
• Compatible with subscription selling plans: if the linked product has a selling plan, the slot shows a "Subscribe & save" nudge badge (if show_subscription_nudge is enabled in settings)

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. This is the how-to-use template on the page.how-to-use.neart.json page.

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
heading	text	—	Section heading
show_subscription_nudge	checkbox	false	Show Subscribe & save badge on slots with selling plans
claims_disclaimer	richtext	—	Mandatory disclaimer below the routine (e.g., "Individual results may vary. This routine is for general guidance.")
color_scheme	color_scheme	scheme-1	Section background

Schema settings reference

niche_metafield_namespace setting

Default: uisce_neart. Key metafields:

Key	Type	Used by
dosage_per_kg	number_decimal	Dosage guide weight calculator (eligible products only)
timing	single_line_text_field	Dosage guide directions, routine-builder timing
ingredients	json	Ingredient list section

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 (templates/product.neart.json):

Block handle	Description
dosage-info	Compact dosage summary from uisce_neart.* metafields on the PDP
ingredient-list	Inline ingredient card list from 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:

• 6–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)
• A dosage guide page, an ingredients page, a how-to-use page, a routine-builder demo page
• Header navigation: Home, Products, Our Ingredients, Dosage Guide, How to Use, Routines, About, Contact
• Footer Quick Links: Dosage guide, Ingredients, Our routines, FAQ, Privacy

STORE_PRESET=neart SHOPIFY_STORE=your-neart-store.myshopify.com \
  SHOPIFY_ACCESS_TOKEN=shpat_xxxx \
  node scripts/populate-niche-neart.mjs

Manual setup steps

1. Dosage guide page: Create page, assign page.dosage.neart template, handle dosage.
2. Ingredients page: Create page, assign page.ingredients.neart template, handle ingredients. Add ingredient blocks for your product formulations.
3. How-to-use page: Create page, assign page.how-to-use.neart template, handle how-to-use. Add process-steps blocks for your usage protocol.
4. Create metafield definitions for uisce_neart.* keys above.
5. Add claims_disclaimer to all dosage and routine-builder sections — this is mandatory for regulatory compliance in all markets.

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; the Routine Builder shows subscription nudge badges automatically when show_subscription_nudge is true.
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 guard is always active for Neart pulse animation

The animated pulse-rhythm motif (assets/preset-neart.css) is inside a @media (prefers-reduced-motion: no-preference) block. Customers with prefers-reduced-motion: reduce enabled in their OS settings will see a static SVG motif. This behavior is correct and required for WCAG 2.1 AA 2.3.3 compliance — do not remove the reduced-motion guard.

Weight-based dose calculator is opt-in only

The enable_weight_calculator setting on the dosage guide section is false by default for good reason: weight-based dosing (dose_per_kg) implies a clinical/medicinal presentation for most vitamins and minerals (magnesium, vitamin D, zinc) where fixed per-serving directions are the standard. Only enable it for products where weight-based dosing is scientifically supported (creatine loading, beta-alanine, protein intake targets). Enabling it for all supplements creates a borderline-medicinal appearance that risks regulatory scrutiny.

Routine Builder requires product links for full value

An empty Routine Builder (no product linked to slots) renders placeholder slot cards. To display the full stack experience, link each slot block to a Shopify product via the product picker. The provisioner seeds demo products that are already linked.

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 exists with serving_size, servings_per_container, directions all set; claims_disclaimer text present
• [ ] Ingredient list has at least 3 ingredient blocks with real data
• [ ] Routine builder has at least 3 product-linked slots with daypart labels
• [ ] claims_disclaimer is set on dosage guide and routine builder sections
• [ ] enable_structured_product_usage_data is false (default) unless compliance-reviewed
• [ ] Page dosage uses page.dosage.neart template
• [ ] Page ingredients uses page.ingredients.neart template
• [ ] Page how-to-use uses page.how-to-use.neart template
• [ ] Neart pulse animation is visible on desktop and absent on 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 Neart preset ships locale keys for supplement-specific regulatory disclosures:

• neart.disclaimer.eu_fsd — EU Food Supplement Directive disclaimer (all locales)
• neart.disclaimer.mhra_borderline — MHRA borderline products notice (en-GB locale)
• neart.disclaimer.fda_dshea — US DSHEA disclaimer ("These statements have not been evaluated by the Food and Drug Administration...")

Include at least one of these disclaimer keys on your dosage guide and ingredient list pages depending on your primary market. They are already included in the demo-data page templates.