Visual testing helps Shopify update their style guide with speed and confidence

Percy has enabled the Shopify team to integrate visual reviews into their daily workflows to automate previously manual work

THE CHALLENGE

Shopify depended heavily on the team to manually QA each pull request, but visual regressions still made their way to production

Shopify’s mission is to make commerce better for everyone. The Shopify team supports a community of over 800,000 merchants with their platform, and a partner ecosystem with their fully maintained design system, Polaris. Polaris is both a set of guidelines and a managed component library that helps Shopify and its partners build consistent and beautiful user experiences for merchants.

Because hundreds of partners—and thousands of merchants—depend on Polaris, the Shopify team works hard to keep it pixel-perfect. More than 130 contributors (designers, content creators, developers, and even external contributors) all work together to build and maintain Polaris. However, Shopify had no way to maintain the visual integrity of the Polaris design system UI and component library. They depended heavily on the team to manually QA each pull request, but visual regressions still made their way to production.

To keep Polaris a reliable and valuable community resource for all of Shopify’s UX professionals and partners, they recognized the need for consistent and automated visual feedback—without having to invest a huge amount of time upfront.

THE SOLUTION

Percy’s visual review workflow has given the Shopify team complete confidence in their UI while dramatically reducing time spent manually reviewing PRs

Percy has enabled the Shopify team to integrate visual reviews into their daily workflows to automate previously manual work. With pull request integration, Percy reviews show up in every GitHub pull request, notifying the team when visual changes are detected. Instead of having to open up a staging environment and check each page for regressions and intended updates, QA is a click away. Giving every team member direct access to see the site visualized on every commit gives everyone confidence in their code without the stress of merging to master.

Furthermore, as an open source resource, Polaris depends on third-party contributions to maintain and expand their component library. Third-party contributors can see their contributions visualized immediately with Percy public projects. Visual reviews give them a chance to proactively amend their pull request if they’ve introduced breaking changes and speeds up the overall review process. Visual testing has now become an essential part of maintaining the Polaris style guide and React component library.

NUMBER OF EMPLOYEES

5000+

FOUNDED

2006

INDUSTRY

Commerce platform

BROWSERSTACK PRODUCTS USED

Percy

"Now instead of having to manually scout for visual changes across all of our pages and components in every pull request, we instantly see everything that’s changed in Percy’s UI."
Kaelig Deloumeau-Prigent
UX Development Manager on Polaris, Shopify