{"id":22403,"date":"2025-09-24T15:00:00","date_gmt":"2025-09-24T09:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=22403"},"modified":"2025-10-09T17:33:21","modified_gmt":"2025-10-09T12:03:21","slug":"add-slideshow-section-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-slideshow-section-shopify\/","title":{"rendered":"How to Add a Slideshow Section in Shopify?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Static images say little, but a slideshow speaks volumes. With just a few steps, you can have a dynamic feature on your Shopify store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog, you\u2019ll learn to add a slideshow section in Shopify using different methods.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Methods to Add a Slideshow Section<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are three methods to add this section to your Shopify store, each with different functionality and complexity.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using a built-in theme editor &#8211;<\/strong> Shopify default theme includes a basic slideshow option that can be added directly from the theme editor. It\u2019s simple to set up but comes with very limited customization.<\/li>\n\n\n\n<li><strong>Adding a custom code &#8211; <\/strong>If your theme doesn\u2019t support slideshows or you want more control, you can manually create one using Liquid, CSS, and JavaScript. This requires technical expertise and takes more time to implement.<\/li>\n\n\n\n<li><strong>Through a Shopify app &#8211; <\/strong>The easiest method is to use a dedicated Shopify app. It lets you add a fully customizable slideshow with advanced features without no coding.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Using Shopify Built-in Theme Editor (Dawn Theme)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the steps to add a Shopify slideshow section through the theme editor in the Dawn theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Head to the Theme Editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To add a section, go to your Shopify admin panel, then navigate to <strong>Online store &gt; Theme<\/strong>, and click <strong>Customize<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add the Slideshow Section&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">From the theme editor section, click <strong>Add section <\/strong>under templates, and look for <strong>Slideshow <\/strong>and select it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"565\" height=\"125\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-slideshow-from-theme-editor-.png\" alt=\"Add slideshow from theme editor\" class=\"wp-image-22422\" style=\"width:836px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-slideshow-from-theme-editor-.png 565w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-slideshow-from-theme-editor--250x55.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-slideshow-from-theme-editor--403x89.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-slideshow-from-theme-editor--120x27.png 120w\" sizes=\"auto, (max-width: 565px) 100vw, 565px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Then, using the settings, add the image you want to display in the slideshow and configure other settings.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"345\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-image-to-add-in-your-slider-700x345.png\" alt=\"Add image to add in your slider\" class=\"wp-image-22418\" style=\"width:769px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-image-to-add-in-your-slider-700x345.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-image-to-add-in-your-slider-250x123.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-image-to-add-in-your-slider-768x379.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-image-to-add-in-your-slider-403x199.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-image-to-add-in-your-slider-964x476.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-image-to-add-in-your-slider-120x59.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-image-to-add-in-your-slider.png 1384w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/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\">Once you finish making the edits. <strong>Save<\/strong> them. And this is how simple it will look.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1238\" height=\"628\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Basic-Shopify-Slideshow.gif\" alt=\"Basic Shopify Slideshow\" class=\"wp-image-22424\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Steps to Display a Slideshow Section Via Liquid Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The following are the steps and the code to add the Shopify image slideshow section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Access the Theme Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">From your <strong>Shopify admin panel <\/strong>navigate to <strong>Online store &gt; Themes &gt; \u2026(three dots) &gt; Edit code<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"553\" height=\"173\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Head-to-theme-code-in-Shopify.png\" alt=\"Head to theme code in Shopify\" class=\"wp-image-22430\" style=\"width:758px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Head-to-theme-code-in-Shopify.png 553w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Head-to-theme-code-in-Shopify-250x78.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Head-to-theme-code-in-Shopify-403x126.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Head-to-theme-code-in-Shopify-120x38.png 120w\" sizes=\"auto, (max-width: 553px) 100vw, 553px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Paste the Slideshow Liquid Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, create a new section and name it <strong>Slideshow1.liquid.<\/strong>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Paste the provided code into this new section and save the changes.<\/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\n\u00a0\u00a0.custom-slideshow-container {\n\n\u00a0\u00a0\u00a0\u00a0position: relative;\n\n\u00a0\u00a0\u00a0\u00a0width: 100%;\n\n\u00a0\u00a0\u00a0\u00a0overflow: hidden;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-slide {\n\n\u00a0\u00a0\u00a0\u00a0display: none;\n\n\u00a0\u00a0\u00a0\u00a0width: 100%;\n\n\u00a0\u00a0\u00a0\u00a0text-align: center;\n\n\u00a0\u00a0\u00a0\u00a0max-width: 50%;\n\n\u00a0\u00a0\u00a0\u00a0margin: 0 auto;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-slide.active {\n\n\u00a0\u00a0\u00a0\u00a0display: block;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-slide img {\n\n\u00a0\u00a0\u00a0\u00a0width: 100%;\n\n\u00a0\u00a0\u00a0\u00a0height: auto;\n\n\u00a0\u00a0\u00a0\u00a0display: block;\n\n\u00a0\u00a0\u00a0\u00a0object-fit: contain;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-nav-arrow {\n\n\u00a0\u00a0\u00a0\u00a0position: absolute;\n\n\u00a0\u00a0\u00a0\u00a0top: 50%;\n\n\u00a0\u00a0\u00a0\u00a0transform: translateY(-50%);\n\n\u00a0\u00a0\u00a0\u00a0cursor: pointer;\n\n\u00a0\u00a0\u00a0\u00a0background-color: rgba(0, 0, 0, 0.5);\n\n\u00a0\u00a0\u00a0\u00a0color: white;\n\n\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\n\u00a0\u00a0\u00a0\u00a0border-radius: 50%;\n\n\u00a0\u00a0\u00a0\u00a0user-select: none;\n\n\u00a0\u00a0\u00a0\u00a0z-index: 10;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-nav-arrow.prev {\n\n\u00a0\u00a0\u00a0\u00a0left: 20px;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-nav-arrow.next {\n\n\u00a0\u00a0\u00a0\u00a0right: 20px;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-dots-container {\n\n\u00a0\u00a0\u00a0\u00a0text-align: center;\n\n\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\n\u00a0\u00a0\u00a0\u00a0position: absolute;\n\n\u00a0\u00a0\u00a0\u00a0bottom: 20px;\n\n\u00a0\u00a0\u00a0\u00a0width: 100%;\n\n\u00a0\u00a0\u00a0\u00a0z-index: 10;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-dot {\n\n\u00a0\u00a0\u00a0\u00a0height: 12px;\n\n\u00a0\u00a0\u00a0\u00a0width: 12px;\n\n\u00a0\u00a0\u00a0\u00a0margin: 0 5px;\n\n\u00a0\u00a0\u00a0\u00a0background-color: #bbb;\n\n\u00a0\u00a0\u00a0\u00a0border-radius: 50%;\n\n\u00a0\u00a0\u00a0\u00a0display: inline-block;\n\n\u00a0\u00a0\u00a0\u00a0cursor: pointer;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0.slideshow-dot.active {\n\n\u00a0\u00a0\u00a0\u00a0background-color: #555;\n\n\u00a0\u00a0}\n\n{% endstyle %}\n\n&lt;div class=\"custom-slideshow-container\" data-autoplay=\"{{ section.settings.autoplay }}\">\n\n\u00a0\u00a0{% for block in section.blocks %}\n\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"slideshow-slide\" data-slide-index=\"{{ forloop.index0 }}\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{% if block.settings.image != blank %}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ block.settings.image | image_url: width: 1920 | image_tag: loading: 'lazy', alt: block.settings.image.alt }}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{% else %}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"slideshow-placeholder\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ 'image' | placeholder_svg_tag }}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{% endif %}\n\n\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0{% endfor %}\n\n\u00a0\u00a0{% if section.blocks.size > 1 %}\n\n\u00a0\u00a0\u00a0\u00a0&lt;a class=\"slideshow-nav-arrow prev\" onclick=\"changeSlide(-1)\">&amp;#10094;&lt;\/a>\n\n\u00a0\u00a0\u00a0\u00a0&lt;a class=\"slideshow-nav-arrow next\" onclick=\"changeSlide(1)\">&amp;#10095;&lt;\/a>\n\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"slideshow-dots-container\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{% for block in section.blocks %}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"slideshow-dot\" onclick=\"currentSlide({{ forloop.index }})\">&lt;\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{% endfor %}\n\n\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\n\u00a0\u00a0{% endif %}\n\n&lt;\/div>\n\n&lt;script>\n\n\u00a0\u00a0let slideIndex = 1;\n\n\u00a0\u00a0let slideshowTimeout;\n\n\u00a0\u00a0const autoplayEnabled = document.querySelector('.custom-slideshow-container').dataset.autoplay === 'true';\n\n\u00a0\u00a0function showSlides(n) {\n\n\u00a0\u00a0\u00a0\u00a0let i;\n\n\u00a0\u00a0\u00a0\u00a0const slides = document.getElementsByClassName(\"slideshow-slide\");\n\n\u00a0\u00a0\u00a0\u00a0const dots = document.getElementsByClassName(\"slideshow-dot\");\n\n\u00a0\u00a0\u00a0\u00a0if (n > slides.length) { slideIndex = 1 }\n\n\u00a0\u00a0\u00a0\u00a0if (n &lt; 1) { slideIndex = slides.length }\n\n\u00a0\u00a0\u00a0\u00a0for (i = 0; i &lt; slides.length; i++) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slides[i].style.display = \"none\";\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0for (i = 0; i &lt; dots.length; i++) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dots[i].className = dots[i].className.replace(\" active\", \"\");\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0slides[slideIndex-1].style.display = \"block\";\n\n\u00a0\u00a0\u00a0\u00a0if (dots[slideIndex - 1]) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dots[slideIndex - 1].className += \" active\";\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0if (autoplayEnabled) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0clearTimeout(slideshowTimeout);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slideshowTimeout = setTimeout(() => changeSlide(1), 5000); \/\/ Change image every 5 seconds\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n\u00a0\u00a0function changeSlide(n) {\n\n\u00a0\u00a0\u00a0\u00a0showSlides(slideIndex += n);\n\n\u00a0\u00a0}\n\n\u00a0\u00a0function currentSlide(n) {\n\n\u00a0\u00a0\u00a0\u00a0showSlides(slideIndex = n);\n\n\u00a0\u00a0}\n\n\u00a0\u00a0showSlides(slideIndex);\n\n&lt;\/script>\n\n{% schema %}\n\n{\n\n\u00a0\u00a0\"name\": \"Custom Slideshow\",\n\n\u00a0\u00a0\"settings\": [\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\": \"checkbox\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"id\": \"autoplay\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"label\": \"Enable autoplay\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"default\": true\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0],\n\n\u00a0\u00a0\"blocks\": [\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\": \"slide\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"name\": \"Slide\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"settings\": [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\": \"image_picker\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"id\": \"image\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"label\": \"Image\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0],\n\n\u00a0\u00a0\"presets\": [\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"name\": \"Custom Slideshow\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"category\": \"Image\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"blocks\": [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\": \"slide\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\": \"slide\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\": \"slide\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0]\n\n}\n\n{% endschema %}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add Collection in Theme Editor&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once the file is saved, navigate to the theme editor using this navigation: <strong>Online Store &gt; Themes &gt; Customize<\/strong>. From there, click the <strong>Add section<\/strong> and locate the section you just created.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After adding your desired images, configure the settings and <strong>save<\/strong> your changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And this is how it\u2019ll showcase, very basic.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"512\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Show-Shopify-slider-in-the-frontend.gif\" alt=\"Show Shopify slider in the frontend\" class=\"wp-image-22438\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Add a Pre-built Shopify Slideshow Section<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Your slideshow shouldn\u2019t just decorate your homepage; it should drive engagement, enhance slides with buttons, headlines, and descriptions that guide shoppers seamlessly through your store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Something like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"684\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Shopify-customizable-slider.gif\" alt=\"Shopify customizable slider\" class=\"wp-image-22436\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Using our <strong>MIT Section Pro, <\/strong>you can quickly create a modern and fancy slideshow section exactly like above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install and Select a 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>app from the Shopify App Store. From the app dashboard, click the <strong>Browse section <\/strong>and search for the Slideshow section.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"241\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Search-for-Slideshow-section--700x241.png\" alt=\"Search for Slideshow section\" class=\"wp-image-22434\" style=\"width:764px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Search-for-Slideshow-section--700x241.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Search-for-Slideshow-section--250x86.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Search-for-Slideshow-section--768x264.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Search-for-Slideshow-section--403x139.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Search-for-Slideshow-section--964x332.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Search-for-Slideshow-section--120x41.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Search-for-Slideshow-section-.png 1169w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Choose your preferred slideshow option for purchase. Here, we will proceed with <strong>Slideshow 1<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Click the Try for Free Button<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve selected the section, click <strong>Try for Free<\/strong> for a complimentary trial before purchasing.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"325\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Click-on-try-for-free-section--700x325.png\" alt=\"Click on try for free section\" class=\"wp-image-22426\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Click-on-try-for-free-section--700x325.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Click-on-try-for-free-section--250x116.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Click-on-try-for-free-section--768x357.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Click-on-try-for-free-section--403x187.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Click-on-try-for-free-section--120x56.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Click-on-try-for-free-section-.png 940w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ll be directed to the MIT demo store during the free trial. After purchasing the section, you can integrate it into your store&#8217;s theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, from here, click the Add<strong> section <\/strong>and look for <strong>Meetanshi Slideshow 1.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"157\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-Meetanshi-slideshow-section.png\" alt=\"Add Meetanshi slideshow section\" class=\"wp-image-22420\" style=\"width:731px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-Meetanshi-slideshow-section.png 549w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-Meetanshi-slideshow-section-250x71.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-Meetanshi-slideshow-section-403x115.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Add-Meetanshi-slideshow-section-120x34.png 120w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Modify Slideshow Section<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here you get 60+ customization options, design every minor detail as you want. When you are done making 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=\"700\" height=\"388\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Save-the-slideshow--700x388.png\" alt=\"Save the slideshow\" class=\"wp-image-22432\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Save-the-slideshow--700x388.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Save-the-slideshow--250x139.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Save-the-slideshow--768x426.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Save-the-slideshow--403x224.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Save-the-slideshow--964x535.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Save-the-slideshow--120x67.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/Save-the-slideshow-.png 1402w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">MIT Sections Pro: Designed to Do More<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">MIT Sections Pro is your key to effortless store design.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Forget about coding and time-consuming tasks; our app gives you instant access to a library of over 130 pre-designed, professional sections. This includes everything from image galleries and collection carousels to newsletters and testimonials.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enhance your store\u2019s design with 130+ ready-to-use sections tailored for different needs<\/li>\n\n\n\n<li>Get started at zero cost while still enjoying advanced customization options<\/li>\n\n\n\n<li>Save time and money with a no-code setup that anyone can manage<\/li>\n\n\n\n<li>Deliver a smooth shopping experience with fast, theme-compatible sections<\/li>\n\n\n\n<li>Maintain full creative control, even with free templates<\/li>\n\n\n\n<li>Keep your store fresh by easily adding or swapping sections as your business grows<\/li>\n\n\n\n<li>Scale affordably with flexible pricing and a free trial to ensure the perfect fit<\/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\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Static images say little, but a slideshow speaks volumes. With just a few steps, you can have a dynamic feature on your Shopify store. In&#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-22403","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22403","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=22403"}],"version-history":[{"count":8,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22403\/revisions"}],"predecessor-version":[{"id":23523,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22403\/revisions\/23523"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=22403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=22403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=22403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}