Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js
hey everyone in this video we're going,to build a simple e-commerce website,with tailwind ui and next.js,we are going to fetch some products from,a shopify store using the storefront,graphql api and we'll create our pages,by assembling components from tailwind,ui to give us a really solid foundation,and starting point,we'll make a few customizations to the,component we use in order to meet our,needs and achieve this final result,i hope you're as excited as i am to dive,into all of this let's do that right now,okay so let's make a very quick tour of,the property and discover our starting,point i have created the shopify store,here with a few products and each,product has a title a description an,image a price tags etc,now shopify comes with its own front end,and theming ecosystem but there is also,a headless solution via the storefront,graphql api and this is what we're going,to use here this video is not going to,be an introduction to graphql and xjs,instead i'll assume that you're already,familiar with these technologies there's,a lot to cover here so i've already,scaffolded a simple little next.js,project and i'll show you what i've done,so far okay so what i've done is a basic,create next app installation and then on,top of this i've installed tailwind css,a few tailwind css plugins that are,needed for the components that we're,going to use as well as other,dependencies like headless ui heroicons,and date functions i have created a,tailwind config file and you can see,that we're using the just in time mode,and we've extended the font family,object to use the intel var fonts and,like i mentioned before if i come down,we're using the three tailwind css,plugins here finally i've already,assembled three tailwind ui components,together a header a footer and a,placeholder component here just to get,us started,all right let's do this we're going to,jump into tailwind ui and try to find,some components that help us put our,stall together so here i am logged in in,my account where i have access to the,complete bundle which is marketing,application ui and e-commerce and for,this project we'll mix and match,components from e-commerce but also,marketing which is totally fine to do,and so we'll start our homepage with a,big bold headline so i'll come up here,and check inside the hero section we're,looking for something fairly simple here,a big bold headline the paragraph of,text and a call to action and actually,this first component right here seems to,be what i want we don't really want the,entire component for example i don't,need this navigation here but remember,these components are meant to be a,starting point it's totally fine and,even encouraged to customize these,components take what you need remove,what you don't and so here we're going,to come in the code tab and we'll skip,all of this navigation and essentially,the only parts that we want is this main,section here,and we'll come in the home page here and,replace our placeholder,element,and here'
Let's move on to the first section of Headless Theme theme shopify
Driving the Future of Themes, Apps, and Headless Solutions with Shopify's Content Platform
Driving the Future of Themes, Apps, and Headless Solutions with Shopify's Content Platform
please welcome to the stage Peter TV,founder and Jordan benato VP of Business,Development at teffy,morning everyone thank you for having us,I know everyone's Keen to start hearing,about Shopify contents let's Dive Right,In,we've all been there,it's the end of the day maybe the end of,a big week and you're getting ready for,you know a fun team happy hour and an,urgent client request comes in,maybe this is something happened to some,of you today,or maybe it's happening to some of you,right now I know I was getting a few,text messages before I walked up here,typhy our shipment came in early for,fall winter 22. can we roll out new,landing pages for each by end of day now,I don't know about you Peter but this,seems like a lot of work,but because we're committed to our,Merchants as I know all of you are we,jump into action,now there are so many ways we could,approach this request,one option and a lot of our clients come,to us in this position is to update,hard-coded HTML page templates,this would require our team to go in,line by line adjust any required text,styling and any other content right,within the theme,this is a lengthy Dev and QA process and,it takes time away from our clients,budgets which can be spent better time,or betterware elsewhere,perhaps you've upgraded the page,templates to use meta fields,and instead of having to go into the,hard-coded templates you can simply,update the meta fields to reflect on the,front end,but with 10 different landing pages,there would be a lot of meta fields to,pick from especially within the page UI,within Shopify this could be very,overwhelming for any non-technical or,technical resource and it would be very,tedious to enter in all this data and if,you were using any of the import export,meta field apps it could be very easily,overwritten,Jordan not very typically ideal for this,particular client I agree man,you know another option would be to,leverage online stores 2.0 blocks which,we've all learned to love they're very,customizable and easy to use,however in this case this Merchant has,several expansion stores one for each,country they sell into,we also need to develop new blocks for,new blocks for the landing pages when we,develop these we can easily release,these through the Shopify GitHub,integration but as many of you guys also,use probably using git ignore on the,Json config files to prevent any,overriding between the different themes,so we would still have to go into each,expansion store and manually configure,the theme to reflect the landing pages,even if you didn't use git ignore and,just full yellowed it content assets,like images will definitely cause you,problems,Jordan I think this could be a little,bit better 100 agree Peter with the,options at hand and 10 landing pages to,build in a tight timeline this would,have been a very long night for our team,and here's where an exciting opportunity,presents itself in the current state,this support requires a consultant or,developer to stop what they'r
After seeing the first section, I believe you have a general understanding of Headless Theme theme shopify
Continue the next second section about Headless Theme theme shopify
Shopify Hydrogen and Oxygen
Shopify Hydrogen and Oxygen
hey everyone jan here codingwithyen.com,so hydrogen 1.0 and oxygen are both,brand new and have just been released to,the public,and if you guys are curious right now,today we'll go over what they are why,and when to use them in the first place,and also how to practically get started,and i really hope you find some value in,this so let's have a look alright so,then let's get started by answering the,what and besides being the most common,element in the entire universe hydrogen,is also a react-based framework for,building custom shopify powered,storefronts,and assuming that you roughly know what,react is and you roughly know how,shopify works the question would be what,is a custom storefront and just to catch,everyone up here really quick the way,that shopify websites are usually,structured is that on one hand we have,the back end so that's where we manage,products pages content,we have our orders payment settings and,so forth,and on the other hand we have the front,end which is usually built by using a,theme yeah so this is like the actual,website that visitors would see,so that's where we showcase our products,and we could say that a theme is kind of,like the interface between website,visitors and then all these ecommerce,features okay now in most cases when,people are getting started this,combination of backend and then a theme,works perfectly fine but there can be,certain circumstances where a theme is,just not enough,and we will get into the why here in a,second but for now just imagine that you,would want to sell groceries through a,smart fridge,like where would you even start using a,theme in that case right doesn't make,any sense so here you would need,something custom coded namely a custom,storefront,so that's pretty much the whole concept,you have a custom place where you want,to showcase your products but you still,want to use the shopify backend features,like managing inventory orders payments,because it's like so much easier to,leverage this existing infrastructure as,opposed to building everything from,scratch,and the way you connect these two and,how you exchange data is just through,the shopify api,alright now to be fair the smart fridge,was a pretty obvious example of why,someone would need a custom storefront,and you could make the same case for,in-app purchases or in-game purchases,where using a normal theme just wouldn't,make any sense right,however in the beginning we said that,hydrogen is a react-based framework and,react-based websites,look at least somewhat similar to normal,websites you could build with a theme,and at first glance you might not even,be able to tell the difference between a,theme-based website or a react-based,website so let's talk about some of the,reasons why you might want to consider,using hydrogen in the first place and,when i think about this three different,areas or three different things,immediately come to mind,so first let's touch on theme,limitations or to be more precise,performance,i guess that'
After seeing the second section, I believe you have a general understanding of Headless Theme theme shopify
Continue the next third section about Headless Theme theme shopify
Headless Shopify Tour - Gatsby + Prismic + Shopify
Headless Shopify Tour - Gatsby + Prismic + Shopify
hey guys tim here from clean commit so,around 18 months ago we were,commissioned to build a headless shopify,store uh unfortunately for the fresh,online team the pandemic was raging at,that point and economic shift had a,fairly significant impact on their,business,and they decided to wrap up the project,rather than continue,but,the silver lining is that they gave me,permission to showcase the project and,use it as a,bit of,like a demo site i suppose,so,this is good news for you guys because,if you're considering,modifying your store to be headless then,you've probably maybe you've poked,around some stores where they've already,gone through the transition but you,don't really know what it looks like,from,the uh administrative perspective so i,mean what what does it look like when we,change shopify to run headless how do,you manage products how do you write,content,there's big questions that you really,want answered before you dive into,this kind of upgrade and i mean the the,benefits of going headless are,pretty strong you um,you increase your site performance,significantly which can be a problem for,older and larger shopify stores,especially if you're running a number of,plugins same goes for big commerce or,any other,ecommerce engine,so,moving to a headless architecture where,you're just consuming the information by,api and you're using something like,gatsby or next as a front-end framework,to statically generate a lot of the,content,means that the page is load really quick,which i'll show you in a second,it also means that um you've now got,access to these react-based front-end,frameworks or whatever kind of framework,that you want to use and you can you can,build pretty much whatever you want like,you've you effectively turned your,shopify store into an application so,you're still using shopify to manage the,products and pull the information,through but if you want to create a,completely customized checkout wizard,where you take your customer through and,ask them questions and then use those,inputs to provide recommendations or,generate,i don't know like customize stuff that's,specific to that user so they feel,special and they feel heard then that's,completely on the table and that's,those kind of creative directions with,um,with a shopify store are things that you,really can't do when you're just using a,monolithic theme,i mean you you might be able to but it,would be a huge amount of development,it's um it's not manageable and,it really can't be scaled so,i mean there's other benefits of going,headless but that's not really what i'm,here to talk about what i want to show,you guys in this brief video is,what this store this headless store,looks like,and then,some of the big differences that you,notice between,um just in the day-to-day use of of this,store compared to,a regular monolithic shopify up so let's,just take a quick browse around the,store and i'll start with um just saying,don't look too carefully into the design,we did make this l
After seeing the third section, I believe you have a general understanding of Headless Theme theme shopify
Continue the next fourth section about Headless Theme theme shopify
High Performance Headless Storefronts With Hydrogen
High Performance Headless Storefronts With Hydrogen
hey again thanks for coming along to my,talk on hydrogen,I'm Scott Dixon I'm a developer advocate,here at Shopify,and today I'll be running you through,high performance headless storefronts,with hydrogen,we'll take a look at a primer on,headless for those of you unfamiliar,with the term,we'll look at the performance puzzle,developers typically face when they,build at the storefront and how hydrogen,overcome some of these challenges,then we'll look at hydrogenui,for rapidly building custom storefronts,and show off some of hydrogen's,flexibilities,team at the back can I get the monitor,updated I think the notes are missing on,both screens,thank you,got it,awesome,uh yeah we'll uh wrap up with looking at,the future of headless what's next for,hydrogen and then finish off with a q a,so earlier this year at summer editions,we launched hydrogen for building high,performance headless storefronts,for those of you unfamiliar with,headless here's a quick recap,traditionally when you think about,Shopify you imagine liquid and the,online store,an integrated back end and front end,which allows Shopify to inject a whole,bunch of magic and it allows Merchants,to make changes without really needing,to know how to code,but there are some constraints that come,with this approach,some of them are technical Merchants,want more control over the end-to-end,developer environment,and they require more implementation,choice and flexibility when it comes to,their Tech stack,so to solve these limitations there's,another approach to building e-commerce,dubbed headless,this is where you separate the,presentation layer which is anything the,buyer interacts with from the back end,less means taking an API driven approach,and combining it with the tools,Technologies and workflows the best suit,your needs,with the Headless approach you get a,deeper level of control and you can do,things like server render third-party,CMS content and do server level a b,testing and analytics you can even do,some really fun things like random,render multiple websites from a single,code base,built for headless you can extend the,back office with the admin API you can,extend back-end logic with functions,extend the checkout with the new,checkout extensions API and in 2016 we,rolled out the storefront API to extend,the storefront,all of a sudden Merchants could bring,their own stack and we saw some really,cool experiences we saw custom react,sites we saw mobile apps and even,virtual reality Games,plenty of merchants are going headless,we see that the demand continues to grow,because they get that developer,experience and that flexibility,so while it unlocks all of these great,features you know you can bring your own,stack you can take control of routes and,handle third-party Integrations we,noticed a bit of a problem,there was no great stack dedicated and,optimized for Shopify,technically had to choose between fresh,or fast,in order to get fresh data the server,has to do work with each request and,thi
After seeing the fourth section, I believe you have a general understanding of Headless Theme theme shopify
Continue the next fifth section about Headless Theme theme shopify
Updating Website Content | Headless Shopify
Updating Website Content | Headless Shopify
hey there this is a quick video to show,you how to update content,on your website on your headless shopify,website,um so as you're looking across your,website you may notice that there's a,headline,or an image that doesn't look right um,so looking at this example,this hero image just doesn't quite look,right it's not the right dimensions,it doesn't fit well with the other,elements on the page,so we may want to change it or if we're,looking through the products,uh we may notice that there's still some,lorem ipsum,on the page which is left over from,development or testing,uh so you want to you want to change a,couple of these things to get the,site looking really nice you may also,notice there's a picture missing,so there's a couple of things that you,want to fix up across the site,so let's tackle them one by one so the,first one,going back to the homepage if you look,at this image all images,on your website are controlled by a,content management system so,not shopify in this case we've um we've,built prismic,into uh we've integrated prismic into,the website,so to get into prismic you'll just,search for prismix so prismic.io,uh you will have your own details to log,in so you'll come in and dashboard,and um you'll have credentials to log,into,this step once you've logged in,you'll see a series of components like,this,it can be a little overwhelming at first,but uh,what you want to do is use the filters,at the top,they're they're your best source of,navigation and they'll clean up,this list really quickly so we'll just,have a quick look at what we've got here,so authors,um you can see that voitek's the only,person in here so you can just ignore,that,that's not gonna um because he's created,every component that's not going to help,us,filter down this list very much tags can,help,navigation settings and privacy policy,in this case aren't going to get us very,far,uh collections articles that's just for,blog articles so,the only one you really need to worry,about is type so let's have a look,for type um so we've got social media,which,is not relevant butter and header,navigation,are good but that's not quite what what,we're looking for so if you wanted to,change components up here,or data or elements in the header or the,footer,that would be where you go um,testimonials again,good but not what we're looking for,author blog post,so the only one that's really relevant,is page so if you click on page,now we've swing down the list to just,the pages across the site so you can see,there's these seven pages,the one we want is home so if you click,on home,the home page will load up now i'm just,going to break my screen in two so you,can see what's happening here,put that over to that side and this one,over here,um so everything that is on the home,page with the exception of,the um the other components we just,looked at like the the header and the,navigation,should be broken down into slices in,prismic,so for instance,this top category navigation at the,moment is
After seeing the fifth section, I believe you have a general understanding of Headless Theme theme shopify
Continue the next sixth section about Headless Theme theme shopify
The State of Shopify Theme Development
The State of Shopify Theme Development
and the this session for the next uh 25,minutes or so we'll be talking about the,state of Shopify theme development so,looking at different workflows which are,available for theme developers uh recent,features which have been released for,themes and our vision as well for the,future,so just just a quick introduction on,myself my name is Liam I'm a developer,Advocate at Shopify I've been with,Shopify for about seven years now so in,that time I've been creating a lot of,content for developers looking to learn,how to build on top of Shopify I've been,creating a lot of YouTube videos blog,posts and of course being able to be,here this is my first time visiting,Australia so it's extremely exciting for,me and yeah,it's yeah amazing connecting with our,developer community so yeah over the,next two days please do grab me for a,chat would love to to connect,so for this session this is going to be,the plan for our journey first we're,going to look at where we are right now,then we're going to look at where we are,going and finally we're going to look at,how we will get there and then we should,have some time for a q a towards the end,so to answer the question where are we,right now we need to take a slight step,back into the past back to Summer of,2021 and Shopify unite which was a,milestone event for team developers we,had the launch of online store 2.0 which,enabled sections on all pages we had,meta Fields natively launched for,themes which allowed us to have much,more flexibility and personalization on,different pages we saw the relationship,of apps and themes become much more,closely combined with Team app,extensions we had of course our vision,for custom storefronts for hydrogen and,last but not least we also had the,reopening of the theme store after the,Hiatus for a while,and in the months since then we've been,able to progressively enhance many of,these features so we've,improved with the limitations that we,had on sections and blocks by making,more sections more blocks available on,pages we have more Dynamic sections,available on more pages for enhancing,meta fields we also made the developer,experience of working with Team app,extensions much much better as well so,all this to say is themes are much more,powerful more adaptable and more,valuable to Merchants than ever before,so just to look more generally at the,ecosystem in general we see you know,quite strong and steady growth we're,seeing millions of merchants are looking,to improve their store looking to,customize their online experience and,their buying experience for their,customers we firmly believe there's a,great opportunity here for developers,looking to enter this space,if we look across to the App Store in,particular last year we saw that 400,million was paid out to our app,developers just increase of over 80,percent from the previous year and of,course we reduced our Revenue share so,Merchants who earn up to their first,million dollars don't need to pay,Shopify any Revenue share and
After seeing the sixth section, I believe you have a general understanding of Headless Theme theme shopify
Continue the next seventh section about Headless Theme theme shopify
Growing your brand with headless Shopify
Growing your brand with headless Shopify
hello hello and a warm welcome to,everyone joining us from around the,world so good to be with you all,my name is nelson diallo i'll be,representing netlify in today's,discussion,today is all about e-commerce and,growing your brand with headless,commerce technologies and of course the,jam stack,i'm joined by e-commerce experts from,pac digital or thanks again to the pack,digital team for joining today's,discussion we'll have of course an intro,of the pack digital team and the,business and some of the projects that,they're they're running on,uh netlify,from there we'll go into some of the,planned questions but of course we'll,end with a live audience q a as well so,folks please feel free to write any,questions that you have or any thoughts,that come up into the chat and we'll get,those answered at the end,corey could you start us off with a,quick intro of yourself and some,background on the work you've been doing,yeah absolutely so thanks a lot for,having us nelson we're excited to be,here um so my name is corey i'm one of,the co-founders um and also the managing,director,here at pac i have a background in,technology and development and i have,really been applying that to the shopify,platform for the last eight years or so,um over that time i have really been,focused on building custom themes and,custom workloads,uh i've been able to learn a lot,throughout that time,i also have seen the space evolve quite,a bit so it's been really exciting um,over the last few years i,have been focusing on the headless space,i teamed up with tyler and andrew uh to,compound pack so we have a lot of juicy,topics to jump into today but before we,do that i'll pass it over to andrew,cool hello everyone my name is andrew,pagula uh excited to be here thank you,nelson for,hosting all of this um so i'm one of the,co-founders of pac i run uh strategy and,operations so i'll be able to shed some,light on,how our clients evaluate headless and,what some of the driving factors are in,making that jump,so,maybe to give some additional context,first so uh corey mentioned like we kind,of,got to this place through developing a,lot of very custom shopify themes so we,ended up going down,this headless path,really because larger brands that we,were working with started to,demand more and more from their shadow,five teams to a point where,i would say it wasn't really feasible to,continue to bend and customize cable,fight themes,so it it ultimately led us to,technologies like netlify and,nexjs gatsby the whole jam sack world so,um you know the first first project we,tackled was about two years ago,um we implemented shopify with,gatsby and contempo,fast forward a couple years we've got a,number of builds under our belt,and building now building a lot of tools,and technologies to make it,really as,easy and accessible as possible for a,merchant to build a modern storefront so,with that excited to share more and dive,into all those topics but looking,forward to the conversation,awesome thank
After seeing the seventh section, I believe you have a general understanding of Headless Theme theme shopify
Continue the next eighth section about Headless Theme theme shopify
Build a CUSTOM Shopify Storefront using Hydrogen ( a React-based framework) #shopifyPartner
Build a CUSTOM Shopify Storefront using Hydrogen ( a React-based framework) #shopifyPartner
hello everyone and welcome to this video,in which i'm going to show you how to,make your shopify website fully,customizable,that's right you no longer have to use,the template with a little bit of coding,know-how i'm going to show you how to,take a demo template and explain how you,can change the styling or components you,can switch out components and move them,around or add in your own components,that you can make and add to the,repository,this is all thanks to the hydrogen plus,oxygen or in other words the shopify,stack for headless e-commerce,by this i mean you can build headless,storefronts with a react-based framework,for shopify you're essentially supplied,with pre-made components that you can,use as well as utilities that map,directly to shopify's apis,so that part is all hydrogen at work and,once you're ready to deploy your site in,comes oxygen,shopify's global hosting solution that's,just a simple git push away,okay so this is going to be a super fun,video as this is a cool feature from,shopify that i personally am excited,about and can see why it's so super,useful to small business owners and,entrepreneurs out there it also allows,us as devs to cut out creating a whole,ecommerce backend as we can simply,create our own front end and plug it,into shopify's existing system,as prerequisite and understanding of,react and javascript is advised but if,you don't know this please feel free to,follow along anyway as i will be taking,things step by step in order to show you,how to customize a shopify storefront,okay so what are we waiting for let's do,it,okay so let's do it if you use the link,in my description you will be taken to,the hydrogen shopify developer page in,which you can find all the documentation,and the command in order to start your,demo store,okay we are going to be starting with a,demo store just because then we have a,template to work with for our short,front and it will just help us kind of,get an idea of how everything should,work and will show us all the components,that have been pre-made for us as well,so that is what i'm going to do but,first off i want you to go to shopify,and actually you know add some products,to your store because we are going to be,using that back end in order to get,those products and put it on our,customized front end,so let's do it just go ahead and go to,shopify and sign up for free now i've,already done this so i'm simply just,going to log in of course,and go to my dashboard,so here you will see i have made a store,before i'm just going to create a new,store so we can do this together step by,step,so go ahead and select create another,store or create a new store whichever,option you are on of course for me it's,another store,now i'm gonna call my store what should,we call it well my products are skin,products so i'm gonna go ahead and call,my store skin sensationals,so that is just something i have chosen,of course like please feel free to pick,your own and if you're just running this,through as a
After seeing the eighth section, I believe you have a general understanding of Headless Theme theme shopify
Continue the next ninth section about Headless Theme theme shopify
Shopify built a JS Framework // Hydrogen First Look
Shopify built a JS Framework // Hydrogen First Look
just when you thought there wouldn't be,another javascript framework along comes,another javascript framework this one's,called hydrogen and it's a react-based,framework for building custom e-commerce,sites using shopify it's focused on,server-side rendering kind of like next,js but comes with a bunch of pre-defined,components and hooks to manage the data,and ui of a storefront it was just,announced yesterday so let's put it to,the test and see if it's something we,would actually want to use but first,make sure to hit the like button and,subscribe and let me know what you think,about hydrogen in the comments your,first question might be what is the,point of hydrogen we already have next,js and gatsby both of which have,e-commerce templates and then shopify,itself already has a ton of e-commerce,themes so where exactly does hydrogen,come in well if you've ever built an,e-commerce site from scratch you'll know,that it's extremely difficult and that's,why platforms like shopify bigcommerce,and squarespace are very popular but at,the same time when you use a platform,like that your site has a tendency to,feel like a cookie cutter template and,it can be very hard to customize it,enough to break out of that the cool,thing about shopify is that it has a,graphql api allowing you to use it in a,headless way so hydrogen basically,provides a streamlined way to get a,server rendered frontend app up and,running that connects to your shopify,backend with minimal effort in other,words it provides a starting point for,building fully customizable storefronts,it's kind of like the ruby on rails for,shopify development and i only say that,because shopify itself was built with,ruby on rails now let's take a look at,the developer experience the website is,awesome and i actually really like the,name hydrogen it's not as cool as,prometheum but still way better than,arsenic create a new app by running npx,create hydrogen app when you open it,you'll see a project configured with a,lot of stuff here the starter template,it provides you with is definitely,opinionated you'll notice a shopify,config file you can swap out your own,shopify info here to use your own,products the next thing to notice is a v,config file it uses beat as the build,tool which i really like because it's,minimal easy to use and fast it also,comes with tailwind by default which i,think is an interesting choice i like,tailwind but at the same time it's,pretty polarizing and i don't think a,lot of people will actually want,tailwind i think plain css would have,been a better default but i can always,just go and build my own javascript,framework for something like that now,let's take a look at the server.js file,as you can see a hydrogen app is just an,expressjs app with some hydrogen,middleware and it even includes a docker,file that will run the server when you,deploy your app to production now the,application code itself is contained in,the source directory inside of which,you'll see a directory for com
Congratulation! You bave finally finished reading Headless Theme theme shopify and believe you bave enougb understending Headless Theme theme shopify
No difficulty
