Explore the interaction flow within the PDP. Understand how customers can browse product details, select options effortlessly, and add items to their basket, enhancing their shopping journey step by step.
PDP Interaction Flow
1. Opening a PDP
- From Scanning or Typing: Scanning a product barcode or typing a style ID/EAN opens the PDP directly as an individual section.
- From Product Listing: Selecting a product in the listing opens its PDP below the selected item, maintaining the context of the search.
2. Selecting a Size
When selecting a size:
- Unavailable Sizes: Grayed-out options indicate unavailable sizes.
- Stock Status: Displays stock availability for selected size.
- Unavailable Colors: Thumbnails of unavailable colors for the selected size are marked with a diagonal line.
3. Adding to Basket
When an item is added to the basket:
- Basket Counter Update: The basket item counter in the top-right corner updates instantly.
- Add to Basket Status: The button displays ‘Added!’ for 3 seconds.
- Auto-Scroll to Recommendations: After 3 seconds, the screen auto-scrolls to highlight the How to Wear It widget, encouraging further exploration.
What’s Next?
📍 Chapter 5. AI-Powered Recommendations
AI-powered recommendation in InStore are designed to enhance the shopping experience by providing customers with personalized recommendations and seamless browsing options.
→ Go to the Next Chapter