Shopify Product Slider – Dynamic Product Showcase

                    <!-- 
========================================
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 %}