UX guidelines for theme app extensions

A great customer-facing and merchant user experience (UX) is important to the success of our merchants. The following provides UX guidelines for theme app extensions.

Key principles for app blocks

The following are key principles for designing app blocks:

  • App blocks are responsive to the size of the section to which they're added.

  • App blocks inherit styling properties from the theme, such as typography and colors.

  • App blocks can use autofill resource settings to automatically point to dynamic sources and ensure that content remains in sync with its parent section.

Merchant customization

Merchants need to be able to easily customize app blocks and app embed blocks using the theme editor.

Don't clutter the theme editor with configurable settings. Limit these to visual settings, where possible. This is especially important for app embed blocks. All app embed blocks will live in the same panel, and many configurable settings for an individual app embed block can quickly clutter the panel.

Let merchants do the following from the theme editor's Apps section:

  • Add, remove, or reposition an individual app block

  • Edit an individual app block's settings

  • Preview edits before saving and publishing changes

Let merchants do the following from the theme editor's App embeds section:

  • Activate and deactivate an individual app embed block

  • Edit an individual app embed block's settings

  • Preview edits before saving and publishing changes

Descriptions for public apps

Descriptions for apps sold on the Shopify App Store should indicate whether the app requires an Online Store 2.0 theme. This will prevent merchants from installing an app and discovering that the app doesn't work in their online store.

Merchant onboarding

On the app onboarding page in Shopify admin, give merchants clear post-installation onboarding instructions. To learn more about writing effective help documentation, refer to Help documentation in Shopify Polaris.

Provide merchants with the following information:

  • What app blocks and app embed blocks are in the app, and what they do

  • How to add, remove, and reorder app blocks

  • How to activate and deactivate app embed blocks

  • How to configure functional settings for app blocks and app embed blocks

  • What templates app blocks and app embed blocks can be added to

Uninstalling apps

When merchants uninstall apps, blocks associated with the apps need to be automatically and entirely removed from online store themes.