5. Create a categories index page - Create a Commerce.js store with Svelte

Just like we did for categories, we'll do the same for listing all categories.

---

---

Inside src/routes, create the directory categories, and a new file index.svelte.

As you can probably guess, it's here we will fetch all categories using Commerce.js.

<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload() {
    const { data: categories } = await commerce.categories.list();

    return {
      categories,
    };
  }
</script>

<script>
  export let categories;
</script>

<h1>Categories</h1>

<ul>
  {#each categories as category}
    <li>
      <a rel="prefetch" href="categories/{category.slug}">{category.name}</a>
    </li>
  {/each}
</ul>

Before we continue, let's add a link to the /categories page on our root index page.

Above where we list categories, add the following:

<h3><a href="/categories">Categories</a></h3>