{"id":23428,"date":"2025-10-08T11:00:00","date_gmt":"2025-10-08T05:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23428"},"modified":"2025-10-07T14:51:54","modified_gmt":"2025-10-07T09:21:54","slug":"add-video-grid-section-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-video-grid-section-shopify\/","title":{"rendered":"How to Add a Video Grid Section in Shopify?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Your shop is packed with compelling media, but is it easy to view? A video grid could be just what you need.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Learn how to add a video grid section in Shopify using two different methods to create a binge-worthy gallery, transforming your static page into a dynamic hub for product tutorials and customer testimonials.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Methods to Add a Shopify Video Grid Section<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You have two main ways to add a video grid section: a technical way and a non-technical way. Details are below:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using custom code &#8211; <\/strong>This method involves adding a Liquid section to your theme. It gives you total control over the design and placement, but requires some technical know-how to implement and maintain.<\/li>\n\n\n\n<li><strong>Using a Shopify app &#8211; <\/strong>It allows you to add, customize, and manage video grid sections directly from the Shopify theme editor, no coding needed. These apps are user-friendly, come with styling options, and let you update your video grid instantly.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Get a Ready-to-Use Video Grid Section<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Using the MIT Sections Pro Shopify app<strong>, <\/strong>you can create a beautiful and fully flexible video grid section. You get access to multiple editable elements like navigation buttons, adjusting video size, autoplay options, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is an example of what a section can look like:<br><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1320\" height=\"720\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-preview-3.gif\" alt=\"Preview of the video grid section using a Shopify app\" class=\"wp-image-23436\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Here are the steps to configure the video grid using the app.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Find and Add 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\">MIT Sections Pro<\/a><strong> <\/strong>( for free) from the Shopify app store, then from the app dashboard, click <strong>Browse sections <\/strong>and search for <strong>video grid.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-6-1024x496.png\" alt=\"search bar showing video grid along with various styles\" class=\"wp-image-23437\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-6-1024x496.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-6-300x145.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-6-768x372.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-6.png 1032w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Here we will go ahead with the <strong>video grid 2; <\/strong>you can select the one that suits your brand.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Click on the \u201cTry for Free\u201d Button<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To acquire the section with zero cost, click <strong>Try for free<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"453\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-5.png\" alt=\"click try for free to add a video grid section in Shopify\" class=\"wp-image-23438\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-5.png 945w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-5-300x144.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-5-768x368.png 768w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">During the free trial, you will be redirected to the MIT demo store. Once you buy the section, you can add it to your Shopify theme and access the code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From here, click the <strong>Add section <\/strong>and select <strong>Meetanshi video grid 2.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"826\" height=\"172\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-5.png\" alt=\"from the theme editor click the Add section and select Meetanshi video grid 2\" class=\"wp-image-23439\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-5.png 826w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-5-300x62.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-5-768x160.png 768w\" sizes=\"auto, (max-width: 826px) 100vw, 826px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Edit the Video Grid Section&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Meetanshi video grid 2 <\/strong>to expand the customization. Here, you get 40+ options to blend the section as per your brand\u2019s requirements.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-6-1024x548.png\" alt=\"using sidebar, customise the video grid section\" class=\"wp-image-23440\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-6-1024x548.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-6-300x161.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-6-768x411.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-6.png 1396w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Once done making the changes, <strong>save <\/strong>them.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-5-1024x596.png\" alt=\"Save changes after customising video grid section\" class=\"wp-image-23441\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-5-1024x596.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-5-300x175.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-5-768x447.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-5.png 1398w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Add a Shopify Video Grid Section (Custom Code)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">These are the steps to create a Shopify video grid using Liquid code.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add a New Section<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">From your Shopify admin panel, head to <strong>Online store &gt; Themes &gt; \u2026(three dots) &gt; Edit code.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Sections <\/strong>folder, add a new section and name it as <strong>video-grid.liquid.&nbsp;<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"592\" height=\"110\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-4.png\" alt=\"create a section file to add a video grid section in shopify\" class=\"wp-image-23442\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-4.png 592w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-4-300x56.png 300w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Paste the Video Grid Liquid Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Copy the code from here and paste it into the newly created <strong>video-grid.liquid <\/strong>file.<\/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=\"\">&lt;style>\n  \/* Base CSS Reset for Minimal Styling *\/\n  .mt-section-{{ section.id }} {\n    margin: 0 auto;\n    padding: 40px 20px; \/* Default top\/bottom padding *\/\n    background-image:{{ section.settings.section_background_gradient }};\n  }\n\n  .mt-multicolumns-title-{{ section.id }} {\n    font-family: {{ section.settings.heading_font_family.family }}, sans-serif;\n    font-size: 32px;\n    font-weight: 600;\n    text-align: center;\n    color: {{ section.settings.heading_color }};\n    margin-bottom: 30px;\n  }\n\n  .mt-multicolumns-items-{{ section.id }} {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 20px;\n  }\n\n  .mt-multicolumns-item-{{ section.id }} {\n    box-sizing: border-box;\n    padding: 0;\n    width: 100%; \/* Default mobile width *\/\n    max-width: 400px; \/* Max size for individual video container *\/\n  }\n\n  .mt-multicolumns-item-video-{{ section.id }} video {\n    display: block;\n    width: 100%;\n    height: 300px; \/* Fixed height for consistency *\/\n    object-fit: cover;\n    border-radius: 5px;\n  }\n\n  @media(min-width: 768px) {\n    .mt-multicolumns-items-{{ section.id }} {\n      \/* Creates 3 columns on desktop *\/\n      justify-content: space-between;\n    }\n    .mt-multicolumns-item-{{ section.id }} {\n      width: calc(33.33% - 14px); \/* 3 columns with 20px gap *\/\n    }\n    .mt-multicolumns-title-{{ section.id }} {\n      font-size: 48px;\n    }\n  }\n&lt;\/style>\n\n&lt;div class=\"mt-section-{{ section.id }}\">\n  &lt;h2 class=\"mt-multicolumns-title-{{ section.id }}\">{{ section.settings.heading_text }}&lt;\/h2>\n  \n  &lt;div class=\"mt-multicolumns-items-{{ section.id }}\">\n    {% for block in section.blocks %}\n      {% if block.type == 'multicolum_video' %}\n        &lt;div class=\"mt-multicolumns-item-{{ section.id }}\">\n          &lt;div class=\"mt-multicolumns-item-video-{{ section.id }}\">\n            {% if block.settings.video != blank %}\n              {{\n                block.settings.video\n                | video_tag:\n                  image_size: '1100x',\n                  autoplay: true,\n                  loop: true,\n                  controls: true,\n                  muted: true\n              }}\n            {% else %}\n              &lt;video\n                data-src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/fbb140fd46e3429eba459e1549dbbe38.mp4\"\n                playsinline=\"\"\n                autoplay=\"\"\n                preload=\"none\"\n                loop=\"\"\n                controls=\"\"\n                muted=\"\"\n                class=\"lazy entered loaded\"\n                src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/fbb140fd46e3429eba459e1549dbbe38.mp4\"\n              >&lt;\/video>\n            {% endif %}\n          &lt;\/div>\n        &lt;\/div>\n      {% endif %}\n    {% endfor %}\n  &lt;\/div>\n&lt;\/div>\n\n&lt;script>\n  \/\/ Removed all Swiper JS as slider options were removed.\n  \/\/ Kept minimal DOMContentLoaded listeners for potential future use.\n  if (Shopify.designMode) {\n    document.addEventListener('shopify:section:load', function() { console.log('Video Grid Loaded'); });\n  }\n&lt;\/script>\n\n{% schema %}\n{\n  \"name\": \"Video Grid Minimal\",\n  \"tag\": \"section\",\n  \"settings\": [\n    {\n      \"type\": \"header\",\n      \"content\": \"Heading\"\n    },\n    {\n      \"type\": \"text\",\n      \"id\": \"heading_text\",\n      \"label\": \"Heading Text\",\n      \"default\": \"Video Gallery\"\n    },\n    {\n      \"type\": \"font_picker\",\n      \"id\": \"heading_font_family\",\n      \"label\": \"Heading Font\",\n      \"default\": \"poppins_n6\"\n    },\n    {\n      \"type\": \"color\",\n      \"id\": \"heading_color\",\n      \"label\": \"Heading Color\",\n      \"default\": \"#121212\"\n    },\n    {\n      \"type\": \"color_background\",\n      \"id\": \"section_background_gradient\",\n      \"label\": \"Section background\"\n    }\n  ],\n  \"blocks\": [\n    {\n      \"type\": \"multicolum_video\",\n      \"name\": \"Video\",\n      \"limit\": 6,\n      \"settings\": [\n        {\n          \"type\": \"video\",\n          \"id\": \"video\",\n          \"label\": \"Select Video\"\n        }\n      ]\n    }\n  ],\n  \"presets\": [\n    {\n      \"name\": \"Video Grid\",\n      \"settings\": {},\n      \"blocks\": [\n        { \"type\": \"multicolum_video\" },\n        { \"type\": \"multicolum_video\" },\n        { \"type\": \"multicolum_video\" }\n      ]\n    }\n  ]\n}\n{% endschema %}\n<\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"724\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-2.png\" alt=\"Liquid code to add a video grid section in Shopify\" class=\"wp-image-23446\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-2.png 685w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-2-284x300.png 284w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Showcase the Section in the Frontend<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Head back to the Shopify store theme editor, <strong>Online stores &gt; Themes &gt; Customize.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, from the left-hand side, click on the <strong>Add section <\/strong>and select the <strong>video grid.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"86\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Code-add-section-3.png\" alt=\"In the theme editor, click on the Add section and select the video grid\" class=\"wp-image-23447\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Code-add-section-3.png 842w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Code-add-section-3-300x31.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/Code-add-section-3-768x78.png 768w\" sizes=\"auto, (max-width: 842px) 100vw, 842px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Click the <strong>video grid <\/strong>to expand the customization setting, and here you get very few options, make changes as you wish, and <strong>save<\/strong> them.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"440\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-4-1024x440.png\" alt=\"Customize the video grid section using the sidebar\" class=\"wp-image-23448\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-4-1024x440.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-4-300x129.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-4-768x330.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-4.png 1397w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This is how it will look, simple and minimal.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1438\" height=\"448\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-preview-2.gif\" alt=\"\" class=\"wp-image-23449\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Why Build with MIT Sections Pro?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We give you total control over the section styles, layouts, and designs. Additionally, you get access to over 130 ready-to-use sections that work perfectly with the existing Shopify themes, along with a free trial to check it out.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This must-have app allows you to quickly update YouTube links and adjust section styles, with built-in mobile settings for a responsive experience on any device.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Making everything manageable in a single dashboard.\u00a0<\/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\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Your shop is packed with compelling media, but is it easy to view? A video grid could be just what you need. Learn how to&#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-23428","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23428","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=23428"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23428\/revisions"}],"predecessor-version":[{"id":23462,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23428\/revisions\/23462"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=23428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=23428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=23428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}