haley81834952 Posted June 4 Share Posted June 4 I've tried multiple times to make the title of a product thicker (from 400 to 700) but I can't figure out how to change it. Any ideas? If I could at least assign this style to be a "Header" instead of "Paragraph" that might work, but I can't click on this text in Site Styles mode so I don't know how to re-assign the Product Title. Link to comment
Lesum Posted June 4 Share Posted June 4 @haley81834952 You can modify the product title font under Site Styles > Fonts > Assign Styles > Products:List & Product Detail Page If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
haley81834952 Posted June 4 Author Share Posted June 4 Hi Lesum, thanks for your response! I already have the titles of my products set to "Header" but they still don't look like the Header font style. My Headings are set to 700 weight, and the Paragraphs are 400 weight. Link to comment
tuanphan Posted June 6 Share Posted June 6 Can you share link to a product? We can check problem easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
haley81834952 Posted June 10 Author Share Posted June 10 Yes, sorry my website was down for a bit. Here is a link to one of the collection pages: https://onawhimm.com/costa-rica-collection If you click on an actual product you'll see that the product title is in "Header" font (so it is thick- 700 pt), however, on any main display collection page the product title is in "Paragraph" font. Link to comment
Lesum Posted June 10 Share Posted June 10 @haley81834952 Add this code under Custom CSS to change the product title font on collection pages .product-block .productDetails a.product-title { font-family: var(--heading-font-font-family) !important; font-weight: var(--heading-font-font-weight) !important; font-style: var(--heading-font-font-style) !important; line-height: var(--heading-font-line-height) !important; letter-spacing: var(--heading-font-letter-spacing) !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
haley81834952 Posted June 10 Author Share Posted June 10 It's not currently working.. I pasted the text as you had it, but that wasn't working so I made some changes and added the actual information to match what my site has set as a "Heading" .product-block .productDetails a.product-title { font-family: var(helvetica-neue) !important; font-weight: var(700) !important; font-style: var(normal) !important; line-height: var(1.4em) !important; letter-spacing: var(0em) !important; } This also didn't work. What do I need to do different? Link to comment
Lesum Posted June 10 Share Posted June 10 @haley81834952 It should have worked. Maybe you added the code wrong. Please check again. The changed you made won't work. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
haley81834952 Posted June 10 Author Share Posted June 10 Here's a screenshot showing the code I added (copy & pasted from you) and then showing that it hasn't changed the product title. Any other suggestions? Link to comment
Lesum Posted June 10 Share Posted June 10 @haley81834952 Please check the live site. It's working. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
haley81834952 Posted June 10 Author Share Posted June 10 Ahh okay coo, thank you! I see it on the actual collections page, but I do not see it updated on the home page. Is there some more code that is needed for the home page? Link to comment
Solution Lesum Posted June 10 Solution Share Posted June 10 @haley81834952 Homepage has summary blocks, which are set up completely differently from the collection pages. The previous code was only for collection pages. Here's the updated code for both the homepage and collection pages: .product-block .productDetails a.product-title, .summary-block-wrapper .summary-title a.summary-title-link { font-family: var(--heading-font-font-family) !important; font-weight: var(--heading-font-font-weight) !important; font-style: var(--heading-font-font-style) !important; line-height: var(--heading-font-line-height) !important; letter-spacing: var(--heading-font-letter-spacing) !important; } tuanphan 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
haley81834952 Posted June 10 Author Share Posted June 10 This last one worked perfect, thank you so much!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment