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 "Pages Manager" and then "Product Page". After you can decide to change your default layout - by clicking on the existing one, or  create a new one by clicking on the button create app and then new pdp and giving it a name.

You should now see the PDP builder with all the components on the left side and a preview in the middle.

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.

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.

Which will be divided into two boxes side by side to simplify the layout for products with multiple variations.

Besides this design, you can have also 2 others:

This design helps your pdp to be more clean, simple and elegant. With this, your customer won’t need to be one more click unnecessary. You can also choose if you want it to be centered or left aligned.

Besides that, you also have the option to use our Size Grid:

This design is perfect when you have multiple variants, for example, number of size shoes. Looks organized and clean, which will make the purchase process a lot easier.

Let’s give a more customized experience to your customers, without adding additional amount of work to you. That’s why we created this components who work based on the metafield linking products.

Swatch Layout - 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”. 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.

Text Product Linking - this design you use it when the variant of the product can not be displayed in images or color swatch. For example, if you have different styles of the same type of jeans, such as skinny, wide legs and much more, you should use this component.

Let’s suppose you have multiple options of buy now and pay later, you want your customers to know which ones you have available, to increase the AOV - Average Order Value.

With this block, you’ll display easier this alternative payment methods.

Don’t forget that, to display the correct payment methods, they have to be previous configure in our “Installment” section, located in the Modules page.

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.

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.

The text block provides the extra information you want to use, but there was no other option to display it, such as your company’s values, mission and vision.

Also, using a metafield “The model uses” you can also display what size the model wears and her height.

You can change the words design, putting it bigger, bold or italic, add links or even create tabels.

If your company has multiple stores, then this component is for you! With just a simple drag and drop, you’ll be able to let your customers know if the product they want is available in one of your physical stores. This is excellent when the customers are in a hurry and really need that product.

Don’t forget, to this work, you’ll need to have the information about your locations already done on shopify and you must have the stock counted effectively.

People want, more than ever, watch every product with attention to detail, so, besides the usual photos, why not display multiple videos about your video? You can use campaign shots, but should also use videos more simple, without distractions.

With this component, you’ll have under you product, multiple videos displayed, similar to Instagram’s Stories.

To use it, add to every single product, a metafield where you can add videos and this component will automatically pick them up and use it.

Our product info grid component helps you show information about your product more organized.

Each section is compose to an area for an icon and a space for a word, where you can describe your product. For example, if you have a body that has waist compression, you can use an icon and the word to let your customers know.

This component was created to let your customers know about this products characteristics without needing to read the full description.

Our products insights component, just like the name says, helps your clients know a specific, yet valuable, characteristic about your products.

For example, supposing you are a clothes brand, you can display your products elasticity in a more easier way to understand it. Just in a few seconds, your customer knows if needs to purchase the right size or a lower/higher one, helping to have less returns due to size mistakes.

This component helps to display your products technical information in a more clean and organized way.

Using metafields, after dropping this component, you’ll see automatically your product information displayed. For example, supposing you are a clothes brand, you can display the measure of thighs or waist according to each size or your products material composition.

You can always modify the table, change the metafield displayed and the titles.

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.

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.

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.

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.

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).

This component works similarly to the ones previously showed, changing just its design.

Each product will be displayed just like a card, where it will be displayed the image, name and product of each product and a quick add button. You need to choose a specific collection, different products or a specific metafield and your products will be showed. Also, you’ll be able to choose if you want to show the products horizontally or vertically.