---
title: "Shopify"
description: "Global commerce platform powering millions of businesses with essential infrastructure and innovative engineering solutions."
---

# Shopify
> Global commerce platform powering millions of businesses with essential infrastructure and innovative engineering solutions.

## Articles

### [Building Mental Models of Ideas That Don’t Change](https://yomu.fyi/post/building-mental-models-of-ideas-that-don-t-change.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Oct 22, 2020

Amid a constant stream of frameworks, languages, and platforms, the post argues that learning enduring principles is more useful than trying to absorb every new tool. It presents mental models as a checklist for prioritizing concepts, recording what matters, and making more informed decisions across engineering and management. Engineering examples include alerting on silent failures, queuing background jobs for faster responses and retries, using caching and denormalization for read-heavy workloads, and sharding or deliberate design choices for write-heavy systems. The post also recommends horizontal scaling for long-term growth, then turns to practices such as aligning incentives, clarifying product purpose, building rapport before feedback, and operating a few months ahead. The stated aim is to use these models to make more informed decisions rather than chase an ever-expanding list of new technologies.


### [How to Do an In-depth Liquid Render Analysis with Theme Inspector](https://yomu.fyi/post/how-to-do-an-in-depth-liquid-render-analysis-with-theme-inspector.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Oct 20, 2020

Shopify theme code can create server-side rendering bottlenecks that leave customers waiting on a blank screen, so the article explains how to analyze Liquid performance with Shopify Theme Inspector. It describes flame graphs as representations of code paths and execution time, then compares clean Liquid with heavy loops, nested loops, and mixed global Liquid scopes. Accessing product attributes raised a 10-item example from 13 ms to 162 ms, while 50 products took 800 ms; two- and three-level nested examples rendered in 55 ms and 72 ms. The guidance recommends examining total iteration time, sawtooth or hair-comb patterns, unnecessary attributes, pagination size, and AJAX alternatives. It proposes aiming for 200 ms and keeping total page rendering under 500 ms, while noting that this alone does not guarantee a good LCP score.


### [How to Build an Experiment Pipeline from Scratch](https://yomu.fyi/post/how-to-build-an-experiment-pipeline-from-scratch.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Oct 15, 2020

The post describes building an email experimentation pipeline at Shopify after an existing framework for web properties and Shopify admin experiences could not support tests in external channels. The motivating case was a personalized blog-post recommendation algorithm whose incremental benefit needed comparison with generic blog emails, while local randomization and text-file storage created risks around unsubscribed users, shop-email relationships, and overlapping audiences. After requirements gathering, system mapping, mock-table queries, stakeholder review, and technical design review, the author implemented three pipeline phases in PySpark: experiment definitions, consolidation, and filtering with deduplication and exclusion rules. Production output supported ongoing randomization, backfills, category tags, sample limits, and integration with Shopify’s existing analysis framework; the tool was subsequently used across multiple data teams for email experiments.


### [Images as Code: Representing Localized and Evolving Products on Marketing Pages](https://yomu.fyi/post/images-as-code-representing-localized-and-evolving-products-on-marketi.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Oct 7, 2020

Shopify needed product visuals on more than 35 localized domains to stay accurate as features, currencies, languages, and product UI changed. An SVG experiment made translated text difficult to manage because SVG lacks word wrapping, while export settings, effects such as Gaussian blur, and repeated translation hooks created maintenance and performance problems. The replacement represented interfaces in HTML and JavaScript through ScaleContentAsImage, which wraps fixed-width content, computes available space, applies a CSS transform scale, preserves layout with a spacer, absolutely positions the transformed element, and updates calculations on resize. The team concluded HTML/JavaScript was more maintainable and flexible for design, documentation, animations, and localization, while noting remaining work around lazy-loaded images, reusable-visual documentation, and future CSS Houdini possibilities.


### [How to Use Quasi-experiments and Counterfactuals to Build Great Products](https://yomu.fyi/post/how-to-use-quasi-experiments-and-counterfactuals-to-build-great-produc.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Sep 28, 2020

Correlation does not establish causation, so the post presents causal inference as a way to determine why product metrics change and to validate or invalidate business strategies. The proposed evidence ladder places randomized A/B tests first, quasi-experiments such as fixed-effects regression and difference-in-differences second, and counterfactual estimation third, with descriptive statistics providing no direct causal evidence. It explains that quasi-experiments use non-random treatment and control divisions, while difference-in-differences depends on a parallel-trends assumption and fixed-effects regression assumes relevant dividing factors were collected. For a security update released to everyone, the team trained a time-series model on unaffected feature usage and global activity trends, then found no lift versus actual usage, indicating no negative effect on usage. Because observational methods bring greater uncertainty and frequent false positives, the post recommends stating assumptions, relaxing them through robustness checks, and using DAGs and Dagitty to test causal hypotheses.


### [Enforcing Modularity in Rails Apps with Packwerk](https://yomu.fyi/post/enforcing-modularity-in-rails-apps-with-packwerk.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Sep 23, 2020

Large Rails monoliths can develop high coupling, low cohesion, cross-component calls, shared Active Record models, and classes that know too much because Ruby and Rails provide limited boundary enforcement. Shopify created Packwerk, an open-source static analysis tool that groups Ruby files into packages and enforces dependency and privacy boundaries, including controlled public APIs for constants. It reports the violation type and location with actionable next steps, integrates with CI, and can run locally; installation begins by adding the gem and running packwerk init. Because Ruby static analysis is complex, Packwerk ignores constants that are not autoloaded, reducing false positives at the cost of false negatives. The excerpt says it runs in six Shopify Rails applications, with 48 packages and 30 boundary enforcements in the core codebase, while adoption also prompted work on dependency inversion.


### [Under Deconstruction: The State of Shopify’s Monolith](https://yomu.fyi/post/under-deconstruction-the-state-of-shopify-s-monolith.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Sep 16, 2020

Shopify describes the ongoing effort to modularize its core Ruby on Rails monolith, which contains more than 2.8 million lines of Ruby and 500,000 commits. The initiative organizes code into independently owned components intended to narrow developer focus, reduce affected test suites, preserve contracts, and clarify operational ownership, while recognizing that large-scale refactoring is also a people problem. The work has already improved exception triage, distributed codebase chores, and design awareness, while its current practices emphasize grassroots participation, tooling, targeted reviews, and a holistic architectural view. Packwerk restricts dependencies for about a third of the 37 main-monolith components. Shopify is pursuing a cleaner dependency graph, componentized Rails applications by default, and isolated component tests, while reserving service extraction for cases such as storefront rendering and credit-card vaulting.


### [Tophatting in React Native](https://yomu.fyi/post/tophatting-in-react-native.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Sep 9, 2020

Shopify’s tophatting process manually verifies coworkers’ changes before pull requests are approved, but React Native reviews previously required saving work, switching branches, rebuilding, and loading the app. The new tool stores compressed JavaScript bundles and their assets in cloud storage when Shopify Build’s CI pipeline processes a React Native pull request. A backend service records metadata such as the app ID, commit SHA, and branch, generates signed URLs, and posts a pull-request comment with a QR code, bundle ID, and download link. A React Native component library handles deep links through a separate Tophat screen, confirms bundle metadata, downloads and decompresses the selected bundle, saves metadata locally, and restarts the app with it. The first iteration lets developers load peer changes within seconds, and almost all Shopify React Native projects now use the tool.


### [5 Ways to Improve Your React Native Styling Workflow](https://yomu.fyi/post/5-ways-to-improve-your-react-native-styling-workflow.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Sep 2, 2020

Shop's React Native app began as Arrive's codebase, and its visual overhaul prompted a broader rethink of styling practices. The resulting open-source Restyle library organizes styling around a design system covering spacing, semantic colors, and typography, represented by a theme object that components receive through React's Context API. Reusable Box and Text components map props such as spacing, background color, and text variants to theme values, while responsive properties target predefined screen-size breakpoints and TypeScript restricts props to valid theme options with editor autocomplete. The stated result is a more enjoyable and efficient workflow: Restyle supported the transition from Arrive to Shop, enabled theme switching, helped tailor screens to device sizes, and made dark mode easy to add.


### [How to Track State with Type 2 Dimensional Models](https://yomu.fyi/post/how-to-track-state-with-type-2-dimensional-models.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Aug 27, 2020

Application databases often retain only current values in Type 1 dimensions, limiting analysis of historical settings such as feature adoption, retention, and switching behavior. The post explains Type 2 dimensional models through Shopify’s need to track users’ admin languages over time, contrasting application-model changes, scheduled database snapshots, and event logging. Its selected implementation uses Rails after\_commit callbacks to send created or updated records to Kafka, then transforms that event history into records with valid\_from, valid\_to, and is\_current fields using ETL recipes involving PySpark and dbt. The approach provides the required granularity but can miss changes or events, requires delete handling and data-quality checks, and is presented as an iterative solution; MySQL binlogs are described as a more reliable future source.


### [ShipIt! Presents: A Look at Shopify's API Health Report](https://yomu.fyi/post/shipit-presents-a-look-at-shopify-s-api-health-report.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Aug 25, 2020

On July 17, 2020, ShipIt! hosted a discussion of Shopify’s API Health Report with Shuting Chang, Robert Saunders, Karen Xie, and Vrishti Dutta. The tool was built to surface breaking changes affecting Shopify Partner apps, and the event presented its role alongside the work of the multidisciplinary team behind it. Related materials cover Shopify’s API versioning, including how Shopify manages versioning and breaking changes, plus GraphQL Admin API references, an explorer, and learning resources. The event information also directs questions about API versioning and upcoming migrations to monitored API forums, the Partner Dashboard Support Form, and ShopifyDevs on Twitter, while linking to Shopify Partners, Shopify Developers, and REST/HTTP API evolution material.


### [How Shopify Reduced Storefront Response Times with a Rewrite](https://yomu.fyi/post/how-shopify-reduced-storefront-response-times-with-a-rewrite.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Aug 20, 2020

Shopify rewrote the server-side Storefront Renderer, which loads Liquid themes and storefront data before returning HTML, because the legacy Rails-monolith implementation had developed stricter performance demands and rising time-to-first-byte as traffic grew. The new single-purpose application separates storefront traffic from checkout, admin, and API traffic, uses active-active replication with dedicated read replicas, and adds mechanisms for high-load resilience. During migration, a Ruby verifier compares status codes, headers, and bodies from both implementations, while a custom Lua module on OpenResty samples production traffic and routes requests based on verification results. The rollout had reached more than 90% feature parity, and the new implementation averaged 4x faster server response times, with ongoing work aimed at full parity and retiring the legacy system.


### [Building Reliable Mobile Applications](https://yomu.fyi/post/building-reliable-mobile-applications.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Aug 14, 2020

Shopify’s Point Of Sale (POS) app is mission-critical for brick-and-mortar merchants, because downtime can create long lineups, unhappy customers, and lost sales. Unlike server-side systems, mobile fixes depend on Apple and Google review, and merchants may delay installing approved updates, so the team focuses on preventing bugs and shortening recovery time. Its practices include layered automated and manual testing, component ownership with automatic Code Owners reviews, automated mobile “tophatting,” and weekly releases supported by a rotating Release Captain and ShipIt Mobile. Staged rollouts, beta flags, minimum-version enforcement for rare critical security fixes, and dedicated Primary and Secondary ATCs limit exposure and clarify incident response. ChatOps-based incident channels capture findings for root cause analysis, while rotating on-call responsibilities reduce context switching; these measures helped the app scale to larger merchants while shipping faster and improving reliability.


### [An Introduction to DNS Traffic Management](https://yomu.fyi/post/an-introduction-to-dns-traffic-management.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Aug 5, 2020

DNS traffic management applies data-driven DNS responses to direct clients to different service endpoints, extending DNS’s basic role of mapping domain names to IP addresses. The post introduces DNS through its history from HOSTS.TXT, explains zones, records, nameservers, root servers, TTL, and negative TTL, then connects caching behavior to routing decisions. Low TTLs can make changes visible sooner, but repeated DNS resolution adds latency: with a one-second resolution time, a 15-second TTL could add 5,760 seconds per day, compared with 1,440 seconds at 60 seconds; resolver behavior can also make delays slightly longer. Use cases include active-passive failover, active-active traffic sharing, progressive green-blue deployments, and location-based routing, while Shopify’s system evolved into an automated, self-served platform serving more than 40 domains across 12 teams and over 100M requests per 24 hours.


### [Using DNS Traffic Management to Add Resiliency to Shopify’s Services](https://yomu.fyi/post/using-dns-traffic-management-to-add-resiliency-to-shopify-s-services.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Aug 5, 2020

Shopify consolidated several team-specific DNS traffic-management approaches that relied on manual changes, pull requests, or provider APIs and had uneven failover, redundancy, and active/active capabilities. The replacement was a fully automated, self-served system for more than 40 domains owned by more than 12 teams and handling more than 100M requests per day. It stores domain configuration in Git, deploys it to two DNS providers, and exposes spy commands for fast updates and failovers. Its traffic-management design uses regionalized matching, endpoint-status filtering, weighted sharing, and fallback layers, while globally matching endpoints ensure an existing domain receives an answer. A later provider migration demonstrated the value of centralized ownership: the team updated Terraform and tooling, moved nameservers incrementally, and kept the change transparent to application owners despite concurrent incidents.


### [Migrating Large TypeScript Codebases To Project References](https://yomu.fyi/post/migrating-large-typescript-codebases-to-project-references.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Jul 29, 2020

Shopify’s merchant admin UI grew from a Ruby on Rails ERB-based front-end into a TypeScript, React, and GraphQL codebase, and its size eventually made VSCode’s TypeScript language tooling take roughly two to three minutes to initialize. The team investigated the bottleneck with TypeScript’s performance diagnostics, VSCode TSServer logs, and support from the TypeScript team, which recommended splitting the monolithic configuration with project references. They built the TypeTrack VSCode plugin to measure initialization time, then migrated dependency-graph leaf nodes such as packages and tests, creating project-level tsconfig.json files and references incrementally. The migration reduced initialization times for sampled files from about 155 seconds to 8–13 seconds. The post explains how to resolve missing module errors, respect project-reference restrictions, and continue upward through the dependency graph while distributing migration work across teams.


### [How We’re Solving Data Discovery Challenges at Shopify](https://yomu.fyi/post/how-we-re-solving-data-discovery-challenges-at-shopify.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Jul 21, 2020

Shopify describes data discovery as a response to growing numbers of data assets and the difficulty of finding, governing, and using them across the data lifecycle. At Shopify, pre-Artifact discovery relied on people, Slack, GitHub, and job logs, while teams lacked granular ownership, change-impact visibility, and documented reporting context. They built Artifact, a search-and-browse tool backed by a centralized metadata model, ingestion jobs, Elasticsearch indexes, GraphQL APIs, and a graph database for filterable upstream and downstream lineage. Its landing page supports browsing and plain-English search, while details pages expose documentation, schema, descriptions, usage, ownership, and lineage; initial scope prioritized frequently used, high-impact, queryable assets and downstream reports and dashboards. Since launch in early 2020, weekly Data team usage exceeded 30% and monthly retention exceeded 50%, above expectations, with future work planned for additional assets, integrations, stewardship, change management, notifications, and metadata APIs.


### [How We Built Size.link](https://yomu.fyi/post/how-we-built-size-link.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Jul 13, 2020

Size.link is a free Shopify AR tool that lets shoppers view a product’s dimensions in their surroundings through a smartphone camera. It was created during April Hack Days as a quick alternative to commissioning 3D models, with requirements including browser-based operation, speed, accuracy, and iOS and Android support. Because iOS lacks JavaScript WebAR, the implementation uses AR Quick Look with USDZ files and Android’s Scene Viewer with GLB files. Rather than generate files dynamically with slow USDZ tooling or pre-generate billions of dimension combinations, the team modifies binary template data, replacing scale or vertex float values to resize the cube while preserving its outline. The resulting Ruby server generates USDZ files in well under one millisecond, and the same strategy produces GLB files; future work could add textures for standard-sized products.


### [Media at Scale: Callbacks vs pipelines](https://yomu.fyi/post/media-at-scale-callbacks-vs-pipelines.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Jul 9, 2020

Shopify’s Rails monolith needed to add native product videos and 3D models while continuing to support an image infrastructure containing more than 7 billion images. The design question was whether media creation should rely on Active Record callbacks or an explicit pipeline, with transactions protecting interdependent database writes. Callbacks were quick for simple cases, but adding media-specific behavior such as video thumbnails spread conditionals across models and made lifecycle ordering difficult to follow and debug. The pipeline design routes requests through a single Product Create Media Service and media handlers, each organized into before\_transaction, during\_transaction, and after\_transaction steps, while confining logic to one media type. This structure separates concerns, controls creation order, limits model access, and makes implementation details easier to understand and maintain as the feature grows.


### [A First Look at Reanimated 2](https://yomu.fyi/post/a-first-look-at-reanimated-2.md)
- Company: [Shopify](https://yomu.fyi/company/shopify.md)
- Author: 2023-10-18
- Published: Jul 2, 2020

Reanimated 2 is presented as a new approach to building gestures and animations in React Native, replacing the declarative domain-specific language of Reanimated 1 with animation worklets. Worklets are JavaScript functions declared with the “worklet” directive that execute independently on the UI thread, can receive parameters, access JavaScript-thread constants, call other worklets synchronously, and invoke JavaScript-thread functions asynchronously. The API introduces five hooks for creating shared and derived values, handling gesture events, and assigning animated styles or properties; a drag example combines shared values, gesture context, and velocity-based decay. The article also describes a liquid-swipe example using bezier interpolation, gesture handling, and physics-based animation, and reports that the new design lowers the entry barrier, supports cases previously requiring the bridge, and improves initialization performance.


[Newer posts](https://yomu.fyi/company/shopify/page/13.md) · [Older posts](https://yomu.fyi/company/shopify/page/15.md)