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

# Pages

> Fetch CMS pages created by the shop owner

## `shop.pages.list()`

Returns all visible CMS pages, ordered by `sort_order`. Use these for About, Contact, FAQ, and other static pages.

```typescript theme={null}
const pages = await shop.pages.list();
```

### Response

```typescript theme={null}
Array<{
  id: string;
  title: string;
  slug: string;
  content: string | null;
  is_visible: boolean;
  sort_order: number | null;
  meta_title: string | null;
  meta_description: string | null;
  rendered_html: string | null;
  rendered_css: string | null;
}>
```

### Example — Footer page links

```typescript theme={null}
const pages = await shop.pages.list();

pages.forEach(page => {
  const link = document.createElement('a');
  link.href = `/pages/${page.slug}`;
  link.textContent = page.title;
  footerLinks.appendChild(link);
});
```

***

## `shop.pages.getBySlug(slug)`

Returns a single CMS page by slug, including its rendered HTML and CSS.

```typescript theme={null}
const page = await shop.pages.getBySlug('about-us');
```

### Parameters

| Param  | Type     | Description         |
| ------ | -------- | ------------------- |
| `slug` | `string` | The page's URL slug |

### Example — Render a page

```typescript theme={null}
const slug = window.location.pathname.split('/').pop()!;
const page = await shop.pages.getBySlug(slug);

document.title = page.meta_title ?? page.title;

if (page.rendered_html) {
  // Inject scoped CSS if present
  if (page.rendered_css) {
    const style = document.createElement('style');
    style.textContent = page.rendered_css;
    document.head.appendChild(style);
  }
  pageContainer.innerHTML = page.rendered_html;
} else {
  // Fallback to raw content
  pageContainer.textContent = page.content ?? '';
}
```

<Note>
  `rendered_html` and `rendered_css` are pre-rendered by Shopi's page builder. Always prefer these over `content` for pixel-perfect rendering.
</Note>