How to change the heading tag in the collection on the Dawn theme

Technical Q&A

Topic summary

Goal: Change heading tags on the Dawn collection page so Product name, Sort by, and total product count display as H2 instead of H3.

Approaches suggested:

  • Edit HTML/Liquid directly (Shopify’s templating language):
    • Product titles in card-product.liquid (component reused sitewide).
    • Collection grid/context in main-collection-product-grid.liquid.
    • “Sort by” (filters) in facets.liquid (filters/faceting component). Change the heading elements from h3 to h2 as needed.
  • CSS-only workaround (visual change only): Adjust font sizes in base.css targeting relevant classes (e.g., full-unstyled-link.satcb_quick_link, facet-filters__label.caption-large.text-body, product-count__text.text-body) to mimic H2 sizing without changing semantic tags.

Outcomes:

  • Original poster confirmed success using the CSS method.
  • Another participant reported it didn’t work for them; no further troubleshooting or confirmed fix provided.

Notes:

  • Screenshots and a CSS snippet are central to the provided guidance.
  • Editing Liquid files changes the actual semantic structure; the CSS method only changes appearance. The discussion remains partially open due to the latest “not working” report.
Summarized with AI on December 20. AI used: gpt-5.
1

I want to change the heading tag in the collection on the Dawn theme, specifically as follows:

  • Product name: is H3 => Change to H2
  • Sort by: is H3 => Change to H2
  • Total number product: is H3 => Change to H2
    Details according to the attached image
    We look forward to receiving help from the community

Screenshot 2024-06-16 145556.png
Screenshot 2024-06-16 145556.png2536×1321 309 KB

2

Hi,

You could do this through editing the theme code directly (go to you online store customizer and click edit code, image below), however you would need to edit the card-product liquid file which is a component that is reused across different places on your site.

To modify the filters you would need to edit the main-collection-product-grid.liquid file and look for the code in the screenshot below.

Hope this helps!

If you wish to change it you can simply modify the

and turn it into a

and vice versa.

jeffedmondson_0-1718552137034.png
jeffedmondson_0-1718552137034.png320×293 12.5 KB

jeffedmondson_1-1718552269448.png
jeffedmondson_1-1718552269448.png1470×769 127 KB

jeffedmondson_2-1718552354284.png
jeffedmondson_2-1718552354284.png716×502 64.1 KB

3

Everything is fine except this part: “To modify the filters you would need to edit the main-collection-product-grid.liquid file and look for the code in the screenshot below”
I tried but no change with the Sort Filter

4

To change and sort you would have to edit the facets.liquid file and change different states to be h3s.

5

Hi @TRUONGPHAM_102 ,

Are you Vietnamese ?

Regarding your issue, you can directly change the heading tag by adjusting the font-size, as it has a similar effect on the text size where you want to make the correction, right?
For example:

BSSCommerceB2B_0-1718559979723.png
BSSCommerceB2B_0-1718559979723.png539×104 6.88 KB

So you just need to edit css script and the issue will be resolved. You can try this way :

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_1-1718560028888.png
BSSCommerceB2B_1-1718560028888.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.full-unstyled-link.satcb_quick_link {
    font-size: 12px;
}
.facet-filters__label.caption-large.text-body {
    font-size: 14px;
}
.product-count__text.text-body {
    font-size: 14px;
}

Step 3: Save your code and reload this page.

=>> The result:

BSSCommerceB2B_2-1718560632257.png
BSSCommerceB2B_2-1718560632257.png1907×798 239 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

6

Great, Everything is done. Thank you vey much!

7

it is not working for me !! any help, thanks