Centering Your Shopify Collection Titles: A Community-Driven Guide to Perfect Alignment

View original discussion by siva_fds on Shopify Community →

Hey everyone! As a Shopify expert and someone who spends a lot of time diving into what makes stores tick, I often see common design tweaks that can make a huge difference. Recently, a fantastic discussion popped up in the Shopify community about something many of you might be wondering: how to center your collection titles.

It sounds simple, right? But as the thread, started by siva_fds, quickly showed, there are several ways to tackle it, each with its own pros and cons. I wanted to pull together all the great advice shared by fellow store owners and developers to give you a clear, actionable guide.

Why Center Your Collection Title?

Moving a collection title from its default left alignment to the center can instantly give your store a more polished, modern, or balanced look, depending on your brand aesthetic. It draws the eye and can make your collection pages feel more intentional. But, as NoahMueller wisely pointed out in the original post, we need to ensure any change maintains a clear content structure, especially keeping the collection heading as the page’s single visible H1 for SEO and accessibility.

Let's dive into the best ways the community suggested to get this done!

Method 1: The Easiest Way – Check Your Theme Settings First!

This is always step one, and it's something faisaltech, DitalTek, and DiegoCosta2428 all emphasized. Before you even think about code, check your theme editor!

How to Check Theme Settings:

  1. Go to your Shopify Admin.
  2. Navigate to Online Store > Themes.
  3. Click on Customize for your live theme.
  4. On the left-hand sidebar, find and click on the Collection list section (or the specific section holding your collection title).
  5. Look through the settings panel for any options related to “Heading alignment,” “Text alignment,” or similar.

If your theme has this built-in, it’s usually a simple dropdown or button click to center the title. This is the cleanest, most future-proof method, as it's fully supported by your theme.

Method 2: Section-Specific Custom CSS (A Clean Code Approach)

If your theme doesn't have a direct alignment setting, don't despair! faisaltech and DiegoCosta2428 brought up another excellent, clean approach: using the section’s own Custom CSS field.

Many modern Shopify themes include a “Custom CSS” box at the bottom of a section's settings in the theme editor. This is fantastic because it keeps your styling changes tied directly to that specific section, making it more organized and less likely to break if you duplicate your theme or re-add the section.

How to Use Section-Specific Custom CSS:

  1. Go to your Shopify Admin > Online Store > Themes > Customize.
  2. Click on the Collection list section.
  3. Scroll down in the settings panel until you find a “Custom CSS” or “Custom Liquid” field.
  4. Paste the following code into that box:
section-header {
  display: flex;
  justify-content: center;
  text-align: center;
}

This code tells the browser to treat the section-header as a flexible container and center its content horizontally. It's a robust and widely compatible solution.

Method 3: Editing Global CSS Files (When You Need to Get Under the Hood)

If the above options aren't available, or you need more granular control, you'll need to dive into your theme's code files. Several community members, including devcoders, DitalTek, websensepro, and umerzaman152, provided variations of CSS code for this method.

The general consensus is to add your custom CSS to either base.css or theme.css (the exact name might vary slightly by theme, but they're typically in the assets folder).

How to Add CSS to Your Theme Files:

  1. Go to your Shopify Admin > Online Store > Themes.
  2. Click the Actions button (three dots) next to your live theme, then select Edit code.
  3. In the “Assets” folder, find either base.css or theme.css (or sometimes custom.css if your theme has one).
  4. Scroll to the very bottom of the file and paste one of the following code snippets.
  5. Click Save.

Recommended CSS Snippets from the Community:

Option A (Using Flexbox - a common and robust approach):

This snippet, similar to what websensepro shared, uses Flexbox for centering. The !important flag is often added to ensure it overrides any existing theme styles.

.section-header.section-header {
    display: flex !important;
    justify-content: center !important;
}

Here's what that can look like:

image

Option B (Using Margin Auto with Block Display):

devcoders provided this snippet, which is another classic way to center block-level elements.

.shopify-section--collection-list section-header.section-header {
    margin: 0 auto;
    display: block;
}

image

Option C (With Media Query for Desktop Specificity):

DitalTek offered a solution that uses a media query, meaning it only applies the centering for screens wider than 1150px. This can be useful if your theme already handles mobile centering well and you only need a desktop fix.

@media screen and (min-width: 1150px) {
    .shopify-section--collection-list .section-header {
      grid-template-columns: 100%;
    }
    .shopify-section--collection-list .section-header .prose {
      width: 100%;
    }
}

image

A Word of Caution: Avoid Hardcoded Section IDs and Inline Styles

While Moeed and Mustafa_Ali offered solutions involving adding