Section heading font size

Shopify Discussion

Topic summary

Goal: Increase section heading font size in the Superstore (Out of the Sandbox) theme, which appears capped at 140% via theme settings.

Context and clarifications:

  • Store URL shared: https://surmonx.ca/.
  • Others asked which specific section heading needs resizing and whether it should apply to all sections or just pages/specific sections.

Proposed solutions (CSS-based):

  • Edit theme.css (Admin → Online store → Themes → Edit code) and append rules targeting .home-section–title.
  • Example 1: Set explicit pixel sizes and a mobile media query (e.g., 30px desktop, 27px mobile) with !important.
  • Example 2: Use keyword sizes for font-size (large, x-large, xx-large, xxx-large), choosing the desired scale.
  • Both approaches affect section titles using the .home-section–title selector; scope more narrowly if only one section should change.

Artifacts:

  • Screenshot previews were provided to illustrate the result of the CSS changes.

Status:

  • No confirmation from the original poster that the fix worked.
  • Open questions: which exact section(s) to target and whether the change should be global or limited to specific headings. The thread remains unresolved/ongoing.
Summarized with AI on December 27. AI used: gpt-5.
1

Hello!

Does anyone know how can I change the Section heading font size. I am block at 140% in my theme.

I use superstore by out of the sandbox.

Thank you so much

1 Like
2

Hello @unachica

Can you share store URL?

3

Hi @unachica

Would you mind to share your store URL? Thanks!

4

https://surmonx.ca/

5

can you please tell me which section heading font size you want to increase?

6

@unachica Please follow the below steps to change the heading font size for sections. Let me know whether it is helpful for you.

  1. From admin, go to “Online stores” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Search “theme.css” file and paste below code at the bottom of the file.
    Note: Update the font size as per your requirement.
section h2.home-section--title {
  font-size: 30px !important;
}

@media only screen and (max-width: 859px) {
  section h2.home-section--title {
    font-size: 27px !important;
  }
}

Final Results will be like,

Vinsinfo_0-1717567566220.png
Vinsinfo_0-1717567566220.png1363×671 412 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

7

Just want to ask clealy, it this for all the section’s heading or only for one? Also Section or Pages heading? Thanks!

8

Dear @unachica ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

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

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

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

.home-section--title {
   font-size: xxx-large;
}

In this step, you can change font-size of section title (large, x-large, xx-large, xxx-large…)

In my example, I choose ‘xxx-large’.

Step 3: Save your code and reload this page.

=>> The result:

BSSCommerceB2B_2-1717603364878.png
BSSCommerceB2B_2-1717603364878.png1818×866 270 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

Have a nice day sir!