How to Center Headers for Collections in Shopify's Dawn Theme

Centering headers for collections in your Shopify store can create a more visually appealing and professional look. This guide will help you achieve centered headers for both single and multi-column headings in the Dawn theme.

Step-by-Step Guide:

Step 1: Access the Theme Editor

  • From your Shopify admin, go to Online Store > Themes.
  • Find the Dawn theme, then click on Actions > Edit code.

Step 2: Center Single Column Headers

  • In the left-hand sidebar, locate and click on theme.liquid under the Layout directory.
  • Find the header tag for the collection, which is typically an <h1>, <h2>, or <h3> tag. You can use the inspect tool in your browser to confirm the header type.
    Modify the header tag to include a center alignment class:

    <h1 class="collection-hero__text-align: center">Your Collection Title</h1>


    Step 3: Center Multi-Column Headings
    To center multi-column headings, add the following CSS code to the bottom of the theme.liquid file, just before the closing </body> tag:

    <style> .multicolumn [class^='title']{ align-items: center !important; justify-content: center !important; } </style>

    Step 4: Save Your Changes

    • After making the necessary changes, click Save at the top right corner.

    Step 5: Check Your Store

    • Navigate to your collections page to ensure the headers are centered as expected.

    Additional Resources

    By following these steps, you can center headers for collections in your Shopify store's Dawn theme, enhancing the overall visual appeal and user experience.

    How to Center Headers for Collections in Shopify's Dawn Theme
    Back to blog

    Leave a comment

    Please note, comments need to be approved before they are published.