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

# Architecture

> How the Storefront API connects your frontend to Fourthwall

## How It All Connects

Here's the complete flow from browsing to purchase:

```mermaid theme={null}
flowchart TB
    subgraph Your_Frontend["Your Frontend"]
        A[Browse Products]
        B[Manage Cart]
    end

    subgraph Storefront_API["Storefront API"]
        C["/collections/{slug}/products"]
        D["/products/{slug}"]
        E["/carts"]
    end

    subgraph Fourthwall["Fourthwall"]
        F[Checkout Page]
        G[Order Complete]
    end

    A -->|"Fetch"| C
    A -->|"Fetch"| D
    B -->|"Create/Update"| E
    B -->|"Redirect with cart_id"| F
    F -->|"Payment processed"| G
    G -->|"Return to your site"| Your_Frontend
```

**The journey:**

1. **Browse**: Your frontend fetches products and collections from the Storefront API
2. **Cart**: Customer adds items, you manage the cart via API
3. **Checkout**: Redirect to Fourthwall checkout with the cart ID
4. **Complete**: Fourthwall handles payment, then returns customer to your site

## Deployment Options

If you build your storefront on the Fourthwall shop editor, your shop is served directly from our servers to your customers.

```mermaid theme={null}
flowchart TB
    A["<b>Fourthwall.com</b><br/><i>shops</i>"]
    B["<b>Customer</b>"]

    A -->|"&lt;html&gt;"| B
```

While this is a great way to get started, it does have some limitations. To build a truly custom experience, you can build your own frontend and use the Storefront API to pull in products and handle the cart process.

### With a proxy

The most straight-forward way to build a custom storefront is through a proxy server. We've optimized for a setup through Vercel, though other services like Netlify would work as well.

```mermaid theme={null}
flowchart TB
    A["<b>Fourthwall</b><br/><i>storefront api</i>"]
    B["<b>Your site</b><br/><i>vercel</i>"]
    C["<b>Customer</b>"]

    A -->|"API calls"| B
    B -->|"API calls"| A
    B -->|"&lt;html&gt;"| C
```

In this setup, your frontend application will make API calls to the Vercel backend. The Vercel backend acts as a proxy that will then make calls to the Fourthwall API. Your Vercel application can contain whatever code you want, allowing for a fully customizable storefront.

### Separate frontend

It is also possible to build your custom site as a static frontend only site. In this setup, the static site will make API calls directly to the Fourthwall API.

```mermaid theme={null}
graph LR
    A["<b>Your site</b>"]
    B["<b>Fourthwall</b><br/><i>storefront api</i>"]
    C["<b>Customer</b>"]

    B -->|"API calls"| A
    A -->|"&lt;html&gt;"| C
```