Contents

Create a Custom Digital Product Passport Page

Build a custom DPP page from scratch: add images, rich text, a box container, and a button group with actions to your own pages, the default Materials page, and the default Traceability page. Then assign the page as the Product Passport in an experience and preview the result.

  1. Navigate to pages in order to create a custom page for your DPP.
  2. Click the Create page button to create a new page.
  3. Give it a name and click Create to save the new page.
  4. Click the Image field to upload a general/product image.
  5. Click the upload icon to select and add a media file for your image.
  6. Click an image to insert it into your product passport, or upload one from your computer.
  7. Click on Rich text to start adding content to your page.
  8. Click the edit icon to add the rich text content.
  9. Enter the content you want to display on this page.
  10. You can adjust the padding around the content you just added.
  11. From here, click the Box component to add a container element to your page.
  12. Click the Button group to add custom buttons.
  13. You can adjust the spacing between the buttons and style them.
  14. Once that's done, click on the first button to assign the action behind it.
  15. Click here.
  16. If you want to add a custom page click on "Page".
  17. Select the page you want to add, for example "General".
  18. Click on the second button.
  19. Click here.
  20. If you want to add Materials default page, select "Material".
  21. Enter the name you want to be displayed on this button.
  22. Select the third button.
  23. Next up, click here.
  24. If you want to add default Traceability, select "Traceability" from the dropdown list.
  25. Enter the name for your button.
  26. You can align the text from here.
  27. This is how your Digital Product Passport page looks after all the changes.
  28. Next up, click on "Save".
  29. Navigate back to the Experiences.
  30. Click on Experiences to view and set up the custom Digital Product Passport page that was just designed.
  31. Click on the experience you want to add your custom Digital Product Passport page.
  32. Next, click the Product Passport button to edit the default page and assign your new custom one.
  33. Then, click the Settings icon to access configuration options.
  34. Following that, select "Custom page" from the dropdown menu to assign a custom product passport page.
  35. Enter the name and select it from the dropdown list.
  36. Click the Save button to save all configuration changes.
  37. Next up, click the Product Passport button to review the passport details page.
  38. You'll see that the custom page you designed now appears on your DPP.
  39. Click on the Materials button to preview the page.
  40. Once you've previewed it, you can navigate back to check the other pages too.
  41. Click the Traceability button to verify the page.
  42. Everything should now be in place, your custom Digital Product Passport page has been successfully added.
Created 19 June 2026

Was this page helpful?

Language
Theme
Contact
Legal