Dawn theme / Change the layout for policies

Topic summary

Goal: widen content on Privacy Policy and Terms pages, and on Shipping & Returns and Jewelry Care pages keep headings centered while body text is left‑aligned and wider—without affecting other pages.

Actions taken:

  • Links to the pages were added for access.
  • CSS added in base.css to widen policy pages: .shopify-policy__container { max-width: 90% (or px value) !important }—scoped to policy templates.
  • Additional CSS proposed for Rich Text sections (e.g., .rich-text__blocks max-width, .rich-text__text.rte { text-align: left; }, .center { text-align: center !important; }), but some of these changes affected Rich Text globally.

Outcomes:

  • Privacy Policy and Terms pages now display at the desired width.
  • Shipping & Returns and Jewelry Care pages improved in alignment/width, but global CSS still impacts other Rich Text sections site‑wide.

Latest guidance:

  • For per‑page control, target CSS to specific page templates or section IDs, or use an app to make page‑specific visual edits (suggested: EasyEdits).

Status: partially resolved. Policy pages are fixed; per‑page scoping for Rich Text on other pages remains an open item.

Summarized with AI on December 11. AI used: gpt-5.

Hi there,

I would love to adjust the layout for the Shipping & Return, Jewelry Page, Privacy Policy and Terms of Service page:

  1. For Privacy Policy and Terms of Service page, I use the Shopify Policy template, would love the expand the width of the context. Please check the pictures below:

  1. For Shipping & Return, Jewelry Care Page, I made each of them a new page template. I used the “Rich Text” Section for the text. I want to “Shipping & Return” and “Jewelry Care” Heading stay in the middle but the rest align left and expand the width to make it look like the Privacy Policy and Terms of Service layout. But don’t influence other pages’ Rich Text Section. Please check the picture below:

My url: andrejewelry.com

Password: Thankyou

Thanks for your help!

2 Likes

Hi @AndreaHuang

I check your store but pages you like to change is cant be reach. It is in the footer area but there is no link going into that pages. Please, provide or save the changes youve made.

Just added the links in the footer. Thank you!

1 Like
  1. Go to online store

  2. Edit Code

  3. Open your base.css file

  4. Paste the following code at the end of the file:

.shopify-policy__container {max-width: 90% !important}

  1. Save.

You can adjust the desired size with 90% up to 100%.

Let me know if it work by marking it as a solution.

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (min-width: 990px){
.rich-text__blocks {
    max-width: 100% !important;
}
}
.rich-text__wrapper {
    flex-wrap: nowrap;
}
.shopify-policy__container {
    max-width: 100%;
}

@media only screen and (min-width: 1215px){
    .shopify-policy__container {
    max-width: 100%;
    margin: 0 20%;
}
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Thanks! The privacy poilcy & terms of service pages now are perfect!

but for the Shipping & Return, Jewelry Care pages, the context needs to align to the left. Only the heading is centered. And this code also affects the rich text section in other pages.

Thank you!

1 Like

This is because the code you are using adjust all the text try the code I gave you it will only effect the privacy and terms pages.

  1. Go to online store

  2. Edit Code

  3. Open your base.css file

  4. Paste the following code at the end of the file:

.shopify-policy__container {max-width: 90% !important}

  1. Save.

Add this code in your base.css:

.shopify-policy__container {
  max-width: 900px !important;
}

Change the value (900px) to whatever you want!

Check this one for alignment,

Same Instruction.

.rich-text__text.rte {
    text-align: left;
}
.center {
    text-align: center !important;
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Seems like it will still affect all the Rich text section in other pages too. But it is good enough. Thank you!

Hey — from what you’ve described, it sounds like you want to adjust the width and alignment of Rich Text sections on specific pages without affecting other pages. You could do this with custom CSS targeting the page templates or section IDs, but that can get tricky if you’re not comfortable editing code.

A simpler way is to use my app EasyEdits. With it, you can:

  • Adjust the width and alignment of Rich Text sections on a per-page basis

  • Keep headings centered while expanding the body text to match other layouts

  • Make changes visually, without touching any CSS or affecting other pages

Full disclosure: I’m the developer of EasyEdits, so happy to answer any questions if you want help getting those page layouts exactly how you want them.

Best of luck!