Solved

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

MMast
Explorer
131 0 10

Thanks in advance!

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

Example:

Screenshot 2024-04-13 124423.png

https://decemberschild.com/ 

password: dc

Accepted Solutions (2)

PageFly-Amelia
Navigator
309 89 134

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

TerenceKEANE
Shopify Partner
301 61 53

This is an 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;
}

shopify.base.css.jpg

Terence

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 5 (5)

PageFly-Amelia
Navigator
309 89 134

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

MMast
Explorer
131 0 10

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

TerenceKEANE
Shopify Partner
301 61 53

This is an 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;
}

shopify.base.css.jpg

Terence

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
MMast
Explorer
131 0 10

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
Shopify Partner
301 61 53

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))

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites