Skip to main content

Product detail page (PDP)

The PDP is:

  • Where a customer goes to view everything about a single product
  • Where, for some ecom shops, a customer may be able to click a "Buy now" or "Checkout with topi" button and go directly to a third-party hosted checkout experience

Elements for the PDP​

PDP

There are 2 topi elements that are relevant here.

First, the Product Rental Summary Label. This indicates the lowest rental price per month that topi can offer for the product being viewed.

Second is the Checkout Button. On the PDP, when a customer clicks on the button, they would expect to skip a few steps in the checkout process and go through a "fast checkout" experience. We'll talk about this in detail below.

Considerations for rendering a Checkout Button on the PDP​

Beware, murky waters ahead.

There are two possible outcomes when a checkout button is rendered on a PDP:

  1. The item being viewed is the only item that gets checked out
  2. The item being viewed is added into the existing cart and the cart gets checked out

Which one is the one your customer expects? This is a question you will have to contend with.

The topi Checkout Button, by default, is going to render (or not render) based on the cart's contents. This is because it is designed as a Checkout Button, meant to be used in the checkout process.

To achieve outcome 1, see Checkout Button > checkout-mode. Outcome 2 is not supported.