Online Store 2.0
Three Areas Rebuilt
- Themes and editor improvements
- Completely modular and built out of sections
- All of the themes codes in in sections
- Theme editor – template picker – multiple templates per page
- Store content – populates the design – metafields
- Metafields – define and edit directly in admin + bind data sources to sections directly in the editor – no more hardcoding metafields
- Can add validations and descriptions
- Metafields will also power a new content management platform – entirely new custom types using metafields – create content once and publish to different channels
- Pages and even collections have templates now
- Developer tooling
- Theme app extension, apps can have their own sections and blocks, apps can contribute liquid in their own app blocks
- Easier for apps to inject scripts
- Blocks, assets and snippets – can ship in one single repo, script tags will be deprecated in the future
Migrating to Online Store 2.0 – https://shopify.dev/themes/migration
Liquid improvements
- Dawn, new open source theme available https://github.com/Shopify/dawn
- Dawn was built:
- For modern browsers, focused on semantic markup and progressive javascript
- Creative visual design – improving features that affect funnel – collections
- Lean and maintainable – cart api lines of code reduced
- Performance – fast theme by default
Performance and Developer Tooling
- Full git integration and extended Shopify CLI
- 10% first page speed increase equates to a 7% conversion rate bump
- Storefront Renderer – 5x speed improvement
- GraphQL – shopify admin and shop App both built on graph ql and supports 60K active partner projects
- Averages 1M queries/minute
- Shopify within 50MS of every buyer is the goal
Storefront API
- Can retrieve via storefront API
- Can query local pickup via storefront API
- Selling plans – can enable subscriptions and Admin APIs released. Can retrieve selling plans, price adjustments + other relevant metadata
- New cart capabilities – rebuilt for speed, can pass cart ID, support for discounts
- Storefront schema redesign later this year – removing cruft
Checkout
- 450M people checked out on Shopify in 2020
- 5B processed on BFCM
- Checkout page load times 2X as fast
- In past could make changes to editor, can now extend checkout through apps – from simple changes to complex logic: checkout UI, overhaul of scripts + new payment platform
- Checkout extensions – example adding warning message for prop 65 in CA using metafields and looking at customer address
- Component library for checkout extensions
- Checkout promotions example app – build a free gift with purchase checkout extension
- Works on Shop Pay and for all merchants
- Post Purchase extension – show offers post checkout – opening this up for devs in Q4
Shopify Scripts v2
- Rebuilt using web assembly, improved speed and can scale up, can build scripts and deploy using apps
- Can turn your script into a public app available for everyone
Payments
- Shopify merchants sell all over the world – for all payment developers – can create payment gateways as Shopify apps
- Payment apps will be easy to customize and quick to install
- Once approved merchants can onboard directly, will rely on OAuth for onboarding
Build an app from scratch
- Subscription app extension – go to shopify dev docs and tutorials
- Shopify create node to scaffold it and look at partner dashboard
- Bulk of the setup from the command line
- Developer console – can test with real data and render from local environment
Power of Discovery
- 1.7M merchants on the platform – matching and recommendation algorithm
- New app home page catered to each merchant
- Enhancing app ads program
Partners and Developers
- 2020 – 12.5B in partner and dev revenue – 4X what Shopify did
- 12.5M app installs in 2020
- August 1st, removing first 1M in rev share earned
Hydrogen
- Built on JavaScript and React, Hydrogen provides a quick-start toolkit and set of components, so you can focus on building the fun parts that make your store unique
- Add “Hydrogen channel”, then connect Git Hub
- Similar to React projects, uses react router
- React server components – going all in on this
- Shipped with Tailwind CSS
