Once the store's homepage is done, we can start working on a new store template: the product page. Product pages are the templates with the most blocks, which makes them highly flexible and customizable.

Let's build a minimal product page, with only the bare essentials:

• images;
• prices;
• names;
• buy button

Unlike content blocks, most product blocks are inserted into a specific context, making them a bit "plug-n-play": placing product images on the product page automatically renders images on that page, the same being true for price and name.

This doesn't mean that these blocks are less customizable, quite the opposite, actually, as we'll soon see.

Build a product page using the following blocks in product.jsonc and declare it in the store/blocks folder: product-images, product-price, product-name, and buy-button. We expect the structure to contain the following:

1. A row in store.product;

   
   

   _10

   {

   _10

   "store.product": {

   _10

   "children": ["flex-layout.row#main"]

   _10

   }

   _10

   }

   
   

2. That row should have two columns;

   
   

   _10

   "flex-layout.row#main": {

   _10

   "props": {

   _10

   "marginTop": 6

   _10

   },

   _10

   "children": [

   _10

   "flex-layout.col#left",

   _10

   "flex-layout.col#right"

   _10

   ]

   _10

   }

   
   

3. The left column must contain a product-images;

   
   

   _10

   "flex-layout.col#left": {

   _10

   "children": [

   _10

   "product-images"

   _10

   ]

   _10

   }

   
   

4. The right column must contain the product-name, product-price, and buy-button:

   
   

   _10

   "flex-layout.col#right": {

   _10

   "children": [

   _10

   "product-name",

   _10

   "product-price",

   _10

   "buy-button"

   _10

   ]

   _10

   },

   
   

In addition, we want:

1. the right column to be vertically aligned to the center (see the verticalAlign and preventVerticalStretch props in the Flex Layout Column documentation):

   
   

   _10

   "flex-layout.col#right": {

   _10

   "props": {

   _10

   "preventVerticalStretch": true,

   _10

   "verticalAlign": "middle"

   _10

   },

   _10

   "children": [

   _10

   ...

   _10

   ]

   _10

   },

   
   

2. the product-price to show the total savings and list price (showSavings and showListPrice):

   
   

   _10

   "product-price": {

   _10

   "props": {

   _10

   "showSavings": true,

   _10

   "showListPrice": true

   _10

   }

   _10

   }

   
   

After finishing the previous steps, you can search for a product in the search bar, on the top right of the page.

If you are on the appliancetheme account, try searching for a coffee machine, for example:

When clicking on the second one, the Red Retro Coffee Maker, you'll go to its product page, and you can see the blocks on it.

Note: Some of the products will not have the savings, since there are no discounts based on the list price.