DEV Community

Discussion on: Building Shopify Section Schemas with JavaScript

Collapse
 
stackedboost profile image
Peter Hallander

Great plugin! Worth flagging for readers doing Shopify app development alongside theme work: app blocks (OS 2.0+) use a very similar JSON schema structure, but are declared in the extensions/ directory of your app rather than inside the theme.

{% schema %}
{
  "name": "My App Block",
  "target": "section",
  "settings": [
    {"type": "color", "id": "bg_color", "label": "Background"},
    {"type": "text", "id": "heading", "label": "Heading"}
  ]
}
{% endschema %}
Enter fullscreen mode Exit fullscreen mode

The reusable JS partials approach you've built here translates well to app blocks too — especially for apps that ship multiple blocks sharing common settings (color pickers, spacing controls, etc.). The main structural difference: app block schemas don't support nested blocks within blocks, which is a theme-section-only feature.

I build several Shopify apps using app blocks and app embeds, and the consistent JSON schema structure definitely makes the learning curve from theme development to app development manageable. Full app block docs are at shopify.dev/docs/apps/build/online... if anyone's looking to make the jump.