How a Product Details Page Works

It can be a little confusing as to how a Product Details Page (PDP) works, in this tip, we'll hopefully make it a lot clearer for you.

The template for your PDPs needs to be created within the Master App. It's what we call a Master Page as it can be used for many different Products, but they'll have the same Page Layout.

When your Project is set up within Backstage, you'll automatically have a Master Pages folder created within the Master App, which includes a Product Details Pages folder. Then you'll need to set up a Default layout of your PDPs using the Page editor and Tastics as you would on any other Page. It will then use the Product API Stream so that every unique product on your site has its own Page that follows this structure and each will have it's own URL that follows a structure like  /p/[product-id], for example, https://mypage.com/p/123456. This is because our Catwalk automatically creates these based on the API stream and the layout you've created.

If you want to, you can change these URLs using Symfony routing but we won't go through that here.

Setting Up a Default PDP
1
Open Backstage, go to the Master App and select the Product Details Pages folder
PDP Master Section GIF
2
Click on Default Page under the Master Page Rules header, click the + icon next to the Assigned Pages header, input a name and click Save
PDP Default Page GIF
3
Add Cells and Kits to your Page Layout
PDP Editor Layout GIF
4
Add Tastics that have a Product Stream Type (for example, Product Detail Box or Buying Box) and select the Detailed Product stream in the Configuration settings
PDP Tastic Configuration GIF
5
Add any other Tastics to organize the Page how you want it to look to your customers
PDP Organizing Layout GIF
6
Click Preview to see what your Page will look like and change as you wish to, then click the Save button
PDP Preview Pages GIF
7
Find your Page within the Drafts section, click the More icon (three vertical dots) and select Make Default
PDP Publish Version GIF
Editing a Default PDP

To edit your Default Product Details Page layout at any time, just click the pencil icon on the active version of your Page, change it as you'd like to by adding Tastics, removing them or editing the configuration. Click Save when you've finished making changes, click the Preview button to make sure it looks good and then Publish Changes as shown below:

PDP Edit Layout GIF

Scheduling a New Version of the Default PDP

You can create a new PDP and make it go live when you want it to.

1
Click the more icon on the Default version of your Page and select Create Draft From Page
PDP Scheduling New Page GIF
2
Click the more icon in the Draft version of your Page and select Schedule, then input the data and the time you want to make the Page live and when you want it to come down
PDP Scheduling Select Date Time GIF

Then you can edit the PDP as normal by clicking the pencil icon on the Scheduled version of your Page.

To change the scheduled time, click the more icon on the Scheduled version of your Page, then click Edit Schedule and edit the dates and times in the pop up, then click Save:

PDP Change Scheduling GIF

To remove the Scheduled time, click the more icon on the Scheduled version of your Page then click Make Draft:

PDP Remove Scheduling GIF

Specific Product PDPs

Aside from the Default PDP, you can also create Multiple PDPs that can be wired to specific products using FECL. To do this:

1
Click the add icon next to the Master Page Rules header, input a name, select Entity Criterion as the Filter Type and input your criteria then click Save
PDP FECL Product Stream GIF


In this example, our rule is based on a Product Type being equal to Sunglasses

2
Follow the steps from the Default PDP set up at the beginning of this article
That's it! You'll now have bespoke Product Details Page that will display based on the rules you've set up. So in our example, all products that have a type of Sunglasses, will have a different PDP than all other product types.

Other options for your Criteria could be:

  • product.prize > 500 and product.label = "sale"
  • product.type = "makeup"
  • in_array("<category-id>", attributes)
  • categoriescontain(categories, "<category-id>")

‹Back

Tips

Still need help? Contact Us Contact Us