# Product Section (Thumbnail)

> **What You'll Learn**
>
> * How to configure the "Thumbnail" layout, the default modern layout in Plain Jane v3.1
> * Advanced customization options including grid system, mobile modals, and media handling
> * Best practices for product images, variants, and mobile optimization

***

## 🎯 What is the Thumbnail Layout?

**Product Section (Thumbnail)** is the default, modern product layout in Plain Jane v3.1. It features an advanced grid-based image system, bottom modal interface for mobile, and extensive customization options. This section offers the most flexibility and modern UX patterns.

**Key Features:**

* Advanced grid-based image gallery
* Bottom modal interface for mobile devices
* Enhanced media handling (images, videos, 3D models)
* Advanced variant selection with color swatches
* Model information and size chart support
* Mobile-optimized responsive design
* Customizable gallery columns and spacing

Available in:

* ✅ Plain Jane v3.1+ (Default)
* ✅ Plain Jane Interactive v2+

***

## 🔧 How to Enable Product Section (Thumbnail)

1. Go to **Online Store > Themes > Customize**
2. Navigate to **Products > Default product**
3. Click **Add section** if not already present
4. Select **Product Section (Thumbnail)**
5. Configure the blocks and settings as needed

> 💡 **Note**: Product Section (Thumbnail) is the default section in new Plain Jane v3.1 installations.

***

## 📱 Layout & Gallery Options

### **Image Gallery Configuration**

**Gallery Column Amount**

* Set number of columns for desktop gallery (1-6 columns)
* Mobile automatically optimizes for smaller screens
* Can be overridden per-product using metafields

**Gallery Spacing**

* Adjust margin between gallery and main image
* Desktop and mobile image sizes can be customized
* Grid gap and auto-rows settings for fine-tuning

**Image Positioning**

* Choose whether additional photos appear above or below main image
* Reverse image and product info layout
* Mobile-specific positioning options

### **Mobile Modal Experience**

Product Section (Thumbnail) includes a sophisticated bottom modal system for mobile:

* **Bottom Modal**: Slides up from bottom with product details
* **Responsive Heights**: Automatically adjusts to content
* **Touch-Friendly**: Optimized for mobile interactions
* **Smooth Animations**: 0.3s transition timing

***

## 🛍️ Product Information Blocks

Product Section (Thumbnail) supports modular blocks that can be reordered:

### **Core Blocks**

* **Sale Badge** - Display sale/discount indicators
* **Product Header** - Title and breadcrumb navigation
* **Product Price** - Price display with sale pricing
* **Product Description** - Rich text product description
* **Product Variants** - Size, color, and other variant selectors
* **Product Buttons** - Add to cart and buy now buttons

### **Advanced Blocks**

* **Model Info** - Display model measurements and information
* **Color Swatches** - Visual color selection interface
* **Size Charts** - Pop-up or embedded size guides
* **Custom Accordions** - Expandable content sections

***

## ⚙️ Advanced Customization

### **Color Swatches Setup**

Enable visual color selection:

1. Add color metafields to your products
2. Configure swatch display options
3. Set up color variant connections

**Learn more**: [Setting Up Color Swatches](/plain-jane-interactive/advanced/setting-up-color-swatches.md)

### **Model Information**

Display model details for fashion products:

1. Add model metafields (height, measurements, size worn)
2. Configure display format and positioning
3. Customize styling and layout

**Learn more**: [Setting Up Model Info](/readme-1/advanced/setting-up-model-info.md)

### **Size Charts**

Add product-specific size guides:

1. Create size chart metafields
2. Upload size chart images or tables
3. Configure popup behavior

**Learn more**: [Adding Size Charts](/readme-1/advanced/how-to-add-size-charts-to-each-product.md)

***

## 📐 Customization Options

### **Layout Settings**

* **Switch Product Info & Image**: Reverse the layout order
* **Reverse Additional Photos**: Control gallery positioning
* **Gallery Column Amount**: 1-6 columns for desktop
* **Gallery Margins**: Adjust spacing around images

### **Styling Options**

* **Fade Duration**: Control page transition animations
* **Mobile Image Sizes**: Optimize for different screen sizes
* **Desktop Image Sizes**: Set maximum image dimensions
* **Grid Gap**: Fine-tune spacing between images

### **Responsive Behavior**

* **Mobile Layout**: Automatic optimization for mobile devices
* **Tablet View**: Intermediate sizing for tablet screens
* **Desktop Layout**: Full grid system with customizable columns

***

## 🎨 Best Practices

### **Image Optimization**

* Use high-quality images (minimum 1000px width)
* Maintain consistent aspect ratios across product images
* Include lifestyle shots alongside product-only images
* Optimize file sizes for fast loading

### **Product Information**

* Write clear, compelling product descriptions
* Use model information for fashion/apparel products
* Include size charts for items requiring fit guidance
* Set up color swatches for products with multiple colors

### **Mobile Experience**

* Test the bottom modal functionality on actual devices
* Ensure all interactive elements are touch-friendly
* Keep important information visible without scrolling
* Use appropriate image sizes for mobile viewing

***

## 🚀 Performance Tips

* **Image Compression**: Use optimized image formats (WebP when possible)
* **Lazy Loading**: Built-in lazy loading for better performance
* **Mobile-First**: Design considers mobile experience as primary
* **Grid Efficiency**: Advanced CSS Grid for optimal rendering

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/pages-and-menus/product-page/product-section-thumbnail.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.