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,
Let's move on to the first section of ks-bootshop theme shopify
11: Infobar and footer - KS BoldShop, Premium Shopify Theme
11: Infobar and footer - KS BoldShop, Premium Shopify Theme
okay before we move on with the,collection pages and the product page,configurations we will see first,the two other static sections which are,shown on,all your pages not just only on home,page that's the reason that shopify,calls them,static sections contrary to all the,dynamic sections,which can be listed only on home page,the static sections,are shown everywhere on your store so,for our team ks boot shop,who we have we have the announcement bar,static section also we have another nav,bar and also we have the,info bar which you'll see right away the,options and also we have the,folder itself okay so first we will,check out the,info bar info bar section okay,so let's go over to our theme customizer,for our theme and check out the options,for the info bar,okay okay so,let's open the info bar,and as you can see the info bar,section consists of different blocks,that you may use,that you may use to display some some,important parts,uh mostly related i would recommend to,the virus policies that you have they,should be,related to this part around here,on the footer menu for example for,example,you your store must have a terms of,service must have a privacy policy,must have a shipping policy or refund,policy,and an optional legal notice,also so the info bar you may utilize it,to this,to link to this various parts of your,store for example you may say something,for the shipping as you are seeing for,the demo,uh which we are saying free shipping of,course you may change it,and the juice base from your own,shipping policies,also you may it is very advisable that,you,guarantee something for example you may,guarantee that,you you you offer 14 or 30 day,a refund policy stuff like that also,you may also you may use the the info,bar for other,parts for example we are showing here,something regarding support,and the link to the contact us page,but yes you get idea for the info bar,and what what it is the best usage for,it,okay so well for the moment where we are,displaying four blocks as you are seeing,here,um but of course you may add other,blocks,i do not recommend that you had more,than than six,then six blocks or maybe five because,they,otherwise they will shrink too much uh,yes so let's remove the blocks,okay okay so let's check out the,let's check out the the block options,that we have,uh first as you can see there is some,some code here regarding the icon as i,have stated on,another previous video uh you may just,copy uh,svg code from any any,any icon you have uh in this case we are,using the default,bootstrap icons it has a,lengthy amount of icons available to you,and,they are good in my opinion they are,very good so,just find the icon that you are,interested for example we have shown,right now,a shipping island a bus something like a,small vehicle but of course you may,choose another icon for example,let's see what what tires,we can use for example let's try this,this bell icon how it it works okay so,as you can see copy html code here,just copy it oka
After seeing the first section, I believe you have a general understanding of ks-bootshop theme shopify
Continue the next second section about ks-bootshop theme shopify
[Shopify 2.0] How To Add Custom Filter on Collection Page
[Shopify 2.0] How To Add Custom Filter on Collection Page
guys welcome back to another shopify tutorial
and in today's tutorial we'll be learning how ,to add custom shopify filter on your collection
page so that's the custom filter which i created,so in this custom filter we have custom
values defined in our products and we can ,filter out products by selecting
these so i have a t-shirt store ,and i have three different styles
of t-shirts available in my store ,so if i have like hundreds of products customer
can easily filter out products by selecting these ,filters normally default filters are availability
and price i created a custom filter called style ,to filter out some of the products so if you
want to learn this let's proceed to the tutorial,so guys this is how the default collection page
looks like so we have two filters availability and ,price after following this tutorial you will be
able to add a custom filter like we have it here,okay so i'm gonna close this window and this is ,the current state of our shopify store now
what i'm gonna do i'm gonna go to the back end,so on the back end go to settings,and then click on meta fields,in meta fields i'll select on products create
a new definition of adder field by selecting ,add definition button now let's name it style,and from the content type
select text and click on save,now let's go back to our store backend and
here we'll go to every single product and ,add in the value of the new meta field which we
created so i'm going to open up all the products,and add in the video add in
the value of that meta field,so let's add style of this product as round
neck it's safe and that's the second product,add the same value here as well,let's go to our third product,add in value as we neck,now let's go to the final product and add
in the value as polo so these are the three ,different styles of products which we have
and in first two products we added round neck,and remaining two products we have one as v-neck
and one as polo now final step is to add a custom ,meta field which we created in our filters
in order to do that click on online store,and then click on navigation,scroll down to see the filters so here we have
our filters so currently we have availability ,and price as default filters now we'll add our
new custom filter by clicking on add filters ,and here we have our meta field showing as a
filter now select on style and click on done,after clicking on done hit save,and now let's go back to a collection
page to see how our filter looks like,so this is a collection page without the
custom meta field and now we'll hit refresh,and here we have our custom
meta field filter showing up,when we select round neck it will filter out
the other products and only show the roundneck ,products and i'll select any other product
and it will filter out the remaining products,cool right so i hope you guys like
the tutorial it was a short tutorial ,for you guys as recently our customer
requested to create a custom filt
Congratulation! You bave finally finished reading ks-bootshop theme shopify and believe you bave enougb understending ks-bootshop theme shopify
No difficulty
