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 talking about apply 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. The blue button randomly selects a product, while the grey button opens a pop-up where you can choose the product you want to preview.
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. To better understand this layout, we recommend watching the video preview below.
Product Name Layout
In this option, you can select the layout for the product title on all of your product pages. We offer three different options and we recommend watching the preview to make an informed decision.
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.
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.
