# Product Section (Showcase) > **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 *** ## 🖼️ 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** 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 *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/readme-1/pages-and-menus/product-page/product-section-showcase.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.