Building a Product Details Page

A Product Details Page, or PDP, is the web page on an ecommerce website that presents information on a particular product, including the product dimensions, color, price, reviews, shipping information, and other relevant details that shoppers may want to check before making a purchase.

The PDP is defined within the store.product block in the Store Theme app, and is composed of a series of child blocks. The store.product block accepts all blocks allowed by the store and flex-layout blocks as child dependencies, as well as the following blocks list:

List of blocks accepted by store.product
  • availability-subscriber
  • buy-button
  • blog-related-posts
  • breadcrumb
  • product-add-to-list-button
  • product-assembly-options
  • product-availability
  • product-brand
  • product-details
  • product-description
  • product-highlights
  • product-identifier
  • product-images
  • product-kit
  • product-name
  • product-price
  • product-rating-inline
  • product-rating-summary
  • product-reviews
  • product-teaser.product
  • product-quantity
  • product-questions-and-answers
  • product-separator
  • product-specifications
  • share
  • shipping-simulator
  • sku-selector

Check out the full and updated list here.

Before you start

To build a responsive PDP, the flex-layout will be used. Hence, knowledge of how to use the flex-layout block is strongly recommended. For more information, please refer to this guide.

Practical example

Consider the following example of a Product Details Page built with the store.product and flex-layout blocks:

Click here to see the code sample
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "shelf.relatedProducts"
    ]
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#product-image", "flex-layout.col#right-col"]
  },
  "flex-layout.col#product-image": {
    "props": {
      "width": "60%",
      "rowGap": 0
    },
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-rating-summary",
      "product-price#product-details",
      "product-separator",
      "product-quantity",
      "product-identifier.product",
      "sku-selector",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "shipping-simulator",
      "share#default"
    ]
  },
  "product-price#product-details": {
    "props": {
      "showInstallments": true,
      "showSavings": true
    }
  },
  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["buy-button"]
  },

  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": true
      }
    }
  }
}

Product Details PageProduct Details Page

From the code sample, notice that the store.product child dependencies define five blocks, the first two being flex-layout.row.

⚠️

Keep in mind that the flex-layout block may suffer modifications if you are on mobile mode. Please refer to the Flex Layout document for more information.

Flex layout first row

In the first row of the flex-layout block, the breadcrumb block is rendered as in the following:

First rowFirst row

"flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },

To customize the breadcrumb, we can then declare the breadcrumb block and configure its properties according to our preferences. Consider the following example:

"breadcrumb": {
    "props": {
        "showOnMobile": true
    }
}

Flex layout second row

The second row of the flex-layout block is responsible for rendering the main information about the product.

In the left column, it renders the product image (flex-layout.col#product-image), while in the right column (flex-layout.col#right-col), it renders the name, price, SKU selector, and buy button:

 "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#product-image", "flex-layout.col#right-col"]
  },

To customize the flex-layout.col#product-image and flex-layout.col#right-col sections, we can declare these blocks and configure their properties according to our preferences as in the following:

"flex-layout.col#product-image": {
    "props": {
      "width": "60%",
      "rowGap": 0
    },
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-price#product-details",
      "product-separator",
      "product-quantity",
      "product-identifier.product",
      "sku-selector",
      "flex-layout.row#buy-button",
      "shipping-simulator",
      "share#default"
    ]
  },

Left column

The left column of the second row contains the product-images block since this was the first flex-layout.col block to be declared.

Left columnLeft column.

Right column

The right column of the second row presents the price, buy button, and other relevant product details. It is, in practice, composed of the following blocks:

Right columnRight column

  • product-name: displays the product name, along with its SKU name, if desired.
  • product-price: displays a properly formatted selling price. You can set it to show the list price (if it's different), installments, etc. Check out below an example of a Product Price displaying both the sale and the list price:
  • product-separator: renders a line separator.
  • product-quantity: displays a quantity selector that allows shoppers to choose how many items they want to add to the cart.
  • product-identifier: displays the product identification number. It accepts different props, such as the label to display before/in front of the identifier.
  • sku-selector: allows the user to choose his desired SKU, automatically hiding impossible combinations or indicating combinations that are currently unavailable.
  • buy-button: adds an item to the cart. You can customize it to show a successful message, redirect users to the cart page, etc.
  • shipping-simulator: allows users to fill in their postal code to then display the available shipping options and their respective prices for that cart.
  • share: allows product sharing on social media. You can customize its props to control which options will be shown to the user.

Related products

After the flex-layout rows, we declared the shelf.relatedProducts block in our store.product block. This block is a Shelf that displays products related to the one shoppers are browsing. These products are defined through the Catalog in the Admin.

"shelf.relatedProducts": {
    "props": {
        "recommendation": "view",
        "productList": {
            "titleText": "Who saw also saw",
            "itemsPerPage": 3
        }
    }
}

When related products are identified, they are presented as in the following:

Related productsRelated products

The shelf.relatedProducts block accepts different recommendation types, such as similars, view, buy, accessories, viewAndBought, suggestions.


Did this page help you?