what is headless shopify

all right let's start,our webinar today um again good morning,good afternoon good evening depending on,where you're signing in today,uh gatsby welcomes you um today we're,gonna be talking,a little bit about uh headless shopify,so,today's webinar is an introduction to,head the shopify,um and just a little housekeeping uh,this webinar will be recorded,we'll spend an email in the next 48,hours you'll get that recording so if,you do have to sign off,if you do have to catch something,quickly don't worry,you're still going to be able to see,everything,hear everything but we will be doing,live q a we'll have a poll as well so,feel free to stick around for some,interactive,communication um and then the other,thing too quick is please ask,questions in the questions tab um it's,called q,a here it's a lot easier for us on the,moderating side to follow,um rather than chat which is a little,free-flowing and continue,to spiral out of control um,all right so my name is andrew geno i,run product marketing together at,um we're talking about shopify today,um and these are kind of four things,we're going to cover we're going to,cover quickly,uh some shopify basics what it does how,it got started,and then we're really going to focus on,headless versus traditional architecture,and some of the benefits of that,traditional or of that headless,architecture,versus traditional monolithic,applications,like shopify's broader platform things,like wordpress,and then we'll quickly talk a little bit,about gatsby fits into the world here,um how it relates to how the shopify and,how you can get started,um with benefit or with a gatsby and,shopify,all right so first quick intro about,gatsby,gatsby's is an open source front end,framework uh,and also a cloud platform with gatsby,cloud we've been around now for almost,six years,uh we have over 50 million downloads and,well over 50 000,github stars we're a very popular uh,open source project and again we're just,getting going with things like gatsby,cloud,and some of the other products we're,bringing to market,shopify on the other hand has been,around for a while now,um it's actually been around uh since,2004.,uh it has over half a million active,businesses using the platform,and its quarterly sales uh last year i,believe in,q4 was 36 billion dollars so 36 billion,dollars,worth of goods were sold through the,shopify platform,by businesses individual entrepreneurs,um all sorts of folks using the shopify,from large,um to small and,what does shopify really do they made,selling items online easy,so for the past 20 years there's been,this e-commerce revolution going on,vendors brick and mortar stores bringing,their uh,wares to the digital uh frontier um and,also just,individual stores popping up uh left and,right to sell small items affiliate,marketing,everything got really popular in the,last 20 years and shopify,was the one to make selling uh your,items uh really easy,again no matter if you were a large,customer or a small customer,you could get set up on shopify's,platform,and build your own amazon you could put,in your items,and start selling just as a big box,realtor code,it gave you all the tools that you would,need things like,product catalogs things like order,tracking shipping,metrics which we'll talk about all this,came,out of the box in the shopify platform,and it allowed you to sell anything,you could become a soccerpreneur you,could become whatever you really wanted,to sell,um even services you could go through,shopify,so it became like the blogging side for,wordpress it became that for e-commerce,um and it has some awesome tools in the,back end as well,to measure all of your sales it has,dashboarding analytics it has customer,tracking,it has again catalog management all of,these things come really,out of the box um with shopify's,powerful platform whether you're on the,free tier,or their plus you're going to get a lot,of these out of the box,um but all this comes kind of with,the trepidation of a lock-in on a single,vendor,um so scaling shopify uh can be tough,and we're not talking about scaling,shopify as in uh,performance here although we will later,we're really talking about scaling,shopify across your business,so can shopify scale across the content,that you need to produce,the development that you might have in,app versus your e-commerce business,um the features that your customers are,constantly asking for,your marketing your business systems as,you grow larger and you have more,fulfillment things,can it integrate with that fancy erp,system you have,or those legacy databases that you might,have attached to another business,these are all the things where locking,yourself into a,single vendor um even one as prolific as,shopify you can really start hitting,this wall,you're going to get your business to a,certain size,and then you're going to need to look um,outward,and that's where a headless shopify can,really come in and start helping,we've used this word headless sometimes,it's composable but it's all about,kind of taking apart the layers here and,it this is a term that,is increasing in popularity so i'm sure,you've seen it more and more,and it's becoming the predominantly um,modern way to build an e-commerce store,and not even for businesses,that are large and hit a wall this is,becoming the predominant way to build,your shopify business today,with a headless cms had the shopify,and then a front-end framework attached,to it,so what is headless let's talk about a,little bit,more than just the lego person without a,head um,and to do that we'll first actually look,at some traditional implementation,patterns so,head list is the new way let's look at,the old way to kind of compare along,that,and get ourselves a firm footing so the,traditional architecture,has some content or data written and,that data is in a back end system,that is attached to this front end and,this box right here is really the crux,of the entire situation,where the back end of the front end sit,in this black box there are many things,in between but the problem is,that black box controls a lot of the,interaction between it,it controls the plug-ins um it controls,the interaction the features that are,going to come along,with the tying of the back and front end,and it's going to be slowed down,in the system now this compounds even,more when you have multiple systems,right,so if you have multiple traditional,monolithic systems,and you add on functionality that one,may not have,that kind of means you need this whole,different system to be maintained,and here uh it's kind of getting,confusing with system a system b,system c all having their own back end,and front end all kind of having their,own uh content architecture,but it really starts to make sense once,you see this franken web,and this is a common practice between uh,any size company for the past 20 years,they've often had multiple sub-domains,that have tracked,multiple technologies so these are,multiple technologies and,closed-loop traditional systems um that,need to be used kind of separately so,to do that in the past we've done maybe,a sub-domain so we have store.domain.com,and that store maybe is a shopify,implementation,it's going to get rerouted through the,dns to either store,or you can do something more complicated,like reverse proxy,um and get it to go into like domain.com,but either way it's a whole separate,system,it has a separate database you're going,to enter items into that database,differently than your other things it's,going to handle a lot of the things that,are core,too like an e-commerce implementation so,product catalog the shopping cart the,payment,maybe some shipping type things uh,promotions promotional codes,um all these things uh are normal to any,e-commerce experience,and they're things that in the past have,either been,custom implementation that has taken a,really long time to implement,or they've been the single threaded,platforms like again shopify woocommerce,commerce they've all traditionally tried,to do this,in one small space and then we have like,domain.com which would maybe be the,marketing website,and that marketing website would have,things like company info,maybe careers it just has all the,information,outside of the store and maybe we were,running that on,drupal or a custom implementation,sometimes these things,are only a couple pages so maybe we're,doing it with,html maybe we're using shopify to kind,of also fulfill,our needs as a marketing website um so,we were using kind of the,the templates that shopify uh gave us,and then there's the blog,obviously wordpress is most commonly,used you also again,see this implemented all the time on a,subdomain,um so kind of breaking up your seo uh,juice between two domains here because,of technology technological needs,so wordpress might be blog.domain.com,and contain all of your blogs,um you might link back to your,store.domain.com,to kind of drive that organic and,passive,revenue but again you're splitting up a,lot of seo,a lot of organic work here is going to,for now and then support again usually,this is something like zendesk or or,help scout,you're going to have this whole,different interface that everyone has,very similar experiences,with big squares they're going to say,getting started maybe payments and,they're going to be,connected to your ticketing system there,might be a pop-up chat,but that's going to live in its own,world on maybe a support.domain.com sub,domain,and all these systems are these,traditional um,monolithic systems that are used,throughout all businesses,and again once you start to think about,these things this way,i think it's a little bit familiar to uh,most users uh even non-developers i,think are starting to be like,oh yeah i do see these things they,always look different um i'm always,clicking around,i do notice sometimes in the url bar,they have different domains,it might freak me out for making a,purchase is this safe,so all these things happen uh,traditional,headless on the other hand is about,composable functionality,piped together by api so we're getting,best of breed functionality by each tool,and we're bringing them together in a,headless,api driven way so,how this architecture is breaking apart,these boxes,where the back end is in its own box and,the front end,is in a separate box and that means that,back end components can be updated,without interacting or messing up with,the front end components,and vice versa so teams can go at,different speeds,and not trip over each other and this,really manifests,when we have these multiple systems so,in this way,we can have system a system b system c,um all with different back ends all with,different uh let's say access points,different content management systems um,different teams that are working on them,and then they're all getting rolled up,into this one single front end,and that front end can have its own team,that front end can also be broken apart,in a component way as well that really,mirrors,um a flexible like thematic way to build,uh where you can have multiple teams,injecting code with themselves,but again everything is broken apart,nothing is dependent on each other,and these systems um start to work uh,together in a way that previously they,were kept in its own silo,so you can see here with like a headless,ecommerce experience,you can start breaking apart the product,catalog the checkout experience the,marketing experience,all these things can be broken apart on,the back end,and then still be delivered through a,single ui through a single unified,experience,on that front presentation light so a,end user a visitor customer,is not even really going to be aware,that they,are using multiple systems they're not,going to be aware that you're using,shopify with wordpress with another,system,they're just going to think they're,using your brand's website they're going,to think they're getting this great,experience,from this brand that has everything um,with common components it's just a,common slick experience,and it really is uplifting to the entire,um,revenue operation right conversion,traffic brand awareness,it just has tremendous benefits there,so benefits of headless we're going to,talk about really three things,we're going to talk about the,performance monolithic systems like,shopify,they often suffer from horizontal,performance uh,vertical performance and speed problems,at large scale,so this is on the performance side let's,say page load,let's say builds from a product,perspective uh these things as,you tend to add items as you tend to add,visitors uh they're gonna start to slow,down or,you're gonna trade off and have to buy,larger packages,more enterprise driven packages on these,um,platforms to deliver the speed that your,customers need,so you'll notice a gatsby website versus,a traditional website that is not static,generated it's going to be a touch,slower and again that's just because,it's a server-side rendered platform,that has,a lot of functionality it has a lot of,things built into the monolithic aspect,of it,and it's not optimized in that way the,second thing really is around control,and this control is pretty broad um,control is really all about,the experience that a user has the,functionality,that actual businesses have around their,website,so these systems like shopify like,wordpress you're going to be limited,in how you control that experience by,how uh what features they,develop um how far they're pushing the,platform,so support content is support content,it's going to be trapped,inside a support portal it's going to be,on a,different subdomain you're not going to,be able to use that content,or pipe it into a product page um same,thing with blog content blog content is,kind of strictly,um in that one silo it can't be used in,other places,um things like state they're not often,known between these different systems so,let's say you're logged in,to your shopping experience now when you,log into them or when you visit the,marketing experience for the blog,experience,are you then logged in there do you have,personal,um content driven up uh bubbled up for,you,by being logged in those things are very,difficult when you use multiple systems,multiple traditional systems they're,much easier when you go headless,even things like localization,accessibility,again you're going to be hampered by the,systems you're using so let's say you,have a,world where you have a marketing site,you have a shopify experience and you,have,your support uh let's say via zendesk um,you sell something that is really,uh close to an accessibility um,persona so someone in like let's say,deaf community,uh you're going to and let's say that's,important to your brand you're going to,be limited what you can supply that,visitor by the system you're using so,shopify you need to know,that they're going to always drive um to,be a super successful platform,or super accessible platform and again,shopify,may be but then you have to also um hope,that,a system like zendesk is also on the,same par and the same needs as,accessibility,when it's your brand what's important to,you going headless gives you the ability,to control that you can control a lot of,those systems,on the headless front end like gatsby,and just,use the back end systems like shopify or,blogging in wordpress,um as the back end um they don't have to,worry about,accessibility in that standpoint they're,just supplying uh the information you,need,we can do that on the front end lastly,let's talk about the developer,experience this one is huge,shopify wordpress these tools they were,built for non-technical business owners,and marketers,so really they are fulfilling the need,to get set up,as quickly as possible um to edit,content,to make changes without the use of a,developer,that means a lot of the things that you,would like to add a lot of the,the functionality it's going to be,limited uh there's just technological,constraints when,that is the case um so they're not,really built for developers there's not,going to be great version control,there's not going to be,um the great ability to use modern tools,modern javascript tools modern just,local development tools you're not going,to be able to use those tools,with these systems so as a web developer,um,you'll be constantly jumping in and out,of platforms trying to use their low,code ability,um and you'll also be selling uh to,clients and,if you're in an agency setting uh that,you're gonna be hampered by,um you're only gonna be able to fulfill,certain needs,when you use that certain project,so let's talk about shopify being able,to be run headless,and it can be done with gatsby so these,two systems,they can work together where shopify,supplies,what it does well so again the product,catalog,the inventory management the shipping,the checkout,experience all that is core to shopify's,value and it's what they think about on,a daily basis,now what we think about on a daily basis,and what we're driving hard for,is to optimize the web so that front end,experience,the speed the security the usability,all of those things the developer,experience all those things are what we,work on,every day so you can get the best of,both worlds by using,it in combination so we can help,integrate your headless stack,between your backend services like,shopify,you might use a cms alongside it like,contentful,um and maybe analytics tracking on the,back end segment,all these things can tie together so you,don't have to just use google analytics,on the front end and then have your back,end analytics,be either served up by shopify inventory,management,or like salesforce.com you can start,using these broader tools like segment,that can ingest data from the front end,from the back end just as easily,um and gatsby's going to help you,integrate it gatsby's going to,give you those react components um give,you the plugin and architecture to build,that front end,and it's going to be limitless you're,going to be able to add,whatever functionality and feature that,any competitor,uh can be pointed to which always,happens um in the web development,setting,you'll now be able to build that um with,a front end like gatsby,so the benefits of gatsby plus shopify,we'll talk about,and go through each um the first one is,faster page load speed,so gatsby is a statically generated,um website a web point framework so,that means we do things at build time we,build your website at build time,and when a user comes to the website the,entire website is already packaged and,built,ready to go right on an edge content,delivery network,so if you are a user let's say in the,northeast,and you have traditionally used a,traditional e-commerce system that is,out of,let's say a large web provider that,maybe has a server,in virginia every time you go,to a new item a new uh let's say,product you're going to ask the website,for,information all the way from virginia uh,you're going to ask the latest and,greatest info about that,and it's going to travel back and return,that info,now in the world of uh 2020 web world,that's pretty quick but there's,definitely a,discernible lag to it um there can be,lag times of like even one second on the,shortest,but three four five seconds um is,definitely very common in today's world,and it's annoying to,users that have grown up in this digital,world that are expecting things to be,instantaneous,static generated sites like gatsby we do,all the building on the edge network so,that same user in the northeast,when they go to access your store,they're going to get content that was,uploaded to the,cdn and it could be 100 feet away from,them if they live in the downtown major,area it could be a couple miles away,it's going to dramatically reduce that,trip that,you go to grab that information um and,they're going to get the information,back,in seconds and when they go ask for that,new page that page is already there,loaded in their browser,and it's going to feel like an,absolutely seamless experience,um and that's the benefits of running,your shopify experience,not on shopify's platform which is very,driven by server-side rendering,and using the gatsby system that is more,static,and just a faster overall experience,because of that faster page limit speed,we're going to help,increase your seo traffic so organic,traffic,is the number one roi way for,businesses to make revenue online and,with the faster page load you're going,to score higher,in a lot of google web core vital scores,which we'll talk about in a separate,slide actually,we have all that optimized out of the,box uh you're also going to be able to,ship,features faster um so by headlessly,decoupling,your back end and front end you can have,different development teams work on,different parts of your business,different parts of your e-commerce store,ship updates to the front end,without affecting uh the back end and,vice versa so you can just constantly,kind of keep shipping updates,without worrying about um do we need a,downtime,for everything to build together do we,need to hold friday afternoons,to get all of our new changes into,production without worrying about,something breaking,gatsby plus shopify or in general any,headless system,decoupling those two things are really,going to help your like robust,release patterns you're going to be able,to update things a lot quicker,also integrate your favorite cms if you,go with a,traditional monolithic system you're,going to be tied into whatever way they,deal with content,or you're going to have to use a,frankenweb subdomain url,and kind of install it there with gatsby,shopify have the solution,you're going to be able to source,content from any cms,any really data source so you could have,a web page with,content from shopify uh you can have,product uh information from shopify,reviews from another system comment,commenting from discuss,uh content from a blog system like,wordpress,all that could be displayed on one page,and easily integrated together with,gatsby's data layer,uh there's also security benefits of,using headless architecture,you're going to be able to break apart,how the database is accessed so when you,go to a gatsby website,there's actually no open connection with,the database,so you lower your vector for hacking,by like tenfold you're not going to have,the ability to,like pack in with cross-site script,or anything like that because there's,just there's no connection open,there's no way you could possibly be,able to get into the database because,the website is,already built um on the edge it's,already there,and then lastly uh with gatsby you're,going to get out of the box,um pwa functionality so progressive web,apps,uh they have kind of been on a roller,coaster of popularity,and uh i think um,over the past like 10 years as large,vendors have gone in and out of,supporting them,but what pwas bring is a more native,more mobile functionality,to operating systems on a website so you,can think about when you go to a native,web,or if you download a native mobile app,that native mobile app is going to be,take advantage of,operating system uh functionality like,push notifications,um like taking let's say changing the,color of the status bar,um of also of offline mode all these,things come out of the box,uh when you use get just like they would,with a native application,so you'll really be able to take,advantage of this functionality on a,mobile device,you can basically get the benefits of a,mobile app without,having kind of the cons of,paying for a mobile development team for,paying for a completely separate system,for learning a new framework that is,um native to ios or android all that's,going to come out of the box,on your actual mobile web app and feel,much more native,to an ios or android user,this is an example of how we can,creatively highlight your products and,kind of,the end state of what happens when you,headlessly build,a system so here it cuts clothing uh,it's got a shopify driven back end,um on the e-commerce side it's got a,contentful driven back end,on the content side and that allows for,this really amazing experience to be,tied together,um and then displayed to the end user uh,using gatsby so the one should go to a,live site,and kind of click through and you can,see um how it works in real time,but these are the things and this is the,end state of,uh adding uh two different systems into,one unified ui,you can think about this again with,support with blogging all this can just,render,and one ui looks seamless you can have,one team work on it you can share,components,but that back end can be driven by,different,databases or different apis different,third-party services,also from a in your seo performance,these are the three new core web vitals,that google came out with,they're rolling this out uh this year,in much more haste so we'll talk through,them really quick,but they're gonna help boost your,revenue they're going to help in dr,drive new traffic um to your website in,a way again where,shopify monolithic system uh we're going,to be able to be on most all of it so,largest contentful paint,uh this is just the way that your,website is delivered to the browser,um are you minimizing your css,javascript are you really,um optimizing that footprint that you're,sending to the browser,um the next is first input delay um this,is going to be,that first thing that gets loaded uh is,it an,image that is behind your hero and is,going to load,um in four seconds and block every,single thing else that's loading,um these are again things that on a off,monolithic system you're not really,going to have the ability to change,um you're just kind of going to get what,you get out of the box and hope it's,optimized,and then lastly the cumulative layout,shift this is everyone's favorite in,e-commerce but that pop-up that comes up,and says hey,i saw you trying to leave the website um,do you want to give me your email,address so i can send you some emails,about the latest coupons,um or that ad that pops up when you're,reading a news channel,right when you get to the media section,and then you click it and then all of a,sudden it's gone,those annoying things those are teamwork,layout shifts,um and they are more important or the,negative experience they also they,oftentimes bring out on a website,uh they're getting more important in,google's eyes so,all these things are summed up in a web,vitals report score,and uh these things are optimized out of,the box by gatsby,we work every day on how we can build a,framework,that is faster and more responsive,so again these are things that we focus,on whereas we're not focusing,our daily development time on how to,make the best inventory system or,how to be the best uh product catalog,those are things that we feel like other,systems,can really work on and then we'll tie,them together,so how do you get started with this,headless system how do you get started,with gas being shopify,we think the easiest way is starting,with our gatsby and shopify demo store,so head on over to shopify dash,demo.gatsbjs.com,and you can take a look at a kind of a,poc with 30 000 items you can check out,how fast it is and then you can deploy,it to gatsby cloud,you can check out the code you can check,out builds how fast it builds,with some of the things that come with,gatsby cloud that we'll talk about,but it's a great way to just kind of see,what the headless architecture is all,about,how they work together how the api keys,come together and how you can start,building,second if you are more familiar and,maybe you have a gatsby site,maybe you are a react developer you can,head on over to our plug-in,store and download the gatsby source,shopify plug-in,in your gatsby project that's going to,give you ability,to retrieve things like product images,product data,inventory count checkout experience,all of those will be able to be,controlled by this,source plugin and really again give that,easy seamless interact,uh integration between the front end of,gatsby,and the back end of shopify just like,you can add this gas resource shopify,you would add gatsby source contentful,or content stack,or any other cms that you're using and,start to again build that unified system,between different back ends and have,that,same front and when you come to gasket,cloud and you deploy it there,you're going to get advantage you're,going to be able to take advantage of,things like incremental builds which,means,on the static side we're used to let's,say waiting for the entire website to,build and,in three to five minutes um and then,you're gonna see your changes update,uh incremental builds with uh shopify,with data like coming from contentful,they're gonna happen in seconds so we're,just,hydrating we're rehydrating the content,portion,of the website and not actually,rebuilding the entire static site,so for a site like gatsby js,that has over 10 000 pages when i work,in rcms which is contentful,i get incremental builds i'd say the,average time is about eight seconds,so every time i click the publish button,um that,information is going to get out to live,production in around eight seconds,second uh cms preview uh so this is a,really awesome thing that a lot of times,it headlessly,uh you lose so cms previews give you the,same functionality that's present,in a wordpress or shopify where i can,preview the car i can click a button and,see what my draft,content looks like a lot of times in the,past that's been lost with headless,solutions,not so with gatsby gatsby cloud has cms,previews you're going to be able to,click a button,and see on a server uh some of the,content you might have in draft um you,can share that cms preview,with different stakeholders and you can,work on kind of again collaborating with,things,before they're pushed to production,can also take advantage of things like,deploy previews where,maybe you make large changes to the code,and you'd like to see what it looks like,on a different branch you're going to be,able to get the live,website with a production like,environment so production like,uh edge cdn production like,uh backend you're gonna get all that on,a unique branch url that you can share,again with anybody in marketing anybody,at the company that needs to see maybe,the work and then again all this just,works out of the box with gatsby cloud,that's gatsby cloud is going to give you,a build and hosting tool um for your,entire shopping experience so,you can host your gatsby website right,on gatsby cloud,you can build it with all the back end,right there and it's all,a wonderful developer experience,all right so we're going to get to q a,now and we're also going to quickly look,at a website um that currently uses,um a headless architecture um across,its back end which is uh shopify,and front end which is gatsby um so i'm,going to share my screen real quick and,again,we're just going to click around real,quick we're going to get the feeling of,what something looks like,um that is headless and not just shopify,so i'm going to stop sharing,which probably gives you a really ugly,screen i apologize with headshots,i'm going to share your screen again,all right,so ratio.com this is a e-commerce store,they,deal with sprinkler systems um and they,have selected a headless implementation,um and you can see here the content the,branding of the website itself sorry if,this is,right in the middle i have a bar there,sorry,um they have a home page,that is not just a large collection of,squares,uh it doesn't look like amazon.com,frankly it looks like a,a normal business and this is because,again it's,headless implementation where this part,of the website can be controlled by cms,that was made to do this um and not by,an e-commerce,platform that was made to really control,products so here we have a much more,content driven,experience again there are pages like,how it works,which i'm sure help drive organic,traffic,i'm sure these pages are set up so they,can drive traffic from google,and again they're beautiful content,heavy pages,um this would really be a struggle to,build um,on shopify's main platform again it's,just not what they're made it's not what,they were built for,but it also has the ability to have a,really slick,e-commerce experience i also hope,everyone can see how,kind of quick and responsive the website,is in general um,literally there's almost zero lag time,i'm not,building this locally this is on an edge,network,um so here we have we're starting to get,into the e-commerce functionality,these are getting piped in from shopify,we can add them to cart just like,anything else uh we can change out the,quantity,we can go back uh and look through each,one on its own,so on champion this looks like a normal,um actual like again this is more of an,amazon experience up here,it's coupled with a more content-driven,experience down here,we could also add things like uh review,system,you can also add things like commenting,promotional codes right here here we,have,a live dynamic zip code i'm going to,guess this helps with shipping,um and you can also add things on the,fly,while you're actually in um like,on the page itself inventory can get,piped in via functions,so gatsby functions can go grab that,inventory,information on the fly and pipe that in,too so,again a kind of a con of static,implementations in the past,has been that that kind of really hard,part of getting dynamic data,like shipping like inventory status onto,the website itself in a real-time manner,you can now do that again with,gatsby functions which is amazing,um all right so now we'll just quickly,go to the shopping cart and you can,check out,uh what the checkout experience is going,to be so this is the part uh that flips,you over to checkout.ratio.com,this is hosted on shopify this can,actually still not be hosted on shopify,i find it easy to host here and i also,find,that customers today are much more,um what's the word forgiving,of this experience and they're used to,it quite honestly um i i kind of compare,this like,i don't know 10 years ago when this,experience would be on paypal,and it would feel like you were,literally buying a virus after clicking,a couple buttons you would all of a,sudden be on a different experience,um it would look really rough and you,wouldn't have that connection to what,you were actually buying,um so i think conversion really took a,hit there with this,hosted checkout page i do think shopify,has done an amazing job,i also just think we're used to it,nowadays to have this experience uh look,like this,um so once you fill this out you're,going to head back,to the marketing website on ratio.com,but,you can again if you don't want it,hosted here um the headless,implementation,allows you um to go back and host it on,ratio.com,um and look more i guess unified in that,sense,um all right so that was our,introduction to have the shopify,um i hope it was helpful as uh again,a kind of guide to why you would even,take shopify pull it apart and want to,be building composable ecommerce systems,i also hope that kind of like just quick,look at ratio.com,is a good uh indicator of the type of,performance boost,you can expect to get with the headless,implementation,i'm going to quickly answer,some of the questions uh that people,have asked in the past,um so i'm just looking through now um,so what are some of the benefits of,gatsby over next.js considering the sss,ssr factor,um this is definitely a major one um i,think that,the benefits of gatsby as a static site,on the performance side of the end user,um spells itself out pretty easily,you're going to have a faster experience,on the end user side with a static,website,now traditionally what that has meant is,slower kind of productivity on the,developer side,as developers as content creators make,changes,that build time is going to be,a hindrance on actually using it so,once you scale up into pages that were,30 000 pages long,that build time could take anywhere,let's say 10 minutes to get through,that's a long time and it kills,productivity but with,gatsby on gatsby cloud and taking,advantage of incremental builds,and some things we're doing there again,a lot of the updates you can expect,a new product added those products are,going to be added even on a paid,on a website as as big as 50 000 pages,those products are going to be added in,seconds it's not going to take more than,30 seconds to incrementally rehydrate,that information also with things like,gatsby functions,um you can take uh small snippets of,functionality,like uh inventory and you can pipe that,in dynamically,where you can have kind of real time,without rebuilding each uh,each change so i think those are the,benefits and,kind of again some of the things we're,working on uh to suss out some of the,cons,managing customer data uh i've recommend,you use shopify to maintain customer,data,i also would generally agree customer,data as far as like the inventory credit,the ability to control the admin so you,can definitely do that,can i add cicd actions on github for,gatsby sites,uh you can currently today so a lot of,the other things around the build step,can happen um on github's actions,uh things like let's say running a test,suite and then you can build,the gatsby site on the actual build,platform,so our build and deployments happen,separately,um all right the other thing is a lot of,plugins are used,on shopify and people want to know if,their,functionality is going to port over i,would say for the most part,generally many of the apps that don't,touch like the front end so let's say a,pop-up app isn't a great example,but a lot of the apps that control,inventory help out with shipping,help out with geo,and it's going to be able to help you,port those things over,so it's going to give you again exactly,where you're getting hung up,the shop the lack of customizability,either on,the design or the functionality aspect,is slightly infuriating with shopify and,we're going to solve that with a,headless implementation,all right so how does the shopify,plus gatsby deal with websites in,multiple regions and countries,specifically are there multiple shopify,instances for each checkout,so this one i'm actually going to pat,this is a great question we have,um a lot of content coming around out,around localization,i'm going to push this one to the front,of the line and get,an answer from some of our engineers,here and also help out with some of the,architectural,limitations we definitely see when,working around localization,so not to say that i don't have a great,answer for you but it's a good question,and hopefully i can get something back,to you uh today,if we do answer it we will put an answer,out on twitter,um so anything that we don't broach,today um in kind of the next three,minutes,we'll definitely get out and answer on,um,on twitter uh so what if gatsby's site,grows a lot and gets really javascript,assets heavy,um so this is what we hope happens um,and this is what we are working on every,day to optimize,we have a lot of good things coming down,the pipe but we also have,things we've already shipped that,optimize these things like our image,plug-in,which is probably the best way to deal,with images i think in any framework,it optimizes lazy loads it just does an,incredible,job about optimizing image heavy,experiences also things like json or js,css like we're minifying all those at,build time,we're using new technology every day to,help with that so,we're hoping that you can grow and push,us because we haven't really seen that,many sites that on the performance end,we can't deal with uh can you create,your own custom checkout forms just like,straight,uh yes you can we have an integration,with stripe as well,so all the headless implementation,you've seen here,that you on shopify side you can also do,a strike so,you're going to be able to source data,send data to stripe,send data shopify interact with them all,in,our graphql layer so that's actually a,great example of something that you'd be,able to tie together,really easily with the headless,implementation,um all right i only have one more minute,so i'm gonna,piece together the best uh,all right so what shopify monthly plan,does have a shopify with gatsby required,um we actually work with the free plan,today we don't require guests for plus,um so you're going to be able to get i,believe at least the gatsby admin api,functionality on on the free tier so you,won't need,uh to like upgrade to any fancy,enterprise plan,uh we're gonna be available on the,standard plan same thing with uh the,sales app,check out the sales app i think that's,gonna be the easiest way to start new,um and just kind of get rolling but,that's going to be available,inside your shopify ui in your own,dashboard on both the standard and the,plus,all right last last one do you need to,use another cms layer like,contentful contentment here with gatsby,you don't you can use markdown you can,use html,you can use google sheets you could use,shopify,you can really use any cms system,if you want to if you don't want the,ability to add in,content like that again it could be a,vanilla gatsby,shopify site that you're still going to,get all those awesome benefits on the,performance side,seo functionality without even needing,to add another cms,all right so we have a lot of questions,we're out of time right now at the,50-minute mark,i will try to get back to everyone uh,individually,we definitely thank you for coming out,today um i do as well,i'm not just gatsby and also feel free,to hit us up,on twitter support at vjs.com,or sign up for gatsby cloud and get,rolling with,a headless implementation of shopify and,gatsby today,so thanks folks and have a good one

Congratulation! You bave finally finished reading what is headless shopify and believe you bave enougb understending what is headless shopify

Come on and read the rest of the article!