---
title: "Implementing Server-Driven UI Architecture on the Shop App"
description: "The Shop Store team implemented a server-driven UI architecture for the Shop App’s Store Screen to personalize sections and layouts for different merchants. Previously, the client rendered a fixed layout, limiting customization, experiment timing, and the speed of fixes after weekly app releases. The new design uses template processing, orchestration, data loading, and a shop-server GraphQL layer, with ProductsSection and CollectionsSection types and configurable GridLayout or ShelfLayout options. On the client, ServerDrivenStoreScreen and StoreSectionContainer render the sections returned by the server, while default layouts allow older app versions to handle unfamiliar section or layout types. The architecture enables backend-controlled experiments and section changes without requiring an app release, while giving the product team a system intended to grow with the store experience."
---

# Implementing Server-Driven UI Architecture on the Shop App

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Nov 22, 2022

**Type:** Explainer

## Summary

The Shop Store team implemented a server-driven UI architecture for the Shop App’s Store Screen to personalize sections and layouts for different merchants. Previously, the client rendered a fixed layout, limiting customization, experiment timing, and the speed of fixes after weekly app releases. The new design uses template processing, orchestration, data loading, and a shop-server GraphQL layer, with ProductsSection and CollectionsSection types and configurable GridLayout or ShelfLayout options. On the client, ServerDrivenStoreScreen and StoreSectionContainer render the sections returned by the server, while default layouts allow older app versions to handle unfamiliar section or layout types. The architecture enables backend-controlled experiments and section changes without requiring an app release, while giving the product team a system intended to grow with the store experience.

## Context

The Store Screen previously used purely client-driven display logic, so every merchant received the same layout and components regardless of product count or store needs. This limited merchant-specific customization, constrained experiments to the app’s weekly release cadence, and delayed fixes for rendering issues until a new client version shipped.

## Approach / What changed

The implementation separates server-side template processing, orchestration, data loading, and GraphQL layers. Templates determine sections, SectionDataLoader objects fetch their data, and GraphQL maps them to section and layout types. On the client, ServerDrivenStoreScreen renders StoreSectionContainer components from the returned sections. The client also defines fallback layouts for section or layout types it does not recognize.

## Takeaways

- Server-controlled templates can choose sections such as Best Sellers, All Products, and collections, along with Grid or Shelf layouts, for a merchant’s store.
- ProductsSection and CollectionsSection share a base Section type, while configurable layout properties support multiple display formats without requiring a new section type.
- The team chose Shop Store-specific components where needed and made older clients render a default layout when they receive an unfamiliar layout or section type.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Developer Experience](https://yomu.fyi/topic/developer-experience), [GraphQL](https://yomu.fyi/topic/graphql), [Scalability](https://yomu.fyi/topic/scalability)

- Source: [Shopify](https://shopify.engineering/server-driven-ui-in-shop-app)
- Source URL: https://shopify.engineering/server-driven-ui-in-shop-app
- Ingested by Yomu: 2026-08-30T13:37:28.966Z

[Read original post](https://shopify.engineering/server-driven-ui-in-shop-app)