(timer beeping) (gentle music) (upbeat music) - Hello everyone. It's great to be back for Unite. 12 months ago, we were at
the opening stages of COVID and most of us were
reeling from uncertainty. At that time, we have a two
completely distinct industries, the retail industry and the
online commerce industry. Now, it's just a commerce industry. A lot has changed in a year. In this new reality, our goal at Shopify is clearer than ever. We want to give entrepreneurs
around the world the best possible chance to
create their own certainty. To reach for independence. And to seize opportunities
that they uniquely see. So today, we'll show you
the results of exciting work that we've done together
over the past year. We're going to give you a glimpse into the future office commerce world. And we'll show you where
we're taking Shopify in order to make it the ideal
platform for entrepreneurs. It's worth stating upfront
something that feels obvious but it's effect of our times. You can't do anything on the internet, browse it, build on
it, connect through it, without someone making the
software to enable doing so. Software itself, and especially software
platforms like Shopify, have a modern equivalent
of essential infrastructure in an increasingly digital world. Shopify sees itself as essential
commerce infrastructure that allows many people as
possible to participate. This is what our product Shopify
does and the role it plays in the eyes of most of our
merchants and customers. But at the same time, we also build a platform
that allows developers to build products for merchants, adding to this infrastructure. This has been a core idea since we first published
APIs in early 2000s. You see this interplay here
between the platform, Shopify, that we have been evolving on one side, and the ecosystem of partners,
designers, app developers, who build on top of it all,
all of us combining forces to help entrepreneurs
become successful merchants. This has been the absolute
key to Shopify's success. Today, we'll mostly talk
about this platform. So at times, it will get very technical. If you are a developer watching us you're in for a big treat, we'll get more technical than
you might expect from Unite. In fact, the next you and I meet on the screen later in the show, we'll actually write some code together and that's gonna be a lot of fun. If you're an entrepreneurial
or merchant joining us today, this event is also for you. Some of the things we'll talk about will immediately make
Shopify better for you. Everything else's you'll hear about will enable app developers
and designers and ecosystem, to make things for you that
were previously not possible, or at least very hard to imagine. We have three important guiding principles that we keep finding
ourselves come back to, make commerce creative,
make the important easy, and make everything else possible. Let's talk about each of those for a bit. We start every project
here with a question. Does this increase the
creative possibilities for our merchants or does it not? This is the why behind everything we do. The core question we ask ourselves. The primacy of creativity to commerce, was the core bet of Shopify on day one. I mean, creativity is the most
human of traits, isn't it? But to anyone who has visited
a generic department store, you know, that commerce
can be pretty bland indeed. We believe strongly that
every successful business tells a unique story of their own. So Shopify started with enough power for people to express themselves. On day one, we shipped
Liquid, our template language. We created space and invited
the global design community into our theme store and partner program. And therefore, into our industry. And most of the fastest
growing apps in our app store also enable our creativity
and storytelling. This bet has been proven correct, I think. But enabling creativity
is as important now as it was when we first got started. The next principle is to
make the important easy. Everyone who wants to, should
be able to start a business and reach for independence. This is why we are
business-essential infrastructure for independent commerce, isn't it? If the platform doesn't exist,
people simply cannot do that. It is important that it's easy to start a business of our own. Not least above all local
economies and communities that depend so much on local businesses. Simplifying the complex is
what software does best. For an online store, you need to be able to
automatically accept payments, and handle checkouts and shipping. And it's important to be able
to sell all over the globe. And if you're lucky to have one, deal with any size flash
sale that comes your way. These are not details that everyone should have to painstakingly
figure out for themselves. These hundreds of thousands
of tiny little details should just simply be set up for everyone correctly by default. This way, we let entrepreneur focus on what's truly important, their products and telling their
stories to their customers. The third principle is, make
everything else possible. The first set of steps in
building an eCommerce business are often rather similar. But as we all know, defaults
only take you so far. We make the important easy, but Shopify success has always been because we made everything
as possible too. Every default can be changed, and just about everything
can be extended with code. Liquid, apps, scripts, et cetera. This company was started by developers and this will always be part of our DNA. We want developers to feel
right at home on Shopify and get all the (indistinct)
that they want to tweak. We see this becoming increasingly
important in the future as coding and technical literacy spreads. To all the developers out there, entrepreneurs need your
help, it's been a hard year. Many of them make great
leaps into the unknown and are looking for their opportunity to make their specific vision a reality. There'll be more likely to
work if you are in the mix. And to all of entrepreneurs out there, we want your journey of
Shopify to allow you to thrive. We are all in this together. So welcome to Unite. And let's get started. (upbeat music) - Like Tobi mentioned, our mission at Shopify is
to empower the creatives. And there's nothing more
creative than the online store. From day, one entrepreneurs
of all shapes and sizes have used the code that you've
made as theme developers to build their home on the internet. And to date, we've seen some really
amazing digital storefronts. Today, I'm gonna show you the
biggest and boldest upgrade we've ever shipped to the online store. Our goal is to give more
power to developers, while making it even easier for merchants to leverage that power,
and build their storefront. It's such a big platform
upgrade, that we called it, simply, Online Store 2.0. To start, let's take a
look at the three areas of the online store that have
been rebuilt and re-imagined. The first is themes and the editor. This is where merchants go to configure and build their store's design. The second, is store content. This is what populates that store design with the shop stories. Hint, you're gonna see a lot
of metafields in your future. And the third is developer tooling. We're giving you some great
ways to be more productive and some new platform features for when you're building a theme or an app for the online store. Okay, let's get to it
and jump into themes. In this new world of Online Store 2.0, themes are now completely modular and composed of reusable sections. Think of them like an
online store's Lego blocks. Merchants can take these sections and use them to build
their own online store. This gives merchants the ability to arrange their store
design however they want, without having to know or touch code once. In order to make all of this possible, we had to change the way
themes were structured. Let's look deeper into
what exactly makes up these new themes.
(gentle music) You'll notice that templates
play a big role now. they define everything from
the structure of a page to how each setting is configured. And now, all of the themes, Liquid code, is contained completely within sections. You can also add multiple template files, which then map to different products or different collections. And yes, these templates are available across the online store, which mean that sections
are now everywhere. At its core, sections
are chunks of Liquid code with some handy setting options. But if we look a little closer, they can also contain an array of blocks. These blocks further break up a section and are themselves,
configurable chunks of Liquid. They're really powerful
because they give merchants an even more granular way of customizing the layout of their store. Let's see this all in action
in the new theme editor. (gentle music) The template picker is front
and center in the new editor. And you'll see that I have
multiple templates per page. Let's switch to the product page. And as you can see here,
I have a default template, but let's go ahead and
create a new template specifically for all of my bags. Every section of this new template is managed in this new sidebar, which makes it really
easy for me to navigate as I edit this page. And since this template is for
handbags, let's add a section to show the bag's
dimensions and materials. (gentle music) Notice these handy sub
items in the navigation, those are blocks that I mentioned before. You can add them, reorder them, and configure them independently. And so just by dragging and dropping, I can add some care
instructions to my page. Okay. So we've added some sections, we've added some blocks of this page, but this is gonna look pretty bland if we don't have the right content. So let's jump into store content. We wanna make sure that
you can store whatever data that you wanna display on the
online store, within Shopify. And so alongside Online Store 2.0, we're also shipping a
major update to metafields. Not only can you define
and edit metafields now directly in the admin, but we've also shipped away to
bind data sources to sections directly in the editor. So now there's no more hard
coding metafields into themes. You're gonna really like this. (upbeat music) Let's add a custom image
with embedded sizing to this section. From within the Settings panel, I can now create a new
metafield definition using a new set of types. We've added new types
like color, boolean, URLs. I can also add validation
and descriptions, so that I can make sure that
whatever is being entered is in the right format. Now that I've added this
new metafield definition in my products, my team can access it right
from within the product page whenever they're entering
product information. I wanna pause here for a minute because what we just did was pretty major. This ability to add new
attributes to products really changes the way that data can be stored inside of Shopify. Now, you can host data of any format, inside of one platform. Metafields are gonna be
a really important part of Shopify going forward. Stay tuned for more
support, for more types and arrays later this year. But while I have you, why
don't I give you a sneak peek of something else we're working on. (gentle music) This metafields infrastructure not only lets you extend
your Shopify models, but it'll also power a new
content management platform. We know that content is super important when it comes to expressing
the shop's brand. And so soon, you'll be able to create
entirely new custom types, modeled using metafields. You'll be able to create content once and publish it to all of your channels, including the online store. And because this content
is already in Shopify, it can be easily connected to
other parts of the platform. And if you're already using a CMS, great, we'll be looking to work
with partners in the industry to make it easy to integrate. That's enough for now, but we'll have more to share
on this later this year. Okay, back to the demo. (upbeat music) Switching to the editor, you'll notice these
handy little data icons on all of my section settings. Those let me connect the
metafield we just created, to this part of the section. All right, after that, we're done. Now each product using this template will show the right
dimensions automatically. And to bring everything full circle, this is one template that
we've built for our handbags. But with the editor and
sections and blocks, it's super easy and simple to make more. I can configure one for my shoes, or one for all the apparel products. And each template is tailored to the type of product it's displaying. And it's not just the products page, it's pages, collections, all of these parts of the
online store now have templates. And all of these, are parts
that a merchant can customize. Now that you've seen all the pieces we're giving you to tell a
great story on the online store, I wanna introduce you to one of the best story
tellers on the internet, and one of the earliest
adopters of Online Store 2. We've all gotten to know them really well over the last year, Netflix. (Netflix theme) (upbeat music)
A couple of weeks ago, Netflix launched their
new store, Netflix.shop. And whether it's their anime collection, or the newest Lupin page, they wanted to make sure that
every part of their store told a good story. They also want to be able to
create these pages really fast. Because never know when
another "Bridgerton" series is gonna take off. And so now, the Netflix team
can use sections and blocks to configure a template
for a new product drop without needing to fiddle with code. Okay, so let's switch gears for a minute and talk about apps. Apps provide a lot of
functionality to the online store. And so we've intentionally
carved out a way for them to work in this new world. I'm happy to announce the
new Theme App Extension With Online Store 2, a theme is now a set
of separate components. And the separation
makes it possible for us to let apps contribute their
own sections and blocks without having to touch a theme's code. (gentle music)
So let's see this in action. Here's a new example app that adds product reviews to
the shop using app blocks. Before Online Store 2, I would have had to open the theme editor and add code directly into the theme. It's super intimidating if
you don't know how to code and it sticks around even after
the app's been uninstalled. So now instead, apps can contribute Liquid in the form of their own app blocks. When an app is installed on a store, any app blocks that they've declared are automatically available
in the theme editor. Depending on how you set up an app block, it can either be dragged in line, or auto injected in the
head or the body of a page. This is super handy if
you're building an app that needs to inject a script,
or injecting a chat widget. Under the covers, a Theme App Extension is structured a lot
like a miniature theme. We have a folder containing
all of our blocks, but you see these other handy
folders, assets, and snippets? It's all part of a new packager that allows you to ship everything, including Liquid and
assets, in one single repo. And all of it's managed by the platform. Using this extension, your
apps Liquid code and assets will be served using
the same infrastructure that serves our online store today. This is gonna be the future
of how apps augment themes. And it's gonna be a lot
better than script tags or the Asset API. And so get ready in the future, we're gonna be deprecating script tags. App blocks are the way of the future. Okay. That was a lot, but we still
have a lot more to come. Aside from this theme extension, we're also building a bunch
of Liquid improvements to make sure that your themes are gonna be as fast as possible. I'd like to welcome Martina, to talk about some Liquid improvements and some awesome new developer tools. - We just heard about all the new features coming to the online store, but how does it all come together
in how you build a theme? Meet Dawn. Dawn is our first open source theme available to all of you
today, right now, on GitHub. It includes all the features
that Vanessa just shared. Like sections, templates, and metafields. But it's so much more than that. It's also a new reference
for how to build fast and beautiful e-commerce
experiences on the web. So let's take a look at how we built it. Dawn was built using four principles. First, it's built for modern browsers. We estimate that 90% of
visitors to Shopify stores are using an evergreen browser. And since evergreen browsers auto update to the latest version, it means that its users have access to all the latest features. So instead of using polyfills
and external libraries to create pixel perfect fallbacks, we focus on semantic
markup with HTML and CSS to create functional experiences
for 100% of browsers. By using progressive JavaScript, we focused on the browser's
latest capabilities to enhance the layout and
experience of the theme. By using features like web components and custom HTML elements, we were able to easily use JavaScript to improve the functionality
and accessibility of a feature. And for browsers that don't
support these latest features, it means that customers can still use Dawn to find products and checkout. Dawn second principle focused
on creative visual design. Through the process of
progressive enhancement, we paired a lot with our design team to create the best possible
experience for customers. Specifically, we focused
on improving features that directly impact the purchase flow. So things like collection filtering, product variant pickers,
price clarity, and navigation. By building themes for the modern web, it means that we can still
support non-evergreen browsers without having to compromise
on world-class e-commerce UX. Third, we wanna create lean
and maintainable themes. So we're continuously updating the core functionality of the platform and the APIs to write less code. One way that we've done
this is with the cart API. Now you can just request that
it returns rendered sections along with its usual response. By making this change, we were able to reduce the
number of lines of code needed to handle cart updates and JavaScript from a couple hundred to just under 20. And finally, performance was top of mind
with every decision we made. In the past, we might've had to exchange
feature functionality for performance. But with Dawn, we were able to ensure
that we built a great theme that was also really fast by default. We've been making changes
to how we build themes. But we've also been making
a lot of improvements to the developer tools
we use to build them. Let's bring in Colin to pair with me. He's been working on performance
and developer tooling and we want to show you how it all works. (notification tone) Hey Colin. - Hey Martina. So along with Dawn, we've been
building a bunch of new tools to make theme developers more productive. We're releasing a full Git integration for theme development, and
we've extended the Shopify CLI to enable faster iteration. This will give you a
powerful CI integration, better VSCode feedback, and
a lot of other capabilities. So let's take a look. (upbeat music) So Martina, I was looking
at the Dawn's code, specifically, the collections page and I noticed that the content
is jumping around on page and it's impacting the lighthouse
cumulative layout scores. Let's fix this together. - Sounds good. So if I were a new dev on the team, the first thing I do is go to my dev shop and connect it to my Git repo. And I can do this all
from within the admin. And at the same time, I'd also go ahead and import
and publish the main branch. - And this makes it handy. See you can use all of the
Git tools that you have to themes now, and your published shop will be updated with all the latest commits. - Yeah, exactly. And now that I've
connected my shop to Git, I'm gonna go ahead and clone the repo and start setting up my shop by CLI. It's really easy. All I need to do is log in
and run Shopify theme serve to start up my local sandbox. And Colin, before you ask, yes, getting yourself set
up with this new tooling is actually this fast. - [Colin] Amazing. Now that you're all set up, let's take a look at
that collections page. - [Martina] Before we do that, let's go ahead and run theme check to see if it spots any obvious linting or performance issues. So it looks like it's identified an issue related to the images on the product card. And it's recommending that we add the height
and width attributes. There's even some documentation that tells us why it's important
to add these attributes to help prevent cumulative
layout shifting. So I think that this should
fix our collection page issue. - [Colin] All right. That's great. But now I'm noticing that the images aren't the right size anymore. - [Martina] You're totally right, thanks for pointing that out. I think because of the
change we just made, we also need to add a height
of 100% to our images now. - [Colin] I love that instant
feedback in the browser as you make those changes. - [Martina] I know, right? Isn't it great? - [Colin] But while we're here, I also see that we're loading the lazysizes JavaScript library. We can replace that with
image loading equals lazy since modern browsers support this as a standard feature now. - [Martina] That's a great point. I'll go ahead and make that change and then we can create our PR. - [Colin] Alright, that looks good. Let's check the CI to make
sure the lighthouse scores have improved. We have it configured
to use the Shopify CLI to spin up the ephemeral sandbox, to run performance tests with lighthouse, and we can use webpage test to integrate our own browser-based test if we wanted. - Yeah, and it looks like all of our tests are passing. So I say we ship it. And now that it's merged, my
dev store's published theme will be updated with all
of the latest changes. Because earlier we linked our
dev store to our main branch. - Right on. Well, thanks, Martina for all the help. - No problem. - As you can see, we're
passionate about performance. We know that store speed is critical to drive higher sales and conversion. And we see this in our data too. On average, if you improve the speed of the first page the buyer sees by 10%, we see a 7% increase in conversion. Those first impressions really matter. There's a lot that goes
into building a fast store. And you aren't alone in
helping improve the performance for every merchant. Last year, we talked about our new storefront rendering engine. And today, I'm really proud to announce that all the Shopify stores are operating on this new engine. And thanks to this, we've been able to increase
the rendering speed five times. And with our increased edge deployment, we're now within 100 kilometers of every buyer around the world. Storefront Renderer, was just
one of the many investments our engineering teams
have made on the platform to make it fast and
can scale to any event. In 2020, our platform almost
doubled its monthly sessions and Storefront Renderer was able to help create a consistent human
experience every time. We believe that the
faster that you can build, the faster you can get that feedback, the easier it will be
for you to create better, faster experiences. - So let's do a quick recap of
everything that you just saw. There's a new theme editor,
featuring templates, sections and blocks. A new update to metafields. And to wrap it all up,
a set of developer tools for this new platform. And the best part is, all of
this is available right now. Create a dev shop, clone the Dawn theme, and you can visit shopify.dev
for some great tutorials. But everything that we just talked about is ready for you to play with. And of course, merchants will
only be able to take advantage of all of these new features if you create new Online
Store 2 themes and apps. And so to help you out, we've
opened up the Theme Store to new submissions on July 15th. Stay tuned for some
really cool new features coming to the Theme
Store later this summer. We call this Online Store 2.0 because this release marks
such a huge milestone for Shopify. It changes the way
merchants express themselves on the internet. And we can't wait to see what you build. Let's go. (upbeat music) - Wow. A lot of exciting things happening across the Shopify platform. Now, speaking of
exciting, and every Unite, we share dozens of stories of
creative commerce experiences built on software platforms. And frankly, it never gets tiring. We're always amazed at the
creativity of developers and merchants. For example, here are
a few of my favorites. Offlimits wanted to
make buying cereal fun. So they created animated
characters to guide the journey and implemented an engaging game of five point system for checkout. And Yolélé created a unique and one of a kind visual product explorer, for their delicious fonio
grain-based products. And ZSA's Moonlander keyboard configurator unlocked advanced customization
of their ergonomic keyboard. Allowing you to choose from dozens of different key switch options, and enabling you to dial in
and get the tactile feedback on your fingertips just right. Of course, Allbirds, continues to push the
innovation envelope too. Their new mobile app
unlocks exclusive access to new products. And now you can even try
on the shoes virtually and from anywhere, with the magic of AR. Finally, there's ComplexCon. (upbeat music) It is one of the biggest
events for streetwear fans, brands and creators. Known for its coveted product
drops and flash sales. The pandemic meant that
it had to be reimagined into virtual experience. So Complex turned it's annual
fashion and music festival, into a futuristic video
game called ComplexLand. Attendees curated their own avatars, and explored the virtual festival grounds to shop for sneaker drops. Ordered from virtual food trucks. And listen in on expert panels. This immersive 3D world attracted
fans from 174 countries. It had over 60 brands offering
exclusive product drops. What do all of these
expenses have in common? They are powered by the
Shopify Storefront GraphQL API. Which enables precise and
high-performance access to the full breadth of
Shopify commerce primitives. Speaking of breadth and performance, fun fact, did you know that Shopify was one of the first GraphQL adopters with first commit in 2015? And operates one of the
highest traffic GraphQL APIs? It's true. GraphQL is widely used at Shopify. Both the Shopify admin, which is used by more than
1.7 million merchants. And the Shop App, used by
over 24 million active users, are both built on top of
our public GraphQL APIs. And it's the same API
that powers over 60,000 partner-developed active API clients. That in, turn power Shopify
applications, extensions, and custom storefronts. In fact, combined, we saw the usage of our
storefront API double over the course of last year. We saw a big adoption ramp as commerce shifted online due to COVID. And then later in the year, we set a new Black Friday
record and throughput. Fast forward to today, we are averaging similar peak
levels on a regular basis. In fact, the Shopify GraphQL engine, now averages nearly 1
million queries per minute of sustained traffic. And by now you've picked
up on our investment into performance and scalability. And it should not surprise you that we're making big
investments for APIs. And so I'm proud to announce, they're working to
bring our GraphQL engine to every major geographical region. Our vision, and North Star, is to bring all the Shopify
capabilities you need to within 50 milliseconds of every buyer. To unlock this, we are
rewriting our API from scratch with the new and optimized foundation that powers the online store. Shopify is an API first and
resilient platform already, yet, I can't be more excited
for everything that's ahead. And what these capabilities
will enable you to build on our platform. And there in, is the true
power of the Shopify platform. You can start with no code,
and with just a few clicks, you get a batteries-included
store up and running. You can then tailor
and scale your business through thousands of
existing apps and themes. Once you're ready, you can tap the network
of over 65,000 partners to unlock custom capabilities. And of course, you can bring
own development expertise to build unique experiences. Shopify is a platform that grows with you, and best of all, it enables you to flex where and when you need it. So lets zoom in on the Storefront API. We released quarterly updates
with new capabilities. And the upcoming July release, has a few features in particular that are worth highlighting. We heard a lot about new
super powers in metafields. And of course, you can
create and whitelist them via the Admin API. And now, you'll also be able
to retrieve any and all of them via the Storefront API. This gives you the full
power to enter date products, product variance, orders, customers, in all other core Shopify sites. Next up, we are introducing the new
in context QraphQL directive. That enables you to pass
in relevant buyer context. For example, this unlocks access to
international pricing configured by the merchant. In this example, we are communicating
that the buyer's located or wants to see Canadian pricing. In return, same as our online store, the GraphQL response
provides the correct pricing and confirms the currency code. International pricing
is a critical feature for many merchants. And I'm really excited to have
this available in our APIs. We can go further too. Last year, made local
pickup unexpected feature for many buyers. Well, good news. You can now query for a list
of nearby store locations via the Storefront API. Then, once you have the idea
of the preferred location, you can use the same in context directive, to query for product
availability for pickup. This enables your buyers to
purchase and get the products from their desired location. Be it online, or in store. Next up, we have selling plans. Selling plans enable merchants to create custom billing,
pricing and delivery policies. Combined, they enable merchants
to create subscriptions, pre-orders, and other ways to sell through direct integration with a native Shopify checkup. We released Admin APIs that allow you to create
custom plans earlier this year. And now, you also have the
ability to retrieve selling plans configured by the merchants. In this example, we are
retrieving a title and price for multiple product variance. Plus the available selling
plans for each one. The response includes, price adjustments, per delivery pricing, and
all other relevant metadata associated with the selling plan. Finally, we heard a lot
about the great improvements in Shopify checkout earlier. But that's not all of it. We want to ensure that Shopify is able to scale to any
merchant need and size. And provide the best buyer experience throughout the journey. So we've challenged ourselves to step back and think what we can
do to help that mission. And so I'm excited to announce the new cart capabilities
in Storefront API. We built cart from ground up for performance, reliability
and Shopify scale. It is powered by the
same powerful primitives available at checkout. But, also carefully tuned to provide predictable
low latency response. And, also designed to scale without any store wide rate limits. Now, let's be clear. Checkout is still there, but if checkout is a precise
and accurate accountant, then cart is it's speedy cousin. That unlocks access to
estimated totals, for discounts, shipping, gift code processing, and more. Prior to starting the checkout process. How does it look in practice? We've added a new cart create mutation that accepts a set of products. In this case, we're adding
a single product variance with a quantity of two. Let's run the mutation. In response we get a cart
ID, the estimated costs, and a detailed description
of our new cart. Next up, we can manipulate the cart. By, for example, passing in the cart ID that we just retrieved,
and additional products via the cart line add mutation. Of course, this barely
scratches the surface. There's support for discounts, buyer context that we've
covered earlier and much more. Are you curious to dig in? Well, checkout our new
docs and API release notes. And while you're there,
there's one more thing. We've been spending a lot
of time with developers. Talking and listening to their feedback about the overall ergonomics
of our storefront API. And based on this feedback, we're planning to launch a major update to our storefront schema later this year. We are removing cruft, simplifying things, and making the API more intuitive to use. We've set up a preview
playground with mock data and the GitHub repository for feedback. Please take it out for a spin
and let us know how it feels. (upbeat music) - You heard a lot today about how Shopify is the
global infrastructure for commerce on the internet. And there's no commerce without checkout. In 2020, over 450 million people. 8% of the world's adult population, checked out on Shopify. Day in and day out, our core engineering team
is focused on ensuring that our checkout remains
the best on the planet. We are relentless in our
pursuit of this goal. Constantly optimizing,
constantly pushing our limits. We know how to scale a checkout to handle the volume of the internet. And we've proven it with some of the largest
flash sales in history. Last year, during Black
Friday-Cyber Monday holiday, the biggest e-commerce moment of the year, over $5 billion was processed
through Shopify checkout. At its peak, our platform was
processing tens of thousands of checkouts per minute. That is incredible scale. But we're not done. We have continued to invest
heavily in scale and soon, any single shop, at any single minute, will be able to support
the same amount of traffic that we had across all of
Shopify at our peak of BFCM 2020. And on top of that, we've also cut our checkout
page load times by half. You've also just heard from Vanessa about how you can
customize the online store to tell your story. And today, we will bring
that flexibility to checkout. In the past, you had two
options to configure checkout. Everyone could make small
changes through the editor and plus merchants had access to the wild west of checkout.liquid. Our goal all along has
been to allow merchants to customize checkout without
compromising on the trust, speed, and scale, that
you depend on us for. Today, we're excited to announce that we're making it possible to extend checkout with apps. We're introducing a
new set of capabilities so that you can build
exactly what merchants need. From simple changes to the look and feel, all the way through to complex UI and bespoke server-side business logic. These new capabilities include,
checkout UI extensions, an overhaul of scripts,
and a new payment platform. I'm gonna throw it out to
Manuel now to tell you more. - I'm excited to be here, to dig a bit more into
these apps for checkout. The new way to customize
an extent checkout. In the past, customizations required you to hack checkout.liquid. Now, as Dal just mention, we're changing the way
customizations gets built with apps at the center
of our new approach. These apps will be easy
for you to distribute, fast for merchants to
install, and upgrade-safe. So merchants continue getting
all the platform benefits as we release new features. Checkout extensions using new technology that allows us to take your code, host it on Shopify CDN for fast delivery, and run it securely inside
of a web worker sandbox in the browser. The system maintains flexibility, but also has guardrails that ensures the trust and performance our checkout has always been known for. I'm sure you're all eager
to see it in action. (gentle music)
So this is my store, Plant. I have a nursery, and I
still a pretty cool range of plants and products to help them grow. In addition to plants,
I also sell fertilizer, which is a regulated product. And since a lot of my buyers
are based in California, I'm going to build an app
that shows a warning message under the order summary, to comply with the local
Prop 65 regulation. So I have my development set up already. And I wrote a piece of code here that checks the product metafield, to see if they should trigger the warning. It also reads the shipping address, to check if the buyer is from California. Now, I wanted to create
a warning message UI. With checkout extensions, Shopify will provide you
with a component library that your app will use to
create custom experiences and inject them at various
extension points within checkout. Now I'm going to build
the UI for the warning using some of those components. So I'm gonna start a view adding a border. And then drop a text block. And I have my Prop 65
warning, then I can paste it. Jumping into my subs checkout, you'll first notice that I've
done some light customization to the appearance using
our new Branding API. The Branding API gives you
control over things like colors, spacing, typography, and more. Okay. So I have my fertilizer in the cart. And now, I'm going to
change my shipping address to California. And there's my Prop 65 warning. But it's not looking very good. So I'm going to adjust the appearance by adding a few properties
specific to my extension. One of the especially cool
things about extensions is that they automatically
inherit the appearance from the Branding API. You don't have to worry about
duplicating brand settings in your app. I'll add an icon and wrap them into a bookend
for perfect alignment. As you can see the
extension fits right in. Okay, so this is looking good. But now, I'd like to
add a little something to reward my best customers. For that, I'd like to
introduce Gil Greenberg from Checkout Promotions. Gil's going to show us how easy it is to build a more advanced extension. - Thanks Manuel. Hey everyone. I'm Gill Greenberg the creator
of Checkout Promotions, a Shopify app I've been
building on the side for the past year and
just recently left my job to work on full time. I'm super excited to share with all of you a preview of how to build a free gift with purchase
checkout extension using UI components and APIs. So let's dive right in. Now you've already seen from Manuel how to build up the UI for an extension. I'm gonna take a shortcut and
start from the UI code here. So this looks great, but you'll notice when we
click add, nothing happens. What I need to do is use
the provided React hook, and call the API to add
a new product to the cart whenever the user clicks the add button. Let's do that now. (gentle music) I'm now passing a simple payload with the product and
quantity I want to add. Now, whenever the user
clicks the add button, the product will be added
directly to the checkout and I don't need to worry about updating any other UI elements or triggering a full page refresh. Now finally, I'll add a
bit of state management with standard React code, based off the response
I get back from the API. First, I'm gonna make
sure the offer's hidden once it's accepted and then I'll add loading
state on the button. And with that, we're pretty much done. So let's take a look at what we've made. If we go back to checkout,
and we click add, you'll see a loading state,
the product is added, and the offer gets hidden. So that looks great. Now back to you Manuel. - Thanks Gill. So let's see it all come together. (upbeat music) So I'm opening up checkout with a potted plant already in my cart. The apps are just a free
gift with the purchase, a sample of the recommended fertilizer. When the buyer accepts and the fertilizer is added to the cart, our second extension automatically loads and presents the warning. As you can see, both
apps are fully decoupled and living in their own code base. Yet, they can play nicely together. Also, since these apps are
built on top of solid APIs, they will always be
automatically compatible with new features we release. So before the wheels in
your brain gets cranking with all the things you'll
build with checkout extensions, there's one more thing I wanna highlight. With checkout.liquid, changes like these were
not applied on Shop Pay. Merchants needed to choose between maintaining their customizations, or disabling Shop Pay and
take a hit on conversion. Now, checkout extensions
and your branding settings, will show up even on Shop Pay. It will all just work. We're really excited
about checkout extensions opening up a big
opportunity for our partners to build out for checkout. And for all merchants,
including those not on plus. Today, we're launching our
first checkout extension called Post Purchase Extension. You can use it to present offers, or show content to buyers
right after they completed their checkout, but before they arrive
on the thank you page. We'll be opening up developer
access to checkout extension and other parts of checkout in Q4. So be on the lookout for more
information later this year. Let's talk about the backend component of checkout extensibility. Shopify Scripts. We released Shopify Scripts
about five years ago, and it's been used by
thousands of plus merchants to build custom logic
unique to their brand. Although Script is an
incredibly powerful tool, we believe it can be even better. And that's why we've rebuilt
the script infrastructure from the ground up using WebAssembly. This new foundation will speed
up the development process, improve reliability, and make
your scripts run much faster. In fact, we've managed to get
the most complex scripts code executing in under five milliseconds. But that's not all. Since scripts execute directly in Shopify, they can scale up to handle
the performance needs of the biggest brands and
flash sellers in the world. Now, all these improvements are great, but they won't make an impact without a best in class
developer experience. That's why we've seriously
upgraded the developer tooling. Practically speaking, the biggest improvement that we've made is that you can now build Shopify Scripts, using your preferred development workflow. Also scripts are now deployed
and installed using apps. So you will be able to deploy your scripts to multiple stores, and merchants
will be able to use them without ever touching code. No more copy and pasting. Now that you've heard about the changes, let's see what the experience
actually looks like. To do this, I'm going to build a script that sorts shipping methods
based on carbon emissions. So customers can pick up the
most eco-friendly option. Although this isn't a use
case that everyone will want, it will show you how incredibly easy it is to build unique checkout
experiences with scripts. The first thing I'll do, is to use the CLI to
scaffold our script project with all the necessary
files to get started. When it comes to computing the most eco-friendly shipping option, I know that the biggest
driver of CO2 emission is the type of transportation used. So, I've created a library
that calculates total emissions based on the shipping distance
and the transportation type. Next, I'm going to write a function that takes in the cart
information and shipping methods. And then return a sorted
list of shipping options from the lowest to highest. Now that my function is ready, I'll wire it all up, and the
sorted list of shipping options will be rendered in the checkout. As you can see, we've been laser focused on making it easier for you
to build the customizations that merchants needs to be successful and to stand out from the crowd. Although I built a shipping
script for a single store, we envision a future where you
can easily turn your script into a public app that's
available for every merchant on Shopify. With our new Shopify
Scripts announcements, you can now get into the business of being a checkout app developer. Now, we can't talk about
checkout extensibility without talking about payments. Our partners are a critical
part of our payment ecosystem. Solving for a diverse
set of merchants needs. In fact, you've generated
almost $65 billion in GMV last year alone. That's an astonishing number. This was all done by integrating
with Shopify's checkout through active merchant
and Hosted Payment SDK. Shopify merchants sells
all over the world. And new payment methods
appear at a faster rate than we can integrate into our platform. That's why, we're excited to announce that we now have a better option for all of our payment developers. Shopify's Payment platform will replace our legacy integration points and enables you to create payment
gateways, as Shopify apps. The Payments platform
has been built to work with Shopify as newest
checkout technology stack. And will be the foundation as we continue to build new
features and functionality. Payment apps will be easy to customize, fast for merchants to install, and enable you to build
faster with modern APIs. I wanna show you how it works. First things first, you'll
configure your payment app in the partners dashboard. You'll be able to easily
configure your app settings like adding payment methods,
and country availability. To improve localization, you can change the name
of your payment gateway in different languages. And this is also where you'll
be able to version your APIs. It's like building any other Shopify app. Once your app is approved, merchants can onboard
directly to the Shopify admin. With the payments platform, you now own the end-to-end
onboarding experience. We will redirect merchants
to a page you will host, so you can collect all the business and KYC related information
directly from the merchant. We will rely on OAuth for onboarding rather than passing credentials. It's as easy as that. Together with our partners, we're on a mission to build
the best payments platform. So that's a lot of checkout announcements. To recap, I showed you checkout extensions built right into the checkout flow, lightning-fast checkout scripts, and the redesigned payments integration. We worked very hard on
this new infrastructure and we can't wait to see
what you'll build on it. (upbeat music) - You just heard about
all the cool new tech and infrastructure we've built. But now let's talk about how
big this opportunity really is. And how we're making it easier for you, developers all over the world, to build real companies on Shopify, while solving merchant problems. E-commerce accelerated at an
unprecedented pace last year. This $5 trillion market, now represents nearly
20% of global commerce. And it's being pushed forward by independent merchants
all over the world. What we saw is that while global economic
impact fell by 3% last year, economic activity with
Shopify merchants grew 125%. With this growth comes more
diversity in merchant problems across every size, vertical and geography, at every stage of the merchant journey. And this growing demand and complexity represents a massive opportunity for you. Merchants need developers
now more than ever. What we've seen is that when you solve real
problems for merchants, they're more than willing
to pay for your apps. The average developer on Shopify is already earning more sales than the average developer
on Apple or Google. We estimate that Shopify developers earn at least one and a half
times more than those on Apple, and at least four times
more than those on Google. And we're just getting started. The demand for commerce innovation has never been more apparent. In 2020 alone, developers earned more than
2018 and 2019 combined. We saw ecosystem companies
start to hit unicorn status. Klaviyo in Boston, ReCharge
in LA, Printful in Latvia, Yotpo in New York, solidifying that there
is more than one way to build a billion dollar
business on Shopify. We wanna make it even easier for any developer in the world to take advantage of
this growing opportunity. On top of all the new infrastructure
you just learned about, we're gonna share how
we're making it easier for you to build apps on Shopify,
find the right customers, and manage your growing business. To get us started, I'd
like to welcome Rebecca. - Over the past hour, you've heard us talk about all
new extensions and toolings we've been working on, to make it easier for
developers to build, test, and deploy apps. We've done everything from
updating our dev docs in CLI, to improving our real-time testing, to visiting app load speeds, and simplifying app scaffolding. We've been maniacal in our efforts to make building on Shopify as simple and as quick as possible. And what better way to showcase the new developer tooling
features we're releasing and just how easy we've made it. Let's build an app from
scratch in under two minutes. There are lots of ways apps
can integrate with Shopify. For today's demo, I'm gonna build a
subscription app extension. This app lets merchants
configure subscription settings directly in the Shopify admin, and display subscription
plans on the product page. To get started, I'm gonna
checkout the Shopify dev docs. In addition to the Shopify CLI upgrades, we've also shipped a new
experience in our dev docs. We've made a big effort to improve the discoverability of our docs and focus in navigation on the outcome that you want to achieve. In my case, since I'm building
a subscription app extension, I'm gonna look for that tutorial to see what I need to do to provide a best-in-class experience. As you can see, the tutorials
have a new typography, a new layout, and multi-programming
language code blocks, making them much easier
to read and understand. Now that I've read the dev docs, I'm ready to start writing
my subscription app. I've already created a partner account, made a development store, and installed the CLI using Homebrew. You can find these
instructions in our docs. The first step in creating my app, is to use Shopify create
node to scaffold it. Now I'm gonna pop into
the partner dashboard and validate that the app was created. And there it is. One of the big design
goals of the Shopify CLI, is that you do the bulk of the
setup from the command line without having to log
into the partner's UI. Next, I need to run the
app using Shopify serve and install it in my store
using the handy install link. This is where I could add
some custom functionality to my app. Like applying a selling plan
to multiple products at once. For now, I'm just gonna
add some sample UI. And the UI library loads in my
development store instantly. Amazing. But we're not done yet. I wanna create an extension that lets merchants interact with the app directly within Shopify. For this I'll use
Shopify create extension. Although we have a few
different framework options, I'm gonna use JavaScript and React. So now you can use Shopify
serve to run it locally. You'll notice that the
commands to create an extension are roughly the same as the
commands I use to create NAP. Create and then serve. Next, I wanna show you the prebuilt UI on my development store. And show you how I can
customize it to fit my needs. Since all the source code is pre-written, it should just need a few minor tweaks. Also, I wanted to call out
that our library loading makes development even faster. Since my app extension is done, one cool thing that I wanna do, is test the experience in
our new developer console. The developer console
will let me test my app with real data and show me how it renders on both the desktop and mobile device. The great part about this is, I don't need to push or publish
my app after each change. Instead, it will render instantly
from my local environment. Real-time feedback for the win. Now that my testing is complete, I'm gonna push this
version as a working draft. You can see that I'm also
registering the extension to the app that I previously created. This is what lets me push
my extension code to Shopify and run the app extension
and the Shopify admin. And bam! I've successfully pushed my app extension, and I can see the date
the draft was saved. My final step can't be
done through the CLI, so I'm gonna hit that
partner dashboard URL to version and publishing extension. Once I hit the publish button, my app is officially in
my development store. As you can see, we've
made it incredibly fast for you to find the content you need to write, test and deploy
an app in under two minutes. So now that you know how easy
it is to build on Shopify, what are you waiting for? - Now you know how we've made it easier for you to build high quality apps. But we know running your business is more than just building your app. You need a powerful distribution strategy to get in front of the right
merchants at the right time and the tools to easily
manage your scaling business. That's why we've enhanced
the power of discovery on our app store and
highly contextual surfaces like the Shopify admin. With over 1.7 million
merchants on the platform, we've been able to deeply understand what unique segments of merchants need at each stage of their journey. And we use that data and insight to build a powerful matching
and recommendation algorithm. So now you can get in front of
the exact group of customers that need your help. You can see this in action on our new personalized
and curated homepage of the app store, through
to the category pages. We're introducing new content types, a more personalized
feel, improved taxonomy, and a modular approach that will allow us to
personalize an experience that's catered carefully to each merchant. On top of the enhanced organic discovery, for those of you looking to
invest in accelerated growth, we'll also be enhancing our ads platform with creative format control
and more robust features. We've even made it easier for you to manage your
billing and payouts. You can now view details on apps subscription
charges in the dashboard, and even resolve refund requests directly. Making it easier to understand how merchants experience charges, and how much you can expect to be paid. Now, I can't talk about payments without acknowledging what I know many of you have been asking for, making payouts better and more
flexible all over the globe. Well, we're very excited to announce that soon you'll be
able to receive payouts through different types
of local bank transfers, wire transfers, and other payout methods in addition to PayPal. We support payouts in more
than 200 regions and countries around the world. All of this and more is available in your partner dashboard today. We want developers everywhere
to have the opportunity to build a successful
business in commerce. As you can see, we're
investing in every part of the developer experience. From making it easier for you
to build products on Shopify, to helping you find customers
through our app store, through to managing your business. The opportunity ahead is truly limitless and we wanna help you succeed
every step of the way. Stay tuned. You might be surprised
just how much we mean that. - I've been part of this
incredible community now for over a decade. And I want to drop in and tell you, how proud I am of what we've accomplished together. And, how fast we're accelerating. Our ecosystem has played a
huge role in that growth. We've always said we wanna
create more opportunities for our developers and our partners than we take for ourselves. And the opportunities,
they keep getting bigger. Last year, our partner
ecosystem generated, $12,5 billion in revenue. And that number is up
more than 84% from 2019. That is four times more than Shopify made. And that is the way it should be. We only succeed when you do. And our merchants, they survive
and thrive because of you. As we've said throughout the day, we are committed to make
it easier for developers to build their businesses on Shopify. We're solving hard problems here. And anyone who has ever built a business knows how hard it is to
find product market fit. With our platform, and
our discovery engine, we are able to play matchmaker for you. There are so many businesses out there who are willing to pay money to solve the problem that
you fixed with an app. And because of our platform, they will find you when they need you. When you build for Shopify, you build for millions of small businesses who want what you have. And the proof? Well, the proof is in the numbers. Your apps in the Shopify app store, they were installed over 12,5
million times in 2020 alone. Now beyond removing the
barrier of product market fit, there's still more we can
do to make it easier for you to build on Shopify. So, on August 1st, we are
removing all revenue share on the first million dollars you earn selling your apps on
the Shopify app store. That means most of you will
pay no revenue sharing, keeping you in control of
how much money you make. Let me repeat that. Almost all of you will
now pay zero revenue share on everything you earn
from the Shopify app store. And at the end of every single
year, the numbers reset. Every year, your first
million dollars is all yours. And after you earn more
than a million dollars, we are lowering the revenue
share from 20% to 15%. Half of what other
popular app stores cost. We are that serious about
the potential for you to build on Shopify. We are that serious about allowing you to leverage the scale and
power of the Shopify platform. We want the greatest
developers in the world focused on making commerce
better for everyone. The opportunity size here is massive. The problems are hard to solve. But we are it making easier
for you to change the direction of the future of commerce
and make a living doing it. So if you are an app
developer, a mobile developer, a cloud developer, a student, a startup, or if this is just a side hustle, you can help merchants be successful and be part of the most creative and the most rewarding
ecosystem on the planet. I am confident that the
most exciting opportunities of your entire career
lie ahead if you join us. (upbeat music) - Welcome back. And thank you so much to the team. A lot of hard work went into making all of this happen today. I think this is by far the
best version of Shopify has ever existed. So many disparate systems
are coming together here for a cohesive forward. This is really platform work at its best. I think this should really set up everyone to build with businesses you want. Bring the ambitions online that you have and really let your creativity shine. There's one more thing I
want to talk to you about and it's best shown in code. So let's go write some code. Building for a web is fun. It's like solving a complicated
but satisfying puzzle. Since the beginning the web has evolved, constantly gaining new capabilities. Every once in a while, this
capabilities has come together into a new approach or a tech stack, that really captures the imagination of that particular time. Ruby on Rails is a good
example of a great tech stack that we fully leveraged from the beginning of Shopify's journey. JavaScript and React
is another tech stack, that we think it's just
about to hit the sweet spot for commerce development. A lot of you are working with a stack on top of the Storefront API that Ilya I showed you earlier. And we've been experimenting with it too. Using React is a lot of fun. And it really fits into how some teams want to work together day to day. And fun is a perfectly good reason for choosing a technology. But we've also observed a few limitations. Limitations that make it
complex and challenging for building online stores. Because you're forced
to make some trade-offs. Online stores are deceivingly dynamic. Contextual pricing, customer accounts, currencies, languages, and especially rapidly
changing product availability make it so. Using React only on the client side leads to load time issues
for first time visitors. Especially on low powered mobile devices. Something that commerce is
especially sensitive to. If you work around this by
using static page generation you give up all that dynamism
that I talked about earlier. Just to claw back some of that lost speed. Both of this trade offs, lead to fewer sales according to our data. The good news is that there are some significant additions to React and JavaScript
ecosystem coming together soon that really address these issues. So we've been putting in the time to see how we can put
everything back together without the downsides, while
remaining just as fun to use. And see if this tool set
can hit the sweet spot for making creative online stores. It's not something that
we are ready to ship yet until later this year, but
we really want to share this technical direction with you. It's called Hydrogen,
and let's go take a look. (upbeat music) So here we have a store that
already has some products. They've got some snowboards here because all my favorite product (indistinct) the snowboards of course. And we already have an
online store channel and a point of sale channel. And let's add the Hydrogen channel. The next step is to connect GitHub. Which we'll just quickly do here. And here we are. All the template code to have a private snow devil repository. And we can just copy paste
this into our terminal and grab a dependencies and
wants the dependencies are there they'll go right over to VSCode. If you've seen React projects, this should be really familiar. You'll find a standard public
directory for static assets and then a source directory. Here's a standard app component. And this implements React router from Hydrogen we get
default routes component which implements file-based routes. And we gives you a pages directory. In here you'll find index,
pages, blocks, collections, products, and so on. This is a standard Liquid file structure that you're already used to. And you can just make new files in here and that'll just work. There's also the Shopify provider. And a Shopify provider
connects to the Storefront API, it already knows the right token to use, the right access tokens
were already provisioned in the background, all
this was done for you just so you can hit the ground running. The biggest difference you'll see here compared to other stacks you
might have used in the past, is that the components
have .server and .client in their names. That's because we make heavy
use of react server components. Which are key to providing
the dynamic behavior we need here. Then the store runs in production, .server components will
be run in the cloud, .client components that
will be run in the browser. What you get out of the box is that only the minimum amount of data is transferred between the two of them. And minimum of JavaScript code
is delivered to the browser. Any component only used on the server doesn't even need to be
added to the client bundle. This might be the first time you see React to the components, but you'll
see them a lot in the future. This is the new approach
developed by the React Core team. And we're going to go all in on it because we think it's key for
making online stores work. Of course, this means that Hydrogen also has to contain a mini server. So let's get that started. This small server acts as a wonderful development server itself. So as we are opening that here. And here we go. This is the template that we give you. You can click around and, of course, you can make any change. Let's say you'd like to
go change the add to bag to add to cart. You'll open the product details, and you just find a right place in code and you save and it
will reload immediately. Very cool. Let's make a change that some of us have
had to do in the past. We have a couple of colors here, back color and front color on
these wonderful snowboards, that aren't as descriptive
as I would like them. So I would like to replace
them for color swatch. So let's go find the
product options component which is just a parent of his file. And let's make this a
little bit more dynamic. So let's see if a name of a
option includes the word color. If it does, what we want to do here
is let's go do a div and we are gonna use some
tailwind CSS classes, we ship this with tailwind,
you don't have to use it, completely up to you. It's just the way we set up this template. (indistinct) be really
recommended is, it great. For screen readers, we're gonna still render the value here. But most people shouldn't see that. And we just make this
six high and six wide and rounded-full just
simply make it round, good. Now, lastly, we have to
add the actual colors so that people understand
what we are doing here. And we can just do this
directly via the style tag back, we will set up the background tag, and background color to the value because all the options happen
to be valid HTML colors. Right. And now, we also need to do this. And then everything's Gucci. So this is really nice. But my favorite thing
about this product here is that we have a beautiful
3D model that we got made just to really show off what
this product looks like. And I really want to give
this placement it deserves. So let's make a slightly
larger edit to this. Let's get rid of a feature
image across the top. We'll create a new component right here to implement the 3D model
right on the screen. Snowboard 3D, sounds good. And I'll just append this to
the bottom of the file here. Good. So getting the access to the right data can often be complicated, but since Hydrogen ships with
a lot of really useful tools and hooks, this is actually really easy. And since we know that the 3D model is the last item in
gallery, we can just get it. Cool. Now we just need to use model 3D which ships with Hydrogen. And we assign the model
that we just grabbed. And then we see if this works. That's awesome. This looks so much better. I really love this. The only thing we are losing now, of course, it's that variant pickers just don't dynamically update. But this particular 3D model actually comes with the right textures. All they really have to do is
pass the selected variant in. So let's do this quickly. Options equals. Variant name. Selected variant ID. This is something that
the 3D model standard supports out of a box. Okay. So after the page reloads,
we can fronts for product. I guess you have to turn it around. You know what? That's silly. Let's get the computer to do this for us. We would have to know
the selected options, But past that, we will need a little
bit of state management. I'm cheating here and using a snippet but this is really basic code. Basically, that color changes. We set the angle to 180 degrees, which is just, you know, the
other side of a snowboard. And then we go and pass camera orbit to camera orbit property. Is also something that 3D model viewers support out of box. And after save and hard reload. What we get here is a
absolutely fantastic way to design your snowboard. It's just so much fun. Okay. So my team is really
excited about Hydrogen especially because of the way
we can work together with it. Vanessa showed you earlier
the custom content section and she wants to send a
pull request for code. So let's make sure our
changes are reflected. And push this up to GitHub. Okay. If you go to the GitHub channel, you'll find the pull
request and have a look. So here we have the testimonials. But looking at screenshots
is kind of boring. Why don't we merge this
have a look at it live? So if we could go to get
this code from GitHub now. But there's an even easier way. Because there's also the
deployment section down here. Because it happens every
time you push to GitHub. Now, GitHub action takes a code and deploys it to something
which we call Oxygen. Oxygen is a hosting servers, bespoke build for Hydrogen apps. And it has a lot of cool features. It makes working together really easy because you can go and see
a preview for every branch in GitHub. But we hope will feel
considered it in the future for running your production
environments as well. It's not something you'd need to do. Hydrogen apps are easy to deploy. We give you a Dockerfile
that'll work just great. Or you can deploy it
to any hosting service that you might prefer. Okay. What did we just show you? You've talked about Hydrogen,
a new toolkit for building amazingly creative online stores. And we've shown you React
components and hooks and some of the workflows, so that you can imagine what it feels like to use these tools day in, day out. We've talked a little bit about Oxygen our new infrastructure
for running Hydrogen apps. Super fast, global, custom designed for the commerce use case. All of this lets you
focus on what you do best, creating amazingly creative online stores that are fun to both use and to make. So when are you going to
be able to play with this? Well it's coming later this year. Hydrogen and Liquid channels
will be available side by side. We expect most of our
merchants to use Liquid. And will remain the default
out of the box choice for Shopify stores. It has advantages, like the theme editor, like app blocks, and existing vibrant partner ecosystem. It's worth saying, nothing we've shown you
in the Hydrogen demo, is something that couldn't
ought to be accomplished in Liquid. The question really
comes down to your team and what inspires them. Now, I keep talking about fun. I think fun is really
underrated in business. 17 years ago, I made a bet on Ruby, a Japanese programming language. And Rails, which was just
released a few days earlier. There weren't common choices back then, but I chose them because they inspired me. And that kept me going from my
own entrepreneurial journey. The way they let me build software just fed more natural than
anything else I use before. It allowed me to build Shopify in just the way I wanted to work. But if I'd ever feeling
like I needed to compromise. There was nothing during that time that gave me more energy that
working on Shopify's code. I'm convinced that if it
wasn't for those tools and the inspiration they gave me, Shopify simply wouldn't exist today. So I guess what I really
learned along the way is that fun is actually good for business. The most creative things in the world are created by talented people when they are having fun
solving problems together. Let's work together to make sure that the internet stays vibrant. Full of loud and unique voices, and allow ourselves to have
some fun while doing it. Thank you very much for joining us today. (upbeat music)
