Adding product description pages
So far, your marketplace UI includes a homepage that displays shops and some of their products. Each shop in the marketplace has a dedicated page that shows the types of products they sell. However, to see product details, buyers need to select products and be redirected to the merchant's storefront. Instead, you want your marketplace to provide the information that buyers might need to make a purchase.
In this tutorial, you'll use dynamic routing that directs buyers to a unique URL for each product on the shop's page. You'll use the Storefront API to surface product details on product description pages. The pages will include product variant pickers, and page content will dynamically update to reflect a selected variant.
What you'll learn
Anchor link to section titled "What you'll learn"After you finish this tutorial, you'll know how to do the following:
Link out from a product on a shop page to a product description page
Surface a shop's product descriptions on a marketplace
Dynamically update product details when selected variants change
Requirements
Anchor link to section titled "Requirements"- You've completed the Shops tutorials.
Step 1: Update products
Anchor link to section titled "Step 1: Update products"You might have to update your GraphQL queries to Shopify to assist with building out your product pages.
Add
handleto the product query. This is a unique string for the product, and is useful for URLs/routing.The marketplace homepage might now look something like the following:
The shop page might now look something like the following:
Step 2: Set up the product page
Anchor link to section titled "Step 2: Set up the product page"Make a call to Shopify to query for a product given the handle that you obtained.
Use the information retrieved to build a basic product page.
You should now have a basic product page that looks something like the following:
Step 3: Add variant selection
Anchor link to section titled "Step 3: Add variant selection"Products can have one or more variants, which might have their own image and price. Each variant is tied to merchant-configured product options. To enable buyers to explore all variants, they need to be able to select product options.
Update the product query to retrieve variant information and product options.
Use the information retrieved from the updated query to build a more detailed product description page.
The product description page can now have variant selectors and might look something like the following:
The product description page can also now have variant selectors, and dynamically update the price and image to the selected variant. It might look something like the following:
Learn how to add a Buy Now button to shop pages, to take buyers directly from a product to checkout.
Share feedback on Marketplace Kit.