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.

A gif showing the tabs on the product page being selected to display different information

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


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.

  1. In 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.

  2. Add the shop details to the Product component’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.

  1. Add the DOMPurify package.

    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.

  2. In pages/products/[shopid]/[producthandle].js, add a MainTabPanel component to render the panel for the policy tabs.

  3. Include a tab for each shop policy.

    The MainTabPanel component 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.

    An image of the product page with a set of tabs for the shop's policies

Next steps