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

# Set up your store

> Step-by-step storefront setup: connect Stripe, choose your slug, add products from your catalog, set pricing, add a banner, share your link. About 15 minutes start-to-finish.

export const TierBadge = ({tier}) => {
  const styles = {
    free: {
      label: "Free",
      color: "#A1A1AA"
    },
    starter: {
      label: "Starter+",
      color: "#00E6E2"
    },
    pro: {
      label: "Pro+",
      color: "#0068FF"
    },
    scale: {
      label: "Scale+",
      color: "#7A5BFF"
    },
    enterprise: {
      label: "Enterprise",
      color: "#FF7A59"
    },
    all: {
      label: "All plans",
      color: "#22C55E"
    }
  };
  const t = styles[tier?.toLowerCase()] ?? styles.all;
  return <span style={{
    display: "inline-flex",
    alignItems: "center",
    gap: "4px",
    padding: "2px 10px",
    borderRadius: "999px",
    border: `1px solid ${t.color}40`,
    background: `${t.color}1A`,
    color: t.color,
    fontSize: "12px",
    fontWeight: 600,
    fontFamily: "var(--font-family-mono)",
    verticalAlign: "middle"
  }}>
      {t.label}
    </span>;
};

export const AICallout = ({page}) => {
  const slug = page ?? "";
  const mdUrl = `https://docs.patchline.ai${slug}.md`;
  return <div style={{
    marginTop: "32px",
    padding: "16px 20px",
    borderRadius: "12px",
    border: "1px solid rgba(0,230,226,0.25)",
    background: "linear-gradient(135deg, rgba(0,230,226,0.08), rgba(0,104,255,0.05))",
    color: "inherit",
    fontSize: "14px",
    lineHeight: 1.6
  }}>
      <strong style={{
    display: "block",
    marginBottom: "6px",
    color: "#00E6E2"
  }}>
        For AI agents reading this page
      </strong>
      The canonical machine-readable version of this page is at{" "}
      <a href={mdUrl}>
        <code>{mdUrl}</code>
      </a>
      . For product actions, connect to{" "}
      <code>www.patchline.ai/api/mcp/v1</code>
      {" "}and call MCP <code>tools/list</code> for the current tool schema.
      Rules for navigating these docs:{" "}
      <a href="https://docs.patchline.ai/AGENTS.md">
        <code>docs.patchline.ai/AGENTS.md</code>
      </a>
      .
    </div>;
};

15 minutes from "I want to sell my music" to "I have a working
storefront link." Works on every tier; paid plans get a 0% platform fee.

<TierBadge tier="all" />   0% platform fee on paid plans.

## What you'll need

* **A Patchline account** ([sign up](https://patchline.ai)).
* **A Stripe account** (or willingness to create one — takes 5 minutes).
* **At least one [asset in your catalog](/catalog/import)** to sell.
* **A banner image** (1500×500 recommended) — can be added later.

## Step-by-step

<Steps>
  <Step title="Open the Store dashboard">
    Sidebar → **Store** → `/dashboard/store`.
  </Step>

  <Step title="Connect Stripe">
    Click **Connect Stripe**. Standard Stripe Connect flow:

    * Existing Stripe account: sign in, approve Patchline as a
      connected app. \~2 min.
    * New Stripe account: create one through Stripe's flow and connect
      your payout account. \~5–10 min.
  </Step>

  <Step title="Pick your slug">
    Your storefront URL is `patchline.ai/store/<slug>`. Pick something
    short and brandable — `mira-music`, `runhot`, `velvetbird`. Slugs
    are unique platform-wide.
  </Step>

  <Step title="Add products">
    Inventory → **+ Add product**. For each product:

    * Pick a track from your catalog (or upload a new one)
    * Set product type: single track / album / digital bundle
    * Set price (fixed or pay-what-you-want with optional minimum)
    * Optionally add a description, behind-the-scenes asset, signed
      cover art
  </Step>

  <Step title="Set up your banner + bio">
    Storefront → **Customize**:

    * Banner image (1500×500 recommended, JPG/PNG)
    * Short bio (under 200 chars)
    * Profile photo (uses your roster artist photo by default)
    * Social links (IG, TikTok, YouTube, etc.)
  </Step>

  <Step title="Preview + publish">
    **Preview** opens your store URL in a new tab. When it looks right,
    flip the **Live** toggle.
  </Step>

  <Step title="Share the link">
    `patchline.ai/store/<your-slug>`. Drop in your Linktree, bio,
    socials, email signature. The link auto-generates an OG image for
    social previews.
  </Step>
</Steps>

## Embedding on your own site

The embed widget lets you drop a product into any HTML page:

```html theme={null}
<iframe
  src="https://patchline.ai/store/<your-slug>/embed/<asset-id>"
  width="100%"
  height="420"
  frameborder="0"
></iframe>
```

The embed renders the product card + a buy button that opens checkout
in a popup. Works on Squarespace, Webflow, Wix, plain HTML, or anywhere
iframes are allowed.

## Reordering products

Inventory → drag-and-drop to reorder. The order on your storefront
follows the inventory order.

## Pricing

Plans, AI credits, and limits live on the [pricing page](https://patchline.ai/pricing) — we keep them there so they're always current.

## Related pages

* [Storefront overview](/storefront/overview) — what storefronts are
* [Smart links](/storefront/smart-links) — routing links for fans
* [Checkout & payouts](/storefront/checkout-payouts) — Stripe details

<AICallout page="/storefront/setup" />