Design Your Product Landing Page

Lay out a full product landing page, carousel, dynamic title and description, materials, traceability, DPP button, hotspots, QR code, and footer, then check it on mobile.

Click the plus icon to add a new layer
Click the Carousel component to add a carousel
Enable Use product media to display dynamic product imagery
Select desired carousel layout
Select desired image fit
Click the Rich text icon component to add text
Click the edit icon to modify the text
Click Add variable to insert dynamic content
Select dynamic variable from the dropdown.
Use rich text options to style the text
Click the Button component to add a button
Rename the button to reflect its purpose
Select an action for the button
Adjust button spacing using the options on the right
Adjust the button size
Adjust the button borders
To enable Product Passport navigate to the Settings icon to open the experience configuration panel
Check enable Product Passport to unlock additional product and traceability features
Enable options to be visible in DPP view
Select Product Passport Type
Add additional pages to open under View Passport button
Save to apply the changes
Double-click the Passport button to view product details
Material details display dynamic data from Brand Cloud
Traceability information displays dynamic data from Brand Cloud
Click the Register CTA component to add it to the design
Click the Register CTA info field to change the text
Use dynamic variables and static text to provide instructions
Rename the button to reflect its purpose
Adjust spacing, size, and borders using the options on the right
Click the Image component to add media
Upload an image or select one from the media library
Click the Button group component to add grouped buttons
Click the Button component to add additional buttons to the button group
Rename the button to reflect its purpose
Select Link to define the button destination
Enter the URL in the field
Adjust spacing, size, and borders using the options on the right
Click on the next button in the group and rename the button to reflect its purpose
Select Page to link the button to a page
Select a page from the dropdown Pages created first to be visible on the dropdown menu
The button name updates automatically based on the selected page Click on the button and Rename it as desired
Adjust spacing, size, and borders using the options on the right
Select the final button and rename it to reflect its purpose
Select Certificates from Action dropdown to display certificates from Brand Cloud
Adjust spacing, size, and borders using the options on the right
Click the Box component to add group elements to design
Add rich text to the box
Add the button to the box
Open the layer tree
Expand the Box component
Elements are grouped inside the box
Click the edit icon to modify the text
Enter desired text
Use rich text options to style the text
Rename the button to match the selected action
Select Lost and Found to allow users to report lost items
Adjust spacing, size, and borders using the options on the right
Click the + icon button to create a new layer
Click the Image component to add media
Upload an image or select one from the media library
Components can be deleted from the layer tree, right-click on component
From here, click the plus icon to add a new layer to your interactive demo.
Next, click the Video element to add multimedia content to your demo page.
Now, click the upload icon to add a video file to your interactive demo.
From here, click to upload a video file for the interactive demo.
After that, click the sidebar menu icon to expand additional editing options and tools.
From here, click the Video element in the layer tree to select and manage it.
Then, click the Delete option to remove the video element from your layer tree.
Now, click the Share button to distribute your interactive demo with others.
Then, click the Copy link button to duplicate the shareable link.
From here, click the Passport Builder folder to explore the interactive product demos.
Next up, click the Links tab to access sharing and link management options.
Afterwards, click the Step 2 screenshot thumbnail to navigate to the next demo step.
After that, click Add Step to create a new interactive demonstration step.
Then, click Record More Steps to continue capturing additional steps for your demo.
and click the Delete button to remove the selected component
You can also drag and drop elements to rearrange your layout