Markdown Wrapper for Checkout UI Extensions

Preview | ocontis_studio

This template includes a React-based Markdown renderer specifically designed for Shopify Checkout UI Extensions. The component transforms Markdown syntax into Shopify's UI Extension components, providing a seamless way to display formatted content in your checkout experience.

Supported Features:

• Headings: Supports h1, h2, and h3 (#, ##, ###)
• Text Formatting:
  • Bold text (**text**)
  • Italic text (*text*)
• Lists:
  • Unordered lists (- item)
  • Ordered lists (1. item)
• Horizontal Rules: Dividers using (---)
• Paragraphs: Regular text blocks with support for inline formatting

Usage Example

const markdownContent = `
# Welcome to our store!
**Free shipping** on orders over $50.

### Key Benefits:
1. Fast delivery
2. Premium quality
3. 24/7 support

--- 

Questions? Contact us at *support@example.com*
`;

return renderMarkdown(markdownContent);

Getting started

Shopify App Template - Extension only

This is a template for building an extension-only Shopify app. It contains the basics for building a Shopify app that uses only app extensions.

This template doesn't include a server or the ability to embed a page in the Shopify Admin. If you want either of these capabilities, choose the Remix app template instead.

Whether you choose to use this template or another one, you can use your preferred package manager and the Shopify CLI with these steps.

Requirements

1. You must download and install Node.js if you don't already have it.
2. You must create a Shopify partner account if you don't have one.
3. You must create a store for testing if you don't have one, either a development store or a Shopify Plus sandbox store.

Installing the template

This template can be installed using your preferred package manager:

Using yarn:

yarn create @shopify/app

Using npm:

npm init @shopify/app@latest

Using pnpm:

pnpm create @shopify/app@latest

This will clone the template and install the required dependencies.

Local Development

The Shopify CLI connects to an app in your Partners dashboard. It provides environment variables and runs commands in parallel.

You can develop locally using your preferred package manager. Run one of the following commands from the root of your app.

Using yarn:

yarn dev

Using npm:

npm run dev

Using pnpm:

pnpm run dev

Open the URL generated in your console. Once you grant permission to the app, you can start development (such as generating extensions).

Markdown Wrapper Limitations

• Nested lists are not supported
• Only supports single-level headings (no nested sections)
• Links are not currently supported
• Images are not supported
• Code blocks are not supported

Developer resources

• Introduction to Shopify apps
• App extensions
• Extension only apps
• Shopify CLI