How do I center the product name using the Refresh Theme?

Store Design
,

Topic summary

Goal: center the product name on a product page using Shopify’s Refresh theme, and adjust spacing around price and variant options.

Access: The store was password-protected; URL and password were shared to allow review.

Approaches offered:

  • Theme.liquid method: add custom code near the closing tag in theme.liquid to center the title (details shown via screenshot; specific code not included in the post).
  • CSS in base.css: center the product title (selector targeting the product title h1) and align product-form buttons to the center. This provided visible centering.

Follow-up tweak: reduce the space between price and color variations by overriding margins in base.css (rules targeting the product form and adjacent elements in the product info container).

Final accepted solution: a CSS rule centering the entire product info wrapper (text-align: center with !important) in base.css, confirmed as exactly what was needed.

Outcome: Resolved. Title centering achieved, and spacing tightened between price and color options.

Notes: Code snippets and screenshots are central to understanding the changes. No remaining open questions.

Summarized with AI on January 14. AI used: gpt-5.
7

Hey @HenryA

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1699340075868.png
Moeed_0-1699340075868.png944×607 22 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed