> ## Documentation Index
> Fetch the complete documentation index at: https://docs.boxpressd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Retailer Website

> Build a cigar retailer website powered by Boxpressd products, events, reviews, community activity, and local business data.

# Retailer Website Example

This example demonstrates how to build a cigar retailer website using the Boxpressd Sites SDK.

The example is based on **Havana Cigar Co**, a fictional cigar retailer created to showcase retail-focused experiences.

Retailer websites often combine parts of both lounge and brand websites. They need to:

* Showcase available cigars and products
* Promote events and tastings
* Display reviews and ratings
* Highlight community activity
* Help customers find the store
* Support local SEO and AI discoverability

***

## Business Context

This example assumes a venue or retailer-style business.

```ts id="v6bsql" theme={null}
{
  businessType: "venue",
  businessId: "havana-cigar-co"
}
```

Most production websites will use the `BoxpressdProvider` to automatically resolve this context.

***

## Site Structure

```text id="94qw29" theme={null}
Homepage
├── Hero
├── Featured Products
├── Upcoming Events
├── Review Summary
├── Community Activity
├── Map
└── Contact CTA

Products
Events
Brands
Humidor
About
Contact
```

***

## Homepage

The homepage should quickly communicate what the retailer offers and why customers should visit.

<Image src="/images/examples/havana-homepage.jpg" alt="Havana Cigar Co homepage" caption="Replace with actual homepage screenshot." />

### Featured Products

Future SDK component:

```tsx id="gjzawy" theme={null}
<FeaturedProducts
  limit={8}
/>
```

### Upcoming Events

```tsx id="8r4zjd" theme={null}
<BoxpressdEventList
  status="upcoming"
  limit={3}
/>
```

### Review Summary

```tsx id="s4w4cu" theme={null}
<BoxpressdReviewSummary />
```

### Community Sessions

```tsx id="e2r1bz" theme={null}
<BoxpressdSessionsFeed
  limit={6}
  showRatings
  showCigarImage
/>
```

### Map

```tsx id="xlpm6v" theme={null}
<BoxpressdMap
  height={420}
  showDirectionsLink
/>
```

***

## Products Page

The products page is the most important page for many retailers.

<Image src="/images/examples/havana-products.jpg" alt="Havana Cigar Co products page" caption="Replace with actual products page screenshot." />

### Product Grid

Future SDK component:

```tsx id="kzj1ao" theme={null}
<ProductGrid
  limit={24}
/>
```

### Product Filters

Future SDK component:

```tsx id="rd2hda" theme={null}
<ProductFilters
  filters={[
    "brand",
    "strength",
    "wrapper",
    "origin",
    "price"
  ]}
/>
```

### Featured Cigars

Future SDK component:

```tsx id="r4q9c0" theme={null}
<FeaturedCigars
  limit={12}
/>
```

***

## Brand Showcase

Retailers often want to highlight featured brands they carry.

<Image src="/images/examples/havana-brands.jpg" alt="Havana Cigar Co brand showcase" caption="Replace with actual brand showcase screenshot." />

Future SDK component:

```tsx id="yat61l" theme={null}
<BrandShowcase
  limit={12}
/>
```

Future SDK component:

```tsx id="icnnbo" theme={null}
<FeaturedBrandGrid />
```

***

## Events Page

Retailers often host tastings, launches, vendor nights, and cigar education events.

<Image src="/images/examples/havana-events.jpg" alt="Havana Cigar Co events page" caption="Replace with actual events page screenshot." />

### Upcoming Events

```tsx id="whvmk6" theme={null}
<BoxpressdEventList
  status="upcoming"
  layout="grid"
/>
```

### Event Calendar

```tsx id="j463qs" theme={null}
<BoxpressdEventCalendar />
```

### Event Details

```tsx id="u2qp71" theme={null}
<EventDetailsModal
  event={event}
  open={open}
  onOpenChange={setOpen}
/>
```

***

## Humidor Page

The humidor page helps customers understand the in-store cigar experience.

<Image src="/images/examples/havana-humidor.jpg" alt="Havana Cigar Co humidor page" caption="Replace with actual humidor page screenshot." />

### Humidor Intro

```tsx id="1o006c" theme={null}
<section>
  <h2>Explore Our Humidor</h2>

  <p>
    Browse a curated selection of premium cigars from boutique brands,
    established manufacturers, and limited releases.
  </p>
</section>
```

### Inventory Placeholder

Future SDK component:

```tsx id="xph9lz" theme={null}
<HumidorInventoryGrid
  limit={24}
/>
```

***

## Community Activity

Retailers can use community data to show that customers are actively discovering and enjoying cigars purchased through the shop.

<Image src="/images/examples/havana-community.jpg" alt="Havana Cigar Co community activity" caption="Replace with actual community activity screenshot." />

### Recent Sessions

```tsx id="81s9nt" theme={null}
<BoxpressdSessionsFeed
  limit={10}
  layout="grid"
  showRatings
  showCigarImage
/>
```

### Recent Check-ins

```tsx id="9jewbi" theme={null}
<BoxpressdCheckinsFeed
  limit={10}
/>
```

***

## Contact Page

Retailer contact pages should prioritize local search and customer convenience.

<Image src="/images/examples/havana-contact.jpg" alt="Havana Cigar Co contact page" caption="Replace with actual contact page screenshot." />

### Map

```tsx id="i0ebx8" theme={null}
<BoxpressdMap
  height={500}
  showOverlay
  showDirectionsLink
/>
```

### Store Information

```tsx id="vfv7or" theme={null}
<section>
  <h2>Visit Havana Cigar Co</h2>

  <p>Address</p>
  <p>Phone Number</p>
  <p>Hours of Operation</p>
</section>
```

***

## SEO Strategy

Retailer websites should server-render content that supports local discovery and product discovery.

### Events

```tsx id="fukzld" theme={null}
const events = await getBoxpressdEvents({
  status: "upcoming",
  limit: 6,
})
```

### Sessions

```tsx id="tl6tk7" theme={null}
const sessions = await getBoxpressdSessions({
  limit: 10,
})
```

### Check-ins

```tsx id="9f13ck" theme={null}
const checkins = await getBoxpressdCheckins({
  limit: 10,
})
```

### Parallel Fetching

```tsx id="ygjanq" theme={null}
const [events, sessions, checkins] = await Promise.all([
  getBoxpressdEvents({
    status: "upcoming",
    limit: 6,
  }),
  getBoxpressdSessions({
    limit: 10,
  }),
  getBoxpressdCheckins({
    limit: 10,
  }),
])
```

***

## Future Retail Components

Retailer-focused SDK components may include:

### Product Grid

```tsx id="wsl12z" theme={null}
<ProductGrid />
```

### Featured Products

```tsx id="68vqtf" theme={null}
<FeaturedProducts />
```

### Humidor Inventory

```tsx id="nq51lo" theme={null}
<HumidorInventoryGrid />
```

### Brand Showcase

```tsx id="z9dlrd" theme={null}
<BrandShowcase />
```

### Product Search

```tsx id="ihcvii" theme={null}
<ProductSearch />
```

### Availability Badge

```tsx id="1wk3ib" theme={null}
<AvailabilityBadge />
```

***

## Why This Pattern Works

A successful retailer website should combine:

* Product discovery
* Local SEO
* Community proof
* Event promotion
* Store information
* Easy directions and contact options

The Boxpressd Sites SDK helps retailers turn Boxpressd business data into a modern, discoverable website that supports both online research and in-store visits.

***

## Related Examples

* Cigar Lounge Website
* Cigar Brand Website
* Stogies Case Study
* Next.js SSR

These examples demonstrate additional implementation patterns using the Boxpressd Sites SDK.