Product Section (Showcase)

For Plain Jane, and Plain Jane Interactive

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: [email protected]

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