How to Center Text in CSS in Shopify

What is CSS in Shopify Themes?

CSS (Cascading Style Sheets) controls the visual style of your Shopify store, such as fonts, colors, layouts, and text alignment.

When you edit a Shopify theme, you can adjust CSS directly in the theme’s stylesheet (commonly base.css, theme.css, or style.css).

This is where you’ll apply rules like text-align: center; to center your text.

How to Position Text with CSS in Shopify Themes?

The most common way to center text is by using the text-align property in CSS. Let’s go step by step:

Step 1: Access Your Shopify Theme Code

• Log in to your Shopify Admin.
• Go to Online Store > Themes.
• Select your active theme, and click the three-dot icon > Edit Code.

Step 2: Locate the CSS File

In the Assets folder, open your theme’s stylesheet. For example, locate the base.css or theme.css.

Step 3: Add CSS to Center Your Text

Here are some common examples:

• Center a Page Type:

• Center Paragraph Text:

• Center Footer Text:

Important Notes

• Theme Updates: Manual CSS edits may be overwritten during theme updates. If available, add your CSS in the custom CSS section of your Theme Editor.
• Specificity: The more specific your selector, the safer your changes.
• Browser Tools: Use Chrome DevTools (right-click > Inspect) to check which class or ID your text element has.

Centering text in CSS is straightforward with text-align: center;. For more complex layouts, Flexbox gives you extra control. By applying the right CSS rules to your Shopify theme, you can easily improve your store’s design and keep content aligned exactly the way you want.

FAQs

1. How do I center text horizontally in CSS?

You can copy the following code to center your text horizontally in CSS:

2. Will centering text in CSS affect SEO?

No. Text alignment is purely visual and does not impact SEO.

3. Can I center text in Shopify without editing code?

Yes. Some Shopify themes or apps (like GemPages Page Builder) let you center text with drag-and-drop settings, without touching code.

To start building your new page with GemPages for free, refer to this article.