Get in Touch

Shopify Unite 2021

Shopify Unite 2021

Online Store 2.0

3 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

https://shopify.dev/hydrogen