Dynamic content: showing page data in a variant

Dynamic content lets you make a change once and have it show each page's own data. A sticky bar built once shows each product's name and price on every product page. A badge shows that product's rating. A banner greets visitors with the campaign they arrived from.

Tokens

Data goes into a variant as a token in double braces:

• {{product.name}} · {{product.price}}
• {{product.rating | New}} shows "New" when the page has no rating.

The text after the vertical bar is the fallback.

Where tokens work

• Component text. Every text field in an inserted component has an Insert data from the page picker, with a Shows here: … preview of this page's values. See Adding components and blocks in the editor.
• The inspector: the Text, Link, Source and Alt text fields, and the attribute fields, through Use data from the page. For example, a link to /buy/{{product.sku}}.
• HTML, in text and in attributes, through Edit HTML, Add HTML and the selector tool. The code editor's Insert page data button adds the token.
• Variant JavaScript: pertento.data('product.price') returns one value. The code editor's Read page data button inserts the call. See HTML, CSS and JavaScript in a variant.

How tokens behave

• Missing data hides the component unless you give a fallback. A page without the data never shows a raw {{…}} or an empty bar.
• Values are always inserted as plain text, never as HTML.
• Unsafe addresses are refused. A link or image address filled from data must be a web or relative address.
• Tokens refill after in-page navigation on single-page sites, and again shortly after load for data that arrives late.
• A page reads only the data its tokens name. A page without tokens does no data work at all.

The data picker

The picker lists the page's fields with their current values, grouped by source. It has a search, folds long groups behind Show all, and tells you when a page has no product.

Product. product.name, product.brand, product.sku, product.price, product.currency, product.availability, product.rating, product.reviewCount and product.image. Read from JSON-LD product data, Shopify's product object, Open Graph and product meta tags, and the GA4 data layer. Prices are formatted for the page's language and currency, for example "2 499 kr" or "€129".

This page. page.title, page.url, page.heading, page.language, page.segment.1 and page.lastSegment.

Element text. {{el:.price}} shows the text of any element on the page, by CSS selector.

Campaign. utm.source, utm.medium, utm.campaign, utm.term and utm.content, read from the address and kept for the whole visit. A landing message can match the ad someone clicked, even three pages later.

Address parameters. query.<name> reads any parameter in the address.

Visitor. visitor.status (new or returning), visitor.language, visitor.languageCode, visitor.region, visitor.timezone, visitor.device and visitor.referrer.

Date and time. time.weekday, time.date, time.month, time.hour, time.iso and time.countdown.HH:MM, from the visitor's clock. A countdown such as "Order in the next {{time.countdown.15:00}} for same-day dispatch" refills every 30 seconds.

Cart. cart.count, cart.value, cart.currency and cart.remaining.<amount>, from GA4 cart and checkout events or Shopify's cart. cart.remaining.500 is empty once the cart reaches 500, so a "you're 200 kr from free shipping" bar hides itself once the threshold is reached.

Site data. next.…, nuxt.…, shopify.… and dataLayer.…: Next.js and Nuxt page data, Shopify globals and the data layer. These often hold the site's own CMS copy, such as top-bar text, USPs and delivery information.

JSON on the page. jsonld.FAQPage.…, json.<id>.… and window.<name>.…: every JSON-LD node by type, other JSON blocks, and plain-data window variables.

Feeds. feed.<name>.<field>, from the website's data feeds. See Data feeds: using your own feeds in experiments.

Works on any site

Product and cart data are for shops, but campaign, visitor, time and site data are available on every page, so dynamic content is just as useful on a SaaS site or a lead-generation page.

Current limits

• After you apply a token in the inspector, the field shows the filled-in text rather than the token. To change it, pick the token again.
• Repeating lists, such as a product grid built from a feed, are not available yet.