> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/travio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/travio/custom-pages/experiences-page.md).

# Experiences Page

Live preview: <https://travio.themeupstudio.com/experiences/>

This guide explains how the Experiences page works, what data it uses, and how to customize it.

### Route and Template

* URL: `/experiences/`
* Route source: `routes.yaml`
* Template file: `experiences.hbs`
* Page data source: `data: page.experiences`

Create a Ghost page with slug `experiences` so page header/title content can render correctly.

<div data-with-frame="true"><figure><img src="/files/3ts20lVm5cbKDbacZtal" alt=""><figcaption><p>Experiences page content source</p></figcaption></figure></div>

***

### What the Experiences Page Does

The Experiences page is a curated taxonomy directory based on your custom experience slug list.

It includes:

1. Page header (from `page.experiences`)
2. Grid/list of experience cards
3. Tag image or initials fallback
4. Post count per experience
5. Pagination / Load More behavior
6. Bottom CTA section

***

### Core Setting That Powers This Page

#### @custom.experiences (Theme → Site Wide)

This setting controls which tags are treated as experiences.

* Type: comma-separated tag slugs
* Example: `hiking,street-food,wellness,culture`

Only tags listed here are used as experience taxonomy for this page and related UI.

If this setting is empty or invalid, the experiences listing will be incomplete or empty.

<div data-with-frame="true"><figure><img src="/files/CeEaZcvSWZ9R5HCnnvKl" alt=""><figcaption><p>Experience tag slugs in settings</p></figcaption></figure></div>

***

### Data Source and Card Content

Experience cards are built from Ghost tags matching `@custom.experiences`.

Each card typically includes:

* Tag name
* Tag feature image (if available)
* Fallback initials if image missing
* Post count badge
* Link to tag archive (`/tag/{slug}/`)

***

### Template and Card Structure

* Main template: `experiences.hbs`
* Card partial: `partials/cards/card-experience.hbs`

To customize visual style (round image treatment, count badge position, typography), edit `card-experience.hbs`.

***

### Pagination / Load More

Experiences page supports progressive loading.

Behavior:

* Initial batch of experience tags is rendered server-side
* Load More fetches additional tags
* End state uses localized “No more experiences” messaging

***

### Relationship with Other Pages

`@custom.experiences` affects multiple sections across Travio:

* Homepage experiences section
* Hero floating badges (homepage)
* Header experience dropdown
* Filter options in archive/articles/videos/author pages
* Tag archive variant behavior (`tagExperience` context)

So this taxonomy list should be curated carefully.

***

### Best Practices for Experience Setup

1. Keep experience tags thematic/activity-based (not geographic)
2. Add feature images for better cards and badges
3. Use consistent naming and slug conventions
4. Remove stale slugs from setting to avoid weak/empty listing
5. Assign experience tags to enough posts for useful counts

***

### Common Issues

* No experience cards shown: `@custom.experiences` empty or slug mismatch.
* Cards show initials only: feature images missing on experience tags.
* Counts too low: `experiences` not assigned consistently to posts.
* Page header missing: experiences slug page not created.
* Load more ends fast: limited number of experience tags available.

***

### Quick Setup Checklist

1. Create page slug experiences
2. Populate `@custom.experiences` with valid tag slugs
3. Add feature images to experience tags
4. Tag posts consistently with experience tags
5. Test `/experiences/`, load more, and links to `/tag/{slug}/`