Product Section (Thumbnail)

Product Section (Thumbnail) is the default, modern product layout in Plain Jane v3.1.

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)

  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.

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

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

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

📐 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