H2 titles dont work

Store Design
,
1

Hi there

On this collection page at the bottom I have a text describing our product line: https://www.popandpal.dk/collections/traelegetoj

The text for the collection should is made with H2 titles when I add the text on shopify,but dont seem to be H2 titles on the page itself.

Could you kindly explain to me why that is in a simple way :grinning_face_with_smiling_eyes:

With kind regards

2

Hello! @erencicek Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
.Collection__Description h1 {
  font-size: calc(14.85px + 28.2vw);
}
@media (min-width: 1200px) {
  .Collection__Description h1 {
    font-size: 36px;
  }
}

.Collection__Description h2 {
  font-size: calc(14px + 18vw);
}
@media (min-width: 1200px) {
  .Collection__Description h2 {
    font-size: 27.5px;
  }
}

.Collection__Description h3 {
  font-size: calc(13.63px + 13.56vw);
}
@media (min-width: 1200px) {
  .Collection__Description h3 {
    font-size: 23.8px;
  }
}

.Collection__Description h4 {
  font-size: calc(13.25px + 9vw);
}
@media (min-width: 1200px) {
  .Collection__Description h4 {
    font-size: 20px;
  }
}

.Collection__Description h5 {
  font-size: calc(12.75px + 3vw);
}
@media (min-width: 1200px) {
  .Collection__Description h5 {
    font-size: 15px;
  }
}

.Collection__Description h6 {
  font-size: 12px;
}

Rishihuptech_0-1723101910153.png
Rishihuptech_0-1723101910153.png1345×918 73.7 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
K.K

3

Hi @erencicek ,

Currently your h2 and h3 style is inheriting from another css styles

If you want to adjust the font size, please follow the steps,

Go to your online store > themes > click on customise on current active theme > click on the section which needs to be changed > on rightside scroll down you can see custom css section > paste the below code.

.Collection__Description h2{
font-size: 28px!important; //adjust accordingly
 font-weight: 500!important; //adjust accordingly
}

.Collection__Description h3{
font-size: 28px!important; //adjust accordingly
 font-weight: 500!important; //adjust accordingly
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

4

Was this collection description part of the original theme or something you’ve added?

Technically, the theme.css contains a part at the top with comment like “This is a variation of Normalize.css …”

This CSS code resets all styles to be the same’ish and has, for example this rule which resets size and weight for all headings and paragraphs to be (kinda) the same to start with:

p,h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
  font-size: inherit;
  font-weight: inherit;
}

Theme designer did not expect fancy formatting for the Collection description, so they did not add much CSS rules for this element.

However, product page has Rte class assigned to the element which contains product description and this one has some styling.

Same for your Blog articles and Pages – textual content there has Rte class.

So instead of adding bunch of duplicate CSS you should instead try finding your collection description element in collection template (section?):

And modify like this:

This will apply proper formatting similar to the one product description has.

5

Hi! Does this affect my SEO? I want H2 tags as a part of my SEO

Also; I cant save the code, when I add it

It says “Session for webshopeditor cant be published”

Thank you so much!

6

Hi Tim!

Thank you very much for your reply!

Please forgive me, as I am not well versed in this area - could you break it down in a step by step kinda way, so that I understand it properly?

I honestly only care about this because it affects my SEO that I dont have h2 title tags

with kind regards

7

If you do not care about the looks, then there is nothing to do – your actual page does have h2 tags, any SE crawler will see them. It’s just they look the same as text (because of CSS; but SEs do not care about styling).

If, however, you want them to look different, then you’d need to find the code in your theme where collection description is output. I can’t be more specific here because I have no access to your theme code.

If there is templates/collection.liquid start looking for code there. Otherwise find “something ‘collection’” in sections/ and search these files for the code I’ve quoted and modify as instructed.