Evolving your product page

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.

imageimage

Over 30 product blocks

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

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;

    "store.product": {
      "children": [
        "breadcrumb",
        "flex-layout.row#main"
      ]
    }
    
  2. Define the product-identifier.product right under the product-name;

        },
        "children": [
          "product-name",
    +      "product-identifier.product",
          ...
        ]
      },
    
  3. Create a row right under the price, having sku-selector and product-quantity as children;

    {
      ...
        "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 join us on our office hours


Help us make this content better!

VTEX IO courses are open source. If you see something wrong, you can open a pull request!

Make a contribution

or open an issue


Next step