Openspaces Labs
  • 🏠 Getting Started
    • Installing the Plain Jane Theme
    • Theme Versions + Features Table
  • 🧰 Theme Settings
    • Announcement Bar
    • Animations
    • Cart Drawer
    • Clock Settings
    • Collection Layout Settings
    • Cursor Settings
    • Footer Settings
    • Global Menu Settings
    • Music Player Settings
    • Logo Settings
    • Skip Home Screen
    • SEO Settings
    • Main Theme Color
    • Typography Settings
  • 🗂 Pages & Menus
    • Homepage + Menu
      • Center Menu
      • Side-Aligned Menu
      • Compact Menu Layout (Global Menu)
    • Collection Page
      • Classic Collection
      • Sidebar Collection
    • Collection List Page
    • Product Page
      • Product Section (Showcase)
      • Product Section (Thumbnail)
    • About Page
    • Contact Page
    • Lookbook Page
      • 🛠 How to Create a Lookbook Page
      • 🗂 Creating a Lookbook Archive
      • ⚙️ Lookbook Settings & Features
    • Password Page
      • How To Password Lock Store
      • How To Add and Set Timer
      • How To Collect Emails + SMS
      • Using The Store Unlock Animation
  • 🧩Sections and Features
    • Blog Feed Section
    • Collection Display Section
    • Collection List Section
    • Email Signup (Popup)
    • Email Signup (Embed)
    • FAQ Section
    • Hero Section
    • Image Selector Section
    • Image Stream Section
    • Marquee Section
    • Preloader Section
    • Product Carousel Section
    • Text Block Section
    • Video Spotlight Section
  • 🏷️Advanced
    • How to Add Size Charts to Each Product
    • Setting Up Color Swatches
    • Setting Up Model Info
    • Setting Up Pre-Orders
  • 👥Customer Accounts
    • How To Setup Customer Accounts
    • Login Page
    • Register Page
    • Account Dashboard Page
    • Address Management Page
  • 🌎Languages & SEO
    • Language Files (Locales)
    • Update Favicon
    • Meta Descriptions
  • ⭐️Plain Jane Interactive
    • How to Create an Interactive Space
    • Setting The Background
    • Adding Interactive Points
    • Using Transition Arrows
    • Best Practices for Mobile + Spacing
  • 💬 FAQ & Troubleshooting
Powered by GitBook
On this page
  • What is the Thumbnail Layout?
  • 🔧 How to Enable the Thumbnail Layout
  • ⚙️ Layout Customization
  • 🏷 On Sale Label
  • 🧾 Product Details
  • 🪜 Product Accordions
  • ➕ Add Custom Sections
  • 🖼 Image Size Tips
  • Need Help?
  1. 🗂 Pages & Menus
  2. Product Page

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?

  • 📧 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 4 days ago

💬 Join our community on Discord:

https://discord.gg/hcc2GvgZc6