Shopify’s default policy pages (Refund Policy, Privacy Policy, Terms of Service, etc.) are often displayed in a narrow, centered container. If you want to make them wider for better readability or to match your store’s design, you can easily adjust the width using CSS.
1. Identify the Policy Page Container
Shopify wraps the policy content inside a <div> with the class .shopify-policy__container. By modifying this class, you can control the width and layout.
Since this class is only used in policy pages and these don’t include a Custom CSS field that we can use, we’ll need to apply the style changes to the whole website.
2. Add Custom CSS To The Theme Settings
To change the width of your policy pages, go to the Theme Editor inside your Shopify Admin, and access the Custom CSS option included in the Theme Settings panel.
You can find the Theme Settings by clicking the gear icon in the left sidebar menu. Then scroll all the way down until you find the Custom CSS option, and add the following code:
.shopify-policy__container {
max-width: 60%; /* change this to the desired width */
padding-left: 5rem;
padding-right: 5rem;
}3. Save and Test
Click Save in the Shopify theme editor and then visit any policy page (/policies/terms-of-service, /policies/privacy-policy, etc.) to see the changes. If you had a policy page open before applying the changes, you might need to reload it. Adjust the max-width value if you need a wider or narrower container.
And that’s it! By modifying the .shopify-policy__container class, you can easily control the width of your Shopify policy pages and improve their design.
Need more help? Feel free to reach out!