How To Change Font Weight & Size For 'Featured Collection' Headings

[MMast]

Thanks in advance!

I am looking to customize the 'Featured collection' heading(s) text to my liking that works with mobile and pc.

Example:

 

https://decemberschild.com/ 

password: dc

[PageFly-Amelia · Accepted solution]

Hello @MMast 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

/* You can change the value of 30px to the value you want */
.title {
   font-weight: 30px;
   font-size: 30px;
}

Copy

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[PageFly-Amelia · Accepted solution]

Hello @MMast 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

/* You can change the value of 30px to the value you want */
.title {
   font-weight: 30px;
   font-size: 30px;
}

Copy

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[MMast]

The font weight doesn’t work with the code you provided unfortunately

[TerenceKEANE · Accepted solution]

Hi,

What exactly do you want to do? The following code can change the font size and thickness. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

1) Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar.

h2.title {
font-size: 35px !important;
font-weight: 700!important;
}

Terence

[MMast]

Your code works as well but I’ve noticed that every code I’ve tried isn’t exactly what I’m looking for. I’m looking to change the text boldness and codes I’ve come across before for different headings have a ‘color: #000;’ code added to it.

[TerenceKEANE]

It seems like you're new to Shopify. While Shopify offers basic customization options, you can also purchase premium themes for more advanced features. These premium themes will likely be superior to your current free theme, but you'll still need to use manual coding to achieve your desired look and functionality.

The most crucial aspect is having access to prompt assistance when needed. The code provided by the other person, 'font-weight: 30px;', is invalid. Each property has its unique application, and color usage can be quite complex.

Here are some examples of different color usage methods:

• The simplest form is using a hex code like '#fff'.
• To extract colors from websites, I recommend using the 'Eye Dropper' extension for the Google Chrome browser. However, it may not always work perfectly with your custom code.
• Chrome analyzes CSS code from top to bottom, prioritizing the last code block assigned to a class. The '!important' property also overrides default priorities.

In essence, there are numerous rules to consider when working with CSS.

Based on your website, I believe you're just starting out. Feel free to tag me in your posts or send me a private message if you require assistance. I'll help whenever I have time away from my software development projects.

If you encounter any issues again, feel free to write, I'll help.

#ff0099, rgb(255 0 153 / 80%), hsl(150 30% 60% / 80%), hwb(from green h w b / 0.5),light-dark(rgb(255 255 255), rgb(0 0 0))