How to enable rich text formatting in BYOB bundle descriptions

By default, the BYOB (Build Your Own Bundle) widget displays product descriptions as plain text. Any HTML formatting from your Shopify product descriptions, such as headings, bold text, bullet points, or paragraph breaks, gets stripped out, so descriptions show up as a single unformatted block of text inside the BYOB widget. For general BYOB setup, see our BYOB (Build Your Own Bundle) guide.

Add the JavaScript snippet to restore formatting

You can restore rich text formatting in BYOB descriptions by adding a small JavaScript snippet to your theme. This snippet intercepts the plain-text description and replaces it with the original HTML-formatted version from your Shopify product.

Installation steps:

1. In your Shopify Admin, go to Online Store → Themes
2. Click Actions → Edit code on your live theme (or create a duplicate first to test)
3. Open the theme.liquid  file in the Layout folder
4. Paste the snippet here just above the closing </body>  tag
5. Click Save

For more on customizing the look of your BYOB widget, see BYOB styles customization.

Styling tip: oversized headings

If your product descriptions include H2 headings, they may appear too large in the BYOB mini-cart panel. You can adjust the sizing with CSS scoped to the mini-cart:

.byob-mini-cart__subtitle h2 {
  font-size: 1rem;
  margin: 0.5em 0;
}

.byob-mini-cart__subtitle p {
  margin: 0.5em 0;
}

Add this CSS to your theme's stylesheet or in a <style>  block alongside the JavaScript snippet.

Notes

• This workaround is theme-agnostic and works across most Shopify themes
• The snippet runs after the page loads and applies to the BYOB widget's description area
• If you update your theme, you may need to re-add the snippet

If you need help installing this snippet, reach out to our support team, and we'll be happy to assist.