How to Center Align All Shopify Section Headings: A Step-by-Step Guide

Introduction

Welcome back to OptiXpert blogpost ! In today’s tutorial, I’ll show you how to center align shopify section headings. Shopify’s free themes like Dawn, Refresh, and Sense don’t have a built-in option to do this. But don’t worry ! In this video, I’ll guide you step by step process to add the custom support for center align the shopify section headings.

General Steps for Adding Custom Shopify Sections Heading Alignment Support 

Step 1: Duplicate Your Theme Files

Before making any changes to your Shopify theme files, always duplicate your theme. This ensures you have a backup in case anything goes wrong during the customization process.

1. Go to your Shopify dashboard.
2. Navigate to Online Store > Themes.
3. In the “Current theme” section, click on Actions > Duplicate.
   

Step 2: Customize The base.css or theme.css File

In first step we done the style related changes in the base.css file or theme.css file. In this step i will guide you step by step process for the code changes.

1. In the Shopify admin, go to Online Store > Themes
2. Click Actions > Edit code for your active theme.
   
3. Search the base.css file or theme.css file " Which is present in the assets folder"
   
4. Open the CSS file, Scroll at the bottom of the file and paste the below attached code.
Code Snippet 1

    
  /* Style Configuration to Align the Section Headings */
.heading_alignment_center{
    width: 100%;
    text-align: center;
    display: block;
}

.heading_alignment_left{
    width: 100%;
    text-align: left;
    display: block;
}

.heading_alignment_right{
    width: 100%;
    text-align: right;
    display: block;
}
    
  

5. Save the CSS file.

Step 3: Customize The Sections liquid File

In this step we add the custom heading alignment support for sections heading where you can configure it using sections configuration dashboard.
In this step i will guide you step by step process for the code changes and we utilize the multicolumn section for testing & optimization process.

1. In the Shopify admin, go to Online Store > Themes
2. Click Actions > Edit code for your active theme.
3. Search the file multicolumn.liquid file and open this file.
   
4. Now go the schema settings of the multicolumn and paste the below code after "heading_size" element.
Code Snippet 2

    
  {
      "type": "select",
      "id": "heading_alignment",
      "options": [
        {
          "value": "heading_alignment_left",
          "label": "Left"
        },
        {
          "value": "heading_alignment_center",
          "label": "Centre"
        },
        {
          "value": "heading_alignment_right",
          "label": "Right"
        }
      ],
      "default": "heading_alignment_left",
      "label": "Heading allignment"
    },
    
  

5. Now Search the property "{{ section.settings.heading_size }}" in the multicolumn.liquid file and replace this property with " {{ section.settings.heading_size }} {{ section.settings.heading_alignment }} ".
6. Save the file & Customize the theme.

Special Offer:-

Are you looking to elevate your Shopify store with a stunning, premium quality theme? Look no further! I am offering a selection of top-notch Shopify themes designed to enhance your online presence and boost sales—all at affordable prices.

Whether you're starting a new store or revamping an existing one, my premium themes are tailored to meet your needs, ensuring a seamless shopping experience for your customers. With responsive designs, customizable features, and SEO-friendly layouts, you can attract more visitors and convert them into loyal customers.

Don’t miss out on the opportunity to give your Shopify store the professional look it deserves! Contact me today for more information and to find the perfect theme for your business.

Tushar Garg
tushar.garg.earningac@gmail.com