Configure the product detail page

Configure the product detail page

In this article, we'll walk you through the introduction of product detail blocks how to leverage them to create an impactful product detail page.

Note: This user guide is applicable to BigCommerce. 

1. About product detail blocks

When you open the Product Detail module, you will see the default view displaying an example product. You can configure and design the page using various blocks. 

Alphonso offers a range of settings for each block in the product detail page (PDP). Among them, a new setting named Conditions has been introduced. It allows the blocks to appear on a PDP only when the product is associated with specific categories. You can set conditions in the design settings of some blocks, namely Content HTML, Image banner, Video, and Product attributes.  

For further details about this setting and others, see an overview of each block and its settings below.  
The gallery block showcases a collection of images related to the product, while the product information block displays essential details including the product's name, price, current stock availability, and user ratings. Data in these default blocks is pulled from the e-commerce backend. You can’t customize or delete them, but you do have the flexibility to reorder them by dragging and dropping.

  1. Variants

Your users can select variants of your product, such as size, color, and other options to help them customize their purchase. You can change the block title as desired and select the presentation style. There are two types of variant block displays, namely inline or modal. 

Note that if all of your products are simple products (products without options), there is no need to use the variant block. If your product catalog includes both simple products and products with options, add the variant block. It will display variants for products with options but won't display anything for simple products.

Presentation styles
  1. Inline: Display all the variant options for the product without the need for any additional user actions.
  2. Modal: Display the content in a separate, overlaying window or dialog box.

  1. Description

This is essentially sharing the product description from your e-commerce store. You can title this block whatever you like and edit how it is displayed by selecting accordion or modal. 

Presentation styles
  1. Accordion: Display the content in a section that collapses or expands when interacted with. 
  2. Modal: Display the content in a separate, overlaying window or dialog box.

  1. Product attributes

If you want to list additional product information that will appear on the product page, such as a product’s SKU, UPC/ EAN, or any essential characteristics of your product, you can utilize the Product attributes block. 

With this block in Alphonso, you can rename the block, add relevant attributes, choose a presentation style and configure conditions. 

You can add up to 12 built-in product attributes and any custom fields. In the block’s design setting, enter the names that correspond to the attributes you want to display (see the table below). If you're adding custom fields, make sure to enter their names exactly as they appear in your platform's backend. 

  1. Content HTML

Use the content HTML block to add custom content to your product detail page, such as shipping information or safety guidelines. 

It's perfect for providing rich textual information because you can leverage text format, add visuals, and style content in the way you want. Within the block's design settings, you can edit the title, choose a presentation style, and set conditions.

Link external content to your PDP. It can link to a URL such as a shipping policy page or a size guide page. You can edit the title, choose whether to open a webpage in the app, and set conditions. 

  1. Image banner

Utilize this block to highlight promotion banners, such as Exclusive In-App Offers or 24-Hour Flash Sale. Upload an image banner that will be visible on the app’s product detail page. You can title the block, upload an image banner with a maximum size of 15MB, make a link to a different section, select a presentation style, and set conditions.

  1. Video

This block is perfect for showcasing your lookbook and lifestyle content. You can edit the block title, upload a video, make a link to a different section, select a presentation style, and set conditions. We recommend videos under 15MB for optimal load times.

  1. Review

Display user-generated reviews and ratings right on the product detail page, helping potential buyers gain confidence in your product. You can edit the title as you see fit.

Reviews, by default, are collected from your online store. If you’re using third-party review services, such as Yotpo Reviews and Feefo, you need to create an integration first. For more information about the technical requirements and associated fees, go to Integrations and/or contact us at customer.success@jmango360.com. 

Cross-selling and upselling are effective strategies to boost sales. The related products block encourages users to explore more of your offerings. The block’s data is pulled from the e-commerce backend. You can change the block title if you want. 

2. How to configure the PDP?

Step 1: Go to Design > Product Detail.

Step 2: Drag and drop a block onto the preview pane.

Step 3: Configure the page.
  1. To reorder the blocks, drag and drop a block in the preview pane.
  2. To delete a block, hover over it and click Delete.
  3. To edit the details, hover over a block, and then click Design. The design settings differ for each block.
Step 4: To finish, click Save draft in the bottom right corner. 
Please note that saving a draft affects only the design page, allowing you to make further changes. To make the current design available to all mobile users, click Publish to Mobile.

Leveraging the blocks allows you to create a page that serves your customers' needs while aligning with your brand's identity. By following the design steps, you can create product detail pages that not only inform but also convert users into loyal customers.

If you have any further questions, we’re happy to help! Please reach out to us at customer.success@jmango360.com!


    • Related Articles

    • Getting started with Alphonso

      Welcome to Alphonso - the advanced app builder designed to empower you to create exceptional mobile apps. This article will take you on a guided tour of Alphonso and the core pages. By the end, you'll have a general understanding of leveraging ...

    • Configure the My Account page

      In this article, we'll explore the elements and configuration options that allow you to create a tailored and engaging experience for your app users. 1. About the My Account page The My Account page in your app is a crucial hub of information and ...

    • Push notifications in Alphonso

      Push notifications have been proven to be a direct and cost-efficient communication channel, fostering user engagement and retention. In this guide, we’ll explore the scope of push notifications in Alphonso and how to send push notifications. 1. ...

    • Build the categories page

      In this article, we'll take you through the step-by-step process of creating your categories page. Note: This user guide is applicable to BigCommerce. 1. About the category structure Here are some important notes on the category structure in ...

    • Set the app theme

      With our app builder, you are empowered to define the look and feel of your app by customizing the theme. In this article, we will discover where and how to customize a visually stunning and user-centered theme. 1. About app theme An app theme is a ...