Intermediate arrangement of policy items within the site

Store Feedback
,

Topic summary

A user reports that policy text on their Shopify site is left-aligned instead of centered, sharing a screenshot showing the misalignment.

Solution Provided:

  • Access Shopify theme editor via Online Store > Themes > Edit Code
  • Locate the main CSS file in the Assets folder
  • Add custom CSS with text-align: center and margin: 0 auto properties
  • Identify the specific policy container class/ID using browser inspect tools
  • Apply the CSS to the correct element

Additional Options:

  • For both horizontal and vertical centering, use flexbox properties (display: flex, justify-content: center, align-items: center)
  • Save changes and clear browser cache to verify results

The issue remains open pending implementation by the original poster.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello.
We are currently in the site work.
The policy is biased toward the left side of the site.
the middle

2024-05-03 17 59 50.png
2024-05-03 17 59 50.png1872×899 42 KB

2

Hi @HNHusa

To center your policy text or content on your Shopify site, you’ll need to adjust the CSS (Cascading Style Sheets) in your theme. Here’s a simple step-by-step guide to do that:

Step 1: Access Your Theme Editor1. Log in to your Shopify admin.

  1. Go to Online Store > Themes.
  2. Find the theme you’re working on and click Customize.
  3. In the editor, click Theme Settings or locate where custom CSS can be added.

Step 2: Add Custom CSS1. Go to Actions > Edit Code.

  1. In the left-hand sidebar, find the Assets folder, and open your theme’s main CSS file (it might be named theme.css, style.css, or similar).
  2. Add the following CSS code:

.policy-text {

text-align: center;

margin: 0 auto;

}

Step 3: Locate the Policy Section1. Identify the class or container holding your policy text. If you’re not sure, right-click the policy text on your live site and select Inspect (in Chrome or similar browser tools).

  1. Look for a
    or

    tag that contains your policy and note its class or ID. Replace .policy-text in the CSS above with the actual class or ID if it’s different.

Step 4: Save and Preview1. Save your changes.

  1. Refresh your live site to check if the policy text is now centered. If it doesn’t work as expected, double-check the class/ID or your browser’s cached CSS.

Quick Tip: If you want to center the text only horizontally, the code above works. But if you also want it vertically centered, you can modify it like this:

.policy-text {

display: flex;

justify-content: center;

align-items: center;

height: 100%;

}

This will center the policy both horizontally and vertically within its container.

If you run into any issues, feel free to share a screenshot or let me know more details, and I’ll guide you further.

Best regards,
Daisy