Product Section (Thumbnail)
For Plain Jane, and Plain Jane Interactive
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)
Go to Online Store > Themes > Customize
Navigate to Products > Default product
Click Add section if not already present
Select Product Section (Thumbnail)
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:
Add color metafields to your products
Configure swatch display options
Set up color variant connections
Learn more: Setting Up Color Swatches
Model Information
Display model details for fashion products:
Add model metafields (height, measurements, size worn)
Configure display format and positioning
Customize styling and layout
Learn more: Setting Up Model Info
Size Charts
Add product-specific size guides:
Create size chart metafields
Upload size chart images or tables
Configure popup behavior
Learn more: Adding Size Charts
📐 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
Last updated