Skip to main content
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

{% 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

<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

<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

.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;
  }
}