How to add Shopify Color Swatches on product page 2022

all right, welcome everyone again to resolution design on another video here, and in this video tutorial, we're going to tok about how to add color swatches in the collections and in the products beginners tutorial. let's get right to it first. as always, I want to remind you guys that if you really like content like this, please, please, please, subscribe, press that like button so that I could continue to make more contents like this. I make this content for you so that you could go ahead and build your store without having to rely on anyone. it means that you have time and you're gonna do this yourself. okay, this specific video is extremely intense in the sense of a long instructions, so I'm gonna be very, very slow in the process of explaining this. just have like some notepad or something next to you so we could get started right away. okay, alright, so let's get right to it. okay, so we are back again using the turbo theme and again, I cannot emphasize how important the turbo theme is because, unlike other themes, they don't have everything all together now. granted, you see this super big banner. maybe you might not like that, that's fine, but we're just gonna tok about this partikular instance, which happens to be the color swatches. again, turbo theme is on the description. it's a very good investment because it has everything that you need in order to make your store to look nice, and let's get right to it, okay. so let's pretend for a second that you went on a parallel, okay, and you went and you got a product that has multiple variations of a product. okay, it comes in different colors. so over here I'm gonna go to the back end and I'm gonna go to products, and my product already has been imported from Ober lo- I have another video if you don't know how to do that- but it has already been imported from a bear load into the store. I've already added it into a collection, okay, and it's already living on the front end of my store. it's just that it has all of this gibberish stuff. right, we're gonna get right to it. so let's click inside here of the product and, as we can see, right here we have these. we have these mugs- right, warm, stainless steel mugs, whatever, if I could speak today. and then we have these variation colors. you see that these are not really colors. so your suppliers like, yeah, whatever, they don't care, they just want to. you know, you just sell it right. and so in order to make this attractive, well, you need to make sense of this. you don't know what's what because they have different values, as you can see here, and they only gave you one picture. all right, so let's go ahead and fix this so that it looks really nice, all right? so the first thing that we're gonna do is let's first find this product and Aliexpress again, and what I'm gonna do is I'm going to go into a bur low. if you guys don't know how to do that, let me just back up. you go over here to where it says apps and then you click on where it says Ober low, okay, so I'm just gonna go back and just save my spot over here. I open- I like to open- a separate tab for things because I don't like to just go back and forth on things. so if you have a bare low up and running, make sure that it's on another tab. here is the product, right? so if here's the product, then right here, we have information of the product over here and let's go ahead and view supplier store. I'll click on that and that's going to take me to the dedicated page of this vendor, right? and we're gonna look for this product and there it is, right here. okay, let's go ahead and click on it. so a few things that I want to do. I already have this picture, but I don't have these other pictures, right? you're like, ah, what's up with those pictures, why, how come I didn't get it? it's okay, we could get them right now if you wanted to, but I like to do it the old-school fashioned way, right? so I am just going to take some screenshots of these images. by the way, if you're asking me, what screenshots, fool, am I using? I'm currently using a Mac, right, but if you have Windows, you could go ahead and take these screenshots yourself using, kind of like a tool- I'm not sure what it, what it's called, but you know. go ahead and google it. okay, so for you to take screenshots, but I like to work on Macs for this reason, right, because I don't. that time, I just wanted to do things, I just want to get it done, all right. so I took four screenshots that are currently on my desktop and, again, the objective here is to figure out what is what. so I clicked on the first one and, as you could see right here, color is zmm. 4, 4, 2, 3. let's see if I could associate that with something over here. ah, it's this one right here. it's the actual first one, okay? and so what I'm gonna do is that first I'm going to upload those four pictures and I'm gonna add them here, okay, so let me go ahead and just kind of like expand my window so you could see me adding these four images, alright. and now let's give it a name. so we're gonna give this, you know, something like let's just call it frame, oops, right here. so I'm all over here. guys, come over here and I'm gonna call it green, okay, all right, let's just call it old pack green. I'll call this biggish. I'm gonna call this pale pink. I'm giving it like unique names, not exact names. I'm gonna call this light blue. okay, now here I go. one, two, three, four. I've highlighted them over here, guys. right, I highlighted them. drag, drop that in there. now I have those pictures. so remember this guy right here. it was supposed to be a specific color. let's click on this box right there. I'm gonna click on this box right here and I am going to look. they have the other pictures there all along, well, well in case, if it doesn't have it, it's okay, click on this one. it's one, the 4 4, 2, 4. which ones out? 4 4, 2, 2. that's this one, 4.24. and then the last obvious one: save. now, once I've done that, you're going to notike that in the front-end of the website. it probably didn't do anything, okay? so we don't have any swatches yet. if I click inside of the product, I just have like these four circles that are pretty much just saying the same thing. okay, we're gonna go ahead and fix that, all right. okay, so the first thing that we're gonna do is let's go back to that name. so, right here, in the color I'm gonna call it, just give it a name. right, it doesn't. we don't have to be tiknical. beige, light blue, and what do we call this? we called it pale pink, and let's press save to that and let's see what it did onto the website. let's see if it changed. so some color swatches started to come up here and if I start hovering over them, you could see that the colors actually coincide with the name. right, but the problem is that this green doesn't match this and this color doesn't match that. that doesn't match this, this doesn't match that, all right, so something seems off like these colors just don't match at all. furthermore, if we back up into the collections page, we go over here where it says home style, we don't see any color swatches here too. right, so let's try to fix one problem at a time, all right, so let's go back here. let me go ahead and refresh, just in case. make sure that everything is up-to-date, all right? so when I first reproach, now I have a whole bunch of repeats. right, let's go ahead and can't rid of the repeats, right, but let me move, let me shift these guys around so that it matches this. so you see how this one- it's first, second, third, fourth- right- let me move these pictures around. click, hold, drop, click will drop. that's cool, and that's cool. so it's reading it like from left to right type of thing. these guys don't need to be here because there are duplicates. delete media, let's go, and then it's gone, right, so what does that do for the front end? because we have like the super long amount of pictures, right, let's go ahead and refresh this and there you have it. now it's cleaner. it doesn't have all of those pictures, right, so I could switch them around, see, and then I could go here and then here, here, here. so now the pictures are coinciding, but again we need to fix this problem, because right here this is.

Shopify CSS Intro - How to Overwrite Theme Colors and Fonts When You Really Need To

what is up, guys? today you're going to learn a few tikniques to completely overwrite the styling that is set by your theme and be able to go beyond what the theme settings allow you to change. because, as you probably know, things like colors and fonts, they're under here under theme settings and they're set globally across your entire site, right? so you set a few primary colors, like your brand colors, you set your secondary colors and then, like all the buttons and stuff, they automatikally get these colors applied to them. right so these buttons- this is like the primary, this is a secondary, and you don't have specific control over which button is what color. but what if, for example, you want to make this specific, this add to cart button, pink, or maybe you want to change the heading size of your product title or this vendor, or maybe you want to change the heading size in your footer, anything, anything across your site? if you want to change something specifically, this video is going to show you how you can kind of surgically go in and change that specific thing without affecting other things, because that's kind of the issue, right? you're going to love this video because it's going to give you a lot of control, a lot of very fine control over your design. however, with great power comes great responsibility, and it's going to be very easy to also break your theme. right, not completely break your theme, but you know effect more than what you intended to affect, right? so you want to make one button pink and you end up making like all your buttons pink across your store, which is not what you want, probably. so i'm gonna teach you a few ways that you can like really carefully, go in and make those changes. the examples i'm going to show you are focused on colors and fonts just because these are the most common things that people want to do and the most simple things to to do to teach you. but really, if you do have some more advanced knowledge of css, then you have no limitations, really, and you can use the concepts that i teach here and combine that with your css knowledge to just change anything you want across your store. so anyway, with all that said, let's jump into my computer and get started. okay, so the first thing you want to do is look at the page that you want to be editing and have that open in a tab on your browser, and the second thing you want to do is go to online store themes and then, under actions, click edit code to enter the code editor. we're looking for themeliquid. you can search it, but it's actually right here: themeliquid. this is the main file that contains your entire store. all the other like section files, templates, they're kind of like being included inside of themeliquid. in this file there's always a css file, which is usually called basecss, right, um, but it might be called globalcss. anyway, it's your main, like your core css file. in dawn and in all the free shopify 2.0 themes it'll be called basecss. but yeah, you want to find the main css file for your theme. copy and paste that onto the next line and we're going to call it customcss or something that may be even more memorable for you, so that you know that, like, like, this is the file that you were creating and editing right later, when you forget the name- customcss might not be good enough- i'll call it edcustom. you might want to call it your name or your store name. anyway, hit save and then we're actually going to create this file. okay, so right now we've like linked it into our theme, but we haven't created it yet. so we're gonna go to assets folder and we're going to add a new asset. as you can see, basecss is already in here and all our css files are in here. click add a new asset and create a blank file. the extension is going to be css and the file name is going to be whatever you named it, right? so i hope you see what we've done. we've created a new empty css file, which is where we're going to write our styling rules, and we've, like, included that file into our theme by linking it here in themeliquid, so now we can write css here and this is going to have an effect across our entire store. now, if you're completely new to css, then this is like not the ideal tutorial for you, but i'm going to try and make it as simple as possible, as straightforward as possible, and i'll give you a quick recap as well. or, if you're someone who hasn't touched css in a while, you know how does css work. well, we target an element, right. so one of the common elements that you might have on your store is the h1 right or the h2, h3. these are heading, heading levels. so you type h1 and then you open up these curly brackets, hit enter and then you write your rule. here you're gonna write color and then this colon and then red and then semicolon. am i getting those names right? semicolon, colon. okay, anyway, that's the basics of css, right? another another common one that you might see is like p for paragraph right in your html, and to target all paragraphs. we can do this. we're just gonna write color green and this will literally make all paragraphs across our entire site green, and, like, you usually wouldn't want to do this, so instead you would usually use the class name. right now, let me show you a simple example. i'm in google chrome and if you right click and hit inspect, you can see the code of your web page, and so this button has a class of button and another class called button primary right, and so what the theme does is attach to button primary. it's got like this: color right. so this is simplified, but it's kind of written like this, but in primary color, in a dark green or whatever. that color currently is right, and this you can ignore. you can name it any way you want. so you can use underscores, you can use dashes, one dash, two dashes. this is just part of the name. the only part that's important here is the dot. dot means it's a class, right, this is a class and we also have sometimes id. so this partikular block, this image with text, it has an id and to target an id we would use the hash symbol and then if there was like: okay, this id is kind of complex, but we can actually target it like so, and then we would be targeting specifically this block, okay, so that is a brief recap of css. lastly, um, one more thing. you write the thing you're targeting, right, then you hit space, so there's a space. you open your curly braces and then your cursor will be in the middle of them. so just hit enter and because you're in a code editor, it'll automatikally do this. right, try not to do like i don't know something weird, like like this, and then writing your color red here and then like that's just messy and and difficult to read. this is a little bit better, but still, like the standard is kind of to do this where this is on the first line, this is on the last line and you write your stuff here and this is indented as well. don't do this, because that's going to be hard to read. you want to see what, like, these rules are inside of this, right? so when you have like a lot of rules, then it's easy to see, like, what's going on here. what i'm saying is: pay attention to formatting. it's kind of important for readability and to make sure that you're not making any mistakes, especially leaving off these things that can screw up your css, right, accidentally skipping that, that can screw up your css. and you'll notike the color changes as well. when i do those things. that's a hint that you might be doing something wrong. so, yeah, that that's my recap of css for you. okay, let's get on with it. i don't want to make this video too long. um, let's say that we want to change the add to cart button to be pink. okay, again, we're going to hit inspect, right click and inspect in google chrome to see what classes are on this button, so what we can target. and, yeah, this is going to be a more practikal example. so the first class that i see is product dash, form, underscore, underscore, submit, right. and then we have like generic classes like button button, full width and bottom primary. now what do you think these classes are for? i would say that these class

More:what is aliexpress dropshipping

How To Add Color Swatches To Your Shopify Product Page

All- everyone Christian here- Did you know color swatches can increase conversion on your product page? It just makes it visually easier for customers to scan your product page in this video And want to teach you how to add these. On the Dawn theme: Dawn is an awesome new Shopify theme. We've already done a few videos on this, so if you haven't checked out our other videos on the darn thing, you can do so right here Now. something that's missing from this theme is the ability to have color swatches in the actual product page. Jordan Digital has come up with a way not only to add these but add images for patterns. So shoutout to Jordan Digital for this guide that we're going to follow today. So let me just show you real quick. here We have a product that we worked on our last down video, which is the High-waisted airlift leggings, And, as you can see, here we have the size bubbles- So small, medium, large- And then we have the color ones- black, white and bronze- And, as you can see there, just like the same default selectors right as the size ones. So you can see black, white, but you can't actually see the color. You see it by text, essentially. So the first thing that we're going to do is change a little bit of the code in the back end. So there are two things that we're going to change: And the main product, that liquid file, and then the base dot CSV file. So let's go into that right now. We want to go to our theme here, click on actions and then edit code, and then we're going to find the main product, that liquid. So I just type an oops, main product at liquid, which is this one right here, And then what we want to do is search for this piece of text right here. So what I did is I think I just typed an option, that position, and I was able to find it pretty quickly. So I'm going to click on Command Control F so we can search for text and type that in, And then here we have it. So it goes from label to label And we're going to delete that and actually add some new code. So we're going to replace it with this right here. So when you copy this and then just pasted and save, and then the next one that we want to do is go to the base, That's a CC base, And then in this one, all we're going to do, we're not going to delete anything. We're just going to add more code to the bottom of this doc. So when you copy all this and we're going to scroll all the way to the bottom, paste and then click Save. Now, before we move on, I just want to say we have many of those. My name is Christian Pinion, one of the co-founders here at Bat Branding, or, an E Commerce Growth Agency That specializes in helping clothing stores grow and scale profitably online. We drop new videos every week, so make sure that you hit the subscribe button and turn on notifications, Okay, So next step, after adding the custom code, is to create the Medfield. So let's go into our settings to create those right now. So we're going to go to things and then you scroll out to the bottom and you'll see a filter right over here. And then, for this partikular scenario, if you're following along some of these videos, you know that we've done a couple of things with Medfield, but we've done a lot of things with and the products section, right. So this: in this example, we're going to add variant definitions. So we're going click on variants And then in here we're going to add the finish in the first one. So that's going to be color. So just to color and then the namespace and key. we're going to change it to say: color swatch. There's to be that way so that it works well with the code that we just added. And then, on the content type for this one want to make sure that we select color. Color will allow you to just do the full spectrum of colors And you can also add the hex code, So we have a very specific hex code for a special product. Then you can just add that hex code right within the product variation. We're going to click Save on that. But now we also want to go a step further and we want to do images. So there may be some products that are not just as simple as black and white. So have an example of a flannel shirt, Right? So flannel shirts have just designs, right? Sure, It may have a main color, like a red or white, But we also want to appreciate some of that texture and some of the design, Right? Oh, that flannel shirt. So what we're going to do is we're going to do a different definition and we're going to call this one image and then it's going to be image that swatch, And then for this one we're going to do a URL when to keep everything else the same: click save. yeah, Hey, hey, hey, hey, hey, hey, hey, hey. I want you add a little secret. We're using a tool called triple well for all of our clients, And this powerhouse of a tool allows you to see the lifetime value of a customer at 30,, 60, in 90 days. But what we're most excited about is the estimated action of customers. Imagine being able to send out emails or even running some ad campaigns to customers who are actually likely to buy from you a second or third time, And actually knowing when to send out these marketing messages. This tool is super, super powerful. Allows you to connect everything together in one place, one dashboard, so you can grow your business a lot easier. So make sure you check out the description link below. All right, So now that we have the custom code, we've added the meter fields. I think what we have next is to actually add some products with those swatches. So let's go to product and let's go add a product here. The first one that we have is going to be a men's short sleeve perfect t shirt, And I do believe I have some clips, some images, So let's just add these to upload. Let's make these $10 and then this product has options and we're going to do color and then let's do black, blue, white, Let's just add some quantity so it doesn't show a sold out. click save. All right, then let's click on, let's just activate that product on our store and then click on View so we can see how that looks right now. So black, blue and white. So, as you can see, nothing has changed because we haven't necessarily assigned the matter of Fields right now. So we have the custom code in place but we still have to assign the matter fields. So if we go back over here, you'll see that right here. we have all the old materials that we've added, some some of our previous videos, but in order to change the metal feel for the variance, as you can see, they don't show up here within the main product page. You see complete the log, you see the size chart and all the other things, but you don't see the actual color and image that we just added, And that's because we have to go individually into the actual variance. So you click edit here and when you scroll down you can see the matter fields for image and color right here. So for this partikular one we have black, so we don't have necessarily any hex code colors. We're just kind of winging here. But black usually is right over there in that corner. Click on Save and then in blue- we're going to do somewhere along there, Alex, Nice save And then white- it's going to be on the other opposite corner of Black. Click Save, All right. so there we have all the color swatches selected. We're going to go back to our product page and refresh that And, as you can see, now we have the circle color swatches with the black, blue and white Looks very, very nice. Now, the next example that I want to give you is to do that kind of like a final design type shirt and seeing how that looks. So let's go and go back over here, add another product, And this one is a poplin long sleeved button down shirt, And do believe I have a couple of images for that, maybe just one- and then let's do this one $10 as well, Very cheap shirts. This product has options. We're going to do color as well. Now, the colors are allure, blue and being blue, as are a couple of quantities here, And then let's click on edit. actually, Let's say first: hey,

More:THE ULTIMATE 5 BEGINNER NICHES ($50,000/Month Min!!) | Winning Product Dropshipping (Shopify)

How to change Shopify Header and Footer Color with Nav Color for web and mobile, no coding. Debut

hey guys, thanks for tuning in. today I'm gonna go over Victoria of how to change your menu and navbar color from the original white and the beauty into a different color of your choice, along as changing these black nav bars into white or any color of your choice. also along would have come with the footer. the footer will also be a different color and will also change the mobile theme to make sure that it all is also matching, along with a matching drop down with the little hamburger icon. make sure the footer all matches. so it's a 1 unique theme. so let's get into it. it's not gonna be a long tutorial. it is no coding required, it's just a copy and paste. so once you open your Shopify theme, you want to go on the bottom left to go to online store, go to your themes and then go to the view theme and hit on actions and then go to edit code. once we're in the Edit code, you want to open up in the assets folder. it's going to be called theme as CSS. scroll down to the all the way to the bottom of this code, the very bottom of the page, and we're gonna copy the code that's gonna be in the bottom description. so we're gonna hit ctrl a, ctrl C, so we can leave one space, just an enter. go down one below ctrl V and now that pastes it all the way from the line 871 to all the way down the bottom. hit save. as soon as that saved, we can go back to online stores. go back to the view theme, customize it and we will now see that it's going to be that bluish color that's in the one in the background color. now I'm gonna show you guys how to change the actual color. if you don't want the blue, so go to Google or in the link below I'll put this HTML color coders comp. you can choose a color that you want. so let's say you want purple, yellow, whatever it is. just choose the car that you want and right here we'll have a hex code and it's gonna be a hash tag and it's going to be a certain verse on: let us combine. so choose a color and choose a code or color that you want, copy that code and now decide where you want the color to be. so if you just want the header to be that cutter, it's gonna be site header with mobile and then just the regular header, site color. so you'll change both of these to that code that we copied from the internet or from HTML code color coders. so now we have both that on that right. so now if we change that that goes to change this color to only Jewish, let's go back, let's go edit code. we'll go all the way down through assets, all the way at the bottom. now let's find this. so it's gonna be header, site header. change that to this, make sure there's only one hash tag, and then same thing here, the navbar, boom, boom, and now we'll save this. and now that should make it in that goldish color that we picked before. so let's go to customize. there you go. now you have that gold color with the white background. same thing for mobile. now it's also gold gold, but the bottom footer is also in that old original clothes. so if you wanted to change the footer as well as to a different color, if we go back to the online store, go back to edit code, go back to theme, scroll all the way down to the bottom now, right below the header, so you see header, site header, header, mobile, you see footer, and then you'll also see this Shopify section below background color. so these two are before your footers. so if you wanted to change the footer color to that gold one, you'll just copy that code here and then here as well. now, if you have a very dark color, as is, and you want to change it, the nav. so, for example, if you wanted to go ahead and change its Rebecca, you wanted to change these where it says men's, women's hats, the nav. if you want to change these to, let's say, purple, white or whatever it is, it would be here, site Napoli. so this is originally to wipe. and then these, the icon search, icon, cart, icon login. an icon hamburger is all right here. these are these icons here. now the hamburger stands for this hamburger. then you have search, log in and then cart. so if you want to change these to move white or blue or whatever it is that would be color here, you can, you can type in the color, but I recommend going here, choosing the clothes that you want and then copying and pasting it here as well: [Music]. and then, one more thing that I want to show you guys is the site header logo. so originally this is a black color. if you wanted to change it to any other color, you would change that here. so again, once again choose a color unless you have your own picture uploaded. this just default the default one uploaded. but you will have a picture uploaded then it won't change that picture. but if you have the title from the default setup you can change that color to what you want. let me know if you guys have any questions down below. I will list all the links below and as long as the code and that. thanks for watching tok to you guys soon.

A Comprehensive Guide To Shopify's Color Option Hex Codes.

hello everyone. my name is indeed, as you know, here, i'm sure, about how we can customize our theme and create new one from scratch. so far we have created our theme and completed, so today i am going to show how we can use variant images and periods, variant colors. so before any day, let's start in that one. so first i'm going to do: let's see, we are in our theme. so let's check. it's my where i'm logging. so i'm going to hit shopify sophia team, am i? so let's see, here we are logging login. okay, so we got an update for supervised cli. so before that, let me show how we can do that. i'm going to close this one and a browser again. now let's run cmd and then i'm going to add gem update shopify cli and enter. so this will [Music]- update our shop, uicli. okay, then let's update it. let's exit from here and then let's go to our visual composer. what's going on with me? okay, who am i? okay, so we got logged into our shopify and team app- uh, under my shopify. so let's do [Music] chain zone, this thing. i'm going to open this one with show paper theme server, not synced with my live store. so what i'm going to do? so, first of all, i'm going to open my shopify theme edit customization by clicking this link or, for preview, we can check this one over here on local one, and that's for live development url. meanwhile, let's open opening. let's do one more thing. i'm going to open my shopify schema setting more schema, and here i'm going to add one more schema. so that's a typography. that's for search. i'm going to add here one more name. let's call this one products. i think we got products already. let's find out. okay, so we got already our product setting. i was created while we are working infinity scroll, nope, while we are working on the switches thing, so let's say space switches. so what i'm going to do, i'm going to add one more setting here. let's call this one type. type will be our text area, [Music] and then already already will be uh, colors. the next thing will be labeled. let's just call this one also variant color and save this one. okay, then in products, we got our variants, so [Music]. let's see what we got, which options we have you got in this option. so what i'm going to do, i'm going to pick this one and new, paste this foreign. i'm also going to say this: um, let's check color codes. i'm going to pick from material css: yep, this one. so for blue, let's copy this. for gold, i'm going to copy this snapchat, this silver one, for i'm going to. let's copy this one. i'm not going to use this, okay then. so that's done, i'm going to copy this and do this one. let's change this one to switches. nope, that's not right. one. let's check this one over here. so now we got our colors. so what i'm going to do, i'm going to, first of all, let's bring our options or not options, our settings, this one over here. so for that i'm going to call assign, let's see this one- color array, node, color, let's say colors equal to sign, settings, dot, what was the name of this? and next thing i'm going to say escape and then strike new line, because we got new lines here, so i'm going to remove them. and the next thing is split. i'm going to split by by this comma, first, by coma. the next thing i'm going to say empty variable. let's call this one value equal to nothing, and one more for name. so next thing i'm going to do, i'm going to look through this one. let's save for and for, and four, let's say here: color property and colors. the next thing is one more assignment, or we can do it directly, let's do it. no, we need that one, but we also need this one too. oh, opt. and in this area, let's call color updating by codes. i'm also going to say escape here also okay, let's, let's save this one as it is followed by me. so what i'm going to do: let's check if color of object is zero is equal to what we got here. let's see option value is equal to value and down case and this. let's make this one also down case and escape to. let's say if- and here i'm going to use this one as a immediate over here- style is equal to background, color is equal to this one, so let's update it. let's check this one now. okay, there is something wrong over here. let's check this one bit, three, okay, let's see what we got. now we go below what you don't get anything over here. so let's check now the water thing and let's see- first we can do that one. okay, so we got no problem. okay, so this should work now. okay, now it's working. so we got blue here and blue also here. let's black, so okay. so instead you can use this one as you like. like, if you want to add an image or something like that, you can use that one too. hope this will help. so [Music]. that's all for today and we'll see you next time. so till then, keep coding, be awesome.

How to Change Theme Colors and Fonts on Shopify

welcome back to the channel, guys. if you are new to this series and you have been following along from the start, make sure you click that top link in the description to sign up for a shopify free 14-day free trial. you don't even need a credit card, which is great and you can build right up to this point with us. now, if you are new, make sure you check out the playlist as well, because this is going to be a full playlist- start to finish from creating the free trial with my link, exactly how you guys would see it, all the way to the point where we are now, which is going to be continuing to build it. so i notiked i didn't do this before because i was just starting from the top down in building, as i said, i do in every video. but i figure some of you guys might have some questions as far as changing the theme settings and how to change these different fonts and colors and stuff like that. so we're gonna go ahead and just show you how to do that in this video and hopefully it helps. it should be a short, quick, three or so minute video that will help you guys in that aspect. so in the bottom left-hand corner of your screen. you can just go ahead and click theme settings and then this is where you're gonna notike. you have pretty much everything that you need. so you'll have your colors, your typography, your favicon, your cart, social media, price format, checkout and theme style. so if we start with the top, you have your colors. you can go ahead and change these. this is where copy and pasting those little color codes from photoshop and stuff that i've showed you in previous videos- this can be good to kind of go in and create a perfect website. so in my case, i actually want to change this first color because, you'll notike, it's a little bit lighter of a color and i think i just want to run with the same color that's on the background of the header. so to do that, you just copy and paste it in and it'll change. you'll see here now they look like that. i like how that looks a little bit better. so, for example, that's how you would do that and you can go ahead and scroll through and change the different colors of different things you might want to change. we'll probably circle around back to this in the future when we start working with our checkout pages and our actual product pages themselves and then you get your typography. this is where you can change your fonts. i'm actually a huge fan of maserat's bold font and just a fan of this font family in general, so i'm just going to keep that because i think it's very simple and professional and it works really well for this type of thing. this is where you can select to capitalize titles and menu items and stuff like that. uh, if you do not want these all capital, then you can go ahead and change that here. this is where your favicon is going to be. i'll go into that in a future video and then all your other different things here. but we're mainly just focusing on the colors and the typography in this video. so this is where you're going to go ahead and change those and modify it to your liking. don't go too crazy in here and change this to some weird font. make sure you keep it something simple and professional that everybody can read on every device, because i know some people will try and use some weird cursive font and that's not going to work well on your website. but if you did enjoy this video or it helped you out at all, make sure you just hit that little like button down below. let me know that it helped you so that i can continue to make these videos. if you haven't already started and created your shopify website, you're just trying to learn- make sure you click that link in the top description to sign up for your shopify 14 day free trial. of course, comment anything down below you guys might have questions about and i'll try and help you guys out and hopefully i'll catch you guys in the next video. uh, showing you and teaching you just a little bit more about how to improve and create a better shopify website. [Music]. [Music] you.