In this section, we'll discuss how to set up the main options for the product detail page.
Keep in mind, the settings we'll be applied to all product detail pages. This is important to maintain consistency across the mobile app and to avoid confusion for customers.
To access the product options, go to your Napps Dashboard, navigate to 'Builder', and then 'Product Page'. Then click the button in the top right corner labeled 'Options'.
On the right side, you'll find the option to choose which product you want to preview to better understand the impact of the options you're setting.
Gallery Orientation
The "Orientation" setting is important and can be misleading. While the name suggests it only changes the orientation of the image gallery in the Product Detail Page (PDP), it also impacts other aspects.
The "Horizontal Layout" option allows customers to switch images by using a horizontal scroll. In this layout, all components added to the page will be displayed in their normal behavior.
The "Vertical Layout" is more complex. As the name suggests, the image switching is in the vertical orientation, but customers can also change products using horizontal scrolling. Additionally, the content scroll for each product is different. This layout uses a bottom sheet, similar to those found in apps like Zara and Google Maps, making the experience more immersive.
Product Name Layout
In this option, you can select the layout for the product title on all of your product pages. We offer two different options and we recommend watching the preview to make an informed decision.
The final result of a Left Aligned Layout.
The final result of a Center Aligned Layout.
Icon Border
This is a useful option for stores that have chosen an icon color in the branding section that does not stand out against all or some of the background colors of their products. It will add a circle around the icons on the top of the PDP which will help to improve the customer experience by making the icons more visible.
The final result of a Contrasted Icon Border.
The final result of a Icon Border without contrast.
Complete the Look
This option allows you to suggest multiple products that are exphosed in your product displayed photo. This will help cross-selling, since your customers will see the look complete and don't need to search for other products displayed.
To use this option, you should set your metafields with the related or complimentary pieces and select the one you want to use.
On your photo's right side, a small button will be showned, which, when clicked, will show the other related products.
Add to Cart Button
This option is only available when you choose the horizontal gallery orientation.
The "Fixed" option will keep the "Add to Cart" button in a fixed position on the PDP for each PDP you create.
The "Floating" option will make the "Add to Cart" button follow the scroll, always remaining at the bottom of the screen. This will override any position you choose for each PDP you create.
Product Identifiers (SKU/REF/EAN)
This option allows your customers to search the products by their reference. They will be available if you thick the check box and it will show under the title.
You can choose with a SKU, REF or Custom ID.
The final result of a product with Product Identifier.
If you want to know some tips to create your PDP, please check our Best Practices Guide.