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.
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
- Inline: Display all the variant options for the product without the need for any additional user actions.
- Modal: Display the content in a separate, overlaying window or dialog box.
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
- Accordion: Display the content in a section that collapses or expands when interacted with.
- Modal: Display the content in a separate, overlaying window or dialog box.
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 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.
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.
Web link
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.
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.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.
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.
Step 1: Go to Design > Product Detail.
Step 2: Drag and drop a block onto the preview pane.
Step 3: Configure the page.
- To reorder the blocks, drag and drop a block in the preview pane.
- To delete a block, hover over it and click Delete.
- 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.