Appearance
Usage calculator
A hairline-ruled reference panel that tells shoppers how much of your product to use. It works two ways: one fixed line you write yourself ("1 capsule with breakfast", "one coat, 4 hours between coats"), or a calculator that multiplies something the shopper measures by a rate you set.
"How much of this do I need, given how much of that I have" is one of the most common things a shop has to explain, and most shops hand-build it:
| Shop | Amount | Per |
|---|---|---|
| Supplements | mg | kg of body weight |
| Paint | litres | m² of wall |
| Fertiliser | g | m² of lawn |
| Detergent | ml | wash load |
| Pet food | g | kg of animal |
| Flooring | packs | m² |
You name both units. The section does the arithmetic and writes none of the vocabulary.
Try it
Change the settings below and watch the preview update in real time. In Calculator mode the arithmetic is live — type a measure and the suggested amount recalculates.
Storefront preview
Settings
The settings appear in this order, and the two mode-specific groups hide themselves in the mode that ignores them.
| Setting | What it does |
|---|---|
| Color scheme | Picks which set of colors to use for this section |
| Subheading | A small line above the heading (e.g. "Daily guidance") |
| Heading | The title of the section |
| Text | A short paragraph under the heading, for context |
| Related article | Pick a blog post to link to, for shoppers who want the reasoning behind the numbers. The link hides itself if the post is unpublished, deleted, or is the page you are already on. |
| Display mode | Fixed guidance shows one line you write yourself. Calculator asks the shopper for a measure. Default: Fixed guidance. |
| Usage guidance | The line shoppers see in Fixed guidance mode (e.g. "1 capsule with breakfast"). Shown only in that mode. |
| Amount | The rate the calculator multiplies by. Shown only in Calculator mode. Default: 5. |
| Amount unit | What the answer is measured in — "mg", "litres", "g". Shown only in Calculator mode. |
| Per unit | What the shopper is measuring — "kg body weight", "m² of wall", "wash load". It labels the input field and appears inside it. Shown only in Calculator mode. |
| Maximum | The measure above which your caution appears alongside the amount. It is a threshold, not a limit: a shopper can still type a larger number, and the calculator still answers. Shown only in Calculator mode. Default: 200. |
| Caution | Your own wording, shown beside the amount once the maximum is passed. Leave it blank and no caution appears. Shown only in Calculator mode. |
| Footnote | Your own closing line under the panel — a disclaimer, a safety note, where to get advice. Leave it blank and the panel closes without one. |
There is one more setting, Enable structured product usage data (JSON-LD), under Advanced below.
If you leave the guidance empty
In Fixed guidance mode the section has nothing to say until you write the guidance, so it hides itself on the storefront rather than publishing a "How to use" heading over an empty panel. In the theme editor it stays visible and tells you what is missing, so you can see what you are configuring. Adding an app block to the section also keeps it on the page.
Calculator mode always has something to show — the calculator — so it never hides.
Which mode should I use?
Fixed guidance suits anything with one answer for everyone: capsules and tablets, a mixing ratio printed on the tin. A calculator there would be false precision. This is the default for a reason.
Calculator suits anything where the amount scales with something the shopper has to measure — a wall, a lawn, a wash load, a person.
You can use both on one page. The Neart demo store does exactly that: a Fixed guidance panel for capsules, then a Calculator panel below it for powders.
Advanced
Enable structured product usage data (JSON-LD) — off by default.
This switch is supplement-specific, and the rest of this page is not. The calculator works for paint, fertiliser, detergent and feed; this checkbox does not. Whatever you sell, it emits one fixed shape: a MedicalGuidelineRecommendation whose guidelineSubject is a DietarySupplement. Turn it on for a tin of paint and your store publishes a dietary-supplement medical object about a tin of paint.
What it actually emits is also narrower than the name suggests:
- the frequency comes from the product's
timingmetafield, defaulting todaily; - the
dosage_per_kgmetafield is the gate, not the content — its value is never emitted; - both are read from your preset's namespace —
uisce_neart.dosage_per_kgon a Neart store,uisce_gaoth.dosage_per_kgon Gaoth, and so on. Data left under another preset's namespace is ignored, on purpose; - none of the settings on this page appear in it. The amount, the units, the maximum and your caution are page content only.
So it is not "the calculator, published". It is a separate, fixed, supplement-shaped statement, and the theme ships it off.
Two things have to be true before it publishes anything at all: the section has to be on a product page, and that product has to carry a uisce_neart.dosage_per_kg metafield. On a standalone page — which is where this section usually lives — the checkbox does nothing. The figures shoppers see always come from the section settings above, never from a metafield.
Accessibility
The calculator is built to announce itself properly, and you don't need to configure any of this:
- The result is a live region, so screen readers read out the new amount when it changes — without stealing focus from the input.
- The input describes its own formula to assistive tech, assembled from your own units, so a screen-reader user hears "5 mg / kg body weight" rather than a sentence the theme guessed at.
- The measure field declares itself as a number with a stated range — 1 up to the maximum you set — so assistive tech and the stepper arrows know what is expected. It is a declaration, not a gate: a shopper who types past the maximum still gets an amount, with the caution beside it.
- The above-maximum caution is absent from the page until it applies, so a screen-reader user hears it when it becomes true rather than reading it at every measure.
- Every word on the panel is drawn in the color scheme's text color, so it stays legible whichever of your schemes you point the section at. The accent color does the decorating: the rule under the amount, the underline on the article link, the ring around the focused field.
A note on wording
The theme writes none of the cautionary copy, and that is on purpose. It cannot know whether your measure carries a duty of care, or who a shopper should ask. Both Caution and Footnote ship blank; leave them blank and nothing appears.
If you sell something where a caution belongs, write one. The Neart demo store says "Talk to a healthcare professional" rather than "consult your doctor", in both of its panels, and that is a useful register to borrow: it points somewhere rather than instructing.
What these fields need to say — and whether anything here is sufficient — depends entirely on what you sell and where you sell it. The theme cannot know either, so it does not guess. Check the rules that apply to you, or ask someone who knows them, and write what they tell you.
How the caution is shown
Above the Maximum you set, your caution appears beneath both the measure and the amount, across the full width of the panel — not in the column beside the figure, and not in place of it. The amount stays on screen either way, because hiding it would look like the calculator had broken.
It is marked three ways, and two of them are deliberately not colour:
- a triangle and the word Caution above your sentence, both drawn in your colour scheme's own text colour — the same ink as the sentence itself, so they are exactly as readable as it is;
- a thick rule down its leading edge in the theme's amber, adjusted per scheme so it stays visible on light and dark alike;
- a faint tint behind it.
The tint is the weakest of the three on purpose. Any 10% wash of a colour over a background is a very small step — measured, about 1.05:1 on a light scheme — so it is a hint, not the marking. The shape and the word are what carry it, which is why the caution still reads as one for a shopper who cannot distinguish the amber at all.
Tips
- Write the guidance like a label, not an ad. "1 capsule with breakfast" beats "Fuel your best self daily."
- Name your units in the shopper's words. "m² of wall" reads better on the input than "m2", and it is the label the field carries.
- Keep the maximum realistic. It exists so an implausible number triggers your caution instead of passing silently. It does not stop anyone typing past it: the field stays open and the calculator keeps answering, so set it where you want the caution to start rather than where you want the shopper to stop.
- Link a related article if your figures have reasoning behind them. Shoppers who care about the amount are the ones who read.