Customize Product Page
The dynamic Product Page allows brands to customize design, content, and features, creating a unique, branded experience for customers.
1 - URL
dpp.arianee.com/templateName/arianeeID,passphrase,network?autoclaim=true
| URL | Required | Description |
|---|---|---|
dpp.arianee.com | โ | Pageโs base URL - can be customized for a specific brand if asked. |
templateName/ | โ | Name of JSON file used to define the pageโs content. |
arianeeID,passphrase,network | โ | Reference to the digital passport to which the page should redirect. |
?autoclaim=true | โ | Avoid some steps in the claim flow. It skips steps between the product page and the end user's wallet solution. |
2 - Content
Content customization allows brands to showcase tailored product informationโsuch as origin, materials, transparency details, and care instructionsโcreating a rich, informative customer experience.
This is achieved through a provided JSON file that seamlessly structures and organizes these details.
| Section | Description |
|---|---|
| Header | Main logo of the page theme. โ ๏ธ We recommend using .svg format for your logo. |
| Product presentation | Showcase the hero image, title, description, and branding to introduce the product. ๐ก HTML is supported for description. |
| First claim CTA section | Encourages users to claim their digital passport with a call-to-action button. |
| Product information section | Provides detailed insights into the product's attributes, materials, and background, emphasizing transparency and user accessibility. |
| Main page carrousel section | Highlights key benefits and features, allowing users to explore various product aspects interactively. |
| Footer (Desktop only) | Contains branding elements and a call-to-action to claim the digital passport, enhancing user engagement. |
| Subpage sections | Provides additional product insights with secondary headings and in-depth information, offering users a deeper understanding of product details. |
| Sub-header | Displays secondary headings for additional product insights or features. |
| Sub-product information section | Offers secondary detailed product data, tutorials, and specifications for deeper product exploration. |
| Sub-carrousel section | Presents a rotating display of key product features, benefits, and unique selling points for interactive user engagement. |
| Modalsโ logo theme | Displays the logo in a theme (e.g., dark mode) for brand consistency across modal dialogs. |
| Transparency | Emphasizes product sourcing, ingredients, and eco-footprint to align with the brandโs commitment to openness. For more information on transparency, check out the dedicated documentation. |
| Text & Media Modal (History of the Brand) | Usually used to display information about the brand manufacturing the product. |
{
"links": {
"contextLink": "https://app.arianee.com/"
},
"imagesSrc": {},
"useAsArianeeNFT": true,
"use2FA": true,
"serialNumber": "029184B",
"heroImage": "/assets/images/hero-desktop.png",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissi",
"title": "Blue Watch",
"metaDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissi",
"metaTitle": "Blue Watch",
"iconImage": "/assets/images/montblanc_logo.png",
"productBrandHistory": {
"title": "History of the brand",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissi",
"avatarSrc": "/assets/images/Square.png",
"displayImage": "/assets/images/pattern2.jpg",
"avatarAlt": "Product brand Avatar",
"imageAlt": "Product Brand History"
},
"texts": {
"productImgAlt": "product-image",
"serialNoLabel": "Serial Number",
"claimDigitalPassport": "Claim your digital passport",
"productMetaTitle": "YOUR"
},
"logoSrc": "/assets/images/logo.png",
"darkThemeLogoSrc": "/assets/images/logo-dark-theme.png",
"footer": {
"bannerSrc": "/assets/images/pattern2.jpg",
"bannerAlt": "Footer banner Alt",
"question": "Ready to claim?",
"caption": "Experience the digital passport difference and begin your journey today"
},
"heroSection": {
"subTitle": "Serial Number : ",
"logoAlt": "logo",
"heroAlt": "watch",
"heroDesktopText": "Get your digital passport and enjoy exclusive perks",
"actionButton": "CLAIM YOUR DIGITAL PASSPORT",
"disabledActionButtonText": "Digital passport already claimed",
"scrollCaption": "Scroll to discover your product information"
},
"productInfo": {
"image": "/assets/watch.png",
"heroImageDesktopSrc": "/assets/hero-desktop.png",
"heroAlt": "watch",
"heroDesktopText": "Get your digital passport and enjoy exclusive perks",
"actionButton": "CLAIM YOUR DIGITAL PASSPORT"
},
"perkSection": {
"topCaption": "Inside your digital passport",
"title": "Exclusive perks",
"items": [
{
"title": "Proof of Ownership",
"description": "Prove that you are the rightful owner of your product",
"imageSrc": "/assets/images/perk1.jpg"
},
{
"title": "Product History",
"description": "Previous owners, production date, etc...",
"imageSrc": "/assets/images/perk2.jpg"
},
{
"title": "Exclusive Services",
"description": "Resell, repair, recycle",
"imageSrc": "/assets/images/perk3.jpg"
},
{
"title": "Personalized Offers",
"description": "Receive curated product recommendations tailored to your taste",
"imageSrc": "/assets/images/perk4.jpg"
},
{
"title": "Become an exclusive member",
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor",
"imageSrc": "/assets/images/montblanc_logo.png",
"link": "#",
"variant": "dark",
"buttonLabel": "CLAIM YOUR DIGITAL PASSPORT"
}
]
},
"ProductInformationSection": {
"title": "Product Information",
"caption": "at your fingertips",
"ImageSrc": "/assets/images/pattern1.jpg",
"ImageAlt": "productImageAlt",
"buttonText": "Information of my product"
},
"productInformation": {
"hero": {
"imageSrc": "/assets/images/pattern1.jpg",
"heading1": "Product Information",
"subHeading1": "at your fingertips",
"heading2": "Transparency at heart",
"subHeading2": "Discover how your product was made"
},
"category": "Watch",
"meta": [
{
"title": "Tutorials",
"avatarSrc": "/assets/images/properties.png",
"items": [
{ "title": "Product 1", "subTitle": "Lorem ipsum", "src": "/storybook" },
{ "title": "Product 1", "subTitle": "Lorem ipsum", "src": "/storybook" },
{ "title": "Product 1", "subTitle": "Lorem ipsum", "src": "/storybook" }
]
},
{
"title": "Tutorials",
"avatarSrc": "/assets/images/properties.png",
"items": [
{ "title": "Product 3", "subTitle": "Lorem ipsum", "percent": 14 },
{ "title": "Product 3", "subTitle": "Lorem ipsum", "percent": 14 },
{ "title": "Product 3", "subTitle": "Lorem ipsum", "percent": 14 }
]
},
{
"title": "Tutorials",
"avatarSrc": "/assets/images/properties.png",
"items": [
{ "title": "Product 4", "subTitle": "Lorem ipsum" },
{ "title": "Product 4", "subTitle": "Lorem ipsum" },
{ "title": "Product 4", "subTitle": "Lorem ipsum" }
]
},
{
"title": "Properties",
"avatarSrc": "/assets/images/properties.png",
"items": [
{ "title": "Product 3", "subTitle": "Lorem ipsum" },
{ "title": "Product 3", "subTitle": "Lorem ipsum" },
{ "title": "Product 3", "subTitle": "Lorem ipsum" }
]
}
],
"slider": {
"title": "Ingredients, labels and carbon footprint",
"items": [
{
"title": "Ingredient",
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor",
"imageSrc": "/assets/images/pattern2.jpg",
"buttonLabel": "Button Label",
"buttonSubLabel": "Details",
"link": "#",
"variant": "dark",
"buttonIconSrc": "/assets/images/brand2.png"
},
{
"title": "Ingredient",
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor",
"imageSrc": "/assets/images/pattern2.jpg",
"buttonLabel": "Button Label",
"buttonSubLabel": "Details",
"link": "#",
"variant": "dark",
"buttonIconSrc": "/assets/images/brand2.png"
},
{
"title": "Ingredient",
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor",
"imageSrc": "/assets/images/pattern2.jpg",
"buttonLabel": "Button Label",
"link": "#",
"variant": "dark",
"buttonIconSrc": "/assets/images/brand2.png"
},
{
"title": "Ingredient",
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor",
"imageSrc": "/assets/images/pattern2.jpg",
"buttonLabel": "Button Label",
"link": "#",
"variant": "dark",
"buttonIconSrc": "/assets/images/brand2.png"
},
{
"title": "Ingredient",
"description": "Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor",
"imageSrc": "/assets/images/pattern2.jpg",
"buttonLabel": "Button Label",
"link": "#",
"variant": "dark",
"buttonIconSrc": "/assets/images/brand2.png"
}
]
}
},
"_2FAInfo": {
"title": "Two-factor authentication",
"description": "Enter the digital code to claim your digital passport",
"code": 441225,
"errorMessage": "The pin code is not correct, please try again"
}
}
{
"logoSrc": "https://bdh.api.pre-production.arianee.com/pub/1685437022897.png",
"darkThemeLogoSrc": "https://bdh.api.pre-production.arianee.com/pub/16854370228972.png",
}
{
"heroImage": "https://bdh.api.pre-production.arianee.com/pub/1704996568948-image5.png",
"title": "Mugler Spiral Curve 02 Bagโs Digital Product Passport",
"description": "This item has been designed by Casey Cadwallader for the Mugler Fall/Winter 23 collection. It is unique and handcrafted by Italian artisans, requiring up to 30 hours of work. Inspired by the iconic โbubble bagโ from the Mugler archive and reimagined with a new construction, sharper silhouette, and improved functionality.Featuring the signature โMโ chrome logo, custom buckle, and hand painted edges.",
"avatarHasDarkBackground": true,
"serialNumber": "029184B"
}
{
"heroSection": {
"logoAlt": "logo",
"heroAlt": "bag",
"heroDesktopText": "Get your digital passport and enjoy exclusive perks",
"actionButton": "CLAIM YOUR DIGITAL PASSPORT",
"disabledActionButtonText": "Digital passport already claimed",
"scrollCaption": "Scroll to discover your product information"
},
}
{
"ProductInformationSection": {
"title": "Product Information",
"caption": "at your fingertips",
"ImageSrc": "https://bdh.api.pre-production.arianee.com/pub/1704996575595-image7.png",
"ImageAlt": "productImageAlt",
"buttonText": "Information of my product"
},
}
// Repeat this structure X times if you want X items to appear in the carrousel
{
"perkSection": {
"topCaption": "To be unlocked upon passport collecting",
"title": "Exclusive benefits",
"items": [
{
"title": "Proof of Ownership",
"description": "Prove that you are the rightful owner of your product, online or in real life!",
"imageSrc": "https://bdh.api.pre-production.arianee.com/pub/1704996565051-image4.png"
},
]
},
}
{
"footer": {
"bannerSrc": "https://bdh-mugler.api.pre-production.arianee.com/pub/1675961213394-BrandItemBackgroundPicture.png",
"bannerAlt": "Footer banner Alt",
"question": "Ready to claim?",
"caption": "Experience the digital passport and unlock the potential of your product"
},
}
{
"logoSrc": "link of light theme logo", //used for main page
"darkThemeLogoSrc": "link of dark theme logo", //used for sub page`
}
{
"productInformation": {
"hero": {
"imageSrc": "https://bdh-mugler.api.pre-production.arianee.com/pub/1704996575595-image7.png",
"heading1": "Product Information",
"subHeading1": "at your fingertips",
"heading2": "Transparency at heart",
"subHeading2": "Discover how your product was made"
},
}
// Repeat this structure X times if you want X items to appear in the slider
{
"slider": {
"title": "Transparency & Sustainability",
"items": [
{
"title": "Circular Economy",
"description": "Arianeeโs digital passport ensures transparent & verified product transfers.",
"imageSrc": "https://bdh-maxime.api.staging.arianee.com/pub/1704874195824-image13.png",
"variant": "light",
"buttonLabel": "Learn More",
"link": "https://www.arianee.com/"
},
]
}
}
{
"meta": [
{
"title": "Properties",
"avatarSrc": "/assets/images/properties.png",
"avatarHasDarkBackground": false
}
// Repeat this structure X times if you want X modals to appear
{
"meta": [
{
"title": "Properties",
"avatarSrc": "/assets/images/properties.png",
"items": [
]
},
]
}
// Repeat this structure X times if you want X modals to appear
{
"meta": [
{
"title": "History of the brand",
"description": "Parisian designer Thierry Mugler set the bar for 80s power dressing with his signature party dresses and supersized shoulder pads. Fast forward to 2015, the brand has a new name and a fresh identity to match. With Casey Cadwallader, at the helm, the new Mugler is all about subtle sexiness with just a touch of that Mugler magic.",
"avatarSrc": "/assets/images/Square.png",
"displayImage": "https://bdh-mugler.api.pre-production.arianee.com/pub/1704996552909-image1.png",
"avatarAlt": "Product brand avatar",
"imageAlt": "Product Brand History"
},
]
}
3 - Extra-Features
- Use DPP Content to Populate Page Sections: To automatically populate parts of the page with digital passport content.
- Hide main CTA: Ensure the main CTA is not displayed.
- Two-factor Authentication (2FA) Code in Claiming Process: When users click on Claim your digital passport, a modal prompts them to enter a verification code specified in the JSON configuration. Redirection to the next step occurs only if the entered code is correct.
- Enable Auto-Claim in the Ownership Account upon Claim CTA Click: This feature directs the user straight to the Ownership Account with the claim process automatically initiated when they click the link received.
Ready to get started? Book a demo to explore how the product page can elevate your brand digital experience and unlock new possibilities.
Updated about 1 month ago