{"id":23356,"date":"2025-10-08T17:00:00","date_gmt":"2025-10-08T11:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23356"},"modified":"2025-10-07T14:53:27","modified_gmt":"2025-10-07T09:23:27","slug":"add-about-us-section-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-about-us-section-shopify\/","title":{"rendered":"How to Add an About Us Section in Shopify?"},"content":{"rendered":"\n

An About Us section can turn visitors into loyal customers by showcasing your brand values and journey. If you\u2019re wondering how to add an About Us section in Shopify, there are simple ways to do it, either with code or using an app. Let\u2019s explore both.<\/p>\n\n\n\n

Add a Ready-to-Use About Us Section<\/h2>\n\n\n\n

Here, we will use MIT Sections Pro <\/strong>to add a beautifully crafted about us section. It offers numerous customization features, more than 8 styles of sections, a code-free environment, and so much more, all within minimal cost.<\/p>\n\n\n\n

This is an example of one of the sections; you can design it however you want.<\/p>\n\n\n

\n
\"preview<\/figure>\n<\/div>\n\n\n

Below is the simple process to use the app.<\/p>\n\n\n\n

Step 1: Find Your Desired Section<\/h3>\n\n\n\n

Install the <\/strong>MIT Sections Pro<\/strong><\/a> <\/strong>(free) from the Shopify App Store, then from the app dashboard, click Browse sections <\/strong>and search for the About us <\/strong>section.<\/p>\n\n\n

\n
\"Shopify<\/figure>\n<\/div>\n\n\n

Here we will select the About us 1; <\/strong>you can choose the one that fits your brand.<\/p>\n\n\n\n

Step 2: Click on the \u201cTry for free\u201d Button<\/h3>\n\n\n\n

Click Try for free <\/strong>to get a no-cost trial and check the preview, features, etc. of the section.<\/p>\n\n\n

\n
\"App<\/figure>\n<\/div>\n\n\n

While on the free trial, you will be redirected to the MIT demo store. Once you purchase the section, you can add it to your Shopify theme.<\/p>\n\n\n\n

From here, click the Add section <\/strong>and select Meetanshi about us 1.<\/strong><\/p>\n\n\n

\n
\"from<\/figure>\n<\/div>\n\n\n

Step 3: Modify the About Us Section<\/h3>\n\n\n\n

Click Meetanshi about us 1 <\/strong>to explore the customization features, it offers more than 40 options to change as per your liking.<\/p>\n\n\n

\n
\"From<\/figure>\n<\/div>\n\n\n

After editing the section, save <\/strong>it.<\/p>\n\n\n\n

Once your About Us section is live, you can also add a mega menu to Shopify <\/a>and improve navigation for your customers to make browsing seamless.<\/p>\n\n\n

\n
\"Save<\/figure>\n<\/div>\n\n\n

Add a Shopify About Us Section Via Liquid Code<\/h2>\n\n\n\n

The following are the steps to create an About Us section using custom code. <\/p>\n\n\n\n

Step 1: Create a New Section<\/h3>\n\n\n\n

Navigate to your Shopify admin panel, click Online store > Themes > \u2026(three dots) > Edit code.<\/strong><\/p>\n\n\n\n

In the sections <\/strong>folder, add a new section and save it as about-us-section.liquid. <\/strong><\/p>\n\n\n

\n
\"create<\/figure>\n<\/div>\n\n\n

Step 2: Paste the Liquid Code<\/h3>\n\n\n\n

Then copy the code from here and paste it into the newly created about-us-section.liquid <\/strong>file and save it.<\/p>\n\n\n\n

{% style %}\n  .section-{{ section.id }} {\n    background-color: {{ section.settings.background_color }};\n  }\n  .richtext-content p {\n    margin-bottom: 1rem;\n    line-height: 1.6;\n  }\n{% endstyle %}\n\n<div class=\"section-{{ section.id }} py-16 sm:py-24\">\n  <div class=\"container mx-auto px-4 max-w-7xl\">\n\n    {% comment %} Check layout setting to determine image and text order {% endcomment %}\n    {% assign image_order = 'lg:order-1' %}\n    {% assign text_order = 'lg:order-2' %}\n    {% if section.settings.layout == 'image_right' %}\n      {% assign image_order = 'lg:order-2' %}\n      {% assign text_order = 'lg:order-1' %}\n    {% endif %}\n\n    <div class=\"lg:grid lg:grid-cols-2 lg:gap-16 items-center\">\n\n      <!-- Text Content Column -->\n      <div class=\"space-y-6 mb-12 lg:mb-0 {{ text_order }}\">\n\n        {% if section.settings.title != blank %}\n          <h2 class=\"text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl\">\n            {{ section.settings.title | escape }}\n          <\/h2>\n        {% endif %}\n\n        {% if section.settings.subtitle != blank %}\n          <p class=\"text-xl font-medium text-indigo-600\">\n            {{ section.settings.subtitle | escape }}\n          <\/p>\n        {% endif %}\n\n        {% if section.settings.text_content != blank %}\n          <div class=\"richtext-content text-gray-700 text-lg\">\n            {{ section.settings.text_content }}\n          <\/div>\n        {% endif %}\n\n        {% if section.settings.button_label != blank and section.settings.button_link != blank %}\n          <div class=\"pt-4\">\n            <a href=\"{{ section.settings.button_link }}\"\n               class=\"inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gray-800 hover:bg-indigo-700 transition duration-150 ease-in-out\">\n              {{ section.settings.button_label | escape }}\n            <\/a>\n          <\/div>\n        {% endif %}\n      <\/div>\n\n      <!-- Image Column -->\n      <div class=\"{{ image_order }}\">\n        {% if section.settings.image != blank %}\n          <div class=\"relative overflow-hidden rounded-xl shadow-2xl transform hover:scale-[1.02] transition duration-500 ease-in-out\">\n            {% comment %} Renders the image responsively using best practices (image_tag with standard filters) {% endcomment %}\n            {% liquid\n              assign image_url = section.settings.image | image_url: width: 1024\n              assign image_alt = section.settings.image.alt | default: section.settings.title\n              echo image_url | image_tag: alt: image_alt, class: 'w-full h-auto object-cover', loading: 'lazy'\n            %}\n          <\/div>\n        {% else %}\n          {% comment %} Placeholder if no image is selected {% endcomment %}\n          <div class=\"bg-gray-200 h-96 w-full rounded-xl flex items-center justify-center text-gray-500 border-2 border-dashed border-gray-400\">\n            <span class=\"text-lg\">Add your About Us image here (600x600 recommended)<\/span>\n          <\/div>\n        {% endif %}\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n{% schema %}\n{\n  \"name\": \"About Us Story\",\n  \"tag\": \"section\",\n  \"class\": \"section-about-us\",\n  \"settings\": [\n    {\n      \"type\": \"header\",\n      \"content\": \"Layout and Style\"\n    },\n    {\n      \"type\": \"color\",\n      \"id\": \"background_color\",\n      \"label\": \"Background Color\",\n      \"default\": \"#f9fafb\"\n    },\n    {\n      \"type\": \"select\",\n      \"id\": \"layout\",\n      \"label\": \"Layout\",\n      \"options\": [\n        {\n          \"value\": \"image_left\",\n          \"label\": \"Image on Left\"\n        },\n        {\n          \"value\": \"image_right\",\n          \"label\": \"Image on Right\"\n        }\n      ],\n      \"default\": \"image_left\"\n    },\n    {\n      \"type\": \"header\",\n      \"content\": \"Content\"\n    },\n    {\n      \"type\": \"text\",\n      \"id\": \"title\",\n      \"label\": \"Main Heading\",\n      \"default\": \"Our Story & Mission\"\n    },\n    {\n      \"type\": \"text\",\n      \"id\": \"subtitle\",\n      \"label\": \"Subheading\",\n      \"default\": \"Crafting quality goods since 2020.\"\n    },\n    {\n      \"type\": \"richtext\",\n      \"id\": \"text_content\",\n      \"label\": \"Body Content\",\n      \"default\": \"<p>Write your detailed brand history, values, and vision here. Use this space to connect with your audience on a personal level, highlighting what makes your brand unique and trustworthy.<\/p>\"\n    },\n    {\n      \"type\": \"image_picker\",\n      \"id\": \"image\",\n      \"label\": \"Featured Image\"\n    },\n    {\n      \"type\": \"text\",\n      \"id\": \"button_label\",\n      \"label\": \"Button Label\",\n      \"default\": \"Visit Our Team Page\"\n    },\n    {\n      \"type\": \"url\",\n      \"id\": \"button_link\",\n      \"label\": \"Button Link\"\n    }\n  ],\n  \"presets\": [\n    {\n      \"name\": \"About Us Story\",\n      \"category\": \"Text\"\n    }\n  ]\n}\n{% endschema %}\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n  \/\/ Ensure Tailwind is configured if needed (e.g., for custom colors not used here)\n  tailwind.config = {\n    theme: {\n      extend: {\n        fontFamily: {\n          sans: ['Inter', 'sans-serif'],\n        }\n      }\n    }\n  }\n<\/script>\n<style>\n    \/* Load Inter font for aesthetics *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800;900&display=swap');\n    \n    \/* Ensure all elements use the Inter font *\/\n    body * {\n        font-family: 'Inter', sans-serif !important;\n    }\n<\/style>\n<\/pre>\n\n\n\n
Step 3: Preview the Section in the Frontend<\/h3>\n\n\n\n
Head back to the Shopify admin panel, Online store > Themes > Customize.<\/strong><\/p>\n\n\n\n
From the theme editor’s left sidebar, click the Add section <\/strong>and select About Us Story.<\/strong><\/p>\n\n\n
\n
\"from<\/figure>\n<\/div>\n\n\n
Click About Us Story <\/strong>to expand the customization features, make changes as you want, and save<\/strong> them.<\/p>\n\n\n
\n
\"From<\/figure>\n<\/div>\n\n\n
This is how it will look in the frontend (minimal & simple).<\/p>\n\n\n
\n
\"Preview<\/figure>\n<\/div>\n\n\n
Why Go with a Shopify App?<\/h2>\n\n\n\n
MIT Sections Pro hooks you up with a super customizable About Us section. You can totally design and tweak templates to perfectly fit your brand, and even with the free template, you’re in full control.<\/p>\n\n\n\n
The app packs over 130 free and paid sections, like cool banners, testimonials, and FAQs. This means you can build a fabulous Shopify store without needing any coding skills.<\/p>\n\n\n\n
Along with these features:<\/p>\n\n\n\n