Product Section (Thumbnail)

For Plain Jane, and Plain Jane Interactive

What You’ll Learn

  • How to configure the “Thumbnail” layout for product pages

  • All customization options for gallery, pricing, buttons, and accordions

  • Best practices for formatting product images and descriptions

What is the Thumbnail Layout?

The Thumbnail layout displays product images in a vertical or grid-style gallery with thumbnails. It’s the most flexible and widely used layout in the Plain Jane theme, ideal for stores with multiple product shots.

Available in:

  • ✅ Plain Jane v3

  • ✅ Plain Jane Interactive v2

🔧 How to Enable the Thumbnail Layout

  1. Go to Online Store > Themes > Customize

  2. From the top dropdown, select Products > Default product

  3. Find the section named Product Section

  4. If another layout (e.g. Showcase or Scroll) is active, click “...” > Hide section

  5. Expand the Product Section and configure each block:

    • On Sale Label

    • Header

    • Price

    • Description

    • Gallery

    • Variants & Buttons

    • Product Accordion

💡 Tip: You can add or remove blocks as needed using the Add block button under this section.

⚙️ Layout Customization

Click the main Product Section (not the blocks) to access layout settings:

Product Gallery Position

  • Move the image gallery to the left or right

Fade Animation

  • Controls fade-in timing for the section (0 = instant, higher = slower fade)

Gallery Columns (Left Side Only)

  • Adjust how many thumbnails show per row (1 to 6)

Gallery Image Size

  • Fine-tune image size separately for Desktop and Mobile

🏷 On Sale Label

  • Toggle visibility

  • Set background and text color

  • Adjust spacing/margin around the label

🧾 Product Details

Each block can be customized:

  • Header: Title size, color, margin

  • Price: Show/hide currency, font size, price color

  • Description: Set a max word count (adds a “Read more” toggle)

  • Variants & Buttons:

    • Control corner radius and spacing

    • Hide the “Next Product” button if undesired

🪜 Product Accordions

Add multiple collapsible sections using the Product Accordion block:

  • Rename titles (e.g. “Size Chart”, “Returns & Exchanges”)

  • Customize spacing

  • Add any formatted text or HTML

💡 Tip: Keep accordions minimal. Use 2–3 max to avoid overwhelming shoppers.

➕ Add Custom Sections

You can append regular theme sections below the product layout, such as:

  • Scrolling image streams

  • Email signups

  • Featured collections

🖼 Image Size Tips

For clean alignment of product title, price, and buttons:

  • Upload all product images at the same aspect ratio

  • Recommended: 1000px x 1000px for square galleries

Need Help?

  • 💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6

  • 📧 Email us at: support@openspaces.design

  • 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website

PreviousProduct Section (Showcase)NextAbout Page

Last updated