On each product detail page, the product description format art gone

[daddyharry]

With this starter, the product description on the products' detail pages becomes unformatted, particularly the original bullet-list tags are gone, making the description unformatted. Just wondering if there's anything I might have missed.

[helmutgranda]

There are a few things you have to do.

You need to switch your query to request descriptionHtml instead of description, then you need to let the HTML ingested be rendered on the page otherwise you will only see the HTML output.

[logicfish]

diff --git a/src/pages/products/{ShopifyProduct.productType}/{ShopifyProduct.handle}.jsx b/src/pages/products/{ShopifyProduct.productType}/{ShopifyProduct.handle}.jsx
index aa1eb4b..4162efc 100755
--- a/src/pages/products/{ShopifyProduct.productType}/{ShopifyProduct.handle}.jsx
+++ b/src/pages/products/{ShopifyProduct.productType}/{ShopifyProduct.handle}.jsx
@@ -36,7 +36,7 @@ export default function Product({ data: { product, suggestions } }) {
     variants: [initialVariant],
     priceRangeV2,
     title,
-    description,
+    descriptionHtml,
     images,
   } = product
   const { client } = React.useContext(StoreContext)
@@ -149,7 +149,7 @@ export default function Product({ data: { product, suggestions } }) {
               <ChevronIcon size={12} />
             </div>
             <h1 className={header}>{title}</h1>
-            <p className={productDescription}>{description}</p>
+            <div className={productDescription} dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
             <h2 className={priceValue}>
               <span>{price}</span>
             </h2>
@@ -230,7 +230,7 @@ export const query = graphql`
   query($id: String!, $productType: String!) {
     product: shopifyProduct(id: { eq: $id }) {
       title
-      description
+      descriptionHtml
       productType
       productTypeSlug: gatsbyPath(
         filePath: "/products/{ShopifyProduct.productType}"