Using Theme UI Extensions in your Shopify App

Shopify provides several methods to enhance online storefronts, ranging from ScriptTags for JavaScript injection to modern solutions like App Embeds and App Blocks. These advanced options enable seamless integration of custom app UIs into online stores, reducing or eliminating the need for retailers to modify their theme liquid code. Despite some limitations, understanding and utilising App Embeds and App Blocks allows developers to craft compelling and unique experiences for both shoppers and retailers through Shopify Apps.

Exploring App Embeds and App Blocks

Theme UI Extensions are built on App Embeds and App Blocks, created using npm run shopify app extension generate. This command generates a folder within your extension containing assets, blocks, snippets, and locales essential for your extension. The blocks folder is particularly noteworthy, as it contains App Blocks, liquid code files that can be effortlessly added to the Online Store through the Theme Editor. By properly configuring these blocks, retailers can seamlessly incorporate your app's features into their storefront.

Blocks

App Blocks, situated in the blocks folder, are crafted for easy integration. Retailers can add these blocks to their store through the Theme Editor, thereby incorporating your app's functionalities into their site. A typical App Block schema includes elements like name, target area on the page, associated stylesheet, conditions for availability, and customisable settings for a personalised user experience.

Example schema for an App Block:

{% schema %}
  {
    "name": "My App Block",
    "target": "section",
    "stylesheet": "my_app_block.css",
    "available_if": "{{ app.metafields.app.appBlockEnabled }}",
    "settings": [
      {
        "type": "header",
        "content": "My App Block Settings"
      }, {
        "type": "product",
        "id": "product",
        "label": "product",
        "autofill": true
      }, {
        "id": "background_color",
        "type": "color",
        "default": "#000000",
        "label": "Background Color"
      }
    ]
  }
{% endschema %}

Embeds

Contrasting with Blocks, App Embeds do not directly include HTML and CSS. They leverage JavaScript to inject functionality across all pages of an online storefront, extending the app's reach beyond specific pages.

Example schema for an App Embed:

{% schema %}
  {
    "name": "App Embed",
    "target": "body",
    "stylesheet": "app_embed.css",
    "javascript": "app_embed.js",
    "settings": [
      {
        "type": "number",
        "id": "app_embed_number",
        "label": "App Embed Number",
        "default": 2
      }
    ]
  }
{% endschema %}

Snippets

Snippets enable liquid code modularization, promoting reusability and maintainability. They can contain HTML, CSS, or JavaScript, and are defined without a schema.

Example snippet usage in an App Block:

<div id="my_app_block">
  {{ render "my_snippet", background_color: block.settings.background_color }}
</div>

And in my_snippet.liquid:

<div id="my_snippet" style="background: {{ background_color }}">
  <h1>Hello App Block with Snippet</h1>
</div>

Assets and Locales

Assets house files like JavaScript, CSS, and images, essential for your app. Locales contain translation files, allowing your app to serve a global audience.

Addressing Limitations

While offering significant benefits, Theme UI extensions have limitations, such as placement restrictions for App Blocks, compatibility with older themes, and challenges in incorporating liquid data within JavaScript and CSS files in the assets directory. Creative problem-solving can effectively navigate these issues.

Conclusion

App Embeds and App Blocks are invaluable for enriching Shopify storefronts with customised app functionalities. Despite some challenges, their adept use can result in immersive user experiences. Developers are encouraged to leverage these tools, alongside CSS and JavaScript assets, to deliver tailored and locale-sensitive solutions.

Happy Coding,

Josh