# Product Section (Showcase)

> **What You’ll Learn**
>
> * How to set up and customize the “Showcase” product layout in Plain Jane
> * Key design options like mobile alignment, scroll bars, zoom, and popup styling
> * When to use this layout for the best customer experience

***

### 🖼 What is the Showcase Layout?

The **Showcase layout** features a centered image layout with product information on both sides. It’s great for minimal, modern stores that want to highlight imagery while keeping variant selection and purchase buttons easily accessible.

This layout is available in:

* ✅ Plain Jane v3+
* ✅ Plain Jane Interactive v2+

***

### 🔧 How to Enable the Showcase Layout

1. Go to **Online Store > Themes > Customize**
2. Use the top dropdown to select **Products > Default product**
3. In the left sidebar, click **Add Section > Product Section \[Showcase]**
4. Hide any other product layout sections (like `Product Section` or `Product Section [Scroll]`)
5. Click into the section to configure your layout

> 💡 Tip: You can rename this section for easier navigation using the “...” menu next to the section title.

***

### ⚙️ Layout & Display Settings

Located in the right sidebar after selecting the `Product Section [Showcase]` section.

#### Layout Desktop

* Choose from multiple layout styles for arranging gallery and product info
  * `Gallery Center – Variants Right` *(default)*

#### Mobile Product Info Alignment

* Align product text on mobile to `Left`, `Center`, or `Right`

#### Move Description Under Buttons (Mobile)

* Toggle ON to place descriptions and accordions *below* the “Add to Cart” button

***

### 📊 Mobile Scroll Progress Bar

Add a scroll indicator to the mobile image gallery:

* **Track Color** – background bar (gradient or solid)
* **Indicator Color** – foreground scroll indicator

***

### 🔍 Mobile Zoom Button

* Toggle to show/hide the image zoom icon on mobile
* Customize button color (`Mobile Zoom Button Color`)

***

### 🧾 Additional Info Popup

This setting controls the **popup accordion** if you're using it for things like:

* Size charts
* Return policies

Customize:

* Popup background color
* Gradient overlays
* Transparency/opacity settings

***

### 🧪 Pro Tips

* Use high-resolution, square or portrait product images for best impact
* Add product accordions for supplementary info like shipping, care, or materials
* This layout pairs well with minimalist fonts and muted theme colors

> ⚠️ Warning: This layout does not support image thumbnails or image scrolling. Use `Thumbnail` or `Scroll` layouts if you need those features.

### **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-showcase.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.