Custom Code to Add Press Slider in Shopify <\/h2>\n\n\n\n
Below are the steps to add a press slider section using Liquid code.<\/p>\n\n\n\n
Step 1: Create a New Section<\/h3>\n\n\n\n
From your Shopify admin panel, navigate to Online store > Themes > \u2026(three dots) > Edit code.<\/strong><\/p>\n\n\n\n In the Sections<\/strong> folder, add a new section and save it as press-slider.liquid.<\/strong><\/p>\n\n\n\n Then paste the following code into the newly created section and save <\/strong>it.<\/p>\n\n\n\n Now add this section to the page, head to Online store > Themes > Customize.<\/strong><\/p>\n\n\n\n From the theme editor, click the Add section <\/strong>and select Press slider.<\/strong><\/p>\n\n\n Then, from here, you make the basic changes.<\/p>\n\n\n Once done making the changes, save <\/strong>them, and this is how it will look (simple and minimal layout).<\/p>\n\n\n Our app MIT Sections Pro gives you the full authority to customize the section however you want, plus it gives you multiple different styles of the sections, which you can choose from. The plus point is that you don\u2019t need coding, and it can be added quickly.<\/p>\n\n\n\n The section you\u2019ll get like this after using our app.<\/p>\n\n\n Let\u2019s see the app config.<\/p>\n\n\n\n Install the MIT Sections Pro<\/a> <\/strong>from the Shopify App Store, then from the app dashboard, click Browse sections <\/strong>and search for the press slider.<\/strong><\/p>\n\n\n Here we will move forward with the Press slider 3. <\/strong>You can select the one that goes with your brand. Select the section and click Try for free <\/strong>to check the features and preview of the section with zero cost. <\/p>\n\n\n While on the free trial, you will be redirected to the MIT demo store. After buying the section, you can integrate it into your store\u2019s theme. <\/p>\n\n\n\n Now, from the Shopify theme editor, click Press slider 3<\/strong> to access the customization settings. Here, you get 20+ options to blend the section as you wish.<\/p>\n\n\n After making the edits in the section, save<\/strong> them, and this is how it will look.<\/p>\n\n\n Choosing MIT Sections Pro for your store means opting for an easier approach to integrating stunning sections effortlessly, rather than simply adding features.<\/p>\n\n\n\n Beyond just the press slider, our app provides a comprehensive suite of over 130 free and premium sections, including a Shopify number counter section<\/a>, banners, testimonials, and FAQs, all designed to help you construct an exceptional Shopify store.<\/p>\n\n\n\n With our app:<\/p>\n\n\n\nStep 2: Add the Press Slider Code<\/h3>\n\n\n\n
{% schema %}\n{\n \"name\": \"Press Slider\",\n \"settings\": [\n {\n \"type\": \"text\",\n \"id\": \"heading\",\n \"label\": \"Section Heading\",\n \"default\": \"Press & Recognitions\"\n }\n ],\n \"blocks\": [\n {\n \"type\": \"press_item\",\n \"name\": \"Press Item\",\n \"settings\": [\n {\n \"type\": \"image_picker\",\n \"id\": \"logo\",\n \"label\": \"Logo\"\n },\n {\n \"type\": \"text\",\n \"id\": \"title\",\n \"label\": \"Title\",\n \"default\": \"Top E-commerce Developers\"\n },\n {\n \"type\": \"textarea\",\n \"id\": \"description\",\n \"label\": \"Description\",\n \"default\": \"Your description goes here...\"\n }\n ]\n }\n ],\n \"presets\": [\n {\n \"name\": \"Press Slider\",\n \"category\": \"Custom\"\n }\n ]\n}\n{% endschema %}\n\n<section class=\"press-slider\">\n <div class=\"container mx-auto px-4\">\n {% if section.settings.heading != blank %}\n <h2 class=\"text-center text-2xl font-bold mb-8\">{{ section.settings.heading }}<\/h2>\n {% endif %}\n <div class=\"swiper pressSwiper\">\n <div class=\"swiper-wrapper\">\n {% for block in section.blocks %}\n <div class=\"swiper-slide\">\n <div class=\"press-card p-6 bg-white rounded-2xl shadow-md text-center\">\n {% if block.settings.logo %}\n <img src=\"{{ block.settings.logo | img_url: '1000x' }}\" alt=\"{{ block.settings.title }}\" class=\"mx-auto mb-4 h-16 object-contain\">\n {% endif %}\n <h3 class=\"font-semibold text-lg mb-2\">{{ block.settings.title }}<\/h3>\n <p class=\"text-gray-600 text-sm\">{{ block.settings.description }}<\/p>\n <\/div>\n <\/div>\n {% endfor %}\n <\/div>\n <!-- Slider navigation -->\n <div class=\"swiper-button-next\"><\/div>\n <div class=\"swiper-button-prev\"><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n{% stylesheet %}\n.press-card {\n min-height: 250px;\n}\n.swiper-button-next, .swiper-button-prev {\n color: black;\n}\n{% endstylesheet %}\n\n{% javascript %}\nvar swiper = new Swiper(\".pressSwiper\", {\n slidesPerView: 3,\n spaceBetween: 20,\n loop: true,\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\",\n },\n breakpoints: {\n 1024: { slidesPerView: 3 },\n 768: { slidesPerView: 2 },\n 480: { slidesPerView: 1 }\n }\n});\n{% endjavascript %}\n<\/pre>\n\n\n![\"Custom](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-4.png\")
<\/figure>\n<\/div>\n\n\nStep 3: Edit & Preview the Section<\/h3>\n\n\n\n
![\"In](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-add-section-9.png\")
<\/figure>\n<\/div>\n\n\n![\"From](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-edit-section-6-700x262.png\")
<\/figure>\n<\/div>\n\n\n![\"Previews](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-preview-8-700x521.png\")
<\/figure>\n<\/div>\n\n\nAdd Press Slider Section Using an App<\/h2>\n\n\n\n
![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-preview-8-700x307.png\")
<\/figure>\n<\/div>\n\n\nStep 1: Directly Add the Section <\/h3>\n\n\n\n
![\"On](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/browse-section-13-700x242.png\")
<\/figure>\n<\/div>\n\n\n![\"Click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/try-for-free-12-700x316.png\")
<\/figure>\n<\/div>\n\n\nStep 2: Customize as You Like<\/h3>\n\n\n\n
![\"From](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-edit-section-5-700x368.png\")
<\/figure>\n<\/div>\n\n\nStep 3: Display in Your Store<\/h3>\n\n\n\n
![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-preview-9-700x307.png\")
<\/figure>\n<\/div>\n\n\nWhy Use the MIT Sections Pro App?<\/h2>\n\n\n\n
\n
![\"MIT](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/mit-sections-pro.png\")
\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"