Campfire-Inspired Product Page Layout Guide #

Overview #

I've created a new product page layout variant inspired by the Campfire product page design. This layout provides a clean, left-aligned design with a fixed right sidebar for pricing and purchase, matching the actual Campfire page structure.

Key Features #

1. Left-Aligned Content Layout #

• Uses max-w-7xl container with 3-column grid
• Left content area spans 2 columns (lg:col-span-2)
• Right sidebar spans 1 column (lg:col-span-1)
• Clean, modern typography with larger headings

2. Fixed Right Sidebar #

• Sticky positioning (lg:sticky lg:top-8)
• Pricing card with prominent CTA button
• User count and rating information
• Compact "What's included?" feature list
• Always visible as user scrolls

3. Structured Content Sections #

• Hero Section - Title, subtitle, and description
• "What is it?" - Product description without accordions
• "Take a closer look" - Screenshots gallery
• "What's included?" - Feature list with checkmarks
• "Frequently asked questions" - FAQ section without accordions
• Reviews - Customer testimonials and ratings

4. No Accordion Structure #

• Product copy sections display inline without collapsible sections
• FAQ questions and answers are always visible
• Cleaner, simpler reading experience
• Better for SEO and accessibility

5. Responsive Design #

• Mobile-first approach
• Sidebar stacks below content on mobile
• Flexible grid layouts
• Optimized spacing for different screen sizes

How to Use #

1. Create a New Product Page #

Create a new .md file in the appropriate product directory (e.g., src/products/templates/) and set the layout to productCampfire.njk:

---
layout: productCampfire.njk
mpn: [your-mpn]
# ... other frontmatter
---

2. Required Frontmatter #

The layout uses the same frontmatter structure as the existing productListing.njk, so you can copy from existing product pages:

---
layout: productCampfire.njk
mpn: 1004
eleventyComputed:
  title: ""
  # ... other computed values
tags:
  - templates
  - [other tags]
gumroadLink: [your-gumroad-link]
screenshots:
  - /assets/screenshots/image1.jpg
  - /assets/screenshots/image2.jpg
productCopy:
  highlights: "Your product description..."
testimonial:
  name: "Customer Name"
  title: "Title"
  company: "Company"
  image: "/assets/customer.jpg"
  quote: "Customer testimonial..."
featuresCapTableYes:
  - Feature 1
  - Feature 2
  - Feature 3
---

3. Optional Sections #

The layout conditionally displays sections based on available data:

• Screenshots: Shows if screenshots array is provided
• Features: Shows if featuresCapTableYes array is provided
• Testimonials: Shows if testimonial object is provided
• FAQ: Shows if product has templates tag, is not in prelaunch, and has faqs data
• Reviews: Shows if reviews or flagShowReviews is provided

Layout Structure #

Header
├── Navigation Breadcrumbs/Tags
├── Main Layout (3-column grid)
│   ├── Left Content Area (2 columns)
│   │   ├── Hero Section
│   │   │   ├── Title
│   │   │   ├── Subtitle (if available)
│   │   │   └── Description
│   │   ├── "What is it?" Section
│   │   │   ├── Highlights
│   │   │   ├── Model Structure
│   │   │   ├── Modeling Revenues
│   │   │   ├── Modeling Costs
│   │   │   ├── Financial Reporting
│   │   │   ├── Getting Started
│   │   │   └── Support
│   │   ├── Testimonial (if available)
│   │   ├── "Take a closer look" Section
│   │   ├── "What's included?" Section
│   │   ├── Reviews Section
│   │   ├── FAQ Section (no accordion)
│   │   ├── Purchase Details
│   │   ├── Author Information
│   │   └── Additional Content
│   └── Fixed Right Sidebar (1 column)
│       ├── Pricing Card
│       │   ├── Title
│       │   ├── Price & Rating
│       │   ├── CTA Button
│       │   └── User Count
│       └── "What's included?" Card
└── Footer

Comparison with Original Layout #

Benefits #

1. Better Purchase Conversion: Fixed sidebar keeps CTA always visible
2. Cleaner Reading Experience: No accordion interactions required
3. Improved Information Architecture: Clear separation of content and purchase
4. Modern Design: Matches contemporary SaaS product page patterns
5. Better SEO: All content is immediately visible to search engines
6. Accessibility: No hidden content behind accordions

Example Implementation #

See src/products/templates/cap-table-campfire.md for a complete example of how to use this layout with an existing product.

Customization #

The layout leverages existing partials, so any updates to those partials will automatically apply to this layout. You can also customize the layout by:

1. Modifying the productCampfire.njk template directly
2. Creating additional partials for specific sections
3. Adding custom CSS classes for styling
4. Adjusting the sidebar positioning or content

Migration from Existing Layout #

To migrate an existing product page to use this layout:

1. Change layout: productListing.njk to layout: productCampfire.njk
2. Ensure all required frontmatter is present
3. Test the page to ensure all sections display correctly
4. Note that product copy and FAQ sections will now display inline instead of in accordions

Key Differences from Original #

Product Copy Display #

• Original: Uses accordion sections that can be collapsed/expanded
• New: All sections display inline for immediate visibility

FAQ Display #

• Original: Questions are collapsible accordion items
• New: All questions and answers are visible at once

Purchase Flow #

• Original: CTA button in hero section
• New: CTA button in fixed sidebar that stays visible while scrolling

Layout Structure #

• Original: Centered content with side-by-side hero
• New: Left-aligned content with fixed right sidebar

The layout is designed to be a drop-in replacement that works with existing product data structures while providing a more modern, conversion-optimized user experience.