Consumer Experience
When a consumer scans a product’s QR code or follows a Digital Product Passport link, they are presented with a branded, mobile-first page containing the product’s passport information. This page is the public face of the passport — it is what the end user interacts with.
Scan to Passport
The journey from scan to passport follows a simple flow:
- The consumer scans a QR code on the product packaging or label
- The scan URL is resolved to the correct product via the tieback resolver
- The consumer is redirected to the product’s public passport page
- The passport renders with the brand’s visual identity, the published content, and any linked market-specific localisation
The resolver handles GS1 Digital Link paths, fallback identifiers, and custom domains transparently. For details on how resolution works, see Resolver & GS1 Digital Link and Resolver Domain Flow.
What the Consumer Sees
The passport page presents the published content in a structured, readable layout:
- Brand header — the brand’s logo, name, and visual identity
- Product identity — product name, images, and key identifiers
- Content blocks — structured sections covering materials, sustainability, compliance, care instructions, and other relevant product information
- Market-specific content — recycling guidance, disclaimers, and supplementary information tailored to the consumer’s market, when a Market Pack is linked
- Passport footer — verification context and platform attribution
Content blocks are displayed in a defined order, grouped by category. Only blocks that contain published data are shown — empty or unpublished sections are omitted automatically.
Localised Passport Rendering
When a passport has a linked Market Pack, the consumer experience is enhanced with market-specific content:
- Recycling guidance — clear, actionable instructions for the target market’s waste management systems, covering the product and up to 14 material categories
- Disclaimers — region-specific legal and compliance notices
- Locale formatting — dates, numbers, and measurements rendered according to the market’s conventions
- Language — content presented in the consumer’s preferred language, when translations are available
The localised content is additive — it supplements the base passport content without replacing it. The consumer sees a unified experience that combines the brand’s core product information with the relevant market-specific context.
See Localisations Overview for details on how Market Packs and multilingual content work.
Mobile-First Design
Passport pages are designed for mobile-first consumption, reflecting the reality that most scans happen on a smartphone:
- responsive layout that adapts to screen size
- touch-friendly navigation and interaction
- optimised loading for mobile network conditions
- readable typography and accessible contrast ratios
The passport page also renders correctly on tablet and desktop browsers.
Brand-Consistent Presentation
Each passport page is rendered using the brand’s configured visual identity:
- Brand colours — primary and secondary colours are applied to the passport layout
- Logo — the brand’s logo appears in the passport header
- Theme — the passport uses the brand’s selected curated theme for layout, typography, and visual styling
- Domain — the passport is served on the brand’s own subdomain or verified custom domain, so the URL reinforces the brand identity
For more on custom domain configuration, see Custom Hostname Setup and DNS Setup Guide.
Unavailable States
Not every scan results in a fully rendered passport. The passport page handles several boundary conditions:
These states are handled gracefully so that the consumer always receives a coherent response, even when a passport has not yet been published or a product has been updated.
Page Metadata
Each passport page includes appropriate metadata for browser display and social sharing:
- the browser tab title reflects the product and brand name
- social sharing previews (Open Graph) are supported so that passport links render correctly when shared in messaging apps and social platforms