Up next in 10
How To Change Menu Font Size On Shopify
3K views
Apr 18, 2024
"Learn how to customize the font size of your menu items on Shopify with this straightforward tutorial. Whether you're aiming for a sleek, minimalist design or a bold, eye-catching aesthetic, adjusting the menu font size can make a significant impact on the visual appeal and usability of your online store. Follow along as we guide you through the simple steps to modify the menu font size within the Shopify theme editor. Discover how to achieve the perfect balance between readability and style to enhance your customers' browsing experience. Watch now to take control of your Shopify store's design and create a menu that reflects your brand's identity."
View Video Transcript
0:00
How to Change the Menu Font Size on Shopify
0:04
Hey guys, welcome back to the YouTube channel. Today, we'll be taking a quick look at how you can get started
0:12
with changing the font size on your Shopify store. So let's get into it
0:17
Now, to get started with changing the font size on the Shopify store
0:23
you actually have to just log into your Shopify store, and this is not the only thing I'm going to cover
0:29
There are a lot of basic settings that people don't realize, and we're going to cover all of those
0:35
So just lock on to your Shopify store. Click on online store over here
0:41
And once you click on your online store, you will be able to see this little theme section
0:47
Now, you can have any theme applied. It really doesn't matter if you have one theme or the other
0:53
It is applicable on all of your themes. So you just want to pick out the theme that you
0:59
you are currently using and just click on customize once you click on customize the
1:04
Shopify editor will show up so in the Shopify editor you can see on the left side you have this little
1:12
theme settings so you have these three panels one is called sections one is called theme settings
1:19
and one is called app embeds so you just want to click on theme settings over here and these are the
1:26
overall theme settings that are applied throughout your Shopify store. If you make any changes to these
1:33
they would be applicable to your entire store. And a lot of people don't realize that this is where
1:38
you can basically set the tone of your website. Whatever color scheme you are following, whatever
1:44
icons you want, whatever media you want to add, all of it can be directly managed from here
1:51
So to change your font sizes, font types, just click on your theme settings, click on typography
1:58
And once you click on typography you will be able to see first off if you just want to change the font size in your header So if you just want to change it in the header you can just increase or decrease it from here So for example currently it at 100
2:15
If I move it to 125, it's going to obviously increase in size
2:19
I'm going to select my header, going to themes like so. So obviously this will scale up my font
2:25
You can see that the font size just increased. Let's drag it back down to 100
2:30
And you guys can see now this is at 100%. if I want to make it even smaller, I just have to scale the font to 90 to 80, so on and so forth
2:39
Now, after that, you also have your heading style. So you can click on change over here to change the overall appearance of your font
2:48
So you guys can see there are quite a few different options to pick out from
2:53
Let's say I just go with this one and select. Now, below that, if you want to change these sides of font
3:00
throughout your website. You can just scroll down and you have your font size scale for the body of your website
3:08
Now, this will be applied to your entire website. So if I increase it over here, it would be applied throughout all of the font in my website
3:16
Now, with your menus and headers, obviously the size of the header can also be impacted with your font size
3:25
So if you go ahead and click on your header and you scroll down, you will be able to see
3:30
the spacing that you have and the padding that you have this basically allows you to create
3:36
custom sizes for your specific header now if i go back into my theme settings and i go into my
3:44
typography and i scale up the font like this so i scaled it up to 150 and it looks good
3:50
because i changed up the padding of the website as well so if the header padding is increased
3:57
and you scale up the font a lot it's going to look fine Now, what to do if you want to change these little menu items
4:05
So you have your menu items and you can choose any menu that you want
4:11
You have a drop menu you have a color scheme but it might be a little confusing on how you are supposed to take the specific menu items and change the size of those
4:24
So this is just a little quick snap magic trick, and I just did this little quick thing where I changed the font size of our home catalog and contact section
4:34
So a lot of people wonder, can you really change that? People think you can't change that, but it's pretty easy
4:41
and what you want to do is you want to stay in your you know in your Shopify editor and you
4:49
guys can see this is what our Shopify editors like so we're going to go on to our home page
4:53
this is back to normal but if you want to change the size of this as well it's pretty simple
5:00
to do and I will show you guys exactly how but if you're someone that is not super into tech
5:06
this might seem a little bit difficult but don't worry we're going to walk through it step by step
5:11
So you want to hover your mouse over any of the menu items like your catalog, contact, or home
5:18
I will just do a left click and once I do that you will see the text will be highlighted
5:24
Then you want to do a right click over here and then you want to click on inspect
5:30
Once you click on inspect you will be able to see this dialog box pop up on the right side of your screen
5:36
Now when this happens usually you can't see your actual menu items which is
5:41
a little annoying but you have to just make do with it so once this dialog box pops up
5:47
you're going to scroll down and you will see this item called over here it says font size so from
5:57
your font size you can increase the font size it's 1.2 ram right now and you're just going to do a
6:02
double click or just select the one and let's move it to a 4 and if it isn't allowing you to change this you first
6:10
might have to increase the padding and the overall my new size for it
6:15
So you guys can see you have your text outline you have text decoration options You also have your box sizing line height So I will increase my line height first which is going to be converted into 0 And then I going to scroll down back into our font size
6:33
I'm going to make it 1.9. And you guys will be able to see a lot of information about every single item
6:41
So you also have body gradient. You have the letter spacing, font size, font weight, font family
6:47
so if you want to change anything you will have to change the values from here obviously
6:52
it can become a little difficult when you're reading all of this tiny little text if you're not
6:59
used to it but it can you know you do get used to it so if i want to change this you guys can see i
7:05
just change the size of this but i'm going to move it back to normal and for the header menu item
7:11
we are just going to select these like so you also have your
7:17
inline text so you can choose this and once this is selectable you're just going to enter your own
7:23
values to change the style and then you can just close it up and that is all you have to do to be able to
7:31
change you know the size of any of your menu items to change the size of your overall style on shopify
7:38
now i don't recommend this inspect method i think it's better if you leave it at the standard size
7:44
simply because if you're not careful with it, you can mess with other things as well
7:49
But if you're worried about that, you can just duplicate your Shopify store. So just click on duplicate over here
7:55
And then you can mess around with your store. And if you mess anything up, you can just recover back to your old version as well
8:02
So that is how you can change your menu. And there are so many other different things you can do with Shopify's editor
8:09
It's so powerful and so amazing. And we also have some other videos on how
8:14
you can build a individual product store and you can do a lot of other things on Shopify
8:20
so using their search and discovery tool and much more. So check those videos out as well
8:26
Make sure to leave a like and subscribe to our YouTube channel and I will catch you guys in the next video
#Computers & Electronics
#Home Improvement
#Online Communities
#Software