Add shop policies
You've added product description pages to the marketplace, populated with details pulled from storefronts. Each page has a Buy Now button taking buyers to a shop's online checkout. However, a competitive marketplace might have multiple shops selling the same product.
You want to show store policies, which could affect a buyer's decision to purchase from one shop over another. You'll surface store policies on the product pages, because buyers might arrive at the product page without having seen the shop's page.
In this tutorial, you'll use the Storefront API's
shop object to include a store's terms of service and refund, shipping, and privacy policies to marketplace product pages.
What you'll learn
After you finish this tutorial, you'll know how to do the following:
- Surface shop policies on your marketplace product page
- You've completed the Add Buy Now buttons tutorial.
Step 1: Fetch shop policies
Since the policies are available using the Storefront API, you can update the existing product query on the product details page to also fetch the shop policies.
pages/products/[shopid]/[producthandle].js, add the shop policies to the product query.
You can also rename the query to better reflect the data being queried.
Add the shop details to the
Productcomponent’s state in the existing effect that runs the product query.
Step 2: Surface shop policies
After the shop policies are available in the component's state, you can surface them by extending the tab UI you created.
You'll use the package to protect against XSS attacks and ensure that any scripts that a merchant may have added to their product policy HTML doesn't run on the marketplace.
pages/products/[shopid]/[producthandle].js, add a
MainTabPanelcomponent to render the panel for the policy tabs.
Include a tab for each shop policy.
MainTabPanelcomponent will render the policy tab panel with the body from each policy.
You should now have a set of tabs on your product page that surface the product description and store policies.
- Learn how to create marketplace-level cart and checkout functionality.