Visual design

Visual design focuses on app aesthetics through the strategic use of images, colors, fonts, and other elements.

Colors, fonts, icons, illustrations, and many other visual elements have a big influence on your app’s usability. Great apps use strong visual design to heighten the merchant experience.

Branding

Anchor link to section titled "Branding".

Whether your app exists on many platforms or is exclusive to Shopify, great branding sets you apart from other apps.

Shopify apps focus on getting the necessary jobs done quickly. Your app’s branding should provide merchants with useful context, but it shouldn’t distract them from completing their tasks.

Learn more about branding your app on the Shopify App Store.

An app with unique illustrations and decorative colors.
Express your app’s brand through illustration, decorative colors, and content. Try to keep your app’s interactive elements as consistent as possible with the Shopify admin.
An app with an interface that shows a container with a different shape that doesn’t fit with the rest of the Shopify admin.

Unacceptable

Don’t express your brand by changing the shape of containers or any interactive elements that exist elsewhere in the Shopify admin.
An app where the background color is replaced with a pattern of logos.

Unacceptable

Avoid excessive use of branding elements. This can make your app feel disjointed from the Shopify admin.

Color

Anchor link to section titled "Color"

Color can provide visual continuity, communicate status information, and give feedback on merchant actions.

Your app exists within the Shopify admin, so you should consider colors that complement the Shopify admin color scheme. Your colors should also respect minimum contrast ratios when used with text or interactive elements.

An app with minimally intrusive color use.

Tip

The Shopify admin background color is light gray (#F6F6F7). Using the same background color for your app will make it appear consistent with the rest of the Shopify admin.
Text showcasing proper color contrast ratios between itself and various other elements like a card, button, and form.

Mandatory

When using components with text, such as buttons, cards, or navigation, the background-to-text contrast ratio should be at least 4.5:1 to be WCAG AA compliant. Be sure to test your color contrast ratios to abide by WCAG standards.
A CTA that doesn’t have the typical green color of the Shopify admin.

Caution

Changing the default primary action color is allowed, but be careful that your color choices don’t confuse merchants about an action’s outcome.
An interface element that uses the Shopify logo’s green.

Unacceptable

Don’t use colors that exist in the Shopify logo in your app. These colors are strictly reserved for the Shopify brand.
An interface with excessive use of color, with every element in the page being a different shade of blue.

Unacceptable

Avoid excessive use of color. The Shopify admin is geared towards task completion, and too much color can distract merchants.

Color roles

Anchor link to section titled "Color roles"

The Shopify admin uses certain colors for specific messaging.

These color roles add additional meaning to the interface and reinforce messaging to merchants. Learn more about color roles in the Polaris color guidelines.

Green, yellow, and red messages in the Shopify admin.

Colors like green, yellow, and red have specific roles such as indicating a successful interaction, a warning, or an error. Be careful when using them in your app.


While colors are useful in design, avoid relying on color only to provide context. For alerts like error states, success states, or system warnings, include messaging or iconography that explains what’s happening.

An app that has colors similar to existing color roles, like warning.

Caution

Some colors are reserved for specific roles in the Shopify admin. If your app’s branding and colors are too similar, it can hinder the merchant experience.
An interface that has conflicting color roles, with a primary button in red.

Unacceptable

Don’t change or reinterpret color roles for existing elements. This can mislead merchants.

App icon

Anchor link to section titled "App icon"

Your app icon acts as the main visual identifier for merchants.

The app icon appears in many touchpoints, like in the Shopify App Store, on the Apps page in the Shopify admin, and next to your app’s name in the TitleBar component. For this reason, your app icon should be easy to read at any size.

Info

For guidance on changing your app icon, go to the App Setup page in the Partner Dashboard.
An app icon in the app header.

Mandatory

Display your app icon only in the app header.

Specifications

Anchor link to section titled "Specifications"

Adhere to the following app icon specifications:

  • PNG or JPG
  • Square 1200px × 1200px
  • No rounded corners
  • Transparent background accepted
An icon set in a grid that respects all specifications.

Preparing your app icon

Anchor link to section titled "Preparing your app icon"
Design your app icon at 1200px × 1200px. This ensures that your icon meets the size requirements.

Tip

We recommend using the app icon template to easily adhere to app icon guidelines.
A diagram that shows the minimum size of an icon within the icon grid.

Mandatory

Design your icon to fill 10/16ths (750px for a 1200px icon) of a vertical or horizontal space.
A diagram that shows the maximum size of an icon within the icon grid.

Mandatory

Design your icon to at most fill 12/16ths (900px for a 1200px icon) of a vertical or horizontal space.
A diagram that shows a 1/16th margin.

Caution

Try to leave a 1/16th (75px for a 1200px icon) margin around your icon that’s free of any visual elements.
An icon that reaches the edge of the icon grid.

Caution

App icon elements that reach the edges can make your icon hard to identify.
A gray icon on a similarly gray background.

Caution

App icons will be used on white (#FFFFFF) and light gray (#F6F6F7) backgrounds. Take notice if your app icon uses these colors.
An icon with a shape that has a drop shadow.

Caution

Drop shadows and bevel effects don’t render well in smaller sizes. Use these effects minimally.
An icon that contains a lot of text.

Unacceptable

Don’t use excessive amounts of text in your icon. This makes it hard to identify and read at smaller sizes.
An icon that uses the Shopify logo.

Unacceptable

Don’t mislead merchants by using an app icon that you don’t own. This includes any part of the Shopify logo.

Typography

Anchor link to section titled "Typography"

Typography is the arrangement of letters in a way that makes reading text easy and comfortable for merchants.

Polaris typography tokens provide a great way to streamline typography.

Different type styles in an app.

Type hierarchy

Anchor link to section titled "Type hierarchy"

Proper use of typography can improve the app experience. By creating a healthy visual hierarchy between headlines and copy, you’ll improve legibility and consistency with the Shopify admin.

An app with consistent headline hierarchy, ranging from a bigger heading at the top to a smaller heading towards the bottom.

Tip

Typography should create a clear hierarchy between headings and text that’s easily legible by merchants. Whenever possible, the title of the current page should be the largest heading size.
A heading in a page that introduces a new section.

Mandatory

Make headings visually distinct from the rest of the text, by being either bolder, larger in size, or both. Don’t use underlines for visual emphasis.
A heading that’s only styled with a different color.

Unacceptable

Using color alone to distinguish a heading is not enough to convey hierarchy and can be confusing for merchants that don’t perceive color.

Font sizes

Font sizes

Our font size specifications apply to the minimum sizes required for legibility in the Shopify admin.

Headings, body text, and interactive elements with text at the minimum required size of 14 px.

Mandatory

The minimum size for headings, body text, and text in interactive elements is 14px.
Various captions and subheadings at a text size of 12 px.

Mandatory

The minimum size for smaller copy, like captions and subheadings, is 12px.

Icons

Anchor link to section titled "Icons"

Icons act as visual aids to help merchants complete tasks. They’re often paired with text to make your app easier to use and to disambiguate certain interactions.

You can save time by using Polaris icons, or create your own by following the Polaris icon guidelines.

An interface that uses icons for primary actions and icons being used in a dropdown selector for more actions in a data report page (Import CSV, Export CSV, Print report, Archive, Share).

Tip

Icons can help merchants better understand the outcome of an action, or help them understand more technical terms that they might not be familiar with.
An interface that uses an icon for every button, causing visual clutter.

Caution

Overusing icons can cause visual clutter and make your app harder to use.
A list of components where only a few list elements have an icon, causing the text to be misaligned.

Unacceptable

Inconsistent use of icons in lists and other repeating elements will make your app look broken.

Illustrations

Anchor link to section titled "Illustrations"

Illustrations give your app personality and help merchants understand complex concepts through meaningful visual metaphors.

Following the Polaris illustrations guidelines is a great way to make your app’s illustrations fit nicely with the Shopify admin.

Illustrations being used in the Puzzlify app interface.

Tip

Keeping a consistent illustration style in your app can strengthen your brand presence and make your app easily recognizable.