Shopify Product Showcase – Special Offer & Best Sellers

                    <!-- 
========================================
Section Name: Product Showcase
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays a two-column layout with a special offer product and a slider of best sellers.
- Features customizable badges, discount percentages, and low stock warnings.
- Includes product ratings, pricing, and direct add-to-cart functionality.
- Fully responsive design that adapts from desktop to mobile layouts.

Promotion: 
Boost your Shopify store's conversions with this professional product showcase. Highlight special offers alongside your best sellers. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
{% comment %}
  Section: Product Showcase with Special Offer
  A two-column layout with special offer product and product slider
{% endcomment %}

<section class="product-showcase-section-{{ section.id }}" style="padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; background-color: {{ section.settings.bg_color }};">
  <div class="page-width">
    <div class="product-showcase-layout">
      <!-- Left Column - Special Offer Product -->
      <div class="special-offer-column">
        {% if section.settings.show_special_offer and section.settings.special_offer_product != blank %}
          {% assign special_product = all_products[section.settings.special_offer_product] %}
          {% if special_product != blank %}
            {% assign special_current_variant = special_product.selected_or_first_available_variant %}
            {% assign special_compare_price = special_current_variant.compare_at_price %}
            {% assign special_price = special_current_variant.price %}
            {% assign special_discount_percentage = 0 %}
            {% if special_compare_price > special_price %}
              {% assign special_discount_percentage = special_compare_price | minus: special_price | times: 100 | divided_by: special_compare_price | round %}
            {% endif %}
            
            <div class="special-offer-card">
              <div class="special-offer-badge">{{ section.settings.special_badge_text }}</div>
              
              {% if section.settings.show_stock_level and special_product.variants.first.inventory_quantity <= section.settings.low_stock_threshold %}
                <div class="stock-level">
                  <svg class="stock-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="8" cy="8" r="7" stroke="#FF6B00" stroke-width="1.5"/>
                    <path d="M8 4V8L10.5 10" stroke="#FF6B00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span class="stock-text">Low stock - {{ special_product.variants.first.inventory_quantity }} items left</span>
                </div>
              {% endif %}
              
              <a href="{{ special_product.url }}" class="special-offer-image-wrapper">
                {% if special_discount_percentage > 0 %}
                  <span class="discount-badge">{{ special_discount_percentage }}%</span>
                {% endif %}
                
                {% if special_product.featured_image != blank %}
                  <img class="special-offer-image" 
                    src="{{ special_product.featured_image | img_url: 'medium' }}"
                    alt="{{ special_product.featured_image.alt | escape }}">
                {% else %}
                  {{ 'product-1' | placeholder_svg_tag: 'special-offer-image placeholder' }}
                {% endif %}
              </a>
              
              <div class="special-offer-info">
                <div class="special-offer-price">
                  <span class="price-item price-item--sale">${{ special_price | money_without_currency }}</span>
                  {% if special_compare_price > special_price %}
                    <s class="price-item price-item--regular">${{ special_compare_price | money_without_currency }}</s>
                  {% endif %}
                </div>
                
                {% if section.settings.show_rating %}
                  <div class="product-rating" style="--stars: {{ section.settings.special_offer_rating }};">
                    <span class="stars">★★★★★</span>
                    <span class="rating-text">{{ section.settings.special_offer_rating }}</span>
                  </div>
                {% endif %}
                
                <h3 class="special-offer-title">
                  <a href="{{ special_product.url }}">{{ special_product.title }}</a>
                </h3>
                
                <form method="post" action="/cart/add" class="product-form" enctype="multipart/form-data">
                  <input type="hidden" name="id" value="{{ special_current_variant.id }}">
                  <button type="submit" name="add" class="add-to-cart-button special-offer-button">
                    {{ section.settings.add_to_cart_text }}
                  </button>
                </form>
              </div>
            </div>
          {% endif %}
        {% endif %}
      </div>
      
      <!-- Right Column - Best Sellers Heading + Slider -->
      <div class="product-slider-column">
        <!-- Top row - Section Heading -->
        <div class="section-header">
          <h2 class="section-title">{{ section.settings.title }}</h2>
        </div>
        
        <!-- Bottom row - Product Slider -->
        <div class="product-slider-wrapper">
          <div class="product-slider">
            {% if section.settings.collection != blank %}
              {% assign skip_product = section.settings.special_offer_product %}
              {% for product in collections[section.settings.collection].products limit: section.settings.products_to_show %}
                {% if product.handle != skip_product or section.settings.show_special_offer == false %}
                  {% assign current_variant = product.selected_or_first_available_variant %}
                  {% assign compare_price = current_variant.compare_at_price %}
                  {% assign price = current_variant.price %}
                  {% assign discount_percentage = 0 %}
                  {% if compare_price > price %}
                    {% assign discount_percentage = compare_price | minus: price | times: 100 | divided_by: compare_price | round %}
                  {% endif %}
                  
                  <div class="product-slide">
                    <div class="product-card">
                      <a href="{{ product.url }}" class="product-card-image-wrapper">
                        {% if discount_percentage > 0 %}
                          <span class="discount-badge">{{ discount_percentage }}%</span>
                        {% endif %}
                        
                        {% if product.featured_image != blank %}
                          <img class="product-card-image" 
                            src="{{ product.featured_image | img_url: 'medium' }}"
                            alt="{{ product.featured_image.alt | escape }}">
                        {% else %}
                          {{ 'product-1' | placeholder_svg_tag: 'product-card-image placeholder' }}
                        {% endif %}
                      </a>
                      
                      <div class="product-card-info">
                        <div class="product-card-price">
                          <span class="price-item price-item--sale">${{ price | money_without_currency }}</span>
                          {% if compare_price > price %}
                            <s class="price-item price-item--regular">${{ compare_price | money_without_currency }}</s>
                          {% endif %}
                        </div>
                        
                        {% if section.settings.show_rating %}
                          <div class="product-rating" style="--stars: {{ block.settings.product_rating | default: section.settings.default_rating }};">
                            <span class="stars">★★★★★</span>
                            <span class="rating-text">{{ block.settings.product_rating | default: section.settings.default_rating }}</span>
                          </div>
                        {% endif %}
                        
                        <h3 class="product-card-title">
                          <a href="{{ product.url }}">{{ product.title }}</a>
                        </h3>
                        
                        <form method="post" action="/cart/add" class="product-form" enctype="multipart/form-data">
                          <input type="hidden" name="id" value="{{ current_variant.id }}">
                          <button type="submit" name="add" class="add-to-cart-button">
                            {{ section.settings.add_to_cart_text }}
                          </button>
                        </form>
                      </div>
                    </div>
                  </div>
                {% endif %}
              {% endfor %}
            {% endif %}
          </div>
          
          <button type="button" class="slider-control slider-prev" aria-label="Previous slide">
            <span aria-hidden="true">‹</span>
          </button>
          <button type="button" class="slider-control slider-next" aria-label="Next slide">
            <span aria-hidden="true">›</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

{% style %}
.product-showcase-section-{{ section.id }} {
  overflow: hidden;
}

.product-showcase-layout {
  display: flex;
  gap: 30px;
}

/* Left Column - Special Offer */
.special-offer-column {
  width: 25%;
  flex-shrink: 0;
}

.special-offer-card {
  position: relative;
  background: white;
  padding: 15px;
  border-radius: 3px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid {{ section.settings.special_offer_border_color }};
}

.special-offer-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: {{ section.settings.special_badge_bg_color }};
  color: {{ section.settings.special_badge_text_color }};
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
  text-transform: uppercase;
}

.stock-level {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  color: #ff6b00;
}

.stock-icon {
  margin-right: 5px;
}

.special-offer-image-wrapper {
  position: relative;
  display: block;
  margin-bottom: 15px;
  text-align: center;
}

.special-offer-image {
  max-width: 100%;
  max-height: 250px;
  display: block;
  margin: 0 auto;
}

.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #2b60e3;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  z-index: 1;
}

.special-offer-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.special-offer-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 5px;
}

.special-offer-title {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.special-offer-title a {
  color: #333;
  text-decoration: none;
}

/* Right Column - Product Slider */
.product-slider-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.section-header {
  margin-bottom: 20px;
  border-bottom: 1px solid {{ section.settings.title_border_color }};
  padding-bottom: 10px;
}

.section-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: {{ section.settings.title_color }};
}

.product-slider-wrapper {
  position: relative;
  flex-grow: 1;
}

.product-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 20px;
  padding: 10px 0;
  scrollbar-width: none; /* Firefox */
}

.product-slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.product-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
}

.product-card {
  position: relative;
  background: white;
  padding: 15px;
  border-radius: 3px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.product-card-image-wrapper {
  position: relative;
  display: block;
  margin-bottom: 15px;
  text-align: center;
}

.product-card-image {
  max-width: 100%;
  max-height: 200px;
  display: block;
  margin: 0 auto;
}

.product-card-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-card-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 5px;
}

.price-item--sale {
  font-weight: 700;
  font-size: 18px;
  color: #333;
}

.price-item--regular {
  font-size: 14px;
  color: #888;
  margin-left: 5px;
  text-decoration: line-through;
}

.product-rating {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.product-rating .stars {
  position: relative;
  color: #ddd;
}

.product-rating .stars::before {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  color: gold;
  width: calc(var(--stars) * 20%);
  overflow: hidden;
}

.rating-text {
  margin-left: 8px;
  font-size: 14px;
  color: #666;
}

.product-card-title {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.product-card-title a {
  color: #333;
  text-decoration: none;
}

.add-to-cart-button {
  margin-top: auto;
  padding: 10px;
  background-color: {{ section.settings.button_bg_color }};
  color: {{ section.settings.button_text_color }};
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 100%;
}

.add-to-cart-button:hover {
  background-color: {{ section.settings.button_hover_bg_color }};
}

.special-offer-button {
  background-color: {{ section.settings.special_button_bg_color }};
  color: {{ section.settings.special_button_text_color }};
}

.special-offer-button:hover {
  background-color: {{ section.settings.special_button_hover_bg_color }};
}

.slider-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  z-index: 2;
}

.slider-prev {
  left: 10px;
}

.slider-next {
  right: 10px;
}

/* Responsive Styles */
@media screen and (max-width: 990px) {
  .product-showcase-layout {
    flex-direction: column;
  }
  
  .special-offer-column {
    width: 100%;
    margin-bottom: 30px;
  }
  
  .product-slide {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

@media screen and (max-width: 749px) {
  .product-slide {
    flex: 0 0 80%;
  }
  
  .slider-control {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
}
{% endstyle %}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const slider = document.querySelector('.product-showcase-section-{{ section.id }} .product-slider');
    const prevButton = document.querySelector('.product-showcase-section-{{ section.id }} .slider-prev');
    const nextButton = document.querySelector('.product-showcase-section-{{ section.id }} .slider-next');
    
    if (slider && prevButton && nextButton) {
      const slideWidth = slider.querySelector('.product-slide')?.offsetWidth || 0;
      const gapWidth = 20; // gap between slides
      
      prevButton.addEventListener('click', function() {
        slider.scrollBy({
          left: -(slideWidth + gapWidth),
          behavior: 'smooth'
        });
      });
      
      nextButton.addEventListener('click', function() {
        slider.scrollBy({
          left: slideWidth + gapWidth,
          behavior: 'smooth'
        });
      });
    }
  });
</script>

{% schema %}
{
  "name": "Product Showcase",
  "settings": [
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 30
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 30
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Best Sellers Content"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Best Sellers"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Heading Color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "title_border_color",
      "label": "Heading Border Color",
      "default": "#e8e8e8"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "label": "Maximum Products to Show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 6
    },
    {
      "type": "header",
      "content": "Special Offer Settings"
    },
    {
      "type": "checkbox",
      "id": "show_special_offer",
      "label": "Show Special Offer Product",
      "default": true
    },
    {
      "type": "product",
      "id": "special_offer_product",
      "label": "Special Offer Product"
    },
    {
      "type": "text",
      "id": "special_badge_text",
      "label": "Special Badge Text",
      "default": "SPECIAL OFFER"
    },
    {
      "type": "color",
      "id": "special_badge_bg_color",
      "label": "Special Badge Background",
      "default": "#ff6b00"
    },
    {
      "type": "color",
      "id": "special_badge_text_color",
      "label": "Special Badge Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "special_offer_border_color",
      "label": "Special Offer Border Color",
      "default": "#ff0000"
    },
    {
      "type": "header",
      "content": "Stock Level"
    },
    {
      "type": "checkbox",
      "id": "show_stock_level",
      "label": "Show Low Stock Warning",
      "default": true
    },
    {
      "type": "range",
      "id": "low_stock_threshold",
      "label": "Low Stock Threshold",
      "min": 1,
      "max": 20,
      "step": 1,
      "default": 5
    },
    {
      "type": "header",
      "content": "Product Ratings"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "label": "Show Product Rating",
      "default": true
    },
    {
      "type": "range",
      "id": "default_rating",
      "label": "Default Product Rating",
      "min": 0,
      "max": 5,
      "step": 0.1,
      "default": 5
    },
    {
      "type": "range",
      "id": "special_offer_rating",
      "label": "Special Offer Rating",
      "min": 0,
      "max": 5,
      "step": 0.1,
      "default": 5
    },
    {
      "type": "header",
      "content": "Button Settings"
    },
    {
      "type": "text",
      "id": "add_to_cart_text",
      "label": "Add to Cart Text",
      "default": "Add To Cart"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "button_hover_bg_color",
      "label": "Button Hover Background",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "special_button_bg_color",
      "label": "Special Offer Button Background",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "special_button_text_color",
      "label": "Special Offer Button Text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "special_button_hover_bg_color",
      "label": "Special Offer Button Hover",
      "default": "#555555"
    }
  ],
  "blocks": [
    {
      "type": "product",
      "name": "Product",
      "settings": [
        {
          "type": "range",
          "id": "product_rating",
          "label": "Product Rating",
          "min": 0,
          "max": 5,
          "step": 0.1,
          "default": 5
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Showcase",
      "category": "Collection"
    }
  ]
}
{% endschema %}