Fitting into the admin
Anchor link to section titled "Fitting into the admin".Because merchant workflows cross between apps and the Shopify admin, merchants can have an easier time accomplishing their tasks when apps use the same visual design cues as the admin. The easiest way to create a harmonious experience with the Shopify admin is by following our design system, Polaris.
Info
Admin UI extensions blend in seamlessly with the Shopify admin UI. For optimal integration, we recommend that embedded app workflows follow Polaris. Otherwise, the merchant experience across embedded apps and admin UI extensions might break or feel jarring.
Your app exists within the Shopify admin, so you should consider colors that adhere to the Polaris Color Roles. Your colors should also respect minimum contrast ratios when used with text or interactive elements.
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.
Must Do New
Present the majority of app text in a legible and neutral color, such as black or dark gray.
Must Do New
Green (--p-color-text-success or rgba(1, 75, 64, 1)) should be used to indicate that a status is positive or that an action has been completed successfully. Don't use green to entice merchants or to draw unnecessary attention.
Must Do New
Yellow (--p-color-bg-fill-caution or rgba(255, 230, 0, 1)) should be used to indicate that a status is on pause or incomplete, or to highlight information that requires merchant attention but isn’t urgent. Don’t use yellow for announcements.
Must Do New
Orange (--p-color-bg-fill-warning or rgba(255, 184, 0, 1)) should be used to indicate that a status is in-progress, pending, or to tell merchants that something needs their attention. Orange is the strongest, non-blocking color role in the Shopify admin. Don’t use orange for “under construction” or “coming soon” messaging.
Must Do New
Red (--p-color-text-critical or rgba(142, 11, 33, 1)) should only be used to convey messaging that implies an action is impossible, blocked, or has resulted in an error. Don't use red to entice merchants or to draw unnecessary attention.
Must Do
Background-to-text contrast ratio must be at least 4.5:1 to be WCAG AA compliant. Test your ratios using a tool such as WebAIM Contrast Checker.Your app icon acts as the main visual identifier for merchants.
The app icon displays in many touch points, like in the Shopify App Store, on the Apps page in the Shopify admin. Shopify renders your app icon as an SVG into the admin left hand navigation.
Info
For guidance on changing your app icon, go to the App Setup page in the Partner Dashboard.
Tip
App icons will be used on white and light gray backgrounds, so avoid using similar colors that might make your icon illegible. Refer to Polaris style tokens for Shopify admin color values.Specifications
Anchor link to section titled "Specifications"Adhere to the following app icon specifications:
- PNG or JPG
- Square
1200px × 1200px - No rounded corners
- Additional Shopify App Store icon guidelines
Preparing your app icon
Anchor link to section titled "Preparing your app icon"1200px × 1200px. This ensures that your icon meets the size requirements.
Tip
We recommend using the app icon templates to easily adhere to app icon guidelines.
Must Do
Design your icon to fill 10/16ths (750px for a 1200px icon) of a vertical or horizontal space.
Must Do
Design your icon to at most fill 12/16ths (900px for a 1200px icon) of a vertical or horizontal space.
Must Do
Leave a 1/16th (75px for a 1200px icon) margin around your icon that’s free of any visual elements.
Do Not
Don’t use excessive amounts of text in your icon. This makes it hard to identify and read at smaller sizes.
Do Not
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.
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.
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.
Must Do
Make headings visually distinct from the rest of the text, by being bolder, larger in size, or both. Don’t use underlines that might be mistaken for links.
Do Not
Don't use only color to distinguish a heading to convey hierarchy, as some merchants may not be able to perceive color.Font sizes
Font sizesOur font size specifications apply to the minimum sizes required for legibility in the Shopify admin.
Must Do
Use13px as the minimum size for headings, body text, and text in interactive elements.
Must Do
12px is the minimum size for smaller copy, like captions and subheadings.
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.
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.
Do Not
Don't use icons inconsistently in lists and other repeating elements. This makes 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.
Tip
Keeping a consistent illustration style in your app can strengthen your brand presence and make your app easily recognizable.
