Shopify Blog automatically centers text - Studio Theme

Topic summary

Shopify Studio theme blog posts are auto-centering entire paragraphs when the editor is used to center only a single element (e.g., an image). Embedded Getty Images iframes also won’t center despite attempts to adjust alignment in the editor.

Proposed approaches:

  • Add custom classes to text/images and enforce alignment with CSS using !important.
  • Center the embedded media by updating the embed container’s styles to use display: flex; justify-content: center (added after width: 100%) so only the iframe is centered.
  • Draft HTML/CSS in an external editor and paste into the blog to avoid editor quirks.

Most recent update: The original poster asked which theme file (e.g., main-article.liquid) should be edited to implement the fix, indicating uncertainty about where to place the changes.

Status: No confirmed resolution yet; key question remains where to apply the CSS (inline within the embed wrapper vs. in a theme stylesheet). The provided embed code and inline styles are central to diagnosing the issue.

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

@Shay Thank you so much and I’m sorry for the very delayed reply! Can you tell me which file to put this in - main-article.liquid?