{"id":23074,"date":"2025-10-04T10:00:00","date_gmt":"2025-10-04T04:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23074"},"modified":"2025-10-09T17:22:29","modified_gmt":"2025-10-09T11:52:29","slug":"add-scrolling-logos-section-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-scrolling-logos-section-shopify\/","title":{"rendered":"How to Add a Scrolling Logos Section in Shopify?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Instead of stacking logos in one place, make them flow across your Shopify store with a scrolling effect. This not only adds movement and life to your site but also showcases your brand partners in a professional, eye-catching way.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"394\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-preview.gif\" alt=\"Preview of the Scrolling logos section in Shopify using an app.\" class=\"wp-image-23080\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s how to add a scrolling logos section in Shopify using various methods and give your site a professional edge.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ways to Add a Shopify Scrolling Logos Section<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are apparently two options for you to add this feature to your site, which are as follows.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Via custom code &#8211; <\/strong>Insert a section into your theme files to create a scrolling logo carousel. This approach allows for high customization and integration, but it requires high coding knowledge, manual setup, and plenty of time.<\/li>\n\n\n\n<li><strong>Using a Shopify app &#8211; <\/strong>If you prefer a visual, easy-to-use interface or need more styling features (like interactive hover effects or dynamic grids) without touching code, a dedicated Shopify app is the best route.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Add a Pre-made Scrolling Logos Section<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use the MIT Sections Pro app to get a beautiful, ready-to-add section. Our app gives high flexibility, different styles of sections, advanced customization, such as infinite animation, scrolling direction, navigation button, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is an example of the section; you can create something similar to this using our app.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"394\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-preview-1.gif\" alt=\"Preview of the scrolling logos section using a Shopify app.\" class=\"wp-image-23102\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Let us see how the app works.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install and 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\">MIT Sections Pro<\/a> (free) from the Shopify App Store, then from the app dashboard, click <strong>Browse sections <\/strong>and search for the <strong>Scrolling logo.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"470\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-2.png\" alt=\"Shopify section browser showing multiple design options for &quot;Scrolling logo&quot;\" class=\"wp-image-23103\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-2.png 953w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-2-300x148.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/browse-section-2-768x379.png 768w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">We will proceed with <strong>Scrolling logo 3,<\/strong> though you can choose the option that best 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\">Select the section and click <strong>Try for Free <\/strong>to acquire the free trial of the section.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"913\" height=\"429\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-1.png\" alt=\"click Try for free button to Add a Scrolling Logos Section in Shopify.\" class=\"wp-image-23106\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-1.png 913w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-1-300x141.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/try-for-free-1-768x361.png 768w\" sizes=\"auto, (max-width: 913px) 100vw, 913px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">While on the free trial, you will be redirected to the MIT demo store, and after you purchase the section, you can have it in your store\u2019s theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From here, click <strong>Add section <\/strong>and select <strong>Meetanshi scrolling Logo 3<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"218\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-1.png\" alt=\"click Add section and select Meetanshi scrolling Logo 3.\" class=\"wp-image-23108\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-1.png 682w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-add-section-1-300x96.png 300w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Modify the Section<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Meetanshi scrolling Logo 3 <\/strong>to access the customization settings. Here, you get 70+ options to blend the section 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=\"515\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-2-1024x515.png\" alt=\"Shopify Theme Editor customizing the section. Easily Add a Scrolling Logos Section in Shopify.\" class=\"wp-image-23110\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-2-1024x515.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-2-300x151.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-2-768x386.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/app-edit-section-2.png 1389w\" 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=\"574\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-1-1024x574.png\" alt=\"Add a Scrolling Logos Section in Shopify and save.\n\n\" class=\"wp-image-23111\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-1-1024x574.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-1-300x168.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-1-768x431.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/save-changes-1.png 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Create a Scrolling Logos Section in Shopify Using Custom Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">These are the steps to design the scrolling logos section using Liquid code.<\/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>In the <strong>Sections <\/strong>folder, create a new section and save it as <strong>scrolling-logos.liquid.&nbsp;<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"527\" height=\"90\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-file.png\" alt=\"code editor showing a new file icon  to create a new liquid file and to add a Scrolling Logos Section in Shopify.\" class=\"wp-image-23082\" style=\"width:826px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-file.png 527w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/create-section-file-300x51.png 300w\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Paste the Scrolling Logos Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Then copy the code below and paste it into the newly created <strong>scrolling-logos.liquid<\/strong> section, and <strong>save <\/strong>the file. It will create a simple section with minimal functionalities.<\/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  .scrolling-logos-section-{{ section.id }} {\n    --logo-gap: {{ section.settings.spacing_desktop }}px;\n    --logo-height: {{ section.settings.logo_height }}px;\n    --speed: {{ section.settings.scroll_speed }}s;\n    --item-width-desktop: 200px; \/* Fixed width for calculation *\/\n    background-color: {{ section.settings.background_color }};\n    padding-top: {{ section.settings.padding_top | default: 36 }}px;\n    padding-bottom: {{ section.settings.padding_bottom | default: 36 }}px;\n    overflow: hidden; \/* Important to hide overflow during animation *\/\n  }\n  @keyframes scroll-left-to-right {\n    0% { transform: translateX(0); }\n    100% { \n        transform: translateX(calc(\n          ({{ section.blocks.size }} * var(--item-width-desktop) * -1) - \n          ({{ section.blocks.size }} * var(--logo-gap))\n        )); \n    }\n  }\n  .marquee-wrapper {\n    display: flex;\n    overflow: hidden;\n    margin-top: 2rem;\n    position: relative;\n    \/* Ensure only blocks are clickable, not the container *\/\n    pointer-events: none;\n  }\n\n  .marquee-content {\n    display: flex;\n    gap: var(--logo-gap);\n    min-width: calc(\n      (2 * {{ section.blocks.size }} * var(--item-width-desktop)) +\n      (2 * {{ section.blocks.size }} * var(--logo-gap))\n    );\n    animation: scroll-left-to-right var(--speed) linear infinite;\n  }\n  .marquee-wrapper:hover .marquee-content {\n    animation-play-state: paused;\n  }\n  .logo-item {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--logo-height);\n    width: var(--item-width-desktop); \/* Enforce the fixed width for consistent scroll calculation *\/\n    padding: 0 10px; \/* Internal padding for logos *\/\n    flex-shrink: 0;\n    opacity: 0.7; \/* Subtly fade the logos *\/\n    transition: opacity 0.3s;\n    box-sizing: border-box; \/* Include padding in the width calculation *\/\n  }\n\n  .logo-item:hover {\n    opacity: 1;\n  }\n\n  \/* Image styling *\/\n  .logo-item img {\n    height: 100%;\n    width: auto;\n    max-width: 100%;\n    object-fit: contain;\n  }\n  @media screen and (max-width: 768px) {\n    .scrolling-logos-section-{{ section.id }} {\n      --logo-gap: {{ section.settings.spacing_mobile | default: 16 }}px;\n      --logo-height: {{ section.settings.logo_height | divided_by: 1.5 }}px; \/* Make logos smaller on mobile *\/\n      --item-width-desktop: 150px; \/* Use smaller width for mobile calculation *\/\n    }\n\n    @keyframes scroll-left-to-right {\n        0% { transform: translateX(0); }\n        100% { \n            transform: translateX(calc(\n              ({{ section.blocks.size }} * 150px * -1) - \n              ({{ section.blocks.size }} * var(--logo-gap))\n            )); \n        }\n    }\n  }\n\n{% endstyle %}\n\n&lt;section class=\"scrolling-logos-section-{{ section.id }}\">\n  &lt;div class=\"page-width\">\n    {%- if section.settings.title != blank -%}\n      &lt;h2 class=\"h2 text-center\" style=\"margin-bottom: {{ section.settings.padding_top | divided_by: 2 }}px;\">\n        {{ section.settings.title | escape }}\n      &lt;\/h2>\n    {%- endif -%}\n\n    &lt;div class=\"marquee-wrapper\" id=\"Marquee-{{ section.id }}\">\n      &lt;div class=\"marquee-content\" role=\"list\">\n        {%- for block in section.blocks -%}\n          {%- liquid\n            assign image_url = block.settings.logo | image_url: width: 300\n            assign image_alt = block.settings.logo.alt | default: block.settings.logo.original_filename\n            assign image_tag = block.settings.logo | image_url: width: 300 | image_tag: loading: 'lazy', sizes: '(max-width: 768px) 150px, 200px', widths: '100, 150, 200, 300', alt: image_alt\n            assign link = block.settings.link\n          -%}\n          \n          &lt;div class=\"logo-item\">\n            {%- if link != blank -%}\n              &lt;a href=\"{{ link }}\" title=\"{{ 'sections.scrolling_logos.link_title' | t: title: image_alt }}\" style=\"pointer-events: auto;\">\n                {%- if block.settings.logo != blank -%}\n                  {{ image_tag }}\n                {%- else -%}\n                  &lt;div class=\"placeholder-logo\" style=\"height: var(--logo-height); width: 100%; background: #eee; border-radius: 4px;\">\n                    &lt;!-- Placeholder for missing image -->\n                  &lt;\/div>\n                {%- endif -%}\n              &lt;\/a>\n            {%- else -%}\n              {%- if block.settings.logo != blank -%}\n                {{ image_tag }}\n              {%- else -%}\n                &lt;div class=\"placeholder-logo\" style=\"height: var(--logo-height); width: 100%; background: #eee; border-radius: 4px;\">\n                  &lt;!-- Placeholder for missing image -->\n                &lt;\/div>\n              {%- endif -%}\n            {%- endif -%}\n          &lt;\/div>\n        {%- endfor -%}\n        \n        {% comment %}\n          Duplicate the logos to create the seamless loop effect using CSS animation.\n          This second loop must exactly mirror the first.\n        {% endcomment %}\n        {%- for block in section.blocks -%}\n          {%- liquid\n            assign image_url = block.settings.logo | image_url: width: 300\n            assign image_alt = block.settings.logo.alt | default: block.settings.logo.original_filename\n            assign image_tag = block.settings.logo | image_url: width: 300 | image_tag: loading: 'lazy', sizes: '(max-width: 768px) 150px, 200px', widths: '100, 150, 200, 300', alt: image_alt\n            assign link = block.settings.link\n          -%}\n          \n          &lt;div class=\"logo-item\" aria-hidden=\"true\">\n            {%- if link != blank -%}\n              &lt;a href=\"{{ link }}\" title=\"{{ 'sections.scrolling_logos.link_title' | t: title: image_alt }}\" style=\"pointer-events: auto;\">\n                {%- if block.settings.logo != blank -%}\n                  {{ image_tag }}\n                {%- else -%}\n                  &lt;div class=\"placeholder-logo\" style=\"height: var(--logo-height); width: 100%; background: #eee; border-radius: 4px;\">\n                    &lt;!-- Placeholder for missing image -->\n                  &lt;\/div>\n                {%- endif -%}\n              &lt;\/a>\n            {%- else -%}\n              {%- if block.settings.logo != blank -%}\n                {{ image_tag }}\n              {%- else -%}\n                &lt;div class=\"placeholder-logo\" style=\"height: var(--logo-height); width: 100%; background: #eee; border-radius: 4px;\">\n                  &lt;!-- Placeholder for missing image -->\n                &lt;\/div>\n              {%- endif -%}\n            {%- endif -%}\n          &lt;\/div>\n        {%- endfor -%}\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/section>\n\n{% schema %}\n{\n  \"name\": \"Trust: Scrolling Logos\",\n  \"tag\": \"section\",\n  \"settings\": [\n    {\n      \"type\": \"text\",\n      \"id\": \"title\",\n      \"label\": \"Heading\",\n      \"default\": \"Trusted by leading brands\"\n    },\n    {\n      \"type\": \"color\",\n      \"id\": \"background_color\",\n      \"label\": \"Background Color\",\n      \"default\": \"#ffffff\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"logo_height\",\n      \"min\": 20,\n      \"max\": 100,\n      \"step\": 5,\n      \"unit\": \"px\",\n      \"label\": \"Logo Height (Desktop)\",\n      \"default\": 40\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"spacing_desktop\",\n      \"min\": 10,\n      \"max\": 80,\n      \"step\": 5,\n      \"unit\": \"px\",\n      \"label\": \"Spacing Between Logos (Desktop)\",\n      \"default\": 40\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"spacing_mobile\",\n      \"min\": 5,\n      \"max\": 40,\n      \"step\": 5,\n      \"unit\": \"px\",\n      \"label\": \"Spacing Between Logos (Mobile)\",\n      \"default\": 20\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"scroll_speed\",\n      \"min\": 10,\n      \"max\": 60,\n      \"step\": 5,\n      \"unit\": \"s\",\n      \"label\": \"Scroll Speed (Lower is Faster)\",\n      \"default\": 40,\n      \"info\": \"Time it takes for the entire strip to complete one loop.\"\n    },\n    {\n      \"type\": \"header\",\n      \"content\": \"Section Padding\"\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"padding_top\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Padding Top\",\n      \"default\": 36\n    },\n    {\n      \"type\": \"range\",\n      \"id\": \"padding_bottom\",\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 4,\n      \"unit\": \"px\",\n      \"label\": \"Padding Bottom\",\n      \"default\": 36\n    }\n  ],\n  \"blocks\": [\n    {\n      \"type\": \"logo_item\",\n      \"name\": \"Logo\",\n      \"settings\": [\n        {\n          \"type\": \"image_picker\",\n          \"id\": \"logo\",\n          \"label\": \"Brand Logo (SVG or PNG recommended)\",\n          \"info\": \"Logos should be simple and high-quality.\"\n        },\n        {\n          \"type\": \"url\",\n          \"id\": \"link\",\n          \"label\": \"Logo Link (Optional)\"\n        }\n      ]\n    }\n  ],\n  \"presets\": [\n    {\n      \"name\": \"Scrolling Brand Logos\",\n      \"blocks\": [\n        {\n          \"type\": \"logo_item\"\n        },\n        {\n          \"type\": \"logo_item\"\n        },\n        {\n          \"type\": \"logo_item\"\n        },\n        {\n          \"type\": \"logo_item\"\n        }\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=\"707\" height=\"727\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code.png\" alt=\"Liquid code to Add a Scrolling Logos Section in Shopify.\" class=\"wp-image-23101\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code.png 707w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-292x300.png 292w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Show the Section in the Frontend<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now head back to the Shopify admin panel, <strong>Online store &gt; Themes &gt; Customize.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, from the theme editor left sidebar, click <strong>Add section <\/strong>and search for <strong>Scrolling Brand logos, <\/strong>select it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"704\" height=\"66\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-add-section-1.png\" alt=\"Theme editor showing how you Add a Scrolling Logos Section in Shopify.\" class=\"wp-image-23097\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-add-section-1.png 704w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-add-section-1-300x28.png 300w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Scrolling Brand Logos <\/strong>to expand the customization settings. Then, from here, you can add logos and make other basic changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure to also optimize and <a href=\"https:\/\/meetanshi.com\/blog\/why-is-my-logo-blurry-on-shopify\/\">fix blurry logos on Shopify<\/a> so they appear crisp and polished.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"383\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-1-1024x383.png\" alt=\"Theme editor showing customisation option to add a scrolling logos.\" class=\"wp-image-23098\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-1-1024x383.png 1024w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-1-300x112.png 300w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-1-768x287.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-edit-section-1.png 1395w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Once done customizing the section, <strong>save <\/strong>it. See the preview in the frontend. This is how it looks, simple and minimal.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1110\" height=\"208\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/10\/code-preview.gif\" alt=\"Preview of the scrolling logos section in Shopify using code.\" class=\"wp-image-23100\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Why Choose the App Method?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For Shopify owners, the MIT Sections Pro app is a superior choice for a scrolling logo section due to its simplicity and robust features, including various scrolling animations like cross-logo and horizontal, which would otherwise require expert coding skills.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Explore a broad range of expertly designed sections that cater to any need your storefront may have<\/li>\n\n\n\n<li>Begin with free templates or unlock advanced options by choosing from premium sections<\/li>\n\n\n\n<li>Effortlessly add, customize, or swap out sections at any time, all without the need for technical expertise<\/li>\n\n\n\n<li>Universal compatibility with all Shopify themes, fast loading speeds, and seamless design integration<\/li>\n\n\n\n<li>Take advantage of limitless customization with no hidden restrictions, allowing for true brand alignment<\/li>\n\n\n\n<li>Adapt your store easily as it grows by adding or exchanging sections for a fresh, up-to-date look<\/li>\n\n\n\n<li>Install for free and benefit from transparent, affordable pricing that fits any business<\/li>\n\n\n\n<li>Use the free trial to make sure the features and compatibility are just right before deciding<\/li>\n<\/ul>\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>Instead of stacking logos in one place, make them flow across your Shopify store with a scrolling effect. This not only adds movement and life&#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-23074","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23074","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=23074"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23074\/revisions"}],"predecessor-version":[{"id":23509,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23074\/revisions\/23509"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=23074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=23074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=23074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}