// Blog.jsx — Blog index and post pages for StoreOn Web Solutions const ARTICLES = [ { slug: "how-to-add-supplement-facts-panel-shopify", title: "How to Add a Supplement Facts Panel to Your Shopify Product Page", category: "Compliance & Labeling", readingTime: "9 min", publishedAt: "2026-06-06", excerpt: 'If you sell dietary supplements on Shopify, you already know the problem: Shopify was not built for food. There is no native "Supplement Facts" field, no per-serving calculation engine, no compliance check.', }, { slug: "how-to-display-nutrition-information-shopify", title: "How to Display Nutrition Information on Shopify (Step-by-Step)", category: "Getting Started", readingTime: "8 min", publishedAt: "2026-06-06", excerpt: "Shopify powers over a million stores worldwide, and a growing share sell food, beverages, or dietary supplements. Yet Shopify has no built-in nutrition data fields — nutrition information is entirely a merchant problem to solve.", }, { slug: "fda-supplement-labeling-requirements-shopify-stores", title: "FDA Supplement Labeling Requirements for Shopify Stores (2026)", category: "Compliance & Labeling", readingTime: "11 min", publishedAt: "2026-06-06", excerpt: "The FDA applies the same labeling standards to dietary supplements sold online as to those sold on physical retail shelves. Your Shopify product page is a legal label — missing or incorrect information is a violation.", }, { slug: "eu-food-labeling-requirements-shopify-stores", title: "EU Food Labeling Requirements for Shopify Stores Selling to Europe", category: "Compliance & Labeling", readingTime: "10 min", publishedAt: "2026-06-06", excerpt: "If you sell supplements or food to customers in France, Germany, Belgium, Spain, or any EU member state, EU food labeling law applies to you — regardless of where your Shopify store is based.", }, { slug: "nutriscore-what-it-is-why-shopify-store-should-display-it", title: "Nutri-Score: What It Is and Why Your Shopify Store Should Display It", category: "Nutri-Score", readingTime: "8 min", publishedAt: "2026-06-06", excerpt: "Nutri-Score is a five-letter nutritional grading system — A through E — that tells consumers at a glance how a food or supplement ranks nutritionally. An A-grade product is nutritionally favorable.", }, { slug: "stop-managing-nutrition-data-in-excel-shopify", title: "How to Stop Managing Nutrition Data in Excel (For Shopify Merchants)", category: "Catalog Management", readingTime: "8 min", publishedAt: "2026-06-06", excerpt: "If you run a supplement or food store on Shopify, there is a reasonable chance you have a spreadsheet somewhere — and it is the workflow that produces incorrect Supplement Facts panels and compliance exposure.", }, { slug: "add-nutrition-information-shopify-without-developer", title: "How to Add Nutrition Information to Shopify Without a Developer", category: "Getting Started", readingTime: "7 min", publishedAt: "2026-06-06", excerpt: 'Shopify does not have a built-in nutrition panel field. The "correct" way requires a developer. Most supplement merchants do not have a developer on call — this guide covers what they can actually do instead.', }, { slug: "best-shopify-apps-supplement-nutrition-labeling", title: "Best Shopify Apps for Supplement and Food Nutrition Labeling (2026)", category: "App Reviews", readingTime: "9 min", publishedAt: "2026-06-06", excerpt: "If you sell dietary supplements, protein powders, or functional foods on Shopify, you have discovered the gap: no native Supplement Facts field, no nutrition panel widget, no compliance validation.", }, { slug: "how-to-bulk-update-nutrition-data-shopify", title: "How to Bulk Update Nutrition Data Across All Shopify Products", category: "Catalog Management", readingTime: "7 min", publishedAt: "2026-06-06", excerpt: "Supplement merchants hit a specific wall the moment they try to scale: Shopify has no native bulk editing tool for nutrition data. A formula change touching 20 products means 20 individual description edits.", }, { slug: "supplement-facts-vs-nutrition-facts-shopify", title: "Supplement Facts vs Nutrition Facts: What Shopify Merchants Need to Know", category: "Compliance & Labeling", readingTime: "8 min", publishedAt: "2026-06-06", excerpt: 'Walk into any supplement store and you will see two different panel headers: some say "Nutrition Facts," others say "Supplement Facts." They look almost identical, but using the wrong one is a federal labeling violation.', }, { slug: "nutrition-data-shopify-product-variants", title: "How to Handle Nutrition Data for Shopify Product Variants (Different Flavors, Sizes)", category: "Catalog Management", readingTime: "7 min", publishedAt: "2026-06-06", excerpt: "Vanilla protein powder and chocolate protein powder are the same product in Shopify — one record with two variants. But they are not the same product nutritionally, and displaying one panel for both is a compliance problem.", }, { slug: "daily-value-percentages-fda-efsa-health-canada", title: "Daily Value Percentages Explained for Supplement Merchants (FDA vs EFSA vs Health Canada)", category: "Compliance & Labeling", readingTime: "9 min", publishedAt: "2026-06-06", excerpt: "The Percent Daily Value on a Supplement Facts panel looks like a simple number. But that percentage is derived from a reference value — and that reference value changes depending on which country you are selling in.", }, { slug: "sync-nutrition-data-manufacturer-coa-shopify", title: "How to Sync Nutrition Data From Manufacturer COAs to Your Shopify Store", category: "Catalog Management", readingTime: "8 min", publishedAt: "2026-06-06", excerpt: "Every supplement product starts with a Certificate of Analysis (COA) from the manufacturer — the source of truth for your Supplement Facts panel. The problem is what happens between that COA and your Shopify product page.", }, ]; // ——— Format date ——— function formatDate(iso) { const d = new Date(iso + "T00:00:00"); return d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", }); } // ——— Post-process HTML: transform CTA bold links into styled horizontal blocks ——— function processBlogHTML(html) { const ctaPattern = /

\s*\s*]*>([^<]*(?:Install NutriScore|Install\s+NutriScore)[^<]*)<\/a>\s*<\/strong>\s*<\/p>/gi; return html.replace(ctaPattern, () => { return `

✦ Available now NutriScore for Shopify
Install on Shopify →
`; }); } // ——— Add IDs to headings and return list ——— function processHeadings(el) { const headings = []; const seen = {}; el.querySelectorAll("h2, h3").forEach((h) => { if (!h.id) { let id = h.textContent .toLowerCase() .replace(/[^a-z0-9\s-]/g, "") .trim() .replace(/\s+/g, "-") .slice(0, 60); if (seen[id]) { id = id + "-" + ++seen[id]; } else { seen[id] = 1; } h.id = id; } headings.push({ id: h.id, text: h.textContent, level: parseInt(h.tagName[1]), }); }); return headings; } // ——— ArticleCard ——— const ArticleCard = ({ article, setPage }) => ( { e.preventDefault(); setPage("blog/" + article.slug); }} > {article.category}

{article.title}

{article.excerpt}

{formatDate(article.publishedAt)} {article.readingTime}
); // ——— Blog Footer CTA ——— const BlogFooterCTA = ({ setPage }) => (
✦ From the observatory

Ready to bring your
supplement store into compliance?

NutriScore handles Supplement Facts panels, Nutri-Score grading, and structured data — so you can focus on your products.

Install NutriScore → {setPage && ( { e.preventDefault(); setPage("blog"); window.scrollTo(0, 0); }} > Read more articles )}
); // ——— Blog Index ——— const BlogIndex = ({ setPage }) => { const [activeCategory, setActiveCategory] = React.useState("All"); React.useEffect(() => { window.scrollTo(0, 0); setTimeout(() => { if (typeof initReveal === "function") initReveal(); }, 120); }, []); const categories = React.useMemo(() => { const cats = [...new Set(ARTICLES.map((a) => a.category))]; return ["All", ...cats]; }, []); const filteredArticles = activeCategory === "All" ? ARTICLES : ARTICLES.filter((a) => a.category === activeCategory); return (
{/* ——— Blog Hero ——— */}
§ 04 / Writing From the observatory

Guides, compliance notes, and deep dives for Shopify food & supplement merchants.

{ARTICLES.length} articles — updated as the regulatory landscape shifts.

{/* Category filter bar */}
Filter: {categories.map((cat) => ( ))}
{/* ——— Constellation Divider ——— */}
✦
{/* ——— Article Grid ——— */}
{filteredArticles.map((article) => ( ))}
{/* Footer count bar */}
— {filteredArticles.length} article {filteredArticles.length !== 1 ? "s" : ""}{" "} {activeCategory !== "All" ? "in " + activeCategory : "in the archive"} ✦ Blog
); }; // ——— Blog Post ——— const BlogPost = ({ slug, setPage }) => { const [state, setState] = React.useState({ content: "", loading: true, error: false, }); const [headings, setHeadings] = React.useState([]); const [activeHeading, setActiveHeading] = React.useState(""); const bodyRef = React.useRef(null); const article = ARTICLES.find((a) => a.slug === slug); React.useEffect(() => { window.scrollTo(0, 0); setState({ content: "", loading: true, error: false }); setHeadings([]); setActiveHeading(""); fetch("/content/blog/" + slug + ".md") .then((r) => { if (!r.ok) throw new Error("Not found"); return r.text(); }) .then((text) => { const stripped = text.replace(/^---[\s\S]*?---\n/, ""); const raw = marked.parse(stripped, { breaks: true }); const processed = processBlogHTML(raw); setState({ content: processed, loading: false, error: false }); setTimeout(() => { if (typeof initReveal === "function") initReveal(); }, 120); }) .catch(() => { setState({ content: "", loading: false, error: true }); }); }, [slug]); // Extract headings and wire up IntersectionObserver after content renders React.useEffect(() => { if (state.loading || state.error || !bodyRef.current) return; const extracted = processHeadings(bodyRef.current); setHeadings(extracted); if (!extracted.length) return; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) setActiveHeading(entry.target.id); }); }, { rootMargin: "-10% 0px -75% 0px", threshold: 0 }, ); extracted.forEach(({ id }) => { const el = document.getElementById(id); if (el) observer.observe(el); }); return () => observer.disconnect(); }, [state.content]); const handleBack = (e) => { e.preventDefault(); setPage("blog"); }; return (
{/* Back bar */}
← All articles
{/* Breadcrumb */}
{/* Article Header */}
{article && ( {article.category} )}

{article ? article.title : slug}

{article && (
☾ {formatDate(article.publishedAt)}
◐ {article.readingTime} read
)}
{/* Decorative rule between header and body */}
✦
{/* Article Layout: TOC sidebar + body */}
{/* TOC Sidebar — only when ≥3 headings and content is ready */} {!state.loading && !state.error && headings.length >= 3 && ( )} {/* Article body */} {state.loading && (
)} {state.error && (

This article could not be loaded.

)} {!state.loading && !state.error && (
)}
); }; Object.assign(window, { BlogIndex, BlogPost, ARTICLES });