Skip to contentShopify logoPolaris
  • What’s new
  • Getting started
  • Foundations
  • Design
  • Content
  • Patterns
    New
  • Components
  • Tokens
  • Icons
  • Contributing
  • Tools
  • Home

Patterns (legacy)

Design patterns help ensure consistent behavior across the Shopify admin.

  • Loading

    Navigating the Shopify admin should be fast, meaningful, and focused. Intentional loading states deliver a continuous flow for merchants.

    • Principles
    • Make it fast
    • Make good use of time
    • Focus on the job
  • New badge

    The New badge can be used to inform merchants about the release of a feature that creates new value. It should be used sparingly and for a short time frame.

    • When to use the New badge
    • How long to use the New badge
    • Pips
  • Pickers

    Picker experiences help merchants browse, find, and select from multiple options. Use them for selecting locations, customer segments, and more.

    • Best practices
    • Picking resources
  • Text fields

    Text fields combine the field label (the title) and the input area. Inputs can vary from typed text to URLs to date pickers.

    • Field labels
    • Placeholder text
    • Help text
    • Text input types
    • Modeled text inputs
    • Free text inputs
    • Titles, names, and descriptions
    • Codes and tracking numbers
    • Multiline text inputs
    • Search and email fields
    • Minimalist page design and placeholders

Leave feedback