Shopify Custom CSS How to Change Section Colors and Fonts

Hey everybody, welcome to this new video of Tech Express

In this tutorial, let's take a look into how we can change some custom colors, phones, and more stuff using Shopify

I'm going to be using an actual AI, artificial and challenging chat of Bing

so I can do this more faster, and you have to worry about to edit codes or custom C-E-D-S file

because this might be overwhelming for a lot of people. So the real first thing I wanted to do is to go

into my Microsoft Edge, so I need to download this browser, otherwise it's just actually

won't work. So once I downloaded this, I open a new tab here

As you can see, this is like the very first pod of the tab. I focus into a LivePod

And here as you can see, have the Bing Chat, so I just click here and now this one should now

be now opened. So in order to continue, what I wanted to do is to leave this like that, go back into my Shopify

Here, let's focus into my online store. So in here, into my online store, what I wanted to do is to focus into my current theme

but I have this already been enabled. Let's go into customize. And now into customize, we are now into the editor of our actual stuff

So it says, browse our latest products, for example. So let's say that I'm going to delete this, and let's go for Welcome

Welcome to this new store. And now I have the heading and this heading size

large, small, medium. So let's say that I wanted to change the fund of all the features that appears in here

In order to do that, what I wanted to do is to go into the theme settings

So into the theme settings, I can focus into the typography here, and I have a fund

So here into fund, what I can do is to change for, let's say, for example, change

And instead of going with these new one, I'm going to go. for let's say month and I have this one so I click the up I hit into select and absolutely all my

website is going to be having now a new fund so we do have the fund assistant here and the body

of course and the types I wanted to do exactly same things I'm going to go and type my new

system fund which is actually this one I just paste that here select and we actually good to go there we go so as you can see it looking now really really great So let say that I want now to change the colors here

So I'm going to go here into colors, and I have the primary colors here to edit here

So the solid button label, let's say, for example, this one is white, so I can change this for something more interesting

The accent color, number one, we can change it for something like this. The accent gradient color, let's say, for something like that

There we go. And there we go. The gradient is actually looking great

So once we have successfully done that, what I wanted to do is to, of course, save my element so I can later on

I'm going to keep now into save. There we go. Here's my saved change it

So I'm going to go here, and instead of background number one, let's go for the accent number two

And as you can see, it's actually working. It's looking really, really great. So what I wanted to do now is to take a look into how we can edit

the actual C-Tveless files. So that's the reason why we wanted to use

the color scheme here. So first of all, I'm gonna leave this into Accent to Number One

There we go, it's looking for it really great. I want to go back here into my theme settings

And here I'm gonna go with colors. And now, as you can see, we have a lot of stuff here

So I can go and scroll all the way down and try to find the custom C-Dvel-S files

Now, this add custom styles to your entire online store. We wanted to paste here the actual custom style to my entire online store

So to do this, to edit this, I wanted to copy or paste and create a custom C-D-S files

So what you can do is to go into the W3Schools.com, and here this one should be like telling you

showing us how we can specify some different funds to three paragraphs. So we need to tie

let's say, for example, P number one, fund family, what we wanted to do, and we can try this

ourselves so we can start to do this by our own. And this is into the preview mode of how it's

going to be looking. If you don't know or you don't want to know how to do this manually, we can do

this automatically This is why we are using Microsoft Edge So here into our chat our artificial chel your chat let go for Ask Me Anything Let go for create a S custom code to make my fund

my actual, let's go for my website, fund and color, look with times

I'm going to open this, Times, New Roman, and red color and my whole website dot

now what's going to happen here is that the actual chat artificial intelligence

is going to be generating in custom C-D-S code snippet that we can use

to edit our actual fund and the color so as you can see what I just needed to do

is to copy this element and here it says you can add this code to your website

CS file within style tagged in the head section of the HTML file

this will apply the fun and color to all the text within the body of your website

so let's try to actually copy all of this code and let's see what happens if I paste that into the actual space

that we have the custom double S file so I can go here once again into custom C2

If you don't find that once again go into theme settings, scroll all the way down, custom TWS, number one, I paste the body typed, and there we go

So as you can see, these actual Times New Roman color, it only changed for these actual email section

So what I wanted to do is to try to delete this fund element and see if this one actually does anything

here but I cannot see like there's like a lot of editing stuff so we asked the actual chat how to do

this into Shopify so it says go into online store go into themes go into action edit code so this

is exactly what we actually going to be doing we wanted to go back here into the exit go into my online store focus into the three dots hit into edit the code and then we wanted to look out for the template which is actually it in here

We have the layout. Now find the theme that you wanted to edit and click actions, edit code

So into the asset folder, click on your theme made T-WS file

This is usually named something like theme liquid or thimber liquid. So in our case, I believe it's available here

It says theme liquid. So here, I'm going to go back here, scroll to the button of the file

and paste the custom C2S code that I provided earlier. So I'm going to go into my upper side

I copy this element. Other solution that I can give you is to go into the theme editor

And here into the theme editor, once again, just scroll all the way down. I'm going to just wait a few seconds here

I have the theme settings. I scroll all the way down into the custom C2S file

I paste this code. So this code once again was provided by the actual Microsoft Bing artificial intelligence

And this one told me to just copy and paste that information in here. And I hit now into safe

So as you can see, these actual Heather has the Time New Roman code

I screw all the way down. The colors, I mean the actual prices and this actual element appears into Times New Roman

Why this is the other elements does not appear into Times New Roman? because this one is a heading, this one has more elements that we can do this manually

so this one should not be added automatically when you need to change this manually

But with that being said, guys, we are not ready to get started. We are not ready to edit more stuff here into your actual custom thing settings

which I think is like more faster to go into the typography and change the actual fund

for the one that you're actually looking for. In our case, it was like the Times New Romans

to go over four times the rub on and click here and go into select and voila so much faster and

much easier to do to do the process like really really fast so with that being said guys we've

now reached into the very end of the video so don't forget to like and subscribe to the channel guys

if you don't want to see more toes of how we can edit more stuff here into your customed

shopify store thank you so much for watching the video guys and well with that being said i'll see you

on the next video