How to Manage App Block in Theme App Extension in Shopify Remix App?

In this article, we will learn about how to manage app block in the Shopify theme app extension in the Shopify remix app.

A theme app extension is a bundle of app blocks, app embed blocks, assets, and snippets. Apps that inject inline content on a page extend themes using app blocks. Merchants can add app blocks to a compatible theme section, or as wrapped app blocks that are added at the section level. Create an app block by setting the target in the schema to a section.

By default, themes don’t include app blocks after an app is installed. Merchants need to add the app blocks to the theme from the Apps section of the theme editor.

How to Display App Block on a Specific Page?

Enabled_on: Limit an app block to specific templates and section groups, or limit an app embed block to specific templates.

App blocks and app embed blocks can’t be rendered on checkout step pages.

You can use only one of enabled_on or disabled_on.

Here is the example for enable app block for customers/login page only:

{% schema %}
{
    "name": "Your App Block",
    "target": "section",
    "enabled_on":{"templates": ["customers/login"]}
    "settings": []
}
{% endschema %}

You can restrict a section to certain template page types and section group types by specifying them through the enabled_on attribute.

enabled_on, along with disabled_on, replaces the templates attribute. You can use only one of enabled_on or disabled_on.

How to Disable App Block in Specific Page?

disabled_on: Prevent app block from being used in specific templates and section groups, or prevent an app embed block from being used in specific templates.

App blocks and app embed blocks can’t be rendered on checkout step pages.

You can use only one of enabled_on or disabled_on.

Here is the example for disable app block for customers/login page only:

{% schema %}
{
    "name": "Your App Block",
    "target": "section",
    "disabled_on":{"templates": ["customers/login"]}
    "settings": []
}
{% endschema %}

You can prevent a section from being used on certain template page types and section group types by setting them in the disabled_on attribute. When you use disabled_on, the section is available to all templates and section groups except the ones that you specified. disabled_on along with enabled_on replaces the templates attribute.

Conclusion:

Managing App Blocks in Theme App Extensions within the Shopify Remix App is a powerful way to enhance a Shopify store’s functionality. By following the steps outlined in this guide, you can create, deploy, and manage custom App Blocks that give merchants the flexibility to create dynamic and engaging storefronts. Whether you’re a seasoned Shopify developer or just starting, mastering App Blocks will be an invaluable skill in your toolkit.