How to Design Your Product Detail Page

1   What is the Product Detail Page?

The Product Detail Page (PDP) is the screen a customer sees when they tap on any product in your app — whether from the Home page, a collection, or search results. It shows the product images, name, price, variants, description, and the Add to Cart button.

Because this is the screen where buying decisions are made, a well-designed PDP directly impacts your conversion rate. MobiDrag gives you full control over its layout, block order, and content.

2   Navigating to the PDP in the builder

1. 1Open App Builder and make sure you are in Builder Mode.
2. 2Click the page dropdown in the toolbar (currently showing "Home").
3. 3Select Product Detail from the list.
4. 4The canvas and block palette update to show the PDP layout and its available blocks.

3   Blocks available for the PDP

The PDP has its own set of blocks — different from the Home page blocks — because they are designed specifically around product data. The left panel shows only the blocks relevant to product pages when you are on the Product Detail page.

4   Configuring key PDP blocks

Click any block on the PDP canvas to open its settings in the right panel. Here is what to configure for the most impactful blocks:

Header block settings

The Header on the PDP is the same global Header used across all pages. In its settings you can configure:

• Header Layout — choose Left, Center, or Right alignment for the logo
• Content — set your logo image or brand name text
• Background Color — the header bar background
• Sticky Header — toggle on to keep the header fixed at the top while scrolling
• Show Bottom Divider — add a subtle separator line below the header

Product Grid / Carousel block settings

For related products sections, configure:

• Collection — which Shopify collection to pull products from
• Items Shown — how many products to display
• Columns — 1, 2, or 3 columns layout
• Product Card elements — toggle Image, Title, Price, Add to Cart, Add to Favourite individually
• Vertical / Horizontal Gap — spacing between product cards

5   Best practices for a high-converting PDP

• Put Add to Cart above the fold: The buy button should be visible without any scrolling on a standard phone screen.
• Show multiple product images: Mobile shoppers rely heavily on images. Include 3–5 photos showing different angles.
• Keep descriptions concise: Long text forces users to scroll past the CTA. Use bullet points for key features.
• Enable Sticky Header: Keeps your brand visible and navigation accessible even as users scroll down through product details.
• Add a Related Products section: A Product Grid or Carousel below the main product info increases average order value by surfacing complementary items.
• Test on mobile proportions: Always preview the PDP in Preview mode before publishing — mobile screens are narrow and things that look fine on desktop may crowd on a phone.