ฝัง
- เผยแพร่เมื่อ 28 ส.ค. 2024
- In this tutorial i will show you how to resize product title size on product page in Shopify to change the title font size for dawn theme or any theme on Shopify to either make it smaller or bigger for your store.
The size of your product title on a Shopify product page is incredibly important, It’s the first thing that potential customers will see when they come to your store, so it needs to be big and bold enough for them to notice.
That’s why it’s essential to resize the produce title size on your Shopify product page and if you don't do this, then customers may not even realize The key points on the product title.
By resizing the produce title size on a Shopify product page, you can make sure that potential customers can easily find and identify what products or services are being offered in your Shopify store.
Code :
h1.product__title {
font-size: 30px;
}
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this TH-cam channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#resize #title #shopify
![พบรัก - INK WARUNTORN x FELLOW FELLOW [LIVE SESSION]](http://i.ytimg.com/vi/1VonHhP6_Y8/mqdefault.jpg)
For an updated code you can place this in the custom css
.product__title > * {
margin: 0;
font-size: 30px;
}
what about the featured category product title on homepage?
I believe that can be changed with in the theme, for example dawn has heading size, small, medium, large.... if not try this
.title, {
margin: 3rem 0 2rem;
font-size: 40px;
}
Thanks for the updated code.
This really works for me. Thanks alot.
Please share your email address or contact information to get support in future.
Thanks for responding to my request Anas!
You’re a man of your word
You're very welcome, and will always be.
Cheers
Thank you so much! It works the code and your process. I did not find mine to number 813 but the very last of the .css. I copy paste your code provided and set to 20px and all good! Now I want to know how to make the details of products more smaller :)
Can you make a video of how ta make your price bigger ?
Hi I love the videos, I just tried to change the size and it does not work! I am using 12.0.0
Hi, thank you for your helpfull video's! I recently starter with Shopify and learning a lot new cool things. Can I also resize only text of the product description? In our Shopify theme > settings>Typography here I can resize the headeing, body and navigation.
You're very welcome, you can try on the product listing in dashboard and change the part of the text you want to another format like heading 3 or 4 but that wont always work perfectly.
I just noted this as a separate video and i will work on it.
Cheers
Perfect can you do a video tomorrow or this week on how to add a shopify search bar for a website the advanced looking one for the header?
Great stuff! Can you do a video on how to change the cart icon in the payment information page? Main page and check out icon are good but can't seem to change the icon where customers input their payment info. Thanks for content!
For those who were not reflected in dawn 12.0.0, I was able to do it with this code that others have commented on. Thank you!
Please give me code
@@phonkfunk Try this code in the custom css.
.product__title > * {
margin: 0;
font-size: 30px;
}
I love your videos!! Can you do a video showing how to create a clickable banner with different images for desktop and mobile? I've seen both your separate videos but don't feel confident enough to combine the coding... Thanks so much!
Will you do a video on how to reduce the padding/margins/white space in shopify sections
Do you know how to change the font size for the main page headline? I'm building a shopify clothing boutique in Dawn. The headlines on each page for example "Tops," "Long Sleeves," "Short Sleeves" are the same size as my logo and it competes with the logo. I do not want to make my logo any larger. Is there a way to make these headlines smaller?? Thank you for any help!
Hi Anas, can you make a video on how to make the title page bold?
im giving you a like
Very helpful, thanks :) Could you show me how to alter images and text layout on the product page? I would like the image to be 50% and the text to be 50 % so the margin is in the centre. In Dawn, the image is past the centre line and there is a lot of padding on the outer edges, I would like less padding so the image and the text are spread out over the whole width of the page. Thanks in advance :)
Do you have a video on how to add a text box right before the "Add to Cart" button? I would like for customers to add information to give me for personalized items.
Thank you for the video! Do you know by any chance of how to make a home page Rich Text full width? Thanks again!
Can you pls do a video about editing collection grid size on dawn theme using code... Thanks in advance.
Hey, If you mean resizing the product grids then i already made that video and its on my channel.
You're very welcome
Cheers
@@OnHOWGuy yess brother watched the video...thanks a ton ❤️
Thank you @OnHowGuy I am currently using Dawn theme and worked for me. How can I also reduce the title size on a "Featured Product" in homepage?
Could you do a video how to create a 2 line title for products?
Hi, how do you resize the images on Featured Products, Collections on Shopify Dawn 14.0 without Apps?
shopify craft theme - please let us know how to get different font size on home page title and collection title and product page title. if i make the home page title font bigger, it becomes big in all the pages including the collection pages and product pages
This doesn't work for dawn 14.0.0
Bro, please make a video regarding how to limit product titles on the Shopify store homepage
Bravo!! Can u pls teach how to make original price size much bigger than final price? thank u uuuu
What a pity, doesn't work Craft theme, though I followed all the steps as suggested.
why would you go to the edit code of the entire store instead of just on the Custom Css at the page of the profuct itself.
Because if you want to customize many things on your Shopify store that means you will be using many codes and try using many codes on that small custom css prompt in the theme customizer, Its not the best choice.
Cheers
its not working bro, what am i doing wrong
@OnHOWGuy CAN YOU MAKE A VIDEO ABOUT HOW TO CUSTOMIZE RESIZE THE PRODUCT IMAGES MINE LOOK LIKE PLAIN IMAGES & DON'T HAVE A THUMNAIL & PROPER SLIDEHSOW HOPE THAT MAKES SENSE
Hello,
Thank you for your video
Can you make a video
« How to reduce the H2 Title in Shopify » my theme is Refresh
You're welcome, i'll work on it.
Cheers
@@OnHOWGuy Thank you 😉
@@raycon8 You're welcome
HI, how can I Change Product title size and length on grid view or List..
It's working brother I am using Dawn theme
I want change font size I put code but list ends and 1600 }
did Not work for me. Craft theme
I had no success with this. I checked all my codes, three and four times and there was no code listed for changing the product title, as per your instructions. I am using the new Dawn. In addition, my code lines did not stop in the 800's, it was in the 1000's. Your instructions were very clear, and I appreciate your help. I am doing something wrong?
try this code instead brother ->
.product__title > * {
margin: 0;
font-size: 25px;
}
@@hurized9868 Had the same issue with the other code snippet, but your code worked. Thanks
Spotlight theme users:
.product__title > a {
font-size: 30px;
}
Well done for your well research work. Please I notice that all products aren't appearing on the General of the shipping and delivery section of my Shopify account, what do I do?
Thanks, Probably the inventory is set to zero or inventory not tracked for those products thats why.
Cheers
@@OnHOWGuy thanks
@@raymondagali4601 You're welcome
Please how i can resize the price?
I just noted that video and i'll make it happen.
Cheers
I notice that in section-main-product.css last line is 1600 and not 813 as you mentioned. When i paste the code and change the number it dosnt work, any idea? Thanks!
Well that was a mistake, i shouldn't mention the number because each theme has a different code length.
Just make sure you paste at the bottom of the css file.
Cheers
@@OnHOWGuy mine too not working, still the same size
@@hmohamed5662 What theme are you using ?
@@OnHOWGuy sense
same here, it's didn't work for me
How do I resize and make the product name more bold on the home page?
I went to that CSS file but the entire code is on one single line, not 813, and I notice this for other files in liquid. Do I need to correct this? how?
How do you change the size of the footer "subscribe for updates"
thanks ❤❤
Dawn V11 didn't work. How can I solve it.
could you show have to change color on product titel?
Thanks
is the product title color editable ?
how to change featured product name and price size on homepage? please
If you mean "featured products" title i got that video requested yesterday and im working on it and for price size on product cards i just noted it too.
Those would require a custom code and im afraid you might have to wait for the video as i dont have it in hand now.
Cheers
@@OnHOWGuy thank you. your video help me so much!
i use the same method to make it bold .
product__title h1,
.product__title h2.h1 {
font-weight: bold;
}
You put two class names and one without the call (.) but that should work and glad you figure it out.
Cheers
Dawn v11 didnt work :(
Didnt work
not working
doesnot work for Sense
Hello, I'm using Dawn theme v10 and this didn't work. Not sure why 😵💫Someone commented below to input this code a different code in the custom CSS:
.product__title > * {
margin: 0;
font-size: 30px;
}
but it didn't work as well. Anyone who can help me with this?
This code works in dawn v10, click customize theme then goto the settings, scroll down and input in the theme custom css, remember to change the font as needed... get back to me if it doesn't work for you
@@jnojules397 Hello, it worked now! For some reason, the Save button was grayed out when I put the custom CSS, so I have to manually make changes to the theme to save it. Thank you for reaching out! I was stuck with this for a few weeks 🥲
doesn't work on mine : (
This works tough!
.product__title > * {
margin: 0;
font-size: 30px;
}
@@asmbok Thanks to you, I have solved the problem. Thank you so much!
❤
❤❤
Ah, to bad, it didn't work!
I dont have the line section-main-product.css then what do I do
It Didn't work
Not working for me, copyed and added the text in section-main-product.css. (Dawn theme)
Didn t for me too added the code to the last line 1601-1603 didn t work. if only he could reply to advice what to do to reduce the size in this case
update!!
the boy who add the code thnx it worked
26/7/2024 still working in down theme
yours didn't work for down theme 15 anas
the code
v
v
v
.product__title > * {
margin: 0;
font-size: 30px;
}
not working for Refreshn theme @onhow
DIDNT WORK FOR ME.
its not your fault tho OP you explained it perfectly i just have alot more lines of code not just 813 so im not sure if thats a problem.
i pasted the code but i still dont see a change on the products im trying to make them smaller on the menu not when i click the product
@@dariusgiurar5435 are you struggling with resizing the product title?