hi if your question is how i can,integrate bootstrap css framework on my,shopify store,then you are on a right place this video,will show a quick method to add,bootstrap on your shopify website,as you can see i have already logged in,my shopify admin panel here,and here is my demo shopify website,okay if i click on catalog you will see,there is one,sample product listed there if i click,on this product,on this detail page of this product,there is very simple,html table here now i would like to add,some quick and nice styling on this,table,for that i will go with bootstrap now,question is how to integrate bootstrap,with your shopify website,for that first go to google.com,and search for bootstrap,here you will get in the result first,link getbootstrap.com you can even,directly open this website as well but,let us click on this link,now here click on get started,here you can see css link copy this link,now the instructions are saying you need,to copy this link between the head,section of your website,for that click on your admin panel of,shopify store,click on left side here on online store,and then click action button there is,one option here edit code click on this,option,now here you need to find theme.liquid,file,you can search here,okay we got this file here even it is,showing inside this,layout folder click on this,you will get this file opened in a,built-in code editor of,shopify admin panel now here,here is our head section starting so,we'll paste this link here,i'll add some comments for my future,reference,so below this comment i will paste,my copy css link okay we got that,bootstrap link here,save this file we got success message,assets saved now go to,products because we are going to edit,this project,this specific html table,i will go to products and there is,you can see the product is showing here,click on this product,now you will enter edit mode of this,product now our editor is in,visual mode now we need to switch to,html editing mode,we'll click on this small icon here,showing show html,now here you can see starting tag of,this table,so we are going to add some css classes,here,now here we need to add some bootstrap,classes related to tables if you are not,aware about those classes you can simply,go to,bootstrap website click on docs here on,top,and then go to content and there you,will find tables click on tables,now here you can see there are different,styles that you can apply,using bootstrap so what i am interested,in,i need styling on my table like this so,what i will do i will just copy this,table touch described class i will write,table,then space then paste the class i copied,from there,okay now let's click on save and see the,effect,you can see the message there product,saved if i go to my product page and,refresh this page,there you go you can see now i got very,nice styling on my table using bootstrap,i hope you got the idea how to integrate,bootstrap with your shopify store,and how to implement on your required,area,if
Let's move on to the first section of Bootstrap theme shopify
Shopify Dev Tips: Adding Bootstrap
Shopify Dev Tips: Adding Bootstrap
hey everybody my name is sam webb,and this is shopify dev tips today i'll,be showing you how to add bootstrap to,your shopify workflow,so let's get started so the first thing,you always want to do when bringing in,some sort of outside code into your,project,is look at the documentation so i've got,bootstrap's documentation pulled up,already,if we scroll down the page we'll see a,bunch of different installation methods,now looking at this it's it'll be,similar to the last video we did where,we,where we added in jquery right you can,either use the npm install,in our case you are an ad or you can,just add it straight into your,theme.liquid file,today we're going to go the adding it,via theme.liquid,route we're in a source liquid layouts,theme.liquid right this is the primary,theme and you could do the same thing in,any of these other layouts but,i'm only going to do it in theme for now,if you look at,this line down here we've got our,jquery that i showed you how to add that,in the last video,and so we've got that added back and,then,we're gonna and so we're gonna be adding,in bootstrap to this file,now bootstrap's javascript,depends on jquery which is why we,already have jquery,here and so if we go back to the,documentation there are two lines that,we're going to need so first we're going,to need,the css so let's just grab that,and copy it then we're going to paste,that,we're going to paste it before our,before our fonts and our css right,and so the order now is going to be,bootstrap,then our fonts then,our css so the next thing you're going,to need the javascript,now what you see is we've got two lines,here but the first line is jquery so you,can skip that,and the second line is going to actually,be bootstrap,so i'm going to copy that and we're,going to paste that,below jquery but above our javascript,and at this point we should in theory,have,access to jquery so let's test it,i'm going to see snippets,and into our header,let's mess around with our header really,quickly so before we do that let's go,back to the documentation and let's look,at what we can do with,with bootstrap,and so we can use this alert successor,or,any of the so basically they have,bootstrap has a bunch of different,predefined,colors and they all have names and so,you can see that they've got this alert,which is the,which is what this item is but then they,have success which is the color i think,that's probably green,primaries the blue and then secondaries,is great and all these colors can be,changed,to get this layout we're going to need,alert and then alert primary,so above the header let's add something,in,let's just do let's do it below,div class equals alert,and alert primary,and we'll put a p in here,hello world,and if we go back to the site we now,have this,hello world alert that has all the,styling from bootstrap,within our site and that's it that's how,you install bootstrap and that's how you,can get started using it,in your site don't forget jquery is a,dependency for
After seeing the first section, I believe you have a general understanding of Bootstrap theme shopify
Continue the next second section about Bootstrap theme shopify
25 - Adding Bootstrap 4 to Shopify Theme and Vuejs
25 - Adding Bootstrap 4 to Shopify Theme and Vuejs
hello and welcome in this video we are,going to add Buddhist effort to our team,and see how we can change the design if,you are watching this video until here,you have passed the difficult part the,last two or three videos who are a,little tough because it was the,configuration and it takes a lot of time,to configure and understand if you pass,it things will get a lot easier after,this so after this you are going to,focus on designing our team and adding,more feature and then you will have your,own team and the next few videos so,let's start before I start this video,sponsor to buy my dark they are a top,leading agency in Sydney and they build,highly premium custom-built EECOM,solution with Magento and Shopify so if,you want to check out their website you,can see my dog calm dot-eu so let's,start adding bull stuff for our website,this is the bull surfer and all you have,to do is we have to install it with NPM,we did most of the configuration in the,previous video if you haven't just,please watch the previous video I will,open another comment as you can see and,the first window of the terminal I have,true into it split open you can please,alt if I control if control v or any,other shortcut if you have it will is,splitted for you if you check out this,one,control shift v it will split it for you,and here the team watch is running and,for this one I have the comment of NPM,run watch which is watching for any,changes in so directly I'll switch back,to the second terminal to install,bootstrap so I'll press the comment and,boom it should in a solid in a few,second and it will add it to our,package.json so after it is done it is,in our new G node module direction all,you have to do is add the CSS to your,sass file here I'll open the source sass,folder CSS folder and then app dot CSS,here I will remove the background of red,because we do not need this one and I,will test this snippet here this is how,you can import it this tilde here refer,to the node module here and then it will,go to the booster folder and it will go,to the a CSS and then it will check the,bootstrap dot a series you don't have to,specify the dot sauce extension here,because it will import everything for,you I will save it for now and if you,check out my compiler should compile it,down and it should upload this stuff,here also so yeah it is compiling it,will take a few seconds because this is,the first time but next time it should,not take much time it did compiled,successfully now my team watch should,operate it in our team as you can see it,is processing and it should operate it,is a little slow for me here it should,be fun if I come to my team here,currently if i refresh my page let's see,if we see any changes here nothing,changed it is because we have not,included our CSS yet I will show you how,if I open the source code and search for,the app dot CSS we do not have that file,if you don't have it it means you didn't,include it in your team the same way we,did in the previous video I
After seeing the second section, I believe you have a general understanding of Bootstrap theme shopify
Continue the next third section about Bootstrap theme shopify
11 - Shopify Theme Assets, SCSS and JavaScript Managment
11 - Shopify Theme Assets, SCSS and JavaScript Managment
hello and welcome in this video you will,learn about how Shopify manage,javascript CSS and images also you will,learn about asset management so if I,open the asset directory here we talked,about this one in the previous video too,but in this video I will talk in details,how you can write CSS sass joy script,and images how you can upload them so,here is your directory called assets and,you can check out this there is an image,called gif also I am running the team,watch in the background so whatever,changes I bring it will directly upload,to my server to my shop so this is an,image you can put all your images that,are like static images you can write,them in you can put them in acid,directive also you have a gift card dot,J's it is easy it is just a directory,file and you can understand this one,whatever religious to the gift card and,if you open the other file which is,called gift - car this is the liquid,what is this one this is not a CSS file,nor it is satisfied what is this this is,a liquid file but inside this one you,can write sass file if you know if you,are familiar with sass or CSS processor,like this is preprocessor language if,you don't know just give it a google and,see how it is going to work basically it,is like CSS but it will extend the,functionality of CSS you can write loops,you can write variables inside this and,it will make your life a lot easy but,browser does not know this so make sure,like you cannot write sass file and,instead of CSS you should compile them,so how this compiler is software we will,learn in this video so whatever you,write in this file it is going to be,pushed to the server as a liquid file,but shop for will understand it that,this is our sass file and it will,compile it based on the extension you,give it for example if I create a file,in this directory called app dot s,css.show file will operate that one but,it will not compile it for you it must,have the extension of liquid and see,this inside this one I can,liquid code I can write CSS code like I,cannot SAS code I can write classes I,can write anything here and this is,going to be handled by Shopify as soon,as they upload it to the server you can,check out a did upload and now I will,come to my team here as soon as the,object is gone to the server it is going,to cash it for exam as I said you cannot,write like SAS for the browser once it,uploads through the server or through,the your website it will compile it to,CSS and it will cache it for you and the,browser that's why every time you are,writing something and you might expect,that everything works fine and you,refresh your page and everything is not,working it's because it should compile,it that will take a little while for,compilation and it will cache it for you,every time it will not compile it that's,why it cache value for example if I come,in this file and scrolling down list,being a small changes I will say body,background should be if I check see the,keyboard shortcut sometime work with,sometime
After seeing the third section, I believe you have a general understanding of Bootstrap theme shopify
Continue the next fourth section about Bootstrap theme shopify
28 - Create Slider for Shopify Theme with Bootstrap 4
28 - Create Slider for Shopify Theme with Bootstrap 4
hello and welcome in this video we are,going to add a section called a slider,and the user should have to have a,slider option they can add a slider to,our website and the home page and they,can display it anywhere in the home page,so let's start doing that before I do,that this video is sponsored by my dog,they are the leading agency the,e-commerce agency in Sydney and they are,the backbone of most fashion companies,in Australia so let's start diving to,our tutorial first of all let's move,this it skip content you don't remove it,you hide it why for readability the,reason people put this one is if someone,print this one what happened is that it,should display here or if the Java,Script is not loading that is for,accessibility reason here so if I scroll,up here,this is where that accessibility display,here in Australia if your website does,not have an accessibility people can,complain about it and they can't find,you so that's why you have to take care,of the accessibility also visually,hidden it is not working because we are,not using their CSS is stuff like that,so I will remove this stuff and what I,will do is I will just S or only or a,screen reader only this is the Buddhist,result so if you add this one to this,one it will be accessible only for these,screen readers so if you refresh your,page it is still here let's check out,you did upload it and it is gone now so,it will take a few second to upload,that's why I just gonna so now let's add,our section called slider this video,might be in two videos in two parts but,I will try my best to finish it in one,video so if I come here currently we,have some sections these sections are,here hitter these are added like,dynamically here but aesthetically this,is the section for the header and this,is for the footer that's why they always,stick here header and footer these two,here but this one are dynamic you can,remove them you can add more of them for,example I can remove all these sections,from here,from the homepage as you can see now it,is empty but you cannot remove header,and footer the reason you cannot remove,them is because these are not hard-coded,here so those sections have been you can,add those sections to your website if,you come here you can add them so we,will have a dynamic one something like,this one,I will duplicate one of them called,image with text I will duplicate this,one and I will remove the extra code,from here I'll call it image slider dot,liquid that's it,and now as I said I will remove the code,which whichever could it has so I can,write everything from scratch and you,can understand what we are going to,build also these or extra and this,section must have an ID called image,slider whatever I do you close you can,give it it is good for designing later,so these are the settings that currently,do have so I cannot remove all of them i,will remove the presets because we are,not using the preset and also i will,remove some of these options these are,extra i do need them so i w
After seeing the fourth section, I believe you have a general understanding of Bootstrap theme shopify
Continue the next fifth section about Bootstrap theme shopify
26 - Multi-level Bootstrap 4 Navbar for Shopify Theme
26 - Multi-level Bootstrap 4 Navbar for Shopify Theme
hello and welcome in this video I'm,going to show you how you can add Buddha,stuff for navigation to a Shopify team,as you can see currently our team does,not look good the navigation is the,default design that we have here it has,a search box and nothing looks good so,let us add it's not adding the Buddha,sub navigation that looks like this to,our website first of all I will search,for the navbar and also not to forget,this video is sponsored to you by mine,or they are the top leading agency in,Sydney and they make highly premium,custom built Shopify and Magento website,so if you wanna see if you want to build,any Shopify or Magento stores we can,help you if you contact them so let's,start adding the navigation to our,website if I come to the navbar section,of Wooster for I scroll down these are,the examples so they are nice they are,like you can customize it of course it,is just a default one so let's start,adding them to our navigation to the,website if I open the layout here and,inside the team this severe is the,current code that is displaying the,navigation here it is in a section,called header so let's open that section,if I open this section folder here you,can open the header and this is the code,we have if I check out it has a lot of,code you can remove them if you don't,want but I will remove them step by step,so close up everything this is not,adding it so if I scroll down,first of all I will show you will do all,stuff appears this is the logo that,appear here it has a search box and mini,card that will send you to the court,page if you check out the URL at the,bottom of the page it is going senior to,the court which all we are interested in,the designing the navigation in this,video so if I scroll down this is the,nav bar rule here and it is going to,take the navigation from the section,sitting me know whatever new me new was,that and it will display all the,navigation here if I scroll down for the,sitting you if you watch the previous,video you know where the sittings come,from section sittings come from the,bottom of the website which is here,if you check out this is the logo picker,this is the range for the max and this,is the Meno here the ID appear here,linked list mean whatever the user,select here it will display that one for,you for now there are some other codes,also here what are this we'll talk about,them in the future video,don't worry about that one that is,important do not remove that part here,so if I scroll up here again to the,navigation,everything looks cool except the design,so let's check out how the Guru's up,we'll look Buddha have a nav bar of,these classes okay cool I'll add this,one I just added step by step and I,might skip some part of this because it,will take a lot of time if I do it in,the video so I will add this cluster,number looks cool I will collapse this,one and what else we have here,if you check out this one is the toggle,for mobile have you seen this hamburger,me no this is for that one so let's
After seeing the fifth section, I believe you have a general understanding of Bootstrap theme shopify
Continue the next sixth section about Bootstrap theme shopify
27 - Custom logo for Shopify Theme Navigation and Bootstrap 4
27 - Custom logo for Shopify Theme Navigation and Bootstrap 4
hello and welcome in this video you are,going to add logo to our navigation and,in a set of the number we will display,the number the reason I am not recording,with you this disease because I was in,Melbourne and I thought I can record the,video dear but I couldn't so let's,continue our tutorial in this video also,this video is sponsored 3 by mine dark,they are the leading agency and Sydney,and they are the backbone of most,fashion companies in Sydney Australia so,let's start continuing our tutorial so,in this video as I said we will add logo,to our nav war here if I come to the,team sitting here we have our team,sitting these are all the sections we,have header we have some other sections,which are dynamic and you cannot add,more of them you have team sittings,right how you can add sitting for users,to operate a logo here there are two,ways either you will add it in the team,sitting which is going to be a general,sitting and you will have access to that,everywhere or you can add it in the,header it is also the same thing like,hitter is shared in every page like you,cannot have a header in some pages like,every page will have the header so you,can add it in the header in our team by,default it has a header logo so if you,pick a logo from here let's upload,something I have already picked,something so I do need to upload here is,the example here a rocket I got it from,flat icon comm which has nice icons I,got it from there and then if you upload,this one it has this option and this is,a range slider you can sit the size of,this image here the size of the look and,it will display here I don't want it to,be displayed here also this is the,search and everything here I want this,trees to display this one here in the,center of the nav bar first of all I,will open to get pushed up I will just,go to get boots up and see how did you,split the logo and then you will remove,this stuff from here for now I will save,it these are already here as I said I'm,going to remove most of the cost from,this from the team which we generated so,as you can see Hamas is running and in,PIM run wash is also running also one,thing to mention most of,I said we are getting an era of cross,E&V not found or something like that,when you run npm install make sure you,install the cross env environment which,is an NPM package once you install it,globally in your computer you not get,any error because I have it globally in,my computer I'm not getting any error,before that so just ask for cross e and,we just search the error you will find,out how you can install it globally so,let's continue here I'll open the,section called header which we did in,the previous video and we included the,nav bar here this is the nav bar which,is a snippet and if I check out this,snippet called nav bar here it is this,is our Buddhist stuff for navigation and,it works just fine for now so what I am,going to do is I'm going to open both of,these files header and nav bar whatever,is above this one it is extra
After seeing the sixth section, I believe you have a general understanding of Bootstrap theme shopify
Continue the next seventh section about Bootstrap theme shopify
34 - Design Product Page with Bootstrap 4 - Shopify for Developer
34 - Design Product Page with Bootstrap 4 - Shopify for Developer
hello and welcome in this video we are,going to learn how we can design the,product page so I will show you the some,of the sitting and I have done some,coding behind the scene also and how you,can extend it so if I come to the,catalog which is the category page we,designed it in the previous videos like,a few videos and this was how it was,looking it is a basic design but we are,going to add more features read and,JavaScript stuff in the future for now,if I visit one of the product page it,will navigate much you navigate me to,the products it slash the handle of the,product and it will show you the product,for you it modern look like this because,I did some design in the sidebar it is,going to show you the product,description and here it is going to the,product images currently it is the basic,stuff and we are the sitting for this,one as I said this is the handle and if,you go to the product slash handle of,any product you will should see,something like this and everything is,working fine,currently I haven't done any JavaScript,so this is just basic of our team that,we had if I come to the customize page,it works the same way so it you can add,the sitting the sittings that the end,user for example the client one extended,for example what the client might say,the come I see I don't wanna show this,share button you must have an option for,that how you can add those options they,are in the product if I come to the,product page here I'll show you one of,the product example for example if I am,here here I have the product page and,here is the sitting sure social sharing,icon it is a bit hard to say and if you,uncheck this one it should hide this one,from here and this is one sitting here,only one sitting but you can have more,sitting here for the user for example,how you want to display the article how,will you want to display the product,this should be a slider and how this,letter should look like there are so,many things that possibilities like,related product that you can give the,user if the user see a lot of options,there,definitely going to buy your team but,for now this is the basic example I'll,show you what I have done in the coding,also I will show you some of the design,inspiration like how you can get the,design explanation for the product page,that is very important you cannot define,it from your own and you expect people,will like it because you yourself might,not like it if you design it from your,brain but you can give some idea of how,you design it I'll show you where you,can get it after I show you the sitting,so what are the sitting if you come to,the template page you have a product or,liquid the product dot liquid it is,going to reference us to a section the,reason we use section is because in,section we can have sitting if I come to,my page the reason you see this section,with sitting like social sharing icons,buttons is because we are using second,section it is going to include that the,rest of the code is extra you do not,remo
After seeing the seventh section, I believe you have a general understanding of Bootstrap theme shopify
Continue the next eighth section about Bootstrap theme shopify
Free Shopify Theme powered by Bootstrap framework (v5 and v4)
Free Shopify Theme powered by Bootstrap framework (v5 and v4)
hello my name is alvin and i'm the lead,developer here at condasoft and today,i'd like to discuss,about our new release uh ks boot shop it,is a free shopify themes,even it is that it is released for free,it is a very good theme in my opinion,and you may use it for any project,in a store that you may have and,i will get start i will get you an,overview of the highlighted future that,this team have,also get you'll see together some of the,homepage sections,and see their options as well through,the shopify theme customizers,also you'll see the demo and so let's,get started,okay so first thing to see the demo here,is the link,and you'll see from the demon that,we have a very lengthy home page with,almost all the available sections that,we are using,but of course you are free to,to remove and use only those sections,that,are needed for your store okay okay,great so,what else also let's get started with,the highlighted features okay,so first thing powered by bootstrap,framework,v5 or v4 so it means that this limit is,available for,bootstrap version v5 which is just,released right now and it is currently,in beta,and but it is working very stable we can,confirm that through our own testing,that it is very good of course bootstrap,it is very mature right now and,those guys are doing a very terrific job,with the framework so yes stick with the,v5,version with the new theme that we have,just released with the for the,bootstrap v5 version so,developer expecting shopify female,requirements,what does this mean if you're gonna,click this link you'll see that shopify,uh provide us team developers a set of,guidelines that we must follow,in order to comply with their starters,uh for for a theme that must that must,comply so we make sure that we comply,with,i cannot promise all of them but of,course the majority of them and the one,that we think are very,important based from our own experience,so what else all elements are fully,accessible with,aria attributes it means that we fully,support,accessibility future it means that our,teams are,have all area attributes enabled,especially it is kind of tricky for,uh javascript based uh elements like,ajax edo cards when you add a product to,cart without,doing page refresh we make sure that,screen readers understand that,and the message it is displayed to the,to the disabled user it is important to,know because i,i see in many many stores because,this futures is this uh really important,to occupy,not only because you might think that i,don't have excessive,accessible people buying from a store,but in fact,in usa it is it is uh,required by law as far as you know that,your site,must be fully accessible so you,you should support accessibility on your,store and disabled user,means that users that might bruise your,store without a mouse,just with the keyboards in the majority,of cases,so what else no javascript framework,depends,example jquery so it means that,based on bootstrap v5 which,has dropped support for jquery framework,
After seeing the eighth section, I believe you have a general understanding of Bootstrap theme shopify
Continue the next ninth section about Bootstrap theme shopify
Best Shopify Themes on Envato Market (2022)
Best Shopify Themes on Envato Market (2022)
best shopify themes on envato market is,what i'm going to show you in this video,welcome everyone in this video we'll go,over the enviro market,and how you can get shopify themes on,enviro market,to increase your drop shipping,conversion rates,and,better the overall aesthetic and look of,your website so that,people,come back,more,often and your brand building,goes quicker so that you can convert,easier in the future as well because a,good brand name will,be,half of your marketing in most cases so,this is environment you can go here,using envato.com,but first i wanted to show you the,shopify themes,that are available,for you on from shopify itself,now as you can see here on the left,there's free and paid there are only 10,free,themes and 70 paid themes,on shopify itself so let's select the,free ones,now if you can see here,some of them are os2,for the free ones there's only one of,them that's os2,and,they,do look pretty decent,but most of them are very bland in my,opinion as you can see they're pretty,much all the same,there's not much you can customize,and,they all look the same due to them only,having a couple of styles see two stars,here four styles here,and,there are only a couple of things you,can change on here so they don't look,professional,they're only there to start you off,if you have a couple of bucks to spare,and want to get the best shopify themes,don't use these,and don't get the paid ones even though,they look way better as you can see here,they still look somewhat the same as the,free ones do,and as you can see they're 250 310,which is way way expensive,now if you will go to envato.com,and i go to products in the top left,once you're here you want to scroll down,until you see buy as you go envato,market go to envato market which will,then redirect you to the,enviro market and under web and,web themes and templates you can see,they have wordpress elementor hosting,html marketing cs cms and then there's,e-commerce,and under e-commerce you can go down to,shopify,click that,which will now,show you shopify themes and templates,there are,way way more,different categories of templates on,here than on the shopify website as you,can see 295,fashion ones alone shopping health and,beauty miscellaneous technology and,entertainment they're way more but these,are the most prominent,now as you can see here save on shopify,themes and templates,as you can see they even have discounts,on some,from this is more than half of,now as you can see once you scroll down,you can see the weekly,bestsellers the hot under 49,dollars best sellers again,best service in total so the general,best sellers then,top multi-purpose items,so these are themes that you can use on,different,categories so let's say,this one for a furniture but you can,also,change it to,to,i don't know makeup or fashion,then there's top shopify shopping themes,and then as you can see unlimited,downloads of shopify themes and,templates,if you create better projects and,if you,get yourself a m
Congratulation! You bave finally finished reading Bootstrap theme shopify and believe you bave enougb understending Bootstrap theme shopify
No difficulty
