how to fill in color swatches on shopify

in today's video we are going to,transform your shopify product pages,from this,to this,no coding required no app purchases,anyone can do this,before we get into the video if you like,videos about winning products drop,shipping shopify themes apps and,tutorials do us a favor and hit that,subscribe button and turn notifications,on now let's get into the video all,right so i'm using shopify's free theme,sense and by default here's how the,product page looks,it's not bad but i feel like it's,missing a lot of elements such as trust,badges a star rating and customer,reviews,all right first things first we are,going to create a few meta fields if you,look at vessi's website these little,things here are what we're going to be,creating it's a way to organize and,store product information without,putting it all in your product,description box,so things like materials care,instructions ingredients and etc vesis,has put their product description in,these little tabs as well i have mixed,feelings on that but for this tutorial,we are going to do the same,from your shopify dashboard click,settings,meta fields,products,and click add definition,the first one we're going to create is,materials so type in materials,then click select content type and click,text,shopify made an update on april 6 where,you can now add medified lists so,previously if you had a list of,ingredients for example you would type,them like this,but with the update you can now type,your list like this,to activate that new feature all you,have to do is click this right here,except list of values,click save and we are going to create,our next one,click add definition again,start typing care,and then care guide should pop up here,click that,then click save,last one click add definition,type description,click select content type,select text,select multi-column text,and save,if you're new to meta fields and want to,see some more examples of what you can,do with them check out this video here,all right now let's go to our product,listing,and if you scroll all the way down to,the bottom of the page you will see the,new meta fields here,i'm going to go ahead and copy and paste,what i currently have in the description,box to both organize my information and,save space,the last one here is materials and you,can see the list feature in action all,you need to do is click add item to add,more lines or you can click the minus,here to delete any you don't need,all right let's save our work and then,we're going to add it into our product,page,you'll see here if i view my product all,the information i entered is nowhere to,be seen these tabs here are included by,default the sense theme but as you can,see they are empty,so click customize on your theme,click on this drop-down menu here,click products,default product,as i mentioned these tabs here are,included with the sense theme already,but if you're using a different theme,and don't have these under your product,information click add block,and click collapsible row,since these are already here we are just,going to edit them so click on,ingredients first,we are going to change the heading to,description,and then you can click the drop down,here to change your icon,or you can just select none if you don't,want any icon,then under row content we're going to,click this right here insert dynamic,source,and we're going to select description,and click insert,i'm going to do the same now for care,instructions and materials,all right return policy is just an extra,so i'm going to go ahead and delete this,block,then save your work,and here you can see that all of our,information is now tucked away within,these tabs,one last thing before we move on you're,going to notice a bit of a gap here,this is where our product description,would be but since we've moved it all,into tabs we can go ahead and remove,that block,while we are here if there's any other,blocks that you feel are unnecessary and,are just taking up space feel free to,remove them,for example this one at the top where it,says ecom geeks is that necessary for me,no so i'm going to go ahead and remove,it,and same with the share button,you might decide to keep these blocks,it's totally up to you but as you can,see we've already condensed our,information quite a bit and it's looking,a lot more clean and organized and it's,also making more room for more essential,pieces of information,this leads me to our next step which is,adding our star rating and our customer,reviews,these both hold a lot of weight with,potential buyers so let's go ahead and,add that in now click add block,star rating,i'm going to drag this up right,underneath my product title,i'm going to change my alignment to left,and if you want you can play around with,the size of the stars here,next we are going to add in reviews so,click add block,click reviews,and i'm going to leave this one at the,bottom here,if you don't see reviews as an option to,add you'll need to add the product,reviews app by shopify,the next thing we're going to do is add,our trust badges so save your work if,you haven't already and then exit out of,here,click apps,customize your store,and search for ultimate trust badges,here's the one we want by conversion,bear it's 100 free no trials or anything,you can just use it,click add app,install app,and then you will be brought here,if you click select badges you're going,to see hundreds of payment providers to,choose from,and as you scroll down towards the,bottom you're going to start to see,things like this where you have money,back guarantee authorized dealer fast,shipping and as we scroll down even more,they have things like cruelty free not,tested on animals vegan and more,i'm going to select my badges in a,minute but really quickly i want to show,you that you can change the appearance,of these badges which i highly recommend,doing so that they all have the same,appearance,you can select monochrome or have a card,outline whatever you like,you can also change your alignment and,the size for both desktop and mobile,and then up here you can choose to erase,the text or change it and you can also,change the alignment as well as the font,if you want,here's what i did for my badges i chose,free shipping money back guarantee 24 7,customer support and secure checkout,i removed the title that was,here and here are my badge settings,i forgot to mention this before but you,can choose an animation for your badges,when they load i set mine as none but,it's another feature you can explore and,play with if you want,once you're happy make sure to save your,work and then let's head back to,customizing our store so that we can add,this in,to add it in click add block,select the trust badge widget,and then i'm going to drag mine up right,below the add to cart buttons,we are going to change one last thing,which is my favorite upgrade and that is,to change our color variants from text,to nice circular color swatches,for this one we are going to need,another app this one is called global,color swatch,when you get here you can select how you,want the variations to display for size,i'm going to leave it as button but you,could choose drop down or any of the,other ones shown here,the important part here though is that,for your color variation you should,select color or custom image swatch,when you're happy click next steps,here is where we can choose the template,we want for our product pages,you can click through these and select,whichever one you like best,this next page has a lot of options for,you to go through i personally didn't,adjust anything here but it's there if,you want to,our final step is to select which theme,we want to install this on,once you've selected your theme click,install,now it's going to ask you to preview,your product page to see if the swatch,worked you will see that it doesn't but,that's okay we just have to configure,one more thing so go ahead and click i,see the swatches,under color click config,and then you're going to go through and,put in all of your colors,you'll notice that they have an option,for a second color here as well so if,you want it to look like the vesey's,website you would enter a secondary,color as well,click save,now if you check your product page and,it's still not working click theme,integration and make sure the correct,theme is selected,i installed it on sense but somehow it,defaulted to taste this has happened to,me two times once when i was testing the,app in preparation for this video and,when i was recording it so definitely,something to check out,one last thing to note about this app is,if you add a variation after you've,installed the app for example i had,added a color variation for the t-shirt,so that i could test out the color,swatches but then i realized i forgot to,add size i did and then my size,variation wasn't showing up it just had,a gap where it should be if that happens,to you click on options and click sync,now,with all that out of the way here is our,final product,i'll have all the apps i use linked in,the description box and if you have a,request for something else you'd like to,add to your product pages let me know in,the comments below if you like this,video do me a favor and give it a thumbs,up or leave me a comment down below and,if you haven't already make sure to,subscribe we post a lot of,time-sensitive content such as winning,products on this channel so make sure,you have notifications turned on so that,you can be one of the first to market,when we post those videos

Congratulation! You bave finally finished reading how to fill in color swatches on shopify and believe you bave enougb understending how to fill in color swatches on shopify

Come on and read the rest of the article!