# Product Section (Thumbnail)

> **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


---

# 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/plain-jane-interactive/pages-and-menus/product-page/product-section-thumbnail.md?ask=<question>
```

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.