Product Page

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

Product Section 3 Layout (Default)
Product Section 2 Layout

🎯 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


Last updated