Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Filippo's slides (How to build an ecommerce sit...
Search
Contentful Webinars
December 05, 2019
Technology
0
130
Filippo's slides (How to build an ecommerce site on the JAMstack with Contentful and Commerce Layer)
Contentful Webinars
December 05, 2019
Tweet
Share
More Decks by Contentful Webinars
See All by Contentful Webinars
Product release roundup: Winter ‘22 edition
contentful
1
51
The real magic behind digital experiences: Powering cross-team workflows with Contentful and Netlify Deploy Previews
contentful
0
260
Comment ACE Hôtel a transformé la gestion de son contenu digital
contentful
0
67
Composing a modern digital platform
contentful
0
200
Product release roundup: fall ’21 edition
contentful
0
71
Build with speed with AWS Amplify and Contentful
contentful
0
310
Product Demo: Agile Ecommerce
contentful
0
350
Stop worrying and start shipping with structured content
contentful
0
140
Contentful and E2X: Implementing MACH Masterclass
contentful
0
64
Other Decks in Technology
See All in Technology
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.7k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
180
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.4k
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
180
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
200
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.5k
手を動かしてレベルアップしよう!
maruto
0
230
Amazon Aurora のバージョンアップ手法について
smt7174
2
160
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.3k
IAMのマニアックな話2025
nrinetcom
PRO
6
1.2k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
230
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Building Your Own Lightsaber
phodgson
104
6.2k
Designing for Performance
lara
604
68k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Ace a Technical Interview
jacobian
276
23k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Language of Interfaces
destraynor
156
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Transcript
What about commerce?
SPEED Amazon found that every 100ms of latency cost them
1% in sales (billion dollars). What about commerce?
SCALABILITY Many brands make the most of their revenues during
the seasonal spikes (BFCM). What about commerce?
SECURITY The PCI compliance scope reduces drastically when done on
the client side. What about commerce?
Let's see it in action!
https://contentful-gatsby-demo.netlify.com/ Demo
REQUIREMENTS 1. Multi catalog 2. Multi language 3. Multi currency
4. Multi warehouse Fast, scalable, and secure by design. Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Demo
Checkout (open-source) Demo
How it works
TOOLS 1. Contentful (content) 2. Commerce Layer (commerce) 3. Netlify
(delivery) Built with Gatsby. How it works
Content vs Commerce
Content vs commerce
Commerce Content Content vs commerce
• All content is managed through Contentful. • Commerce Layer
makes that content shoppable. Content vs commerce
Content model (Contentful) Country Catalog Category Options Variant Product N:1
N:M N:M N:1 N:M
Content model (Contentful) Country Catalog Category Options Variant Product N:1
N:M N:M N:1 N:M SKU
UI Extension
Content model (Contentful) Country Catalog Category Options Variant Product N:1
N:M N:M N:1 N:M
Content model (Contentful) Country Catalog Category Options Variant Product Market
N:1 N:M N:M N:1 N:M
What is a market?
Business model (Commerce Layer)
EU Market US Market IT FR US Choose your country
Market scope
Static vs Dynamic
Static vs dynamic
Dynamic Static Static vs dynamic
Content can be built upfront with a static site generator
(like Gatsby). Static vs dynamic
Commerce can be added dynamically through the API (with Javascript)
Static vs dynamic
It's just that simple
Putting it together
The Stack
Scaling up
Scaling up
REQUIREMENTS 1. More countries (30) 2. More languages (5) 3.
More products (2K) Same speed. Scaling up
30 countries 5 languages 300K pages 2K products x =
x Option 1: one large build https://brand.com/<country>/<language>/<product>
30 sites 2 languages per country 2K products 4K pages
per site x = x Option 2: many parallel builds https://<country>.brand.com/<language>/<product>
Adding more integrations
Enhanced stack
Demo: https://contentful-gatsby-demo.netlify.com/ Repo: https://github.com/commercelayer/contentful-gatsby-demo