> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nexus.hurterdesignstudio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Showcase

> Highlight specific products with advanced features and custom layouts

The Product Showcase section allows you to highlight specific products with custom layouts, advanced features, and engaging presentations. Perfect for featuring new products, best sellers, or promotional items.

## Overview

The Product Showcase section provides:

* **Custom Product Selection** for targeted highlighting
* **Multiple Layout Options** including grid, carousel, and featured layouts
* **Advanced Product Information** display with variants and options
* **Interactive Elements** like quick view and add to cart
* **Responsive Design** optimized for all devices
* **Performance Optimized** with efficient loading

## Section Settings

### Product Selection

```liquid theme={null}
{% assign featured_product = all_products[section.settings.featured_product] %}
{% if featured_product != blank %}
  <section class="product-showcase" data-product-id="{{ featured_product.id }}">
    <div class="container">
      <div class="product-showcase__content">
        <!-- Product showcase content -->
      </div>
    </div>
  </section>
{% endif %}
```

### Display Settings

* **Featured Product**: Select specific product to showcase
* **Layout Style**: Grid, Carousel, Featured, or Custom
* **Show Product Info**: Title, price, description, variants
* **Show Quick View**: Enable quick view functionality
* **Show Add to Cart**: Display add to cart buttons
* **Show Product Badges**: Sale, new, featured badges

## Layout Options

### Featured Layout

```liquid theme={null}
<div class="product-showcase--featured">
  <div class="product-showcase__image">
    <img src="{{ featured_product.featured_image | image_url: width: 600 }}" 
         alt="{{ featured_product.title | escape }}"
         loading="eager"
         class="product-showcase__img">
  </div>
  
  <div class="product-showcase__info">
    <h2 class="product-showcase__title">{{ featured_product.title }}</h2>
    <div class="product-showcase__price">
      {% if featured_product.compare_at_price > featured_product.price %}
        <span class="product-showcase__price-current">{{ featured_product.price | money }}</span>
        <span class="product-showcase__price-compare">{{ featured_product.compare_at_price | money }}</span>
      {% else %}
        <span class="product-showcase__price-current">{{ featured_product.price | money }}</span>
      {% endif %}
    </div>
    
    <div class="product-showcase__description">
      {{ featured_product.description | truncate: 200 }}
    </div>
    
    <div class="product-showcase__actions">
      <a href="{{ featured_product.url }}" class="btn btn--primary">View Product</a>
      <button class="btn btn--secondary product-showcase__quick-view" 
              data-product-id="{{ featured_product.id }}">
        Quick View
      </button>
    </div>
  </div>
</div>
```

### Grid Layout

```liquid theme={null}
<div class="product-showcase--grid">
  {% for product in section.settings.products limit: section.settings.products_to_show %}
    <div class="product-showcase__item">
      <div class="product-showcase__item-image">
        <img src="{{ product.featured_image | image_url: width: 400 }}" 
             alt="{{ product.title | escape }}"
             loading="lazy">
      </div>
      
      <div class="product-showcase__item-info">
        <h3 class="product-showcase__item-title">{{ product.title }}</h3>
        <div class="product-showcase__item-price">{{ product.price | money }}</div>
      </div>
    </div>
  {% endfor %}
</div>
```

## CSS Styling

```css theme={null}
.product-showcase {
  padding: 4rem 0;
  background: var(--color-surface);
}

.product-showcase--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.product-showcase__image {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

.product-showcase__img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.product-showcase__image:hover .product-showcase__img {
  transform: scale(1.05);
}

.product-showcase__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-showcase__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.product-showcase__price {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.product-showcase__price-current {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.product-showcase__price-compare {
  text-decoration: line-through;
  color: var(--color-text-secondary);
}

.product-showcase__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.product-showcase__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .product-showcase--featured {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .product-showcase__title {
    font-size: 2rem;
  }
}
```

## Related Sections

* [Featured Collection](/sections/featured-collection) - Showcase product collections
* [Hero Section](/sections/hero-section) - Create engaging banners
* [Product Pages](/features/product-pages) - Detailed product information

<Button href="/sections/testimonials" size="lg">
  Next: Testimonials
</Button>