Skip to content
MI Theme Docs

Theme Component Library

About This Documentation

This is the component library for The Monroe Institute Shopify theme. It documents every section and snippet available in the theme, including:

  • Description extracted from inline docblocks
  • Settings parsed from the Shopify {% schema %} block
  • Blocks with their configurable fields
  • Parameters (for snippets) with types and descriptions
  • Screenshots showing what each component looks like

Sections vs Snippets

Sections are the building blocks you use in the Shopify theme editor to construct pages. When you add or rearrange content on a page, you’re working with sections. Each section’s documentation here shows its available settings and blocks so you know what’s configurable.

Snippets are internal code components used by developers. They are rendered automatically by sections and cannot be added or configured from the theme editor. Their documentation is included here as a reference — for example, if you want to request a change to how a particular element looks or behaves, you can find the relevant snippet and reference it in your request.

Regenerating Docs

When sections or snippets are added or modified, regenerate the documentation:

Terminal window
# From the project root
npm run docs:generate


# Or from the docs/ directory
npm run generate

Adding Screenshots

Place screenshot images in docs/src/assets/screenshots/ using the naming convention:

  • Sections: section-{filename}.png (e.g., section-benefits.png)
  • Snippets: snippet-{filename}.png (e.g., snippet-card-product.png)

The parser will automatically link them when they exist.