How to put a live nutrition label on your product pages

Most food brand websites show the nutrition label as a picture. Somebody photographed the panel, or exported it from the label designer, and pasted the image onto the product page. It looks fine until the formula changes, and then every page with that picture is wrong until someone remembers to replace it.

A live label works the other way round. The figures live in one place, and the product page pulls them in as real text every time it loads. Correct the sodium figure once and every page showing that product is correct within minutes. This guide walks through setting that up on a Squarespace site, which is where most of our customers run. The steps are the same on WordPress, Shopify or anything else that lets you paste a block of HTML.

What you need before you start

You need a ProvisionSync account, and the person doing step 2 needs the Admin role, because declaring a website is an admin setting. The product catalog and its label embeds are on the free Core plan, so nothing here needs a pack added.

Have the label data to hand: the ingredient statement, the allergen declaration, the serving size and the nutrition figures for each packaging format you sell. If you already keep this in a spreadsheet, the Import / Export page takes a catalog file instead, but for a first product the form is quicker.

On Squarespace, check your plan. A Code Block only runs JavaScript on the Core, Plus, Advanced, Business, Commerce Basic and Commerce Advanced plans. On Personal or Basic the block renders but the embed never loads.

Step 1: enter the product

Open Products and click "+ New product". The page says it plainly: create the product first, and its packaging formats, nutrition and ingredients are edited afterwards. Give it a name and a slug. The slug must be lowercase kebab-case, something like ginger-dressing, and it matters more than it looks, because it is the handle your website will use to ask for this product's label. Pick one you won't want to change.

After the first save the product screen has four sections: Product details, Packaging, Nutrition facts, and Ingredients & allergens. Above them is a row of packaging format tabs.

The five formats are Retail, Family, Portion cup, Multipack and Bulk. Those names are deliberately size-neutral. The real size lives on each format's net weight, so a brand whose retail bottle is 16 fl oz is not stuck with a label that says 9 oz. Add the formats you sell and give each its net weight. The UPC or GTIN is optional, but if you enter it, it has to be 8 to 14 digits. Enter it anyway if you have it: the retailer feeds match your products to store shelves by that number.

Fill in Nutrition facts for the selected format. The panel is the FDA's 2016 Nutrition Facts format under 21 CFR 101.9, and the allergen list is the FDA's major food allergens. That is the only standard in play, so if you sell in Canada you'll want to read the FAQ answer on standards before relying on it there.

Under Ingredients & allergens, paste the ingredient statement as it prints, tick the allergens, and set the claims that apply: Keep refrigerated, Gluten-free claim, Vegan claim. Save.

Step 2: declare your website

Open Settings and find the card called Public site domains. The line under the heading explains it: these are the origins where your storefront and the embed run, and they are the ones allowed to call the public API. Add your live domain with and without www. While you're still building on Squarespace, add the preview origin too, the one that looks like https://yourname.squarespace.com. Staging sites go under the next card, Additional CORS origins.

Skipping this step is the most common reason an embed shows its fallback line instead of a label. The block loads, asks the API for the label, and the API refuses because the page's origin isn't on your list.

Step 3: paste the library once

On Squarespace, go to Settings, then Advanced, then Code Injection, and paste this into the Footer box:

<script>window.SDB_API_BASE = "https://bridgeapi.wildwoodworks.io/api/v1";</script>
<script src="https://bridgeapi.wildwoodworks.io/embeds.js" defer></script>

That's the whole shared library. It runs on every page of the site, finds any label placeholder on the page, fetches the data and paints the panel. Because it is loaded from our origin rather than pasted in full, fixes reach your site without you touching the footer again.

Step 4: add a Code Block on each product page

Edit the product page, hover the section where the label should sit, click Add block (or the plus sign), choose Code, and paste one line:

<div class="sdb-nutrition" data-slug="ginger-dressing" data-format="retail_9oz">Loading…</div>

Set data-slug to the product's slug and data-format to the format code, which you can read off the admin (retail_9oz is the Retail format, family_16oz is Family, and so on). Save the page. The placeholder says "Loading…" for a moment and then becomes the panel.

If you have the Embed Designer pack, its Code tab writes this block for you with your chosen look inlined, and you can pick Squarespace, Wix, Shopify, WordPress or Webflow to get the paste instructions for that platform. The hand-written version above works without it.

Three optional attributes

All three are off unless you add them.

data-mk-showdetails="true" adds a column to the right of the panel with the ingredients, allergens, storage note, UPC, net weight and label dates. The card widens to fit.

data-mk-showformats="true" adds buttons that switch between the product's packaging formats and serving sizes. It needs showdetails as well, because the buttons live in that column. With the buttons on, data-format picks which format opens first instead of pinning the block to one.

data-mk-hideproductname="true" drops the card's own product-name heading, for a page that already prints the name above the block. The format and net weight line stays, and a screen reader still hears the product name.

These travel in the pasted block, so if you change one later, re-copy the block. Colours and fonts are different: a look activated in the Embed Designer restyles blocks that are already on your site, on their next page load.

What happens when you change the data

Nothing on your website. Correct the figure in the admin, save, and visitors to that product page see the corrected panel within a few minutes. Every page showing that product updates the same way, on every site you've declared. There is no export, no re-paste and no developer.

The block makes one request per panel and rides the API's cache. If the API is unreachable, the block replaces itself with a plain sentence saying the content is temporarily unavailable. It never leaves a broken widget on the page.

What to do when the block stays on "Loading…"

Check three things, in this order.

First, the origin. Open Settings and confirm the exact domain of the page is under Public site domains. A www mismatch is enough to fail.

Second, the Squarespace plan. On Personal or Basic, JavaScript in a Code Block doesn't run, and no amount of checking the snippet will change that.

Third, the attributes. A slug that doesn't match a product, or a format the product doesn't carry, shows the unavailable line rather than a wrong label. Compare them with the product screen character for character.

Why this is worth doing beyond the time saved

A label pasted in as an image is invisible to search engines, unreadable to screen readers, and out of date the moment the formula changes. A live label is real text on the page, with schema.org structured data alongside it, so a search engine or an AI answer engine reads it as nutrition information rather than guessing from a picture. The FAQ has more on the SEO side.

If you want to try it, create a free account, enter one product, and put a label on one page. The whole thing is minutes per product, and the first one is the slowest.