Change font-size of headlines in a multiple column-element and product name in collection view

[Frede]

Hello community,

Can somebody provide the code for…

1. … changing the font size of the headline of a multiple column-element. E.g. the headline “Stivoll unabhängig”, “Qualität trifft Komfort” and “ Auslaufsicher & Hygienisch“ on this page: https://my-eloo.de/
2. … changing the font size of the product names in the collection view. E.g. the product names on this page: https://my-eloo.de/collections/eloo-verbrauchsmaterial-und-ersatzteile

Thank you so much!

Fred

[Dan-From-Ryviu · Accepted solution]

You can change the font size of the headline in a multicolumn section by adding this code to the section's Custom CSS.

h3 { font-size: 20px; }

And add this code to Custom CSS of theme settings in Sales channels > Online Store > Themes > Customize > Theme settings to change product name 

.card__content h3.card__heading { font-size: 18px !important; }

[Dkpatel]

Hello Fred,

You can replace/add the below CSS into section-multicolumn.css 

To navigate the file Go to Online Store > Themes > Actions button (3 dots or dropdown) > Edit code > section-multicolumn.css
1)

.multicolumn-card__info h3.inline-richtext{font-size:calc(var(--font-heading-scale) * 2.5rem);}

2)

.card__information a.full-unstyled-link{font-size:calc(var(--font-heading-scale) * 2rem);}

 Please try and let me know how it goes.

Thanks,

[websensepro]

Hi @Frede ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.multicolumn-list__item h3.inline-richtext {
    font-size: 30px !important;
}

li.grid__item .card__content .card__information .card__heading.h5 a.full-unstyled-link {
    font-size: 17px !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[MandasaTech]

Hi @Frede

Happy to help! You can adjust the font sizes with a bit of custom CSS. Here’s how you can do it:

1. Change Font Size for Multiple Column Headings

For the section headlines like “Stivoll unabhängig”, etc., you can target them like this:

.multicolumn-card__info h3 {
  font-size: 22px !important; /* Adjust the size as needed */
}

2. Change Font Size for Product Titles on Collection Pages

To change the font size of product names in the collection grid:

.card__heading {
  font-size: 18px !important; /* Adjust the size as needed */
}

Where to Add the CSS

You can add this code in your Shopify admin under:
Online Store > Themes > Edit Code > Assets > base.css (or theme.css, depending on your theme), and paste it at the bottom of the file.

Let me know if you have any issues.