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

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