Shopify Product Slider – Dynamic Product Showcase
Showcase your Shopify products with a fully customizable product slider. Features dynamic navigation, product details, and add-to-cart functionality. Responsive design for seamless mobile and desktop browsing.
Liquid Code
<!-- ======================================== Section Name: Product Slider Tech Stack: Liquid, HTML, CSS, JavaScript What This Section Does: - Displays a dynamic product slider with customizable navigation and product details. - Includes product images, titles, prices, ratings, descriptions, and action buttons. - Fully responsive design for mobile and desktop users. - Supports dynamic product loading from a selected collection. Promotion: Enhance your Shopify store with an engaging product slider. Showcase featured products dynamically to boost conversions. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/). ======================================== --> <section class="product-showcase-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;"> <div class="product-showcase-container page-width"> {% assign products = collections[section.settings.collection].products | limit: section.settings.product_limit %} {% for product in products %} <div class="product-display" data-product-index="{{ forloop.index0 }}" {% if forloop.first != true %}style="display: none;"{% endif %}> <div class="product-grid"> <!-- Left Column: Product Image --> <div class="product-image-column"> <div class="product-image-wrapper"> <img src="{{ product.featured_image | img_url: 'master' }}" alt="{{ product.title }}" /> </div> <div class="product-navigation"> <button class="product-nav-btn prev-product"> <span>❮</span> </button> <button class="product-nav-btn next-product"> <span>❯</span> </button> </div> </div> <!-- Right Column: Product Details --> <div class="product-details-column"> <div class="product-category">{{ product.type }}</div> <h2 class="product-title">{{ product.title }}</h2> <div class="product-price"> {% if product.compare_at_price > product.price %} <span class="sale-price">{{ product.price | money }}</span> <span class="compare-price">{{ product.compare_at_price | money }}</span> {% else %} <span class="regular-price">{{ product.price | money }}</span> {% endif %} </div> <div class="product-rating"> {% assign avg_rating = product.metafields.reviews.rating.value | default: 4.7 | plus: 0 %} {% assign rating_floor = avg_rating | floor %} {% for i in (1..5) %} {% if i <= rating_floor %} <span class="star">★</span> {% else %} <span class="star empty">☆</span> {% endif %} {% endfor %} <span class="rating-count">({{ avg_rating | round: 1 }} / {{ product.metafields.reviews.rating_count.value | default: 5 }})</span> </div> <div class="product-description"> {{ product.description | strip_html | truncatewords: 30 }} </div> <div class="product-actions"> <a href="{{ product.url }}" class="btn buy-now">{{ section.settings.buy_button_text }}</a> <product-form data-section-id="{{ section.id }}"> {%- form 'product', product, id: 'product-form-{{ product.id }}', class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" class="product-variant-id" {% if product.selected_or_first_available_variant.available == false %} disabled {% endif %} > <button id="product-form-{{ product.id }}-submit" type="submit" name="add" class="quick-add__submit button button--full-width button--secondary" aria-haspopup="dialog" aria-labelledby="product-form-{{ product.id }}-submit title-{{ section.id }}-{{ product.id }}" aria-live="polite" data-sold-out-message="true" {% if product.selected_or_first_available_variant.available == false %} disabled {% endif %} > <span> {%- if product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} </span> <span class="sold-out-message hidden"> {{ 'products.product.sold_out' | t }} </span> {%- render 'loading-spinner' -%} </button> {%- endform -%} </product-form> </div> <div class="shipping-info"> {{ section.settings.shipping_text }} </div> </div> </div> </div> {% endfor %} </div> </section> <script> document.addEventListener("DOMContentLoaded", function() { const productDisplays = document.querySelectorAll('.product-display'); let currentIndex = 0; const totalProducts = productDisplays.length; function showProduct(index) { productDisplays.forEach((product, i) => { product.style.display = i === index ? 'block' : 'none'; }); currentIndex = index; updateButtons(); } function updateButtons() { const activeProduct = productDisplays[currentIndex]; const prevBtn = activeProduct.querySelector('.prev-product'); const nextBtn = activeProduct.querySelector('.next-product'); // Remove existing event listeners prevBtn.replaceWith(prevBtn.cloneNode(true)); nextBtn.replaceWith(nextBtn.cloneNode(true)); // Select new buttons after replacing const newPrevBtn = activeProduct.querySelector('.prev-product'); const newNextBtn = activeProduct.querySelector('.next-product'); newPrevBtn.addEventListener('click', function() { let prevIndex = currentIndex - 1; if (prevIndex < 0) prevIndex = totalProducts - 1; showProduct(prevIndex); }); newNextBtn.addEventListener('click', function() { let nextIndex = currentIndex + 1; if (nextIndex >= totalProducts) nextIndex = 0; showProduct(nextIndex); }); } // Show first product and update buttons showProduct(0); }); </script> <style> .product-showcase-section { width: 100%; } .product-showcase-container { max-width: 1200px; margin: 0 auto; position: relative; } .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .product-image-column { position: relative; } .product-image-wrapper img { width: 100%; border-radius: 8px; object-fit: cover; height: 700px; object-position: center; } body button.quick-add__submit , product-form form { height: 100%!important; } .product-category { font-size: 14px; color: #666; margin-bottom: 10px; } .product-title { font-size: 28px; font-weight: bold; margin-bottom: 15px; } .product-price { display: flex; gap: 10px; margin-bottom: 15px; } .sale-price { font-weight: bold; color: #000; } .compare-price { text-decoration: line-through; color: #999; } .product-rating { display: flex; align-items: center; margin-bottom: 15px; } .star { color: gold; } .star.empty { color: #ccc; } .rating-count { margin-left: 5px; color: #666; } .product-description { margin-bottom: 20px; line-height: 1.5; } .product-actions { display: flex; gap: 10px; margin-bottom: 15px; } .btn { padding: 12px 25px; border-radius: 5px; font-weight: 500; text-decoration: none; text-align: center; } .buy-now { background-color: #000; color: #fff; } .add-to-cart { background-color: #f5f5f5; color: #000; border: none; cursor: pointer; } .shipping-info { font-size: 14px; color: #666; } .product-navigation { display: flex; position: absolute; justify-content: flex-start; align-items: center; bottom: 20px; margin-top: 30px; right: 0; gap: 15px; left: 20px; } .product-nav-btn { background: rgba(0, 0, 0, 0.1); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; } .product-nav-btn:hover { background: rgba(0, 0, 0, 0.2); } .product-indicators { display: flex; gap: 8px; } .product-indicator { width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .product-indicator.active { background-color: #000; } @media (max-width: 768px) { .product-grid { grid-template-columns: 1fr; } } </style> {% schema %} { "name": "Product Slider", "settings": [ { "type": "color", "id": "background_color", "label": "Background Color", "default": "#ffffff" }, { "type": "range", "id": "padding_top", "label": "Padding Top", "default": 60, "min": 0, "max": 100, "step": 5 }, { "type": "range", "id": "padding_bottom", "label": "Padding Bottom", "default": 60, "min": 0, "max": 100, "step": 5 }, { "type": "collection", "id": "collection", "label": "Collection" }, { "type": "range", "id": "product_limit", "label": "Number of Products", "default": 5, "min": 1, "max": 10, "step": 1 }, { "type": "text", "id": "buy_button_text", "label": "Buy Now Button Text", "default": "Buy now" }, { "type": "text", "id": "cart_button_text", "label": "Add to Cart Button Text", "default": "Add to cart" }, { "type": "text", "id": "shipping_text", "label": "Shipping Information", "default": "Free standard shipping for orders over $50" } ], "presets": [ { "name": "Product Slider", "category": "Products" } ] } {% endschema %}