Evolving your product page

Introduction

During the last step we learned how to create a simple product page with a minimum amount of products, but we know that the result is far from an ideal product page, so we'll add other elements that frequently appear on product pages from various stores.

Over 30 product blocks

Our documentation contains more than 30 product-related blocks. We'll explore 4 more in this step:

• Breadcrumb
• Product Identifier
• Product Quantity
• SKU Selector

It's important that by the end of the course you take some time to fully explore our components, in addition to the customization possibilities that accompany each component.

Activity

Develop the product page by adding the 4 blocks listed above toproduct.jsonc as follows:

1. Define a breadcrumb right before the product's main line;

   JSON

   "store.product": {
     "children": [
       "breadcrumb",
       "flex-layout.row#main"
     ]
   }
   

2. Define the product-identifier.product right under the product-name;

   Diff

       },
       "children": [
         "product-name",
   +      "product-identifier.product",
         ...
       ]
     },
   

3. Create a row right under the price, having sku-selector and product-quantity as children;

   JSON

   {
     ...
       "children": [
         "product-price",
         "flex-layout.row#qty-sku"
       ]
     },
     "flex-layout.row#qty-sku": {
       "children": [
         "sku-selector",
         "product-quantity"
       ]
     },
     ...
   }
   

4. Define shipping-simulator right under the line containing the SKU Selector and Product Quantity:

    "children": [
      ...
+      "shipping-simulator",
      "buy-button"
    ]

Note: Remember to access the Breadcrumb, Product Identifier, Product Quantity and SKU Selector documentation if you have any questions during the activity.

Any questions?

See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)