Builder.io: Storefront Builder

BACK

Home Shopify App Builder.io: Storefront Builder

Builder.io visual editor crash course

hi,i'm steve and i'm going to give you a,crash course of builders visual editor,we're going to use a page by our friends,over at adams and we're going to,reproduce that in builder using the drag,and drop editor completely from scratch,i will be showing you a lot of our,different features and techniques and,styling tools and so let's follow along,so first over in builder i'm going to,create a new page,whether you've integrated yourself or,you're using something like a shopify,app generally you should have a content,tab that you can go to and you can,create a new page might be called,landing page in some cases,and i'm just going to create something,called,homepage,now by default we populate a url that,might be fitting given the page title,but for home page we just want the url,to be slash as in it's not slash about,or slash something it's just the root,home page,and in this case we're just going to,start from scratch,the templates can be a great way to get,you started but if you really want to,make something unique and bespoke,starting from scratch is often the way,to go,okay,i'm gonna be flipping between these,windows back and forth a bit i think i,might change my layout for two column,just to make a little more space for our,editor and let's start here so i'm going,to start below the header in most cases,you've probably integrated builder onto,your existing website which will mean,your header will already be present when,you're using the visual editor,for example when we edit pages on,builder that is the case um in my case,though i have nothing because this is,just a blank builder space i'm just,going to make my pages and you know,we'll consider that we can integrate,later so i'm going to start by doing,everything below the header but then at,the end i will show you how to make a,header like this,the header part is a bit more advanced,so let's start here,the first thing i see is a couple,columns the thing to know about,responsive design is you always need to,think in terms of rows and columns,why is that that's because as pages get,smaller we want them to automatically,fit all screen sizes anything that's in,columns will automatically stack which,is a really critical technique and makes,your life really easy,so let's talk about replicating the top,of this page by having two columns so,i'll grab the columns block and i'll add,it to the top of my page beautiful,i'm not going to worry about uploading,images for any of these examples but,just so you know you can always go to,the options tab and upload any image you,like or choose a stock photo in fact,maybe i'll add some nice leaves just to,show,replacing one of the images but for the,most part i'll just leave the base sort,of rectangular images,now you'll see i have two columns like,the top of the atoms page and when i go,to smaller devices they automatically,stack just like you saw,nice,but now let's do a bit more,it looks like the aspect ratio of this,is pretty good but just so you know you,can al

The above is a brief introduction to Builder.io: Storefront Builder

Let's move on to the first section of Builder.io: Storefront Builder

Personalization at the Edge with Vercel and Builder.io

company they do very large scale and um,we went headless all the way back in,2015 and ran into all the problems we're,going to talk about today you want to,have that fast site but you want to be,personalized like the homepage looks,different to menswear shoppers versus,women's wear shoppers a b tests clean,good dx and there was a lot of issues at,that time that are wildly better now,with edge functions as well as builder,so we'll dive into that in a second,that's awesome thank you so much for the,intro um sorry about the interruption,there so,funnily enough my name is also steven i,am a senior developer advocate here at,versailles where i uh basically build,starter kits i,if you guys are familiar with the,platform starter kit and the mongodb,starter kit,i also create documentation and video,content and now i also host webinars,with people who have the same name as me,um so before we dive right in let's take,a step back a little bit and talk a bit,more about vercell,um,actually let's start with the agenda,first sorry about that so,for today's agenda we'll be talking,about the limitations of traditional,approaches to personalization on the web,we'll also,next move on to talking about,personalization how you can do that with,netcast and our new edge middleware,and lastly we'll be talking how we can,use tools like builder.io to make that,personalization process way more,seamless and easy,before we dive into the webinar itself,let's talk a bit more about versailles,so versel is developer platform that,combines,the best developer experience with an,obsessive focus on end user performance,we allow front-end teams to build,scalable and performant web applications,without having to worry about,infrastructure,dns configurations or scaling your web,applications in case your site goes,viral,um in the last nexus conference,uh we actually sorry so,burcell is also the creator of the react,framework called next.js it is a,framework that allows developers to,build scalable web applications that has,over 3 million downloads every week and,is used by some of the most familiar,logos that we know such as netflix,target,doordash tiktok etc,in the last lecture as conf,next slide we actually announced edge,functions which was our foray into the,land of edge computing,and uh,that the edge functions basically,consists of nexus middleware,uh api api routes at the edge as well as,the usual serverless functions moving on,to the next slide i'm going to talk a,bit more about how those three work,together so,as you can see here,edge middleware is code that runs before,the request from the user is processed,and returned as a response,and edge functions are basically,serverless functions but they run really,close proximity to the user and that,basically allows for,a really quick response times especially,when you're doing a b testing,personalization future flags,um routing,etc,so,edge middleware is that decision layer,an edge function is basically a service,function that runs rea

After seeing the first section, I believe you have a general understanding of Builder.io: Storefront Builder

Continue the next second section about Builder.io: Storefront Builder

Builder.io Visual CMS Demo

welcome to a demo of builder visual cms,builder is incredibly powerful and is,used by customers to build and optimize,content across their existing,sites apps and ecommerce storefronts,we're going to use our shopaholic demo,here,to show you how you can quickly prepare,your storefront for promotion like black,friday,this is what we call the studio tab this,shows your website and you can hover,over various areas to see what's,editable in builder,this is a completely custom website it,doesn't matter what platform,or language or framework your website is,made with,you can see here that we have a full,page editable here the home page,but this announcement bar is editable in,builder as,is if we open the cart this promotional,area of our cart,these areas we call custom drop zones,and it's a really really cool way you,can integrate builder to allow,marketing and non-developer control of,any area of your site you like,other places people often control,content with builder,is like heroes on collection pages,detail and product pages,you name it one of the most common ways,customers start with builder is adding,new pages to their ecommerce site,in the form of landing pages for paid or,email marketing,content pages like about us or even,creating a blog and blog posts,let's create a new landing page on our,site for bfcm promotion,we can just hit new page and we'll just,call it black friday,deals,you'll see that when editing a builder,you're editing right on your actual,website,any content we add automatically,inherits our styling typographies etc,so things are actually quite on brand by,default we can go in,changes to be a heading one and say shop,black friday deals for instance,we can add additional content like,columns buttons you name it,everything is responsive by default and,we generate clean,seo optimized performance optimized ada,compliant code,so you always have fast loading and,accessible pages,one great thing we can do here is,control styling,you can control who has permissions to,edit styling versus content and those,who do,can actually edit any part or feature of,this page to make sure exactly the way,that you need it to look,and feel anything that we like we can,save as a template,very easily with a couple clicks and,then,once we've created some templates,reusing content we've already made and,perfected is incredibly easy,so i can delete this content head back,and use some templates we've already,created,we've got this great hero for one,version of our black friday promotions,we also have these great columns we can,customize any of the content,such as black friday deals,and everything like you already expect,is responsive and optimized by default,now let's run an a b test on this,contents it's incredibly easy to do,i can just go to the tests tab create a,new variation,i can add as many as i want and change,the percents to be anything that we need,and go back and edit each variation to,be unique in its own way,in my case perhaps instead of showing,

After seeing the second section, I believe you have a general understanding of Builder.io: Storefront Builder

Continue the next third section about Builder.io: Storefront Builder

Import Figma designs into Builder.io

let's cover how to convert your figma,design to use,auto layout in order to import it into,builder to turn it into web pages or,code,so if you don't already know figma has,an amazing feature called auto layout,it allows you to define how your ui,elements should resize when the content,inside or around them changes in size,so for an example if i go and edit this,button and text to be something new and,longer,you'll see that the content is now,overflowing around the button,now that's not like a website works the,button outer part would fit to match the,text inside all the time,so with figma we can actually define,similar constraints,so if you select the layer this is the,frame wrapping our text that has the,background styling,and i click this plus button next to,auto layout now figma has converted this,to be responsive,so if i change text notice how the,button resizes,this is actually an amazing feature to,use when creating designs and design,systems and if you're already using it,out of the box,you can import your content into builder,without any additional setup in just,one click but for the purpose of this,video,i'm going to show you how to convert,your entire design to use,auto layout because just changing the,button is enough to import just the,button,but if i want to import this whole,section i need to make sure that every,layer in here is using auto layout or as,a rest riser image,so let's continue the key thing to know,about auto layout,is everything must be a row or a column,meaning if we take a look at our design,we can see a little bit of how this,would work,so maybe i'll draw a rectangle to give,you a sense,there we go so here we really sort of,have to main columns,right so we can envision this when using,auto layout,as basically to sort of vertical stacks,that are side by side,i'll show you a little bit more of what,i mean in a second but in order to sort,of match this behavior,we need to set up everything to be using,these horizontal or vertical stacks,also sometimes known as rows and columns,so for example let's start converting,this whole setup to be one sort of stack,so as you see here if we go back to our,button anything using,auto layout that's in a group has these,little sort of two bars next to it,they'll either be vertical or horizontal,in order to import this design,we need every grouping here and every,layer to have the same configuration,has to be using auto layout so let's,start by taking this bottom,section now one thing you might notice,is some of these are svg icons,they're very intricate and they don't,really fit this mental model of rows or,stacks,the contents sort of sit on top of each,other anything that's like this,that is sort of a complex vector we can,just rasterize,that to an image to make it a single,simple layer,this will make it a lot easier to import,and work with,so if we go up to our hamburger menu and,type rasterize and enter,great now we made that icon just one,flat image,let's do that with the rest of

After seeing the third section, I believe you have a general understanding of Builder.io: Storefront Builder

Continue the next fourth section about Builder.io: Storefront Builder

How to build a landing page in less than 5 minutes with Builder.io

theme studio includes templates for,product pages,blogs collections and more all,customizable to your needs and designed,to help you build faster while driving,more conversions,in addition to the included templates,theme studio also provides the ability,for users to create their own,custom pages in this guide we'll show,you how to create a custom landing page,in less than five minutes,sharing our best practices and some,useful tips let's dive in,on the left side bar you'll see a bunch,of available theme pages,and if you scroll all the way to the,bottom you can select new,custom page let's give the page a name,we're going to start from scratch so,we'll select a blank template,from here it'll take us directly into,the builder visual editor,where we can start building our page,you'll see your header,and footer carries over to all your new,pages so you don't have to worry about,recreating it for each individual page,let's start by adding a hero image to,the page by dragging and dropping,an image component,feel free to adjust the aspect ratio by,using the blue outline around the,component,if you want the image to be larger or,smaller,on top of the image let's drag a set of,columns,on each side i'm going to add a button,and these will serve as calls to action,such as shop men's shop women's,the beauty of using builder components,is that they are responsive by default,as you get to smaller screens the,columns begin to stack vertically,and look great on every device to learn,more about responsive design,check out our video intro to responsive,design with builder,using the alignment tools at the top of,the style tab you can reposition the,buttons,feel free to utilize the rest of the,styling features to adjust the look,and feel let's drag another column,component below our hero image,and we'll add a product box to the left,side column,delete our placeholder image and text,this element is dynamically tied to,shopify data,so as you add products to your shopify,store they'll be available in builder as,well,select the product you want to display,in the right column we'll delete our,placeholder image,and add a description of the product on,the right,now let's make some styling adjustments,again in the style tab,under alignment we'll center our text,next let's adjust the product image to,be smaller which can be achieved easily,with columns by dragging the middle,divider to the desired size,this is also a great tip for responsive,design,now that we have a product box that,looks exactly how we want,the first thing to do is check that the,design looks great on all device sizes,you should always check the device,previews throughout the page building,process,to avoid any unexpected final results in,other views,in fact it looks like we need to adjust,this image i'm going to give it a,minimum height,of 200 pixels for mobile that looks a,little bit better,and my button is a little too close to,this paragraph so i'm going to add some,margin,perfect definitely an improvem

After seeing the fourth section, I believe you have a general understanding of Builder.io: Storefront Builder

Continue the next fifth section about Builder.io: Storefront Builder

Builder.io's New & Improved Figma integration

cool,awesome,um okay so i think chat should be,enabled um and i think we're ready we,can go ahead and get started so,uh welcome everyone super excited to,have everyone here uh this is our first,installment of our new webinar series,called how to build uh where each,episode we're gonna be tackling one of,the most pressing questions or pitfalls,that we hear from our dear customers you,uh in the land of content management so,we've got a really exciting one of our,most asked for uh possibly the most,asked for topics that we're going to be,discussing today and that of course is,all things figma so design,figma,uh,workflows importing,integrations all of that super super,excited,and really excited to have everyone here,today so,there we go uh my name is tim garibaldi,i lead our customer engineering team,here at builder so i work with a lot of,our uh largest enterprise customers on,the technical side so,i like to think i have my finger on the,pulse of what our customers are really,talking about so,that's one of the reasons i'm super,excited like i said to really be talking,and diving deep into this figma uh,importer and you know this topic of,workflows because it's definitely one,that's top of mind for a lot of our,customers so,uh and then,i am very excited as always to be joined,by one of my absolute favorite,colleagues builder's own in-house design,extraordinaire we have tiana with us,today hi tiana hey everyone how's it,going,good how are you doing how's your week,going,it's going good excited for the long,weekend up ahead yes definitely,definitely i like forgot it was a long,weekend until yesterday so even doubly,excited,um cool,so let's get into it uh here's our,agenda for the next you know 30 40,minutes we just had our quick welcome a,second ago uh in a second we'll,introduce the topic uh what is the,problem we're here to talk about uh and,of course that is kind of figma design,workflows and how to improve those,things right,we'll spend a few minutes going over uh,why it matters,what the problem is why it's such a pain,why we see it as a major issue,internally at builder but also hear,about it all the time from our customers,and what we've done to really fix the,problem,after that our own lovely tiana who you,just met is going to be going through uh,a product or sorry a demo of the product,um and kind of showing how she uses this,tool in her day-to-day life as a,designer here at builder,how it's kind of,defined her workflows and how,um she uses it in her day-to-day and,also how she kind of influenced the,design of this,um you know this product itself so super,excited for that uh at the end we will,have time for some questions so please,there's a little,chat box up here or maybe over here or,down here somewhere,please feel free to post any questions,during this and we will have someone,manning the chat and we'll have some,time at the end to kind of go through,some of those questions so,excited for that and then of course at,the very end we will have

After seeing the fifth section, I believe you have a general understanding of Builder.io: Storefront Builder

Continue the next sixth section about Builder.io: Storefront Builder

Responsive Design with Builder.io

this video will go over how to create,responsive designs in builder,responsive design is all about creating,pages that look great on all devices,from desktop tablet and mobile,a responsive web design will,automatically adjust for those different,screen sizes,in this video we'll dive into what,responsive design looks like,aligning and positioning elements and,hard-coding widths,and of course throughout this video,we'll share our best practices,the biggest trick you need to know in,order to master responsive design,and builder is to always think in rows,and columns,let's show an example of this and use,our friends over at pladra,and look at their beautiful page it may,look like a complex page with a lot of,elements,and your first inclination might be to,start dragging and dropping some images,and text,in order to emulate this design but,let's step back to look at the structure,of this page,i've added some overlays in red to,visualize the structure,we have a set of columns each with a,button and a background image,below that a row of text and below that,a set of three columns each with rows of,text and an icon image,the beauty of using layouts with rows,and columns is as you get to smaller,screen sizes,the columns stack vertically and look,great on every device let's go into,builder and build something similar,i'm going to start by dragging an image,onto our page,let's adjust the aspect ratio to make,this a bit smaller,below that i'll add a set of columns,maybe just an image on the left,and on the right some text and another,set of columns within,with two images,keep in mind you can have elements,nested within other elements,from where we've started this page is,already more complex,and it automatically looks great on,every device because we've stuck with,the concept,of rows and columns now let's make some,adjustments,we'll drag this text down a little bit,by adding margin,margin tells content to push away it's,great when you want to make small,adjustments to the look and feel,maybe i want to replace these two images,with buttons,some call to actions such as a shop,men's and shop women's,i'm going to drag some buttons in here,and remove my images,i'll pull them away from the sides a,little bit to give them a more centered,feel,this is starting to look really great,there are a couple things to be careful,of,the first thing is excessive margins,it's great how easy it can be to drag,these buttons around,and make adjustments but if i start,pulling them in a lot,we could start running into some,problems let's pull the sides quite a,bit,giving them an even more centered feel,great now once we start moving,the size of the screen we'll see the,buttons getting,smaller until we get to mobile where,it's really tiny,in fact if we look at our style tab,our left margin is 136 pixels and our,right margin is 95 pixels on mobile,that's a large amount,and our goal is centering the buttons,not to push them away from the sides,there are two approaches we could take,her

After seeing the sixth section, I believe you have a general understanding of Builder.io: Storefront Builder

Continue the next seventh section about Builder.io: Storefront Builder

Builder | Salesforce Composable Storefront Integration

hi i'm russell and today i'm going to,show you how to use builder to visually,build your ecommerce store with the,salesforce composable storefront,builder is a visual cms that allows you,to easily create and maintain your,content using a combination of a visual,editor headless cms and optimization,layer,builder's unique feature set allows you,to break free from the code dependencies,traditionally associated with managing a,modern storefront,so here in the builder ui you can see,i'm already connected to my salesforce,demo site,on the left hand side i have access to,all of my out-of-the-box builder,components as well as my salesforce,products components that come out of the,box in the builder salesforce commerce,cloud integration,so in this use case i'm going to create,a simple landing page that has a hero,banner,some content underneath that,and some content from my blog,as you can see builder allows me to,manage any type of content needed for my,salesforce site,underneath this hero banner i'm going to,insert a product carousel,the builder salesforce commerce cloud,integration gives me direct access to,the product catalog in the salesforce,backend,this enables me to easily merchandise,the products i want in this carousel,in addition to working with product,carousels and product grids i can also,work with product boxes directly,in this case i can choose a certain,product and have easy add to cart,functionality on this page,so that was an example of creating an,entire page within builder,builder also allows you to work with,just certain sections of your salesforce,composable storefront site here we have,a product detail page with a builder,section implemented underneath with full,drag and drop capability,so for this page i'm going to insert a,product recommendation block,i'll drag the einstein product grid here,and i'll call this einstein,recommendations,you can see in the builder salesforce,commerce cloud integration that we have,full visibility into all the different,algorithms available with einstein,so now i've easily used the builder drag,and drop system,to add product recommendations powered,by einstein to this product detail page,this page also leverages the targeting,capabilities that come out of the box in,this in the builder salesforce commerce,cloud integration,here you can see i can select certain,categories as well as certain products,so for this use case,we are only showing this product,recommendation,to product detail pages that are of the,men's category,the last thing i want to show you is how,you can also schedule and a b test any,content you want within builder very,easily,so for example,let's say i want to test out this,algorithm with another algorithm and run,that from monday through friday,so i specify the schedule here and i,select monday,and then friday at noon,and then i go to the a b test tab,and you can see here that i can add my,variations as necessary,in this case i have a default and two,variations which you can see from

After seeing the seventh section, I believe you have a general understanding of Builder.io: Storefront Builder

Continue the next eighth section about Builder.io: Storefront Builder

Builder for Shopify

hello,how is everybody doing today we're so,excited,we're just gonna give people some time,to join before we get started,i'm going to chug some water,you know,i'll probably get started about um,maybe,perfect,where where are you doing this webinar,out of where are you located right now,um,well i'm you know as always i'm carmen,sandiego jumping from place to place but,today i am in,my parents house in castro valley,california,probably the least exciting of all,locations where i usually am,how about you hamza where are you,calling in from i i'm in uh,i like to say warm this time but warm,ottawa it's uh,nice and hot you know um here in canada,and for those people that are joining,that aren't familiar with ottawa,hamza has shown me what his house looks,like 10 months out of the year and warm,is not the word i would use to describe,it,yeah no it's uh,this is this is this is this we're,officially in summer so we we've got,like good couple of weeks,yeah long weather,all right well,um,let's see it it's 1101 but maybe we can,start getting uh maybe doing some intros,and do a little kickoff and i'm sure,people will keep trickling in um as we,go,so with that maybe you can share your,screen we'll get,started perfect,julia can you see my screen,yeah i certainly can alright,well um,if you want to go over to the intro page,that's attendee page hamza thank you so,much so uh for those of you who don't,know me uh my name is julia and i had a,partnerships for builder um now i've,been with the company for about two,years uh which is also coincidentally,about as long as we had our shopify,hosted app listed in the shopify app,ecosystem which is really exciting we're,about to celebrate our birthday,obviously you know a lot of learnings,have come in our two years working with,shopify merchants so we really thought,that we'd get some of our agency,partners together and talk about some of,those insights and,really empower you to understand when,builder makes sense that the solution,for your clients uh also talk a little,bit about kind of um,the whole stigma around headless when,that makes sense when to use builders,headless cms for example and all of that,um and ultimately just kind of empower,you to know when and why the pitch,builder,that's me uh and without further ado my,colleague hamza if uh i may know some,about shopify but this guy is a true,expert so i'm gonna,take it away thanks thanks julia um it's,i'm excited to be here at the what at,the webinar and yeah i've just been here,i've joined i've joined builder recently,just been here under six months uh prior,to this i was actually at shopify,working both in pre and post sales with,enterprise merchants so i've had the,you know pleasure working with literally,thousands and thousands of brands on,shopify um and i'm glad you know my once,i made this transition at builder i'm,kind of you know working with with,shopify brands as well and um,julia thank you so much for joining on,this webinar as well because there's no,muc

After seeing the eighth section, I believe you have a general understanding of Builder.io: Storefront Builder

Continue the next ninth section about Builder.io: Storefront Builder

Shopify ECommerce Store with React & Next JS | BuilderIO

knowing how to build a webshop is an,important skill to have,for every web developer with 2021 being,well how it is most of the shopping is,now being done,online you as a developer can contribute,the world by creating,amazing web experiences hello everyone,and welcome to another javascript,mastery video,this one is quite special because i'm,going to teach you how to build,and deploy a shopify e-commerce store,usually the process of creating a,webshop would take you,weeks thankfully in this video i'm going,to teach you,how to use the tools that are going to,speed up the process significantly,if you are an ecommerce freelancer or a,person with a non-development background,that wants to run their own shop,or a developer that wants to extend,their skill set and learn how to build,web shops,this video is for you so what exactly,are we going to build in this video well,let's take a look,as you can see this is our demo webshop,it has a landing page,as well as some collections like spring,men,and women let's go to spring for example,all of the products,for this category are listed right in,here,we even have a built-in search that you,can use for searching the products,let's search for something like cozy,code,that works perfectly finally if you,click on the product,you'll be directed to the product page,where you will be able to choose,some product details and then you'll be,able to add it to the cart,so let's say i want the blue one in a,size large and i'm going to click,add to cart once you do so you'll be,able to proceed to a typical shopify,checkout,that's it quite a lot of things going on,here but don't worry,this video will serve you as a,step-by-step guide,to creating headless e-commerce stores,using,builder io builder io is a tool that's,going to make,all of this possible builder io is a,low code tool that allows developers and,non-technical people to build landing,pages blog posts,and storefronts extremely quickly the,sites that you can build with builder,are going to be extremely optimized,and efficient thanks to nexgs's server,side,and static rendering there's one really,important point that i want to emphasize,i've mentioned that builder io is a low,code tool,what does that mean is it just a simple,drag and drop tool,yes it is but the key point here is you,as a developer code the components that,you can then later drag and drop,that makes it extremely versatile it's,not how much code you write at the,beginning,it's how much you have to write to,maintain it and with builder,you only add code when you need new,components,nothing extra without any further ado,let's get started,we are going to start off by cloning the,starter code,the goal for us is to understand the,starter code and then,we'll be able to add our own features,and components,to the code the link for the starter is,going to be linked in the description,once you're on this github page let's,clone it we can do that by going to code,and then finally download zip once we,download it,yo

Congratulation! You bave finally finished reading Builder.io: Storefront Builder and believe you bave enougb understending Builder.io: Storefront Builder

Come on and read the rest of the article!

I am a shopify merchant, I am opening several shopify stores. I use ppspy to find Shopify stores and track competitor stores. PPSPY really helped me a lot, I also subscribe to PPSPY's service, I hope more people can like PPSPY！ — Ecomvy