Product Page

Plain Jane v3.1 offers two main product page layouts:

For Plain Jane, and Plain Jane Interactive

What You'll Learn

  • The different product page layout options available in Plain Jane v3.1
  • How to switch between Product Section 2 and Product Section 3 layouts
  • Key features and customization options for each layout
  • Additional product-related sections and features

🎯 Available Product Sections

Plain Jane v3.1 offers two main product page layouts:

Product Section 3 (Default Layout)

A modern, flexible layout with advanced grid system, bottom modal features, and extensive customization options. This is the default section used in new Plain Jane v3.1 installations.

Key Features:

  • Advanced grid-based image gallery
  • Bottom modal interface for mobile
  • Enhanced media handling (images, videos)
  • Advanced variant selection
  • Model information support
  • Color swatches and size charts
  • Mobile-optimized experience

Product Section 2 (Alternative Layout)

A more traditional side-by-side layout with thumbnails and classic product information display.

Key Features:

  • Traditional thumbnail gallery
  • Side-by-side image and product info layout
  • Configurable image positioning
  • Customizable gallery columns
  • Mobile-responsive design

🔧 How to Switch Between Layouts

  1. Go to Online Store > Themes > Customize
  2. Navigate to Products > Default product
  3. In the product template editor:
    • Remove the current product section
    • Click Add section
    • Choose either:
      • Product Section 3 (recommended for modern stores)
      • Product Section 2 (traditional layout)

Plain Jane v3.1 includes several additional sections that enhance the product page experience:

  • Related Products - Show similar or complementary products
  • Product Logo Section - Customizable header with cart and navigation
  • Product Page Background - Custom backgrounds for product pages
  • Product Navigation - Enhanced navigation between products
  • Product Typography - Custom typography settings for product pages

📚 Detailed Documentation

For complete setup instructions and customization options:

  • Product Section 3 (Default) - Modern layout guide
  • Product Section 2 (Alternative) - Traditional layout guide