Hi there!
I’m trying to make a couple of changes to my Product Featured Info section.
- I would like the code so I can change the heading text to Helvetica Neue Bold
(see screenshot Heading font change/Heading font change example).
- I would also like to move the the entire section below the SHOP NOW button so there is a white gape before the section starts (see screen shot section placement change).
My url is: https://5jg3309ygkaklrdc-54993551588.shopifypreview.com
Screenshots attached.
Hi,
To fix the issue, please follow the steps below.
-
Go to Online Store > Actions > Edit Code > Under Assets > Click theme.scss.css
-
Copy & Paste the code below.
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .product-single__title {
font-family: "HelveticaNeue-Bold", "Helvetica Neue" !important;
font-weight: 700;
}
.shopify-section {
margin-bottom: 60px !important;
}
To change the space between sections, please change the margin-bottom amount up to your needs. I set 60px in the code above but it may not enough or too much space for you.
Hope it helps.
Thank you for getting back to me. I added the exact code you sent through and I don’t think this is right. Please see screen shot below.The text I’m trying to change is a h6 heading. Can you please help?
Hi,
If you want to change the h6 only, please use the code below.
h6, .h6 {
font-family: "HelveticaNeue-Bold", "Helvetica Neue" !important;
font-weight: 600;
}
The font-weight can be 600, 700, 800, 900 for bold style.
If you were unable to change it, please let me know.
Thanks.
Hi PeopleVillage should this code be attached to a section?
Add the code to Assets/theme.scss.css
Please see screen shot in regards to section. I have underlined what I mean by section. You have given me the code but not a section.
I want to change the text in the product feature section only. Can you please find out the
shopify-section number and then send me the full code to change just this section. I have added my url in my first message.
If you only wnat to change the “Why ADVENTURE 1” title, you can use the code below.
#shopify-section-16535743985ff8b62f h2.h3 {font-family:'HelveticaNeue-Bold', 'Helvetica Neue'!important; font-weight: 700;}
or add the code below right after the text-align: left !important
font-family:'HelveticaNeue-Bold', 'Helvetica Neue'!important; font-weight: 700;
It will be as below.
#shopify-section-16535743985ff8b62f h2.h3 {font-align: left !important; font-family:'HelveticaNeue-Bold', 'Helvetica Neue'!important; font-weight: 700;}
Hope it resolves your issue.
Sorry, I think I’m confusing you. My last message was to show you what I meant by section number. I only want to change the weight of the text underlined in the screenshot attached. This text I want change is in the product feature info section on my homepage. Can you please figure out the section number for me then give me the complete
code so I can solve this. thank you for your time.
It’s
h6 .product-featured-icon-heading {font-align: left !important; font-family:'HelveticaNeue-Bold', 'Helvetica Neue'!important; font-weight: 700;}
You can change the font weight.
If you want to change the font size, you can copy the code below and make change.
h6 .product-featured-icon-heading {font-align: left !important; font-family:'HelveticaNeue-Bold', 'Helvetica Neue'!important; font-weight: 700; font-size: 18px;}
Hope that’s what you need.
Thanks.
This solution you provided did not work.
I’ll find another source.
Thank you for trying though.
1 Like
@Timstar
yes, please try this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.product-featured-icon-heading {
font-family: 'Helvetica-Neue-Bold';
font-size: 16px;
}
1 Like
@Timstar
its my pleasure to help us
I just noticed that I have a 2nd Product Featured info section on my product page. Can you please give me the code to change the font back to how it was on the product page but keep the changes to the font on the home page.
I have attached screen shots to show you what I mean.
1 Like
@Timstar
oh sorry for that can you remove last one or update this code
.template-index .product-featured-icon-heading {
font-family: Helvetica-Neue-Bold;
font-size: 15px;
}