Product Section (Showcase)
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)
Go to Online Store > Themes > Customize
Navigate to Products > Default product
If another product section is currently active:
Click on the existing product section
Select Remove section
Click Add section
Select Product Section (Showcase)
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
🖼️ Image Gallery Options
Gallery Configuration
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
Product Title: Prominent heading
Price Display: Clear pricing with sale indicators
Product Description: Rich text content
Variant Selection: Size, color, and other options
Quantity Selector: Add to cart controls
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
Last updated