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

# Supercycle docs

> Learn how to run rental, subscription, membership, and resale on your Shopify store with Supercycle

export const indexCardsScope = () => ({
  DocPanel,
  DocSurface,
  IndexCardStyles
});

export const INDEX_CARD_CSS = `
  /* The tint is literal, not var(--brand-warm-dark): a vignette is a window into
     light product UI and doesn't invert with the page. Same rule as a render. */
  /* Three columns squeeze a card to ~180px on a laptop, which leaves the panel
     at ~124px: too narrow for any scene to read, and the fixed 148px frame just
     clips them. Below 200px the card drops the vignette and stands on its copy.
     The holder exists only to be the container the panel queries. */
  /* Bottom-aligned. Descriptions run to different lengths, so without this the
     panels sit at different heights across a row.

     The card group already stretches each card to the row's height; the job is
     walking that height down to the holder. Mintlify's card nests it:

       .card > [card-content-container] > a > div > [card-content] > holder

     Every one of those has to be a column that grows, or margin-top:auto has no
     slack to take. Two traps: the <a> is display:contents (fine, selectors still
     match through it, and it isn't a box so it needs no rule), and the div
     between it and card-content carries no data-component-part, so it's matched
     by the title it holds rather than by its Tailwind class. */
  .card:has(.dcard-panel) { display: flex; flex-direction: column; container-type: inline-size; }
  .card:has(.dcard-panel) [data-component-part="card-content-container"],
  .card:has(.dcard-panel) [data-component-part="card-content-container"] > a > div:has(> [data-component-part="card-title"]),
  .card:has(.dcard-panel) [data-component-part="card-content"] {
    display: flex; flex-direction: column; flex: 1 1 auto; }
  /* The gap belongs to the one level that has a panel under the copy. On the
     levels above it, it would push the icon off the title and the title off the
     description, spreading the card instead of keeping the copy together. */
  .card:has(.dcard-panel) [data-component-part="card-content"] { gap: 1rem; }
  .dcard-panel { margin-top: auto; padding: 16px; height: 148px; display: flex; align-items: center; justify-content: center;
    background: #f1ede7; border-radius: 12px; overflow: hidden;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  /* Three columns only leave a card wide enough for a scene above about 1400px.
     Rather than let every laptop lose the vignettes, the grid steps down: three
     at full width, two on a mid-size screen, one when it's narrow.

     This drives Mintlify's own --cols rather than setting grid-template-columns.
     Its column utility is a layered !important, which outranks anything this
     stylesheet can say from outside a layer, in either direction: an unlayered
     !important loses to a layered one, and an unlayered normal declaration loses
     to a layered !important too. But the utility reads repeat(var(--cols), …),
     and --cols is a plain inline custom property, so an !important here beats it
     and their own rule does the work.

     :has() keeps it to card groups that carry a vignette; every other card group
     in the docs keeps the columns its page asked for. */
  @media (max-width: 1400px) {
    .card-group:has(.dcard-panel) { --cols: 2 !important; }
  }
  /* The sidebar holds down to 1024px, and until about 1080px two columns beside
     it leave a card under the 290px backstop below. Once it collapses there is
     room for two again, down to where Mintlify's own single column takes over
     at 640px; 660px covers the last few pixels above it. */
  @media (min-width: 1024px) and (max-width: 1080px), (max-width: 660px) {
    .card-group:has(.dcard-panel) { --cols: 1 !important; }
  }
  /* The backstop. The scenes are drawn for a ~230px surface, so under a 290px
     card the vignette goes and the card stands on its copy. */
  @container (max-width: 290px) { .dcard-panel { display: none; } }
  /* One surface, no chrome. 116px is the panel less its padding, so the scene
     fills the tile and the tint reads as an even frame around it. */
  .dcard-surface { width: 100%; height: 116px; padding: 10px 12px; border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(135deg, #ffffff 45%, #f7f6f2 100%);
    box-shadow: 0 0 0 1px rgba(11,13,24,.06), 0 1px 2px rgba(11,13,24,.024), 0 3px 6px rgba(11,13,24,.03); }
  .dcard-term { background: #202020; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.6; color: #e3e3e3; }
  /* A terminal truncates, it doesn't reflow. One line per line at any width. */
  .dcard-term > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dc-dim { color: #8a8a8a; }
  .dc-ok { color: #affebf; }

  /* Shared beats. Each scene assembles once and stays: no loop, no reset.
     Looping meant a card emptied to a blank surface and rebuilt every nine
     seconds, which is nothing the app does. A row doesn't un-import, a step
     doesn't un-tick. Settled is the useful state, so animation-fill-mode holds
     the card ends up reading like a screenshot that drew itself. */
  .dc-in { opacity: 0; animation: dc-in 520ms ease forwards; }
  .dc-d1 { animation-delay: 150ms; } .dc-d2 { animation-delay: 450ms; } .dc-d3 { animation-delay: 750ms; }
  .dc-d4 { animation-delay: 1050ms; } .dc-d5 { animation-delay: 1350ms; }
  @keyframes dc-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
  /* A pair that swaps: the one real change each scene shows, once. Add app
     becomes Installed, the request resolves, the price becomes a daily rate. */
  .dc-a { animation: dc-out 420ms ease 1750ms forwards; }
  .dc-b { opacity: 0; animation: dc-in 420ms ease 1750ms forwards; }
  @keyframes dc-out { from { opacity: 1; } to { opacity: 0; } }
  .dc-swap { display: grid; }
  .dc-swap > * { grid-area: 1 / 1; min-width: 0; }

  /* Platform: the inventory table Supercycle adds to a Shopify product. */
  .dpl-head, .dpl-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 11px; line-height: 1.35; }
  .dpl-head { color: #616161; padding-bottom: 4px; border-bottom: 1px solid #e3e3e3; }
  .dpl-row { padding: 3px 0; color: #303030; }
  .dpl-serial { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
  .dpl-badge { border-radius: 8px; padding: 2px 8px; font-size: 10px; font-weight: 550; background: #affebf; color: #014b40; white-space: nowrap; }
  .dpl-badge.is-wait { background: rgba(0, 0, 0, .06); color: #616161; }

  /* Install: the App Store listing and its button. */
  .din-row { display: flex; align-items: center; gap: 10px; }
  .din-mark { flex: none; width: 32px; height: 32px; border-radius: 8px; background: #fedad9; display: grid; place-items: center; }
  .din-mark::after { content: ""; width: 20px; height: 20px; background: #202603;
    -webkit-mask: url("/images/logo/logomark-dark.svg") center / contain no-repeat;
    mask: url("/images/logo/logomark-dark.svg") center / contain no-repeat; }
  .din-name { font-size: 12px; font-weight: 600; color: #303030; line-height: 1.35; }
  .din-meta { font-size: 11px; color: #8a8a8a; line-height: 1.35;
    /* Two lines then an ellipsis, the way a store listing clamps its own
       subtitle. On a narrow card this ran to three and crowded the row. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .din-swap { margin-left: auto; flex: none; justify-items: end; }
  .din-btn { padding: 5px 12px; border-radius: 8px; background: #303030; color: #fff; font-size: 11px; font-weight: 550; white-space: nowrap; }
  .din-btn.is-done { background: #affebf; color: #014b40; }

  /* Setup guide: the five stages ticking through. */
  .dsg-list { display: flex; flex-direction: column; gap: 5px; }
  .dsg-step { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #303030; }
  .dsg-tick circle { fill: none; stroke: currentColor; stroke-width: 2; opacity: .35; }
  .dsg-tick path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .dsg-tick { flex: none; width: 14px; height: 14px; display: block; color: #047b5d; }

  /* Import products: a Shopify product crossing into Supercycle. */
  .dip-row { display: flex; align-items: center; gap: 9px; padding: 2px 0; font-size: 11px; color: #303030; }
  .dip-thumb { flex: none; width: 22px; height: 22px; border-radius: 5px; background: #f1f1f1; }
  /* A product title truncates like the admin's own list, rather than wrap and
     push the third row out of the surface on a card near the backstop. */
  .dip-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dip-state { margin-left: auto; }

  /* Methods setup: the method rows on the product page. */
  .dms-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e3e3e3; border-radius: 8px; margin-bottom: 5px; font-size: 11px; }
  .dms-row.is-on { border-color: #1a1a1a; box-shadow: inset 0 0 0 1px #1a1a1a; }
  .dms-radio { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #8a8a8a; display: grid; place-items: center; }
  .dms-row.is-on .dms-radio { border-color: #1a1a1a; }
  .dms-row.is-on .dms-radio::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1a1a1a; }
  .dms-title { font-weight: 550; color: #303030; }
  .dms-price { margin-left: auto; color: #616161; }

  /* Operators MCP: the assistants that plug in over MCP, then what they answer.
     The chip is the site's .agent-chip (ExtendScene.astro) at card scale. Light
     rather than a terminal, so it doesn't read as a second Builders MCP. */
  .dop-chips { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
  .dop-chip { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
    background: #fff; border: 1px solid #e3e3e3; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
  .dop-chip i { display: block; width: 18px; height: 18px; background: #1a1a1a;
    -webkit-mask: var(--chip) center / contain no-repeat; mask: var(--chip) center / contain no-repeat; }
  .dop-ask { text-align: center; font-size: 11px; color: #8a8a8a; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dop-ans { text-align: center; font-size: 11px; color: #303030; font-weight: 550; line-height: 1.4; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Sidekick: the Polaris panel, question then answer. */
  .dsk-thread { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #303030; }
  .dsk-user { align-self: flex-end; background: #f1f1f1; border-radius: 10px; padding: 5px 10px; max-width: 85%; }
  .dsk-reply { display: flex; align-items: flex-start; gap: 7px; line-height: 1.5; }
  /* The real Sidekick mark, from images/icons/shopify-sidekick.svg. The file is
     a monochrome silhouette, so it's painted as a mask rather than dropped in as
     an <img>: that gives the brand purple on a white tile, which is how the mark
     reads in the admin. The site does the same thing with a lighten blend over a
     purple square; a mask is the same result without the blend. Size is held at
     16px, the height the row already had. */
  .dsk-avatar { flex: none; width: 16px; height: 16px; border-radius: 5px; background: #fff;
    box-shadow: inset 0 0 0 1px #e3e3e3; display: grid; place-items: center; }
  .dsk-avatar::after { content: ""; width: 12px; height: 12px; background: #6f2ee0;
    -webkit-mask: url("/images/icons/shopify-sidekick.svg") center / contain no-repeat;
    mask: url("/images/icons/shopify-sidekick.svg") center / contain no-repeat; }

  /* Developers: a Liquid snippet. */
  .ddv-tag { color: #79c0ff; }
  .ddv-str { color: #affebf; }

  /* Admin API and Storefront API: the request and its response. */
  .dapi-method { color: #affebf; font-weight: 700; }
  .dapi-status { display: inline-block; border-radius: 6px; padding: 0 7px; background: rgba(175, 254, 191, .15); color: #affebf; }
  .dapi-body { display: block; max-width: 100%; font-size: 10px; line-height: 1.5; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dapi-body i { font-style: normal; color: #e3e3e3; }
  .dapi-body em { font-style: normal; color: #affebf; }

  /* ---- ai/index.mdx ---- */
  /* Support: the docs answering a setup question. */
  .dai-field { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #e3e3e3; border-radius: 999px; font-size: 11px; color: #616161;
    white-space: nowrap; overflow: hidden; }
  .dai-field svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
  .dai-ans { margin-top: 8px; font-size: 11px; line-height: 1.45; color: #303030; }
  /* Operations: what the assistant hands back. */
  .dai-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; font-size: 11px; line-height: 1.4; color: #303030; }
  .dai-when { margin-left: auto; color: #616161; }
  .dai-head { font-size: 11px; font-weight: 550; line-height: 1.4; color: #303030; margin-bottom: 3px; }
  /* Building: what it wrote. */
  .dfl-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.5; color: #303030; }
  .dfl-add { margin-left: auto; color: #014b40; }

  /* ---- developers/index.mdx ---- */
  /* Availability search: the date filter narrowing a collection. */
  .dav-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
  .dav-field { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid #e3e3e3; border-radius: 8px; font-size: 10px; color: #303030; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dav-count { font-size: 10px; color: #616161; white-space: nowrap; }
  .dav-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
  /* Thumbs take their height from their width, so on a one-column card they grew
     past the surface. 55px is the room under the bar; past it they go landscape
     and the row still spans the bar, the way a wide collection grid does. */
  .dav-thumb { width: 100%; aspect-ratio: 4 / 5; max-height: 55px; border-radius: 4px; background: #f1f1f1; }
  .dav-thumb.is-out { opacity: .35; }
  /* Membership plans: the plan cards the block renders. */
  .dpn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .dpn-card { border: 1px solid #e3e3e3; border-radius: 8px; padding: 6px 8px; text-align: center; line-height: 1.35; }
  .dpn-name { display: block; font-size: 10px; color: #616161; }
  .dpn-price { display: block; font-size: 13px; font-weight: 550; color: #303030; margin-top: 1px; }
  .dpn-btn { display: block; margin-top: 6px; padding: 3px 0; border-radius: 6px; background: #1a1a1a; color: #fff; font-size: 9px; font-weight: 550; }
  /* Link new and circular: the switcher between the two products. */
  .dlk-row { display: flex; gap: 6px; justify-content: center; }
  .dlk-chip { padding: 5px 12px; border: 1px solid #e3e3e3; border-radius: 999px; font-size: 11px; font-weight: 550; color: #616161; }
  .dlk-chip.is-on { border-color: #1a1a1a; color: #303030; box-shadow: inset 0 0 0 1px #1a1a1a; }
  /* Cart lines: the plan and its recurring total. */
  .dct-row { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; font-size: 11px; line-height: 1.4; color: #303030; }
  .dct-sub { display: block; font-size: 10px; color: #616161; }
  .dct-amt { margin-left: auto; font-weight: 550; white-space: nowrap; }
  /* Metafields: namespace and key against the value Supercycle keeps in sync. */
  .dmf-row { display: flex; gap: 8px; padding: 2px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
  .dmf-key { color: #e3e3e3; white-space: nowrap; }
  .dmf-val { margin-left: auto; color: #affebf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  @media (prefers-reduced-motion: reduce) {
    .dcard-panel .dc-in { animation: none; opacity: 1; transform: none; }
    .dcard-panel .dc-a { animation: none; opacity: 0; }
    .dcard-panel .dc-b { animation: none; opacity: 1; }
  }
`;

export const IndexCardStyles = () => <style>{INDEX_CARD_CSS}</style>;

export const DocSurface = ({term, children}) => <div className={"dcard-surface" + (term ? " dcard-term" : "")}>{children}</div>;

export const DocPanel = ({children}) => {
  const {IndexCardStyles} = indexCardsScope();
  return <div className="not-prose dcard-panel" aria-hidden="true">
      <IndexCardStyles />
      {children}
    </div>;
};

export const DocStorefrontApi = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface term>
          <div><span className="dapi-method">GET</span> /apps/supercycle/availability_timelines</div>
          <div className="dc-dim">?variant_shopify_id=43210661</div>
          <div className="dc-swap" style={{
    marginTop: 4
  }}>
            <span className="dc-a dc-dim">…</span>
            <span className="dc-b dc-ok">{'{ "inventoryCount": 12, "occupancy": {…} }'}</span>
          </div>
      </DocSurface>
    </DocPanel>;
};

export const DocAdminApi = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface term>
          <div><span className="dapi-method">POST</span> /api/v1/items</div>
          <div className="dc-dim">{'{ "serials": ["SN-31221129"] }'}</div>
          <div className="dc-swap" style={{
    marginTop: 4
  }}>
            <span className="dc-a dc-dim">…</span>
            <span className="dc-b">
              <span className="dapi-status">201 Created</span>
              <span className="dapi-body">[ {"{"} <i>"id"</i>: 18274, <i>"status"</i>: <em>"processed"</em> {"}"} ]</span>
            </span>
          </div>
      </DocSurface>
    </DocPanel>;
};

export const DocDevelopers = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      {}
        <DocSurface term>
          <div className="dc-dim">{"{% if "}<span className="ddv-tag">supercycle.membership</span>{" %}"}</div>
          <div className="dc-in dc-d1">  {"{{ "}<span className="ddv-str">supercycle.credit_cost</span>{" }}"}</div>
          <div className="dc-in dc-d3">{"{% endif %}"}</div>
      </DocSurface>
    </DocPanel>;
};

export const DocSidekick = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface>
          <div className="dsk-thread">
            <span className="dsk-user dc-in dc-d1">do i have any overdue cycles?</span>
            <span className="dsk-reply dc-in dc-d3">
              <span className="dsk-avatar" />
              <span>Yes. <strong>Cycle #1006</strong> is overdue: Stroller - Black, 8 days.</span>
            </span>
          </div>
      </DocSurface>
    </DocPanel>;
};

export const DocBuildersMcp = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface term>
          <div>&gt; add a booking widget to the product page</div>
          <div className="dc-dim dc-in dc-d1">Reading Supercycle docs via Builders MCP…</div>
          <div className="dc-in dc-d3"><span className="dc-ok">Created</span> BookingWidget.tsx <span className="dc-dim">+118</span></div>
      </DocSurface>
    </DocPanel>;
};

export const DocOperatorsMcp = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface>
        <div className="dop-chips">
          {[["claude", "Claude"], ["openai", "ChatGPT"]].map(([f, n], i) => <span className={"dop-chip dc-in dc-d" + (i + 1)} key={f}>
              <i style={{
    "--chip": "url(/images/icons/" + f + ".svg)"
  }} />
            </span>)}
        </div>
        <div className="dop-ask dc-in dc-d3">which rentals are due back this week?</div>
        <div className="dop-ans dc-in dc-d5">Three, all with labels issued.</div>
      </DocSurface>
    </DocPanel>;
};

export const DocMethodsSetup = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface>
          {[["Buy new", "$549.00", false], ["Rent", "From $57.00 a day", true]].map((m, i) => <div className={"dms-row dc-in dc-d" + (i + 1) + (m[2] ? " is-on" : "")} key={m[0]}>
              <span className="dms-radio" />
              <span className="dms-title">{m[0]}</span>
              <span className="dms-price">{m[1]}</span>
            </div>)}
      </DocSurface>
    </DocPanel>;
};

export const DocImportProducts = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface>
          {["Silk Evening Dress", "Trench Coat", "Ball Gown"].map((p, i) => <div className={"dip-row dc-in dc-d" + (i + 1)} key={p}>
              <span className="dip-thumb" /><span className="dip-name">{p}</span>
              <span className="dip-state dpl-badge">Managed</span>
            </div>)}
      </DocSurface>
    </DocPanel>;
};

export const DocSetupGuide = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface>
          <div className="dsg-list">
            {["Install Supercycle", "Import products", "Add items"].map((s, i) => <div className={"dsg-step dc-in dc-d" + (i + 1)} key={s}>
                <svg className="dsg-tick" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="m7.5 12.3 3.2 3.2 6-6.4" /></svg>{s}</div>)}
          </div>
      </DocSurface>
    </DocPanel>;
};

export const DocInstall = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface>
          <div className="din-row">
            <span className="din-mark" />
            <span>
              <span className="din-name">Supercycle</span>
              <span className="din-meta" style={{
    display: "block"
  }}>Rental, subscription and resale</span>
            </span>
            <span className="din-swap dc-swap">
              <span className="din-btn dc-a">Add app</span>
              <span className="din-btn is-done dc-b">Installed</span>
            </span>
          </div>
      </DocSurface>
    </DocPanel>;
};

export const DocPlatform = () => {
  const {DocPanel, DocSurface} = indexCardsScope();
  return <DocPanel>
      <DocSurface>
          <div className="dpl-head"><span>Serial</span><span>Condition</span><span>Status</span></div>
          {[["SN-31221125", "Excellent", "Ready", false], ["SN-31221126", "Good", "On rent", true], ["SN-31221127", "Excellent", "Ready", false]].map((r, i) => <div className={"dpl-row dc-in dc-d" + (i + 1)} key={r[0]}>
              <span className="dpl-serial">{r[0]}</span>
              <span className="dc-dim">{r[1]}</span>
              <span className={"dpl-badge" + (r[3] ? " is-wait" : "")}>{r[2]}</span>
            </div>)}
      </DocSurface>
    </DocPanel>;
};

Supercycle is a circular commerce platform for Shopify. It lets you run rental, product-as-a-service, and resale business models from your store, alongside your retail sales. Supercycle extends Shopify: it handles the storefront experience for those models and takes over inventory management, adding the serials, allocation, and utilization tracking that circular commerce needs.

## Platform

Understand what Supercycle does and how it fits with Shopify.

<CardGroup cols={3}>
  <Card title="Platform overview" icon="shopify" href="/documentation/overview/platform">
    See how Supercycle works with Shopify's products, orders, and returns.

    <DocPlatform />
  </Card>

  <Card title="Methods" icon="arrows-spin" href="/documentation/overview/methods">
    Compare the calendar, subscription, membership, and resale methods.

    <DocMethodsSetup />
  </Card>
</CardGroup>

***

## Getting started

Set up your store, from installation to your first method.

<CardGroup cols={3}>
  <Card title="Install Supercycle" icon="shopify" href="https://apps.shopify.com/supercycle">
    Install the app from the Shopify App Store.

    <DocInstall />
  </Card>

  <Card title="Setup guide" icon="play" href="/documentation/setup/setup-guide">
    Follow the five stages from installation to your first method.

    <DocSetupGuide />
  </Card>

  <Card title="Import products" icon="file-import" href="/documentation/setup/importing-products">
    Include Shopify products in Supercycle so it manages their inventory.

    <DocImportProducts />
  </Card>

  <Card title="Methods setup" icon="download" href="/documentation/setup/methods-setup">
    Turn on a method for each product and set its pricing.

    <DocMethodsSetup />
  </Card>
</CardGroup>

***

## Bring your agents

Connect the AI assistants your team already uses to Supercycle.

<CardGroup cols={3}>
  <Card title="Operators MCP" icon="robot" href="/ai/operators-mcp/overview">
    Connect your AI assistant to your live Supercycle data.

    <DocOperatorsMcp />
  </Card>

  <Card title="Builders MCP" icon="code" href="/ai/builders-mcp/overview">
    Give AI coding tools access to Supercycle's documentation and API reference.

    <DocBuildersMcp />
  </Card>

  <Card title="Shopify Sidekick" icon="wand-magic-sparkles" href="/ai/sidekick/shopify-sidekick">
    Ask Sidekick about your cycles, customers, and returns inside the Shopify admin.

    <DocSidekick />
  </Card>
</CardGroup>

***

## Developers

Build deeper customizations and automations.

<CardGroup cols={3}>
  <Card title="Developers" icon="code" href="/developers">
    Customize the theme app blocks and work with Liquid and metafields.

    <DocDevelopers />
  </Card>

  <Card title="Admin API" icon="folder-gear" href="/api-reference/admin">
    Integrate and automate your operations with the Admin API.

    <DocAdminApi />
  </Card>

  <Card title="Storefront API" icon="pen-ruler" href="/api-reference/storefront">
    Build a custom storefront experience with the Storefront API.

    <DocStorefrontApi />
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.