# Product Section (Showcase)

> **What You'll Learn**
>
> * How to set up and customize the "Showcase" product layout, the traditional side-by-side layout
> * Configuration options for image galleries, positioning, and responsive behavior
> * When to use this layout vs. the modern Thumbnail layout

***

## 🎯 What is the Showcase Layout?

**Product Section (Showcase)** offers a traditional side-by-side product layout with thumbnail galleries and classic product information display. This layout is ideal for stores that prefer a more conventional e-commerce experience with familiar navigation patterns.

**Key Features:**

* Traditional thumbnail gallery system
* Side-by-side image and product info layout
* Configurable image positioning (left/right)
* Customizable gallery columns and spacing
* Mobile-responsive design with stacked layout
* Classic product information hierarchy

Available in:

* ✅ Plain Jane v3.1+
* ✅ Plain Jane Interactive v2+

***

## 🔧 How to Enable Product Section (Showcase)

1. Go to **Online Store > Themes > Customize**
2. Navigate to **Products > Default product**
3. If another product section is currently active:
   * Click on the existing product section
   * Select **Remove section**
4. Click **Add section**
5. Select **Product Section (Showcase)**
6. Configure the layout and blocks as needed

***

## 📐 Layout Configuration

### **Image & Product Info Positioning**

**Switch Product Info & Image**

* Toggle to move product information to the left side
* Default: Images on left, product info on right
* Reversed: Product info on left, images on right

**Image Gallery Setup**

* **Reverse Additional Photos**: Control whether thumbnails appear above or below main image
* **Gallery Column Amount**: Set number of thumbnail columns (1-6)
* **Gallery Margins**: Adjust spacing around image gallery

### **Responsive Behavior**

**Desktop Layout**

* Side-by-side layout with configurable proportions
* Image gallery takes approximately 60% width
* Product information in remaining 40% space

**Mobile Layout**

* Automatically stacks to single column
* Featured image displays first
* Thumbnail gallery below main image
* Product information follows images

***

## 🖼️ Image Gallery Options

### **Gallery Configuration**

**Column Amount**

* Set 1-6 columns for thumbnail display
* Can be overridden per-product using metafields
* Mobile automatically adjusts for optimal viewing

**Image Sizing**

* **Desktop Image Size**: Control maximum image dimensions
* **Mobile Image Size**: Optimize for smaller screens
* **Gallery Margins**: Fine-tune spacing between elements

**Gallery Positioning**

* **Place Additional Photos Under Main**: Move thumbnails below featured image
* **Reverse Additional Photos**: Change thumbnail order
* **Grid Gap**: Adjust spacing between thumbnail images

### **Image Display**

**Featured Image**

* Large main product image with zoom functionality
* Click to open full-screen view
* Smooth transitions between images
* Support for multiple media types (images, videos)

**Thumbnail Navigation**

* Click thumbnails to change main image
* Hover effects for better user feedback
* Consistent aspect ratios recommended
* Lazy loading for performance

***

## 📱 Mobile Optimization

### **Responsive Design**

**Mobile Layout Behavior**

* Automatic column stacking for mobile devices
* Optimized thumbnail sizes for touch interaction
* Simplified navigation for smaller screens
* Improved loading performance

**Touch Interactions**

* Swipe gesture support for image navigation
* Touch-friendly thumbnail sizing
* Optimized button placement for mobile
* Improved accessibility for touch devices

***

## ⚙️ Customization Options

### **Animation Settings**

* **Fade Duration**: Control transition timing between images
* **Page Transition**: Set overall page load animation
* **Hover Effects**: Configure thumbnail hover behavior

### **Layout Fine-Tuning**

* **Margin Controls**: Adjust spacing around all elements
* **Alignment Options**: Control text and element positioning
* **Color Customization**: Match your brand colors
* **Typography Settings**: Control font sizes and styling

***

## 🛍️ Product Information Display

Product Section (Showcase) maintains the traditional hierarchy of product information:

### **Information Order**

1. **Product Title**: Prominent heading
2. **Price Display**: Clear pricing with sale indicators
3. **Product Description**: Rich text content
4. **Variant Selection**: Size, color, and other options
5. **Quantity Selector**: Add to cart controls
6. **Action Buttons**: Add to cart and buy now buttons

### **Additional Features**

* **Sale Badges**: Highlight discounts and promotions
* **Stock Indicators**: Show availability status
* **Product Reviews**: Integration with review apps
* **Social Sharing**: Share buttons for social media

***

## 🎨 Best Practices

### **Image Guidelines**

* Use consistent aspect ratios across all product images
* Minimum 1000px width for sharp display
* Include multiple angles and detail shots
* Optimize file sizes for fast loading

### **Layout Considerations**

* Test on various screen sizes and devices
* Ensure information hierarchy is clear
* Keep essential details above the fold
* Use white space effectively for clean appearance

### **User Experience**

* Make thumbnail navigation intuitive
* Ensure fast image loading times
* Test touch interactions on mobile devices
* Provide clear calls-to-action

***

## 🔄 When to Use Product Section (Showcase)

### **Best For:**

* Traditional retail brands
* Stores with conventional customer expectations
* Products that benefit from detailed thumbnail galleries
* Brands wanting familiar e-commerce patterns

### **Consider Product Section (Thumbnail) Instead If:**

* You want the most modern mobile experience
* Your customers prefer app-like interactions
* You need advanced features like bottom modals
* Mobile optimization is your top priority

***

## 🚀 Performance Considerations

* **Image Optimization**: Use WebP format when possible
* **Lazy Loading**: Built-in for improved page speed
* **Responsive Images**: Automatic size optimization
* **Mobile Performance**: Optimized for slower connections

***