> 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/tags-page.md).

# Tags Page

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

This guide explains how the Tags page works, what data drives it, and how to customize it.

### Route and Template

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

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

<div data-with-frame="true"><figure><img src="/files/74u0gDvOIB4ghkqlpl44" alt=""><figcaption><p>Tags page content source</p></figcaption></figure></div>

***

### What the Tags Page Does

The Tags page is a directory/listing page for site tags. It includes:

1. Page header (from `page.tags`)
2. Tag cards/grid
3. Tag image or initials fallback
4. Post count per tag
5. Pagination / Load More behavior
6. Bottom CTA section

***

### Content Source

Tags listing is populated from Ghost tags, not manually built content blocks.

Each tag card usually includes:

* Tag name
* Tag feature image (if available)
* Fallback initials if no image
* Associated post count
* Link to the tag archive (`/tag/{slug}/`)

***

### Template and Card Structure

* Main listing template: `tags.hbs`
* Tag card partial: `partials/cards/card-tag.hbs`

Customize card appearance/metadata in the card partial.

***

### Pagination / Load More

Tags page supports load-more style pagination.

Behavior includes:

* Additional tag cards fetched progressively
* Button state updates at end of list
* Localized end-state label (for example “No more tags”)

***

### Relationship with Tag Archive Pages (/tag/{slug}/)

The `/tags/` page is only a directory. Clicking a tag opens detailed tag archive pages rendered by tag.hbs.

Travio applies two tag archive variants based on your custom settings:

* Destination-style tag layout (if slug is in `@custom.destinations`)
* Experience-style tag layout (if slug is in `@custom.experiences`)
* Default tag layout for all other tags

***

### Settings That Influence Tag Experience

#### Theme settings (Site Wide)

**`destinations` :**

* Comma-separated destination tag slugs.
* Used to classify tag archive behavior/layout and filters.

**`experiences` :**

* Comma-separated experience tag slugs.
* Used to classify tag archive behavior/layout and filters.

These settings do not remove tags from `/tags/` directory; they affect how individual tag archive pages behave.

***

### Code Injection

`TRAVIO_CONFIG.filters.visibility` can control filter sections for:

* `tag`
* `tagDestination`
* `tagExperience`

Example:

```javascript
window.TRAVIO_CONFIG = {
  filters: {
    visibility: {
      tag: { destination: true, experiences: true },
      tagDestination: { destination: false, experiences: true },
      tagExperience: { destination: true, experiences: false }
    }
  }
};
```

***

### Best Practices for Tag Quality

For better Tags page and tag archive UX:

1. Upload feature images for important tags
2. Keep tag naming clean and consistent
3. Avoid duplicate/near-duplicate taxonomy terms
4. Use destination/experience lists only for true taxonomy tags
5. Keep non-taxonomy editorial tags separate

***

### Common Issues

* Header content missing: `tags` slug page not created.
* Tags look empty/plain: many tags have no feature images (fallback initials will show).
* Unexpected tag archive layout: tag slug is incorrectly included/excluded in destinations or experiences.

***

### Quick Setup Checklist

1. Create page slug `tags`
2. Ensure tags exist and are actively used
3. Add feature images to key tags
4. Configure `destinations` and `experiences` lists correctly
5. Test `/tags/` and click through to `/tag/{slug}/` pages