Presentations: New Product Detail Page
timestamp1722540575231
Here is the newest Presentation (Showroom) app feature to make your workflow more effective!
New Product Detail Page:
First and foremost, clicking a product from anywhere will open the new product detail page (PDP) with a specific color selected.
This solves the case where you see an unavailable color on the catalog or boards (salesmain).
You always need to select a color variant - viewing the PDP at style level is not possible anymore.
You don’t need to add a style/color variant to your favorites first to be able to add quantities. If you add quantity to an assortment, the color variants that exist in the assortment will automatically be added to your favorites.
Now, adding the products to your favorites on the catalog, add the exact color you see on the view.
For the users who have some presentation with favorites:
If you have favorited color variants, they will remain without change.
If you have favorited styles, the main color variant will be added to the favorites; if the main color is unavailable, the style will be shown in the favorite listing without prefavorited color variant.
We designed the PDP so you can entirely focus on the inspirational content or placing quantities at a time.
Once you open the PDP, you will see all inspirational media in the background (taking the total height).
You can swipe the media to change between or use the Shift + scroll wheel on the mouse.
If you don’t take any action for 10 seconds, the content will start auto-swiping to create a cinematic effect.
Auto swipe will also happen if you stop interaction with the screen for more than 2 minutes.
As soon as you interact with the screen, the auto swipe will stop.
If a media is tagged with the style ID in the media library, it is attached to the content's end for all color variants.
If a product has:
No media - you will see the background in the style's color with the image coming soon tag.
One media - the media will be centered in the inspirational content area.
Two or more media - those will be duplicated to create an infinite loop.
Now, you can zoom in on media by pinching the touchscreens and double-clicking on the computers.
You can zoom in on different media; it will remain at its zoom level until you change/close the PDP.
You can swipe inside the frame to move the image to show different details. If you come closer to the left or right edge, it will swipe to the next/previous media. You will get an indicator on the media before that.
Just like the boards, if a media is tagged with styles, you get an ‘i’ button at the bottom right corner.
Clicking the button will bring up the tagged styles pop-up.
From the pop-up, you can navigate a product by clicking the name or the thumbnail, favorite a specific one using the heart button, or favorite all by using the button on the bottom.
Clicking a new product will open a new layer on the existing PDP, meaning closing that one will bring you back to the previous PDP.
If you press and hold the ‘x’ button for 1 sec, it will close all opened PDPs.
You can close the modal by pressing the ‘x’ button or clicking outside of the modal.
Now, all the product information you need is collected in the control center at the right edge of the screen.
In the first box, you can see the style ID (and color variant ID if available), style name, sustainability icon (if applicable), price information, and composition details.
Double-clicking the style ID will select it as it did before.
Below, another box will include the color variant with bigger thumbnails, color names, and delivery periods.
Clicking a thumbnail will select the variant.
You can add a variant to your favorites by using the heart button in the thumbnail.
If you precisely press the button, the product will add to your favorites without selecting the color, so you can do fast favoriting if needed.
The business tags take place in the thumbnail if they exist.
If a color variant has quantities, you will get an ‘in the basket’ tag inside the thumbnail.
Below the color variants is a color name indicator with an ‘i’ button. If you click the ‘i’ button, the color variants will switch to the product info for you to get more detailed info about the product.
If a style has more than six color variants, there will be a grid button. Once activated, it will re-size the thumbnails and remove delivery info from the color variants so you can view more variants without scrolling.
And lastly, the ‘Add to Board’ button takes place at the right side of this row.
Clicking the button will open three modals at once for you to select the board and the section ( the same as before)
But now you can add either the selected color variant, only favorited color variant/s, or all color variants with one click.
In the third box, you will have filtering options for delivery periods and business tags if they exist; clicking an option will filter the color variants.
And at the bottom, you have the navigation menu for controlling the PDP.
There is a media/assortment switch that changes the whole view at the left.
PDP navigator arrows and indicator.
You can see the source of the PDP above the pagination.
You can switch PDP using the arrows in the navigation bar or your keyboard's arrow keys.
An ‘x’ button is needed to close the current PDP and return to the previous page.
You can also use ‘ESC’ on your keyboard.
Placing quantities is easier than it’s ever been.
Once you switch from the media to assortments, you see a view similar to the basket on the screen's left side.
By default, this view will show all available assortments regardless of your choices of the right control bar.
If you want to filter the assortments, you must activate the checkbox at the bottom of the screen labeled ‘Filter the assortments according to the selection.’
Switching between products returns to inspirational content and deselects the checkbox.
You can view multiple doors and place multi-store quantities in the assortments tab.
If the stores don’t fit the view, there will be a scroll.
Clicking a cell will bring the numpad as usual.
Notes, copying, and deleting quantities are the same as the basket page. You can also view the grouping and so on.
You cannot add/remove stores or create groups in the assortments tab.
With all being said, we made other changes to maintain seamless integration with all tabs and previous presentations.
If you remove a favorited color variant from your favorites, it will delete all quantities for the assortment in which the selected color variant takes place.
Don’t worry; you will get a pop-up confirmation first.
In the favorites tab, you can still toggle on/off the color variant level.
If you remove a product on the style level, it will remove all color variants of that style with a confirmation modal.
On the merch floor (canvases), if you open the add a style, it will add the color variant you see in the modal, not the salesmain.
You can add other variants from the right panel as before.
In the catalog, if you unfavorite a style, it will remove all color variants from your favorites, again with a confirmation model.
If a style has at least one color variant favorited, you will see the favorited badge on the catalog page.
All changes will be reflected on the public link.
The scanning flow also changes according to the latest updates:
If you scan a specific barcode for a color variant, PDP will open, and the correct variant will be added to your favorites.
If you scan a barcode for base style, PDP will open, and the first variant will be added to your favorites.
If you scan a specific box barcode, the PDP of the first color from the box will open, and all color variants in the box will be added to your favorites.
