Atelier - policy page heading too large

Store Design
, ,

Topic summary

A user working with Shopify’s Atelier theme successfully fixed narrow policy pages using custom CSS but needs help reducing the oversized heading text on those pages. Two attached screenshots illustrate the issue.

Solutions Provided:

  • jakeclifford offered CSS targeting .shopify-policy__title h1 with font-size: 3rem and .shopify-policy__body h2 with font-size: 2rem

  • Vi-WizzCommerce suggested targeting .shopify-policy__container h1 with customizable font sizes (2rem ≈ 32px, 1.5rem ≈ 24px, 1.25rem ≈ 20px) and included a mobile-specific media query option for screens under 749px

Implementation:
Both solutions involve adding code to Online Store → Themes → Customize → Theme Settings → Custom CSS

Two other users requested the store URL and password to provide tailored solutions. The issue remains open pending the original poster’s response or confirmation of which solution worked.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Trying out the Atelier theme from Shopify. I had an issue with the policy pages being extremely narrow, but was able to fix that with the custom CSS code (attached). But the heading on the policy page is still very large. Anyone know how to make this smaller (attached picture)? It doesn’t seem to be possible without code

Skærmbillede 2025-06-22 kl. 18.57.50.png
Skærmbillede 2025-06-22 kl. 18.57.50.png594×400 20.2 KB

Skærmbillede 2025-06-22 kl. 18.57.59.png
Skærmbillede 2025-06-22 kl. 18.57.59.png764×1272 39.4 KB

2 Likes
2

Hello @al00
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

3

Hey @al00

Share your Store URL and Password if enabled.

Best,

Moeed

4

Hi @al00 ,

Online Store > Themes > Customise > Theme Settings > Custom CSS

Copy and paste in this code,

.shopify-policy__title h1 {
font-size: 3rem !important
}

.shopify-policy__body h2 {
font-size: 2rem !important
}

Hope that helps,
Jake

5

God dag @al00 !

:wrench: Here’s the Custom CSS You Can Add:

Since you’re already using Custom CSS, just add this to your existing snippet:

.shopify-policy__container h1 {
font-size: 2rem !important;
line-height: 1.2 !important;
word-break: break-word;
text-align: center;
}

You can tweak the font-size to suit your preferences. For example:

  • 2rem ≈ ~32px

  • 1.5rem ≈ ~24px

  • 1.25rem ≈ ~20px

If you’re only seeing the issue on mobile, you could also apply this change conditionally:

@media (max-width: 749px) {
.shopify-policy__container h1 {
font-size: 1.75rem !important;
}
}

:pushpin: Where to Add It:

In your theme customizer:

  • Go to Online Store → Themes → Customize.

  • Click Theme settings → Custom CSS.

  • Paste the above code under your existing max-width fix.

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!