tf; netlify CASE STUDY: VICTORIA BECKHAM

How Fostr used Shopify CASE STUDY

and the Jamstack to Introduction

power e-commerce on Journey to the tech stack

Victoria Beckham Beauty

Longevity and flexibility

Scale and resilience of Shopify

Improving experiences
When Victoria Beckham Beauty engaged Fostr, an e-commerce
Risk and reward
agency, to create their online store, they wanted a premium,
bespoke customer experience to match their brand. The project had Useful links

an ambitious timeline of just 3 months for its design and

implementation, and needed to accommodate some very specific Talk to an expert

design requirements, as well as deliver an efficient shopping

expenence.

Fostr's extensive experience as a Premier Shopify partner

positioned them well to leverage the considerable power of the
Shopify platform, but as the project progressed, they took a bold
move to re-imagine their planned technical approach in favour of a
Jamstack approach with a decoupled architecture. This case study
explores some of the technical choices and the motivations behind
them. And details some of the results and insights that emerged
along the way.

--
] <:::: 11 >
tf; netlify C A S E S T U D Y: VICTORIA BECKHAM

Journey to the tech stack CASE STUDY

Introduction
Designing and building Shopify themes is a core competency of
Fostr, and they have successfully utilised this approach for Journey to the tech stack

numerous luxury brands in the past. Longevity and flexibility

Scale and resilience of Shopify

However, as the 12 week project progressed and more detailed functional and design requirements
of the client emerged, Fostr recognised that they needed more flexibility than their usual approach
Improving experiences
would afford.

Risk and reward

After 6 weeks of work on the project Fostr's CTO, Mark Stewart, considered a new strategy, and
rapidly built a proof of concept site to determine if a change in technical approach might be wise.
Useful links
This proof of concept used:

Talk to an expert
O The Shopify storefront API for managing and populating the inventory and product
information.
O Gridsome, a static site generator which is part of the Vue.js ecosystem, to combine the
content and data into a pre-generated site.

--
] <:::: 11 >
 Case Study: Victoria Beckham

Longevity and flexibility CASE STUDY

Introduction
While other projects had enjoyed the rapid development made
possible by Shopify’s themes, the approach to instead use their Journey to the tech stack

APIs might appear to have created more work. Longevity and flexibility

Scale and resilience of Shopify

But Fostr founder and Chief Design officer, Ryan Foster observed that on this project, their speed of
development actually increased. By decoupling the user interface from the underlying platform, they Improving experiences
gained more freedom to customize the design, content and user experience. But there are other
advantages too.

Risk and reward

The team at Fostr created a layer of abstraction between the data services and their site generator. Useful links
This allowed them to more efficiently combine and enrich data from their different APIs , and also
avoid tightly coupling between the APIs and the web site.

Talk to an expert
Reusing this architecture thus became even more viable for future projects which might have slightly
differing APIs and services intended to drive their site. The front-end development and interface
possibilities became even less dependent on the shape of the back-end and related services.

tf, netlify C A S E S T U D Y: VICTORIA BECKHAM

The scale and resilience CASE STUDY

ofShopify Introduction

Journey to the tech stack

The checkout experience on victoriabeckhambeauty.com is
Longevity and flexibility
handled by Shopify's checkout UI.
Scale and resilience of Shoplfy

Rather than redesign and implement complex checkout flows, Fostr retained the proven and
effective checkout which Shopify provides. They have seen the challenges that can come from huge Improving experiences
spikes in demand at times like Black Friday or other moments of peak traffic, and Shopify's checkout
UI has proven more than capable of weathering such demand. Risk and reward

Useful links
Cell Rejuvenating $145.00
Priming Moisturizer in
Golden
SOML
FREE STANDARD SHIPPING ON ORDERS OVER $50
Talk to an expert
VICTOR)t� �CKHAM
,
SHOPALL EYES LIPS SKINCARE ABOUT CLEAN BEAUTY WORLD OF VICTORIABECKHAM FASHION USO V ei

HOME > SKIN CARE > CELL REJUVENATING PRIMING MOISTURIZER IN GOLDEN

Cell Rejuvenating Priming

Moisturizer in Golden
*****
ILLUMINATING COMPLEXION CR�ME

(BBi

$145.00

30ML 50ML

ADD TO BAG
< > $14�00-AODTOBAG

DESCRIPTION IN MOTION INGREDIENT TECHNOLOGY

Bathed in Light, Backed by Science

Introducing the high-pcrfonnam::c hybrid that provides instant bronzy illumination as it
builds healthier, more radiant skin in six weeks.

The fundamentals: The next level in #VBG!ow, Cell Rejuvenating Priming

Moislurizer in Golden insrnntly illuminaics your skin with a high impact bronze glow
and delivers serious long-tcnn skin-enhancing benefits. A unique blend of pearl
provides a luminous finish, while powerful and clean active ingredients deeply nourish
and renew the skin to boost radiance over time. The lightweight, yet hydrating formula,

I t developed with Augustinus Badcr·s TFC8® technology, supports cell turnover and
activmcs the skin's own regenerative process.

Meanwhile, the product pages, where the customer initially engages with the products and the brand,
receive supercharged performance as a result of being generated at build time rather than at request
time, and served directly from a CDN. This performance has drawn the attention of other luxury
brands as Ryan Foster commented:

Other fashion brands benchmarking

against VBB want to understand how it's
so much faster
- Ryan Foster, Fostr
tf; netlify C A S E S T U D Y: VICTORIA BECKHAM

The developer experience also flourished. Since the site was generated by Gridsome as part of an
automated build, and populated at build time with various APls and content feeds, it was simple to CASE STUDY
bootstrap the development environment and generate many different environments for the purposes
of staging and feature reviews. The Fostr team were able to iterate more quickly and collaborate Introduction
much more closely with their clients at Victoria Beckham Beauty.
Journey to the tech stack
Fostr's Mark Stewart had this to say about using Netlify's Branch Deploys and Preview Builds:
Longevity and flexibility

Scale and resilience of Shopify

If the client needs to see a new feature,

I can make a branch on my local machine, Improving experiences

push it to Netlify and in 2 minutes the

Risk and reward
client has a new feature in front of them
to review.
Useful links
- Mark Stewart, Fostr

Talk to an expert

Deploy contexts

Deploy contexts are a way to tell Netlify how to build your site. They give you the flexibility to
configure your site's builds depending on the context they are going to be deployed to.

Production branch: master

Deploy previews: 0 Automatically build deploy previews for all pull requests
Every pull request gets deployed m its own context with a unique URL.

( Don't build deploy previews for pull requests

Netlify won't deploy any pull requests.

Branch deploys: 0 All

Deploy all the branches pushed to the repository.

C None
Deploy only the production branch.

C Let me add individual branches

Learn more about deploy contexts in the docs .11

Ill Cancel

--
] <:::: 11 J