Product Section (Showcase)

Product Section (Showcase) offers a traditional side-by-side product layout with thumbnail galleries and classic product information display.

For Plain Jane, and Plain Jane Interactive

What You'll Learn

  • How to set up and customize the "Showcase" product layout, the traditional side-by-side layout
  • Configuration options for image galleries, positioning, and responsive behavior
  • When to use this layout vs. the modern Thumbnail layout

🎯 What is the Showcase Layout?

Product Section (Showcase) offers a traditional side-by-side product layout with thumbnail galleries and classic product information display. This layout is ideal for stores that prefer a more conventional e-commerce experience with familiar navigation patterns.

Key Features:

  • Traditional thumbnail gallery system
  • Side-by-side image and product info layout
  • Configurable image positioning (left/right)
  • Customizable gallery columns and spacing
  • Mobile-responsive design with stacked layout
  • Classic product information hierarchy

Available in:

  • ✅ Plain Jane v3.1+
  • ✅ Plain Jane Interactive v2+

🔧 How to Enable Product Section (Showcase)

  1. Go to Online Store > Themes > Customize
  2. Navigate to Products > Default product
  3. If another product section is currently active:
    • Click on the existing product section
    • Select Remove section
  4. Click Add section
  5. Select Product Section (Showcase)
  6. Configure the layout and blocks as needed

📐 Layout Configuration

Image & Product Info Positioning

Switch Product Info & Image

  • Toggle to move product information to the left side
  • Default: Images on left, product info on right
  • Reversed: Product info on left, images on right

Image Gallery Setup

  • Reverse Additional Photos: Control whether thumbnails appear above or below main image
  • Gallery Column Amount: Set number of thumbnail columns (1-6)
  • Gallery Margins: Adjust spacing around image gallery

Responsive Behavior

Desktop Layout

  • Side-by-side layout with configurable proportions
  • Image gallery takes approximately 60% width
  • Product information in remaining 40% space

Mobile Layout

  • Automatically stacks to single column
  • Featured image displays first
  • Thumbnail gallery below main image
  • Product information follows images

Column Amount

  • Set 1-6 columns for thumbnail display
  • Can be overridden per-product using metafields
  • Mobile automatically adjusts for optimal viewing

Image Sizing

  • Desktop Image Size: Control maximum image dimensions
  • Mobile Image Size: Optimize for smaller screens
  • Gallery Margins: Fine-tune spacing between elements

Gallery Positioning

  • Place Additional Photos Under Main: Move thumbnails below featured image
  • Reverse Additional Photos: Change thumbnail order
  • Grid Gap: Adjust spacing between thumbnail images

Image Display

Featured Image

  • Large main product image with zoom functionality
  • Click to open full-screen view
  • Smooth transitions between images
  • Support for multiple media types (images, videos)

Thumbnail Navigation

  • Click thumbnails to change main image
  • Hover effects for better user feedback
  • Consistent aspect ratios recommended
  • Lazy loading for performance

📱 Mobile Optimization

Responsive Design

Mobile Layout Behavior

  • Automatic column stacking for mobile devices
  • Optimized thumbnail sizes for touch interaction
  • Simplified navigation for smaller screens
  • Improved loading performance

Touch Interactions

  • Swipe gesture support for image navigation
  • Touch-friendly thumbnail sizing
  • Optimized button placement for mobile
  • Improved accessibility for touch devices

⚙️ Customization Options

Animation Settings

  • Fade Duration: Control transition timing between images
  • Page Transition: Set overall page load animation
  • Hover Effects: Configure thumbnail hover behavior

Layout Fine-Tuning

  • Margin Controls: Adjust spacing around all elements
  • Alignment Options: Control text and element positioning
  • Color Customization: Match your brand colors
  • Typography Settings: Control font sizes and styling

🛍️ Product Information Display

Product Section (Showcase) maintains the traditional hierarchy of product information:

Information Order

  1. Product Title: Prominent heading
  2. Price Display: Clear pricing with sale indicators
  3. Product Description: Rich text content
  4. Variant Selection: Size, color, and other options
  5. Quantity Selector: Add to cart controls
  6. Action Buttons: Add to cart and buy now buttons

Additional Features

  • Sale Badges: Highlight discounts and promotions
  • Stock Indicators: Show availability status
  • Product Reviews: Integration with review apps
  • Social Sharing: Share buttons for social media

🎨 Best Practices

Image Guidelines

  • Use consistent aspect ratios across all product images
  • Minimum 1000px width for sharp display
  • Include multiple angles and detail shots
  • Optimize file sizes for fast loading

Layout Considerations

  • Test on various screen sizes and devices
  • Ensure information hierarchy is clear
  • Keep essential details above the fold
  • Use white space effectively for clean appearance

User Experience

  • Make thumbnail navigation intuitive
  • Ensure fast image loading times
  • Test touch interactions on mobile devices
  • Provide clear calls-to-action

🔄 When to Use Product Section (Showcase)

Best For:

  • Traditional retail brands
  • Stores with conventional customer expectations
  • Products that benefit from detailed thumbnail galleries
  • Brands wanting familiar e-commerce patterns

Consider Product Section (Thumbnail) Instead If:

  • You want the most modern mobile experience
  • Your customers prefer app-like interactions
  • You need advanced features like bottom modals
  • Mobile optimization is your top priority

🚀 Performance Considerations

  • Image Optimization: Use WebP format when possible
  • Lazy Loading: Built-in for improved page speed
  • Responsive Images: Automatic size optimization
  • Mobile Performance: Optimized for slower connections