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.

First, go to your dashboard and click Pages Manager, then select Product Pages.

From there, you can either:

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

We recommend starting by selecting which products or collections this Product Detail Page (PDP) will apply to. To do this, click the Components List icon on the left side of the screen, then select the product or collection you want to preview.

Once you've determined the purpose of your Product Detail Page (PDP), you can begin selecting and adding the components you want to include.

There are four different component types available for displaying your product variations. You can add only one variation component to your preview, but don't worry—if your products have multiple variation types (for example, Top Size and Bottom Size), the component you choose will be duplicated automatically to display each variation.

Choose one of the variation components based on your products characteristics.

Create a more personalized shopping experience for your customers without adding extra work to your workflow. These components automatically work with product-linked metafields, making it easy to display related products and create richer product pages.

To use this, add to each product multiple products that are related based on the variant you want to choose. For example, if you have the same jacket in multiple products, then this component is exactly what you need to use.

You can display it in three different ways:

Card Layout - 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.

Swatch Layout - This component is ideal for products with color variations, making it easier for customers to select the option they want at a glance.

You don't need to configure color swatches on your website—this functionality is managed entirely within the app. Simply associate each color variation (for example, Red) with its corresponding hexadecimal color code (for example, #FF0000).

Don't worry if some of your products don't have color variations. This component is only displayed for products that support it, so you can use the same Product Detail Page (PDP) across your catalog, with the color swatches appearing only when applicable.

Text Product Linking - Use this component when your product variants can't be represented with images or color swatches. For example, if a pair of jeans is available in different styles—such as Skinny, Straight, or Wide Leg—this component allows customers to easily select the option they want using text labels.

If you offer multiple Buy Now, Pay Later (BNPL) payment options, this component helps you showcase them directly on your Product Detail Page (PDP). Making these payment methods more visible can encourage larger purchases and help increase your Average Order Value (AOV).

With this component, you can easily display the alternative payment methods available to your customers.

Final result of Module Blocks.

This component is used to display your product description. You can customize the title if needed and choose between two visualization modes: New Screen or Accordion.

New Screen
This option opens the product description on a separate, blank screen that contains only the description content. It is the best choice for longer descriptions that include elements such as images or more complex HTML.

Accordion
This option displays the product description as an expandable section within the main Product Detail Page (PDP), allowing customers to view the content without leaving the page. You can also enable the "Opened by Default" option. When activated, the collapsible block will be expanded automatically when the PDP loads.

Final result of Description Block.

The Extra Info block gives you the flexibility to display additional product details as text, images, or links to a web view. You can add unlimited Extra Info components to each Product Detail Page (PDP) you create.

Title
Customize the title to clearly describe the information that will be displayed in this block.

Content
Choose how you want to display the information:

The Text block allows you to display additional information when there is no other suitable component available, such as your company’s values, mission, or vision.

You can also use metafields to display specific product information. For example, with a metafield like "The model wears", you can show the size worn by the model and their height.

You can customize the text formatting by changing the size, applying bold or italic styles, adjusting text colors, adding links or creating tables.

Final result of Text Block.

If your business has multiple physical stores, this component helps you connect your online and offline shopping experiences. Customers can easily check whether the product they are interested in is available at a nearby store.

This feature is especially useful for customers who need a product immediately, allowing them to find it in-store before making the trip.

Final result of "Store Locator".

Customers are looking for more detailed product experiences than ever before. In addition to traditional product images, why not showcase your products through multiple videos? You can use campaign videos, but we also recommend including simpler videos that focus on the product itself without distractions.

With this component, you can display multiple product videos directly below the product information, in a format similar to Instagram Stories.

To use this feature, simply add a (list) video metafield to each product and upload the videos you want to display. The component will automatically retrieve and showcase them on the PDP.

Final result of Product Stories.

This component helps you present product information in a more organized and visually appealing way.

Each section includes an area for an icon and a space for text, allowing you to highlight key product details in a simple and easy-to-understand format.

Use this component to showcase your product’s main features and make important information easier for customers to find.

Final result of Product Info Grid.

The Product Attribute Carousel helps you highlight your product’s most important features in a visually engaging and easy-to-browse format.

Each carousel item can showcase a specific product attribute, combining an image, icon, or short description to help customers quickly understand the key benefits and characteristics of your product.

This component is ideal for displaying details such as materials, technologies, product benefits, or unique features, allowing customers to discover important information without needing to read a long product description.

Final result of Product Attribute Carousel.

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

Final result of Products Insights.

This component helps you display your product’s technical information in a cleaner and more organized way.

By using metafields, your product information will be automatically retrieved and displayed once you add it to your Product Detail Page.

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

This component, similar to the website version, allows you to efficiently answer the main questions your customers have about your product.

By providing answers to your customers’ most common questions directly on the PDP will help you save time, reduce repetitive support requests, and keep your direct messages and emails more manageable.

This component allows customers to check their shipping costs based on their postal code.

While this information was already available during checkout, displaying it earlier in the shopping journey makes it easier for customers to understand the total cost and make purchasing decisions with less effort.

This was specifically created for Brazil, where the country’s large territory and different delivery zones can make the shipping process more complex.

Final result of "Shipping Info Block".

Since we offer an Only-App Discount, it's only fair to make it as easy as possible to use. That's why your customers no longer need to memorize the coupon code - with this component, they can simply copy and paste it instead.

Make it easy for customers to share products they love with the people who matter most.

When a customer taps the Share Block on a product page, it opens their device’s native iOS or Android share sheet, allowing them to quickly send the product through their preferred apps.

Final result of "Share Product 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 16 products they have viewed.

Final result of "Last Seen Block".

This block helps customers discover additional products that are relevant to the item they are viewing. By displaying similar or complementary products, this block encourages product exploration and creates more opportunities for customers to find items they love.

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

The Product Card works similarly to the other product display components, with a different design layout to help showcase your products in a clean and engaging way.

Each product is displayed as a card featuring:

To display products, choose from a specific collection, individual products, or a product metafield. Once selected, your chosen products will automatically appear in the block.

You can also customize the layout by choosing whether products are displayed horizontally or vertically.

Final result of Product Card.

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.

Final result of Image Banner Block.

The Video Banner Block allows you to showcase engaging video content directly in your mobile app. It is designed to help you capture customers attention and highlight promotions, products, brand stories, or important announcements in a dynamic format.

To upload a video, simply click on the icon and select the video from your gallery.