Shopify Instagram Slider – Showcase Your Social Presence
Add a dynamic Instagram slider to your Shopify store. Features profile images, post previews, and customizable text for an engaging social media showcase. Fully responsive and interactive.
Liquid Code
<!-- ======================================== Section Name: Instagram Slider Tech Stack: Liquid, HTML, CSS, JavaScript What This Section Does: - Displays an interactive Instagram slider with profile images, post previews, and captions. - Includes customizable title, subtitle, and colors for seamless branding. - Fully responsive design with Swiper.js for smooth navigation and scalability. Promotion: Enhance your Shopify store's social engagement with a sleek Instagram slider. Showcase your latest posts and connect with your audience. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/). ======================================== --> <section class="custom-instagram-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;"> <div class="instagram-container page-width"> <!-- Section Title and Subtitle --> <div class="instagram-header"> <p class="instagram-subtitle" style="color: {{ section.settings.subtitle_color }};">{{ section.settings.subtitle }}</p> <h2 class="instagram-title" style="color: {{ section.settings.title_color }};">{{ section.settings.title }}</h2> </div> <!-- Swiper Slider --> <div class="swiper instagram-slider"> <div class="swiper-wrapper"> {% for block in section.blocks %} <div class="swiper-slide instagram-post"> <!-- Profile Information --> <div class="profile-info"> {% if block.settings.profile_image != blank %} <img src="{{ block.settings.profile_image | img_url: '50x50' }}" alt="{{ block.settings.name }}" class="profile-img" /> {% endif %} <div class="profile-text"> <p class="profile-name" style="color: {{ block.settings.name_color }};">{{ block.settings.name }}</p> <p class="profile-username" style="color: {{ block.settings.username_color }};">{{ block.settings.username }}</p> </div> </div> <!-- Post Image --> {% if block.settings.post_image != blank %} <div class="post-image"> <a href="{{ block.settings.instaid }}"> <img src="{{ block.settings.post_image | img_url: 'master' }}" alt="{{ block.settings.name }}" /> </a> </div> {% endif %} <!-- Post Text --> <p class="post-text" style="color: {{ block.settings.text_color }};">{{ block.settings.text }}</p> </div> {% endfor %} </div> <!-- Slider Navigation --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </section> <!-- Swiper.js CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { const swiper = new Swiper(".instagram-slider", { slidesPerView: 1, spaceBetween: 20, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 768: { slidesPerView: 2, }, 1024: { slidesPerView: 4, }, 1280: { slidesPerView: 4, }, }, }); }); </script> <style> .custom-instagram-section { width: 100%; } .instagram-header { text-align: center; margin-bottom: 30px; } .instagram-subtitle { font-size: 3rem; font-weight: bold; margin: 0; } .instagram-title { font-size: 2rem; font-weight: bold; margin: 0; } .post-image { overflow: hidden; } .post-image img:hover { transform: scale(1.1); } .profile-info { display: flex; align-items: center; padding: 10px 0; } .profile-img { width: 50px; object-fit: cover; height: 50px; object-position: center; border-radius: 50%; } .post-text { letter-spacing: 0; line-height: 1.4; } .profile-text { margin-left: 10px; } .profile-name { font-size: 1rem; } .post-text { margin: 0; } p.profile-name { font-size: 14px; } .profile-username { font-size: .9rem; } .profile-text p { margin: 0; color:#000; } .post-image img { transition: all 0.3s ease; width: 100%; } .post-text { } </style> {% schema %} { "name": "Instagram Slider", "settings": [ { "type": "color", "id": "background_color", "label": "Background Color" }, { "type": "range", "id": "padding_top", "label": "Padding Top", "min": 0, "max": 200, "step": 2, "default": 50 }, { "type": "range", "id": "padding_bottom", "label": "Padding Bottom", "min": 0, "max": 200, "step": 2, "default": 50 }, { "type": "color", "id": "title_color", "label": "Title Color" }, { "type": "text", "id": "title", "label": "Title", "default": "Follow Us on Instagram" }, { "type": "color", "id": "subtitle_color", "label": "Subtitle Color" }, { "type": "text", "id": "subtitle", "label": "Subtitle", "default": "Stay connected with our latest updates" } ], "blocks": [ { "type": "post", "name": "Instagram Post", "settings": [ { "type": "url", "id": "instaid", "label": "Instapost Url" }, { "type": "image_picker", "id": "profile_image", "label": "Profile Image" }, { "type": "text", "id": "name", "label": "Profile Name", "default": "John Doe" }, { "type": "color", "id": "name_color", "label": "Profile Name Color" }, { "type": "text", "id": "username", "label": "Username", "default": "@johndoe" }, { "type": "color", "id": "username_color", "label": "Username Color" }, { "type": "image_picker", "id": "post_image", "label": "Post Image" }, { "type": "text", "id": "text", "label": "Post Text", "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, { "type": "color", "id": "text_color", "label": "Post Text Color" } ] } ], "presets": [ { "name": "Instagram Slider", "category": "Social Media" } ] } {% endschema %}