{"id":24413,"date":"2025-11-28T11:00:00","date_gmt":"2025-11-28T05:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=24413"},"modified":"2026-01-29T12:15:03","modified_gmt":"2026-01-29T06:45:03","slug":"add-custom-sections-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-sections-shopify\/","title":{"rendered":"How to Add Custom Sections to Shopify? \u2013 Learn Here"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If your Shopify store feels trapped in templates that look exactly like your competitors&#8217;, custom sections are your ultimate escape plan. In this guide, we\u2019ll teach you how to add custom sections to Shopify and upgrade your store\u2019s design in the easiest way possible.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are Custom Sections in Shopify?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Custom sections are content blocks on your store\u2019s pages, just like Shopify&#8217;s default sections. However, they help you add sections that default to one missing.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, many Shopify themes don\u2019t support the <a href=\"https:\/\/meetanshi.com\/blog\/shopify-before-and-after-slider\/\">before\/after slider section<\/a>. But with the help of a custom section, you can add it to your store to give your shopper a preview of how effective your product is after using it.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1152\" height=\"648\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/custom-section-preview.gif\" alt=\"Custom section Shopify preview\" class=\"wp-image-24414\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">A custom section helps you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Showcase content in a personalized way<\/li>\n\n\n\n<li>Extend your theme without changing the entire design<\/li>\n\n\n\n<li>Control exactly how specific parts of a page look and function<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Basically, it works as those glittery, shimmery parts for your Shopify store, adding extraordinary elements that make shoppers stop and explore.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Custom Section in Shopify?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are basically two ways possible in Shopify to add a custom section.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit the Shopify Liquid code to add the custom sections code manually to your theme code editors.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the Shopify App to directly add the Shopify section to your theme editor.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Using the custom code method, you have to create a code from the section you want and then add it to your Shopify theme editor. The process is a bit complex and might need Shopify expertise.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The second is a non-code method using the Shopify section app. These apps provide pre-built, customizable collection slider sections that are compatible with many themes and can be integrated with just a few clicks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are both technical and non-technical methods. You can opt for the method that suits your store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let&#8217;s understand how to use each method.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method 1: Add Custom Sections in Shopify Via App\u200b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here, we will use the MIT Sections Pro app to add a custom section, as it is one of the easiest ways to add multiple sections in your store without editing your theme code file. The app is free to install and comes with over 130 customizable pre-built (free &amp; premium) sections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the steps to use the app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Find Your Desired Section<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Install the <a href=\"https:\/\/apps.shopify.com\/mit-custom-sections\" target=\"_blank\" rel=\"noopener\"><strong>MIT Sections Pro<\/strong><\/a><strong> <\/strong>app from the Shopify App Store. From the app dashboard, click the <strong>Browse section <\/strong>and search for the section you want to add. For example, the featured collection.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"780\" height=\"374\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/browse-section.png\" alt=\"Search for the custom section on the  app dashborad\" class=\"wp-image-24415\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/browse-section.png 780w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/browse-section-300x144.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/browse-section-768x368.png 768w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Pick the style of the section that matches your store. We will go for <strong>Featured Collection 2.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select the section, then click <strong>Try for free<\/strong> to start a free trial. This allows you to check its design and layout before committing to a purchase.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While using the free trial, you will be redirected to the MIT demo store. After purchasing the section, you can have it in your store.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Customize the Section&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Head to <strong>Online Store &gt;Theme &gt;Edit Theme<\/strong>. Then, from the theme editor left sidebar, select <strong>Add section &gt;&nbsp; Meetanshi Featured Collection 2.&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then add collections &amp; customize it as per your requirements from the options available on the sidebars.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"544\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/customize-section-1024x544.png\" alt=\"Select the collection and customize the Custom section in Shopify\" class=\"wp-image-24416\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/customize-section-1024x544.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/customize-section-300x159.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/customize-section-768x408.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/customize-section.png 1381w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Save the Changes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After you are done making edits to the section, click <strong>Save <\/strong>to finalize the changes. This is how attractive and well-organized it will be showcased.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"1024\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-app-706x1024.png\" alt=\"Preview of the custom section shopify using an app\" class=\"wp-image-24417\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-app-706x1024.png 706w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-app-207x300.png 207w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-app-768x1113.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-app.png 1034w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Method 2: Add Shopify Custom Section (Via Code)\u200b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The following are the steps to add a custom section using Liquid code.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Head to Theme Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">From the Shopify admin panel, head to <strong>Online store &gt; Themes &gt; \u2026(three dots) &gt; Edit Code.&nbsp;<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Paste the Liquid Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a new section, save it as <strong>simple-featured-collection.liquid<\/strong>. Insert the following code into this newly created section, and then <strong>save<\/strong> it.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% style %}\n   .simple-featured-section {\n    padding: 40px 0;\n    text-align: center;\n  }\n\n  .section-heading {\n    font-size: 28px;\n    font-weight: 700;\n    margin-bottom: 30px;\n    color: #1c1d1d;\n  }\n\n  .product-grid-simple {\n    display: grid;\n    gap: 25px;\n    margin: 0 auto;\n    \/* Default for Mobile: 2 columns *\/\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  @media (min-width: 750px) {\n    .product-grid-simple {\n      grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);\n    }\n  }\n\n  .product-card-simple {\n    text-decoration: none;\n    display: block;\n    color: inherit;\n    transition: opacity 0.2s;\n  }\n\n  .product-card-simple:hover {\n    opacity: 0.8;\n  }\n\n  .product-card-image {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  .product-card-info {\n    padding-top: 10px;\n  }\n\n  .product-card-title {\n    font-size: 16px;\n    font-weight: 600;\n    margin: 0 0 5px 0;\n  }\n\n  .product-card-price {\n    font-size: 14px;\n    color: #5f5f5f;\n  }\n\n  .view-all-button {\n    display: inline-block;\n    padding: 10px 20px;\n    margin-top: 30px;\n    background-color: #3d3d3d;\n    color: #ffffff;\n    text-decoration: none;\n    border-radius: 4px;\n    font-weight: 500;\n    transition: background-color 0.2s;\n  }\n\n  .view-all-button:hover {\n    background-color: #555;\n  }\n{% endstyle %}\n\n&lt;div class=\"simple-featured-section\">\n  &lt;div class=\"page-width\">\n    \n    {% assign selected_collection = collections[section.settings.collection_select] %}\n    \n    {% if selected_collection and selected_collection.products.size > 0 %}\n\n      &lt;h2 class=\"section-heading\">{{ section.settings.heading | default: \"Featured Collection\" }}&lt;\/h2>\n\n      &lt;div class=\"product-grid-simple\">\n        {% comment %} Loop through the collection, limiting the product count {% endcomment %}\n        {% for product in selected_collection.products limit: section.settings.product_limit %}\n          &lt;div class=\"product-item-wrapper\">\n            \n            &lt;a href=\"{{ product.url }}\" class=\"product-card-simple\">\n              \n              {% comment %} Product Image {% endcomment %}\n              {% if product.featured_media %}\n                &lt;img\n                  class=\"product-card-image\"\n                  src=\"{{ product.featured_media | img_url: '400x' }}\"\n                  alt=\"{{ product.featured_media.alt | escape }}\"\n                  loading=\"lazy\"\n                >\n              {% else %}\n                {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}\n              {% endif %}\n\n              &lt;div class=\"product-card-info\">\n                {% comment %} Product Title {% endcomment %}\n                &lt;h3 class=\"product-card-title\">{{ product.title }}&lt;\/h3>\n                \n                {% comment %} Product Price {% endcomment %}\n                &lt;span class=\"product-card-price\">{{ product.price | money }}&lt;\/span>\n              &lt;\/div>\n            &lt;\/a>\n            \n          &lt;\/div>\n        {% endfor %}\n      &lt;\/div>\n\n      {% if section.settings.show_view_all and selected_collection.products.size > section.settings.product_limit %}\n        &lt;a href=\"{{ selected_collection.url }}\" class=\"view-all-button\">\n          {{ 'sections.featured_collection.view_all' | t | default: \"View All Products\" }}\n        &lt;\/a>\n      {% endif %}\n      \n    {% else %}\n      {% comment %} Fallback content when no collection is selected or collection is empty {% endcomment %}\n      &lt;h2 class=\"section-heading\">{{ section.settings.heading | default: \"Featured Collection\" }}&lt;\/h2>\n      &lt;p>Please select a collection in the theme editor to display products here.&lt;\/p>\n    {% endif %}\n\n  &lt;\/div>\n&lt;\/div>\n\n{% schema %}\n{\n  \"name\": \"Featured Collection basic\",\n  \"settings\": [\n    {\n      \"type\": \"text\",\n      \"id\": \"heading\",\n      \"label\": \"Section Heading\",\n      \"default\": \"Our Best Sellers\"\n    },\n    {\n      \"type\": \"collection\",\n      \"id\": \"collection_select\",\n      \"label\": \"Select Collection\",\n      \"info\": \"Choose the collection whose products will be displayed below.\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"product_limit\",\n      \"min\": 2,\n      \"max\": 16,\n      \"step\": 1,\n      \"label\": \"Max Products to Show\",\n      \"default\": 8\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"columns_desktop\",\n      \"min\": 3,\n      \"max\": 5,\n      \"step\": 1,\n      \"label\": \"Columns on Desktop\",\n      \"default\": 4\n    },\n    {\n      \"type\": \"checkbox\",\n      \"id\": \"show_view_all\",\n      \"label\": \"Show 'View All' button\",\n      \"default\": true\n    }\n  ],\n  \"presets\": [\n    {\n      \"name\": \"Simple Featured Collection\",\n      \"category\": \"Collection\"\n    }\n  ]\n}\n{% endschema %}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Display Section in the Frontend<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Head to the theme editor, <strong>Online store &gt; Themes &gt; Customize.&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the left sidebar of the theme editor, click <strong>Add section, <\/strong>select <strong>Simple featured collection. <\/strong>Edit the section and add a collection from the sidebar as per your needs.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/select-collection-1024x300.png\" alt=\"select collection and save changes to display custom section shopify\" class=\"wp-image-24418\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/select-collection-1024x300.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/select-collection-300x88.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/select-collection-768x225.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/select-collection.png 1387w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Save the changes once you\u2019re done, and this is how it looks (minimal &amp; simple).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"925\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-liquid-code-1024x925.png\" alt=\"preview of custom section Shopify using Liquid code\" class=\"wp-image-24419\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-liquid-code-1024x925.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-liquid-code-300x271.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-liquid-code-768x694.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/section-preview-using-liquid-code.png 1136w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This is how you can create a custom section in your Shopify store.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Examples of Custom Sections on Shopify Pages&nbsp;&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">These are some of the sections that you can add to the different pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, you can customize the section based on your store vibes to perfectly match your aesthetic. For example, <a href=\"https:\/\/meetanshi.com\/blog\/add-valentines-day-effect-to-shopify\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a Valentine&#8217;s Day effect<\/a> to your store and customize the following section accordingly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Section on Homepage\u200b<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bestsellers or new arrivals carousel\u200b<\/li>\n\n\n\n<li>Collection grid<\/li>\n\n\n\n<li>Customer reviews or testimonials\u200b<\/li>\n\n\n\n<li>Promotion announcement bar<\/li>\n\n\n\n<li>Social media feed&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Section to Product Page<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Product image gallery or video demo<\/li>\n\n\n\n<li>Extended product description<\/li>\n\n\n\n<li>Size guide or fit finder<\/li>\n\n\n\n<li>Related\/upsell product recommendations<\/li>\n\n\n\n<li>FAQ accordion about the product<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Section on Other Pages<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contact form (Contact Us page)<\/li>\n\n\n\n<li>Store locator map (Store Locator page)<\/li>\n\n\n\n<li>Team\/staff profiles (About Us page)<\/li>\n\n\n\n<li>Blog article teaser grid (Blog or News page)<\/li>\n\n\n\n<li>Policy details (Shipping, Returns, Privacy)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Best Way to Add Shopify Custom Sections<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The MIT Sections Pro app offers a classic, no-code solution for integrating custom sections into your Shopify store. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It features super-fast, pre-designed sections, including all those mentioned previously and more, that are fully compatible with any Shopify theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can drop them in instantly without messing with any Liquid code. It&#8217;s really simple and beginner-friendly, making it easy-peasy to upgrade your store&#8217;s look and customize pages with just a few clicks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>130+ Shopify Sections<\/span>\r\n<p>Your all-in-one solution to create a professional Shopify store<\/p>\r\n<a href=\"https:\/\/apps.shopify.com\/mit-custom-sections\" target=\"_blank\" class=\"btn-primary\" rel=\"noopener\">Install App Now<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/mit-sections-pro.png\" alt=\"MIT Sections Pro\">\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If your Shopify store feels trapped in templates that look exactly like your competitors&#8217;, custom sections are your ultimate escape plan. In this guide, we\u2019ll&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-24413","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/24413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=24413"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/24413\/revisions"}],"predecessor-version":[{"id":25591,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/24413\/revisions\/25591"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=24413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=24413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=24413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}