Changing policy page width on new Atelier theme

Store Design
, ,

Topic summary

Users report that policy pages in Shopify’s new Atelier theme (from the Horizon update) display with an extremely narrow width by default, with no built-in customization options available.

Issue confirmed: Another user successfully replicated the problem, identifying that CSS for policy pages overrides standard theme styles.

Workaround solutions provided:

  • For page width: Add custom CSS to the theme settings targeting .shopify-policy__container with max-width: 80% (adjustable) for screens under 990px width
  • For heading sizes: Apply custom CSS to reduce font sizes for .shopify-policy__title h1 (3rem) and .shopify-policy__body h2 (2rem)

Both solutions require adding code to the Custom CSS section in Theme Settings, as the theme customizer currently doesn’t affect policy page layouts. Screenshots demonstrate the narrow default layout and improved results after applying the CSS fixes.

Status: Awaiting official Shopify fix; custom CSS workarounds currently necessary.

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

Hey man

Just trying out the new Atelier theme from the Horizon update, but the policy pages are extremely narrow as standard. Didn’t touch any code and it looks super weird. I attached a picture for reference.

Anyone know how to fix this? Doesn’t seem like it’s doable without code right now…

Skærmbillede 2025-05-29 kl. 20.40.21.png
Skærmbillede 2025-05-29 kl. 20.40.21.png2910×1460 318 KB

2 Likes
2

Hey @al00

Share your Store URL and Password if enabled.

Best,

Moeed

3

It’s not my store and the theme isn’t active yet as the person has an active store on another theme…

1 Like
4

Can you share the preview URL of the draft theme then?

5

Hey @al00 ,

I was able to replicate the issue on the new Atelier theme as well — you’re right, the policy pages appear quite narrow by default, even without any code changes. And making any changes using the theme customisation settings does not have an impact on the width of the content.

Looks like it’s happening because the CSS for the policy page is kind of overriding the usual theme styles.

So, until Shopify releases a fix, the best workaround for now is to add some custom CSS to get the desired layout. This should help widen the content on those policy pages.

You can add the following code to the Custom CSS section of your theme settings (as shown in the attached screenshot):

@media only screen and (max-width: 990px) {
  .shopify-policy__container {
    max-width: 80% !important; /* Adjust this value as per your preference */
  }
}

swym_0-1748586217459.png
swym_0-1748586217459.png678×1600 86.7 KB

Once you’ve added the code and saved the changes, the policy page should start using more of the screen space, as you can see in the screenshot below:

Screenshot 2025-05-30 at 11.55.02 AM.png
Screenshot 2025-05-30 at 11.55.02 AM.png3006×1382 341 KB

I hope this helps!

If my response helped you, please consider giving it a like ( :+1: ) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards,

Matthew from Swym

1 Like
6

Do you know how to make the heading smaller as well for the policy page? There’s no option to do that without code either

7

had the same issues, this was the code i used to fix the header sizes

Add to theme Customize → Theme Settings → Custom CSS:

.shopify-policy__title h1 {

font-size: 3rem !important;

}

.shopify-policy__body h2 {

font-size: 2rem !important;

}