In this article, we walk through best practices to make your app blocks responsive. 'App blocks need to work in a wide array of different themes, templates, and sections, so it’s important to consider how adaptable your app block will be to these different environments.' Adding a product review app blocks beneath or within the product details section.Īpp blocks need to work in a wide array of different themes, templates, and sections, so it’s important to consider how adaptable your app block will be to these different environments. We’d want to shift the layout so it renders below the title. However, if it’s added within the product details section, there isn’t room alongside the review title for the star rating. When added below, the block can take advantage of the extra space and show a star rating on the right. Take the example below, where an app block for a customer reviews app can be added within or below the product details section.

This means that app blocks need to be responsive to the size of the containing section to which they're added. These sections can be full-width, a fixed size, alongside or contain other content.

Merchants can add app blocks to a compatible theme section or wrapped in a platform-provided section. This means that app developers can build UI components that can be added, removed, and configured through the theme editor by merchants. Apps that inject inline content on a page can now extend themes using app blocks. Theme app extensions completely change how merchants interact with your app on their storefront.Īpp blocks also bring a radical change in the way apps are included inside of themes. At Shopify Unite 2021, we announced theme app extensions for developers, allowing you to extend apps into merchants' themes via app blocks.

Blocs app shopify