3. Create homepage of categories and products - Create a Commerce.js store with Svelte

Let's first create an index page of all the data we need to build our store with Svelte.

---

---

Inside /src/routes/index.svelte we'll doing the following:

• Fetch all merchant information using commerce.merchants.about()
• Fetch all categories using commerce.categories.list()
• Fetch all products using commerce.products.list()
• List our merchant business name
• List all categories, and products, with dynamic links to both

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

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

  return {
    merchant,
    categories,
    products,
  };
}
</script>

<script>
export let merchant;
export let categories;
export let products;
</script>

<h1>{merchant.business_name}</h1>

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

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>