Your product pages are a crucial destination for your customers, and a well-organized and strategic layout can be the deciding factor in their decision to add to the cart and checkout. With the NAPPS product page builder, you can create captivating and persuasive content to boost engagement and conversion rates.
Before proceeding with reading make sure you have read the previous articles regarding the product page options and management.
First, go to your dashboard and click on "Builder" and then "Product Page". After clicking on the button create a new layout and give it a name.
You should now see the PDP builder with all the components on the left side and a preview in the middle.
Set Layout Target
We recommend beginning by choosing which products or collections this PDP will be applied to. To do this, use the white box at the top of the preview.
Once you've decided the purpose of the PDP you are building, you can start choosing the components you want to add. Each component has its own rules and particularities, so keep reading for more information about each one.
Variants Block
Very straightforward three different types for showcasing your product variations. You can only add one of these types to your preview but don’t worry if you have products with multiple types of variations for example ‘Top Size’ and ‘Bottom Size’ the component you choose will be duplicated with the exception of this:
Which will be divided into two boxes side by side to simplify the layout for products with multiple variations.
Variants Extra Block
Let’s give a more customized experience to your customers. Because each one of them has some particularities we will explain both individually.
Colors Variation - Perfect for variations with colors as the name says. It makes it easier for your customers to choose the variation. Important to state you don’t need to have colors on your website this functionality works alone on the app side. Still, you need to associate a variation for example “Red” to a Hexadecimal code “#48484”. For more information on how to do this check this article. Don’t worry this component is only going to be added if the product in question supports this so you can have a PDP where some products will have this component and others don’t.
 Print screen of Napps variant box component in the product screen builder for the mobile app](https://napps-storage.b-cdn.net/support/napps-PDP/swatches-component.png)
Images Variation - Showcase your variables in the image format. No extra steps are needed in this, but it’s only going to work if a specific rule applies. For a simple explanation check the video below.
Description Block
This component is only to show the description of your product. Change the title to whatever you want and change the visualization mode to ‘New Screen’ or ‘Accordion’.
New Screen - will open the description of the product in a completed new and blank screen with only the description. The best option is when you have very long descriptions using elements like images or more complex HTML.
Accordion - will display the description content as a dropdown inside the main product detail page.
Extra Info Block
The extra info block provides flexibility to display additional details in the form of an image or link out to a web view. You can add unlimited components of this type to each PDP you create.
Title - edit the title to explain what information this block will present.
Content - Paste a valid web URL where you have the content you want to display. You can use an image alone in the URL it will display correctly in the app.
Action - The action is always the same, open the provided web URL in a web view on a new screen. We don’t provide options to display as an accordion because we felt the experience dropped.
Share Product Block
Utilize the Share Block to make it easy for your customers to share products they love with the ones they love!
When a user taps on this from the product page it will open the share in iOS or Android share sheets.
Image Banner Block
With the Image Banner Block, you can upload an image banner that will appear on the product page of your mobile app.
This can be used to promote special offers, sales, or other information about the collection or product. By using this block, you can make sure that your promotions and important product details are highly visible to customers, which can help to increase engagement and boost sales.
Video Banner Block
With the Video Banner Block, you can upload a video that will appear on the product page of your mobile app. To upload a video, simply click on the icon and select the video from your gallery. We recommend videos under 5 MB for optimized load times in the app.
This can be used to promote special offers, sales, or other information about the collection or product. By using this block, you can make sure that your promotions and important product details are highly visible to customers, which can help to increase engagement and boost sales.
Last Seen Block
With the Last Seen Block, you can tailor a personalized experience for your users by allowing them to easily access and review the last twelve products they have viewed. This feature can help to improve user engagement and increase the likelihood of repeat purchases by making it easier for customers to find and re-visit items that they were previously interested in.
Product Carousel Block
The home builder also uses this block to learn more about its functionality, please refer to this article.
This block can be employed in several different scenarios like displaying your shop's most popular products or items that are frequently purchased together (Cross Sell Products).
