> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/plain-jane-interactive/pages-and-menus/product-page/product-section-thumbnail.md).

# 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.openspaces.design/plain-jane-interactive/pages-and-menus/product-page/product-section-thumbnail.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.