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

Store Design
,
1

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

2

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; }
3

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

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

Please try and let me know how it goes.

Thanks,

4

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:

websensepro_0-1748255386101.png
websensepro_0-1748255386101.png1307×591 139 KB

websensepro_1-1748255391020.png
websensepro_1-1748255391020.png1316×619 250 KB

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! :rocket: (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!

5

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 */
}

  1. 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.