> ## 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.

# Resale overview

> Sell serialized secondhand items at prices set per condition, alongside your rental methods

export const storefrontBlocksScope = () => ({
  RenderReset,
  RenderWindow,
  StorefrontChip,
  StorefrontLine,
  StorefrontMethod,
  StorefrontRentBody,
  StorefrontShell,
  StorefrontSubscribeBody,
  StorefrontSubscriptionScene
});

export const StorefrontResalePdp = () => {
  const {StorefrontChip, StorefrontLine, StorefrontMethod, StorefrontRentBody, StorefrontShell} = storefrontBlocksScope();
  const [method, setMethod] = useState("buy");
  const [cond, setCond] = useState(0);
  const [period, setPeriod] = useState(0);
  const c = SF_RESALE_CONDITIONS[cond];
  const moved = method !== "buy" || cond !== 0 || period !== 0;
  const periods = [{
    days: 4,
    price: 24
  }, {
    days: 7,
    price: 36
  }, {
    days: 14,
    price: 56
  }];
  return <StorefrontShell url="yourstore.com/products/classic-denim-jacket" product="Classic Denim Jacket" from={"Rent from " + sfMoney(56 / 14) + " per day, or buy from " + sfMoney(32)} moved={moved} onReset={() => {
    setMethod("buy");
    setCond(0);
    setPeriod(0);
  }}>
      <StorefrontMethod title="Rent" price={"From " + sfMoney(56 / 14) + " per day"} sub="Yours for 4 to 14 days" selected={method === "rent"} onSelect={() => setMethod("rent")}>
        <StorefrontRentBody periods={periods} period={period} setPeriod={setPeriod} start={SF_START} />
      </StorefrontMethod>
      <StorefrontMethod title="Buy" price={"From " + sfMoney(32)} sub="Own a pre-loved item" selected={method === "buy"} onSelect={() => setMethod("buy")}>
        <div>
          <span className="sc-sf-label">Condition</span>
          <div className="sc-sf-chips">{SF_RESALE_CONDITIONS.map((x, i) => <StorefrontChip key={x.label} label={x.label} sub={sfMoney(x.price) + " · " + x.available + " available"} selected={i === cond} onClick={() => setCond(i)} />)}</div>
        </div>
        <div className="sc-sf-note">Every item is cleaned and checked before it ships. {c.label === "Good" ? "Light signs of wear, no marks or repairs." : "Visible wear or a small repair, described on the item."}</div>
        <div>
          <div className="sc-sf-lines">
            <StorefrontLine label={"Classic Denim Jacket, " + c.label.toLowerCase()} value={sfMoney(c.price)} />
          </div>
          <StorefrontLine label="Total" value={sfMoney(c.price)} total />
        </div>
      </StorefrontMethod>
    </StorefrontShell>;
};

export const StorefrontSubscriptionDisclaimer = () => {
  const {StorefrontSubscriptionScene} = storefrontBlocksScope();
  return <StorefrontSubscriptionScene disclaimer />;
};

export const StorefrontSubscriptionPdp = () => {
  const {StorefrontSubscriptionScene} = storefrontBlocksScope();
  return <StorefrontSubscriptionScene />;
};

export const StorefrontSubscriptionScene = ({disclaimer}) => {
  const {StorefrontMethod, StorefrontRentBody, StorefrontShell, StorefrontSubscribeBody} = storefrontBlocksScope();
  const [term, setTerm] = useState(1);
  const [method, setMethod] = useState("subscribe");
  const [period, setPeriod] = useState(0);
  const moved = term !== 1 || method !== "subscribe" || period !== 0;
  const cheapest = Math.min(...SF_SUB_TERMS.map(x => x.recurring));
  return <StorefrontShell url="yourstore.com/products/horizon-blazer" product="Horizon Blazer" from={"From " + sfMoney(cheapest / 30) + " per day"} moved={moved} onReset={() => {
    setTerm(1);
    setMethod("subscribe");
    setPeriod(0);
  }}>
      <StorefrontMethod title="Subscribe" price={sfMoney(SF_SUB_TERMS[term].recurring / 30) + " / day"} sub="Longer term rental" selected={method === "subscribe"} onSelect={() => setMethod("subscribe")}>
        <StorefrontSubscribeBody terms={SF_SUB_TERMS} term={term} setTerm={setTerm} checkout={20} deposit={100} disclaimer={disclaimer} />
      </StorefrontMethod>
      <StorefrontMethod title="Rent" price="From £7.50 per day" sub="Yours for 4 to 14 days" selected={method === "rent"} onSelect={() => setMethod("rent")}>
        <StorefrontRentBody periods={SF_COASTAL_PERIODS} period={period} setPeriod={setPeriod} start={SF_START} />
      </StorefrontMethod>
    </StorefrontShell>;
};

export const StorefrontSubscribeBody = ({terms, term, setTerm, checkout, deposit, disclaimer}) => {
  const {StorefrontChip, StorefrontLine} = storefrontBlocksScope();
  const t = terms[term];
  return <>
      <div>
        <span className="sc-sf-label">Minimum term</span>
        <div className="sc-sf-chips">{terms.map((x, i) => <StorefrontChip key={x.months} label={x.months + (x.months === 1 ? " month" : " months")} sub={sfMoney(x.recurring) + " monthly"} selected={i === term} onClick={() => setTerm(i)} />)}</div>
      </div>
      <div>
        <span className="sc-sf-label">Start date</span>
        <div className="sc-sf-dates"><div className="sc-sf-date"><small>Start date</small><span style={{
    color: STOREFRONT.subdued
  }}>Add date</span></div></div>
      </div>
      {disclaimer && <div className="sc-sf-note"><strong>Delivery:</strong> our team confirms your delivery date once your order is approved. We do our best to meet your requested start date.</div>}
      <div>
        <div className="sc-sf-lines">
          <StorefrontLine label="Recurring payment" value={sfMoney(t.recurring) + " monthly"} />
          <StorefrontLine label="Minimum term" value={t.months + (t.months === 1 ? " month" : " months")} />
          <StorefrontLine label="Refundable deposit" value={sfMoney(deposit)} />
        </div>
        <StorefrontLine label="First payment" value={sfMoney(checkout + deposit)} total />
      </div>
    </>;
};

export const StorefrontFixedFeeSummary = () => {
  const {StorefrontMethod, StorefrontRentBody, StorefrontShell} = storefrontBlocksScope();
  const [period, setPeriod] = useState(0);
  const [method, setMethod] = useState("rent");
  const moved = period !== 0 || method !== "rent";
  return <StorefrontShell url="yourstore.com/products/coastal-breeze-top" product="Coastal Breeze Top" from={"From " + sfMoney(SF_COASTAL_PERIODS[2].price / 14) + " per day"} moved={moved} onReset={() => {
    setPeriod(0);
    setMethod("rent");
  }}>
      <StorefrontMethod title="Rent" price={"From " + sfMoney(SF_COASTAL_PERIODS[2].price / 14) + " per day"} sub="Yours for 4 to 14 days" selected={method === "rent"} onSelect={() => setMethod("rent")}>
        <StorefrontRentBody periods={SF_COASTAL_PERIODS} fees={SF_COASTAL_FEES} period={period} setPeriod={setPeriod} start={SF_START} />
      </StorefrontMethod>
      <StorefrontMethod title="Membership" price="From £20.00 / month" sub="Rent for free with a membership" selected={method === "membership"} onSelect={() => setMethod("membership")}>
        <div className="sc-sf-note">Members rent this item for 1 credit. Join a plan from £20.00 a month, or log in to use your credits.</div>
      </StorefrontMethod>
    </StorefrontShell>;
};

export const SF_START = new Date(2026, 4, 12);

export const SF_RESALE_CONDITIONS = [{
  label: "Good",
  price: 45,
  available: 2
}, {
  label: "Fair",
  price: 32,
  available: 1
}];

export const SF_SUB_TERMS = [{
  months: 1,
  recurring: 12
}, {
  months: 3,
  recurring: 10
}, {
  months: 6,
  recurring: 9
}];

export const SF_COASTAL_FEES = [{
  title: "Cleaning fee",
  price: 20
}, {
  title: "Insurance",
  price: 12
}];

export const SF_COASTAL_PERIODS = [{
  days: 4,
  price: 30
}, {
  days: 7,
  price: 45
}, {
  days: 14,
  price: 70
}];

export const StorefrontRentBody = ({periods, fees = [], period, setPeriod, start}) => {
  const {StorefrontChip, StorefrontLine} = storefrontBlocksScope();
  const p = periods[period];
  const end = new Date(start);
  end.setDate(start.getDate() + p.days);
  const feeTotal = fees.reduce((s, f) => s + f.price, 0);
  return <>
      <div>
        <span className="sc-sf-label">Rental period</span>
        <div className="sc-sf-chips">{periods.map((x, i) => <StorefrontChip key={x.days} label={x.days + " days"} sub={sfMoney(x.price)} selected={i === period} onClick={() => setPeriod(i)} />)}</div>
      </div>
      <div className="sc-sf-dates">
        <div className="sc-sf-date"><small>Arrive by</small><span>{sfDate(start)}</span></div>
        <div className="sc-sf-date"><small>Return by</small><span>{sfDate(end)}</span></div>
      </div>
      <div>
        <div className="sc-sf-lines">
          <StorefrontLine label={sfMoney(p.price / p.days) + "/day x " + p.days + " days"} value={sfMoney(p.price)} />
          {fees.map(f => <StorefrontLine key={f.title} label={f.title} value={sfMoney(f.price)} />)}
        </div>
        <StorefrontLine label="Total" value={sfMoney(p.price + feeTotal)} total />
      </div>
    </>;
};

export const sfDate = d => d.getDate() + " " + d.toLocaleString("en", {
  month: "short"
}) + " " + String(d.getFullYear()).slice(2);

export const StorefrontLine = ({label, value, total}) => <div className={"sc-sf-line" + (total ? " sc-sf-total" : "")}><span>{label}</span><span>{value}</span></div>;

export const StorefrontChip = ({label, sub, selected, onClick}) => <button type="button" className={"sc-sf-chip" + (selected ? " on" : "")} aria-pressed={selected} onClick={onClick}>
    <span>{label}</span>
    {sub && <small>{sub}</small>}
  </button>;

export const StorefrontMethod = ({title, price, sub, selected, onSelect, children}) => <div className={"sc-sf-method" + (selected ? " on" : "")}>
    <button type="button" className={"sc-sf-method-head" + (!selected && onSelect ? " scr-pressable" : "")} aria-pressed={selected} onClick={onSelect}>
      <span className="sc-sf-radio" />
      <span className="sc-sf-method-text">
        <span className="sc-sf-method-row"><span>{title}</span><span>{price}</span></span>
        {sub && <span className="sc-sf-method-sub">{sub}</span>}
      </span>
    </button>
    {selected && children && <div className="sc-sf-method-body">{children}</div>}
  </div>;

export const StorefrontShell = ({url, product, from, desc, moved, onReset, children}) => {
  const {RenderReset, RenderWindow} = storefrontBlocksScope();
  return <RenderWindow label={"Example " + product + " product page"} url={url} designWidth={900} gutter={30} background="#ffffff" actions={moved && <RenderReset onClick={onReset} />}>
      <div className="sc-sf">
        <style>{STOREFRONT_CSS}</style>
        <div className="sc-sf-store" aria-hidden="true">
          <span className="sc-sf-store-nav"><span>Methods</span><span>Collections</span><span>Plans</span></span>
          <span className="sc-sf-store-name">Summit store</span>
          <span className="sc-sf-store-icons">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.4" /><path d="M10.5 10.5L14 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
            <span className="sc-sf-avatar">L</span>
            <svg viewBox="0 0 16 16" fill="none"><path d="M3 5.5h10l-.8 8H3.8L3 5.5z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" /><path d="M5.5 5.5V4.5a2.5 2.5 0 015 0v1" stroke="currentColor" strokeWidth="1.4" /></svg>
          </span>
        </div>
        <div className="sc-sf-body">
          <div aria-hidden="true">
            <div className="sc-sf-placeholder">
              <svg viewBox="0 0 48 48" fill="none"><rect x="6" y="10" width="36" height="28" rx="3" stroke="currentColor" strokeWidth="2" /><circle cx="17" cy="20" r="3.5" stroke="currentColor" strokeWidth="2" /><path d="M8 34l10-9 7 6 6-5 9 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
          </div>
          <div className="sc-sf-panel">
            <div><div className="sc-sf-title">{product}</div><div className="sc-sf-from">{from}</div></div>
            <div className="sc-sf-methods">{children}</div>
            <button type="button" className="sc-sf-cta">Add to cart</button>
            {desc && <div className="sc-sf-desc" aria-hidden="true">{desc}</div>}
          </div>
        </div>
      </div>
    </RenderWindow>;
};

export const sfMoney = n => "£" + Number(n).toFixed(2);

export const STOREFRONT_CSS = `
  .sc-sf { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.35; color: #000000; }
  .sc-sf button { font: inherit; margin: 0; appearance: none; text-align: left; color: inherit; }
  .sc-sf button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
  .sc-sf-store { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 0; font-size: 14px; }
  .sc-sf-store-name { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: -0.01em; color: #202603; }
  .sc-sf-store-nav { display: flex; gap: 16px; color: #333; }
  .sc-sf-store-icons { display: flex; justify-content: flex-end; align-items: center; gap: 16px; color: #333; }
  .sc-sf-store-icons svg { width: 18px; height: 18px; }
  .sc-sf-avatar { width: 20px; height: 20px; border-radius: 50%; background: #2f6bff; color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
  .sc-sf-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 8px 0 32px; }
  .sc-sf-placeholder { aspect-ratio: 4 / 5; border-radius: 4px; background: #f3f2ee; color: #c9c5bc; display: grid; place-items: center; }
  .sc-sf-placeholder svg { width: 56px; height: 56px; }
  .sc-sf-panel { display: grid; gap: 16px; }
  .sc-sf-title { font-size: 22px; font-weight: 550; line-height: 1.2; }
  .sc-sf-from { font-size: 14px; color: #656565; margin-top: 4px; }
  .sc-sf-methods { display: grid; gap: 10px; }
  .sc-sf-method { border: 1px solid #cccccc; border-radius: 8px; background: #fff; }
  .sc-sf-method.on { border-color: #000000; outline: 1px solid #000000; }
  .sc-sf-method-head { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 14px; background: transparent; border: 0; cursor: pointer; }
  .sc-sf-radio { position: relative; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1px #cccccc; }
  .sc-sf-method.on .sc-sf-radio { box-shadow: inset 0 0 0 1px #000000; }
  .sc-sf-method.on .sc-sf-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #000000; }
  .sc-sf-method-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
  .sc-sf-method-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
  .sc-sf-method-sub { font-size: 12px; color: #656565; text-align: right; }
  .sc-sf-method-body { border-top: 1px solid #cccccc; margin: 0 14px; padding: 14px 0; display: grid; gap: 14px; }
  .sc-sf-label { display: block; font-size: 13px; color: #656565; margin-bottom: 6px; }
  .sc-sf-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sc-sf-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 8px; border: 1px solid #cccccc; border-radius: 8px; background: #fff; cursor: pointer; text-align: center; font-size: 14px; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
  .sc-sf-chip small { font-size: 12px; color: #656565; }
  .sc-sf-chip.on { background: #000000; border-color: #000000; color: #fff; }
  .sc-sf-chip.on small { color: #fff; }
  .sc-sf-dates { border: 1px solid #cccccc; border-radius: 8px; display: flex; overflow: hidden; }
  .sc-sf-date { flex: 1; padding: 8px 10px; display: grid; gap: 4px; }
  .sc-sf-date + .sc-sf-date { border-left: 1px solid #cccccc; }
  .sc-sf-date small { font-size: 11px; }
  .sc-sf-note { font-size: 13px; line-height: 1.45; }
  .sc-sf-lines { border-top: 1px solid #cccccc; padding-top: 8px; display: grid; gap: 6px; font-size: 14px; }
  .sc-sf-line { display: flex; justify-content: space-between; gap: 8px; }
  .sc-sf-total { border-top: 1px solid #cccccc; margin-top: 6px; padding-top: 8px; font-weight: 550; }
  .sc-sf .sc-sf-cta { background: #1a1a1a; color: #fff; border: 0; border-radius: 8px; text-align: center; font-size: 15px; font-weight: 550; padding: 14px 0; width: 100%; }
  .sc-sf-desc { display: grid; gap: 12px; font-size: 14px; line-height: 1.5; color: #333; padding-top: 16px; border-top: 1px solid #ebebeb; }
  .sc-sf-desc h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #000; }
  .sc-sf-desc p { margin: 0; }
`;

export const STOREFRONT = {
  border: "#cccccc",
  text: "#000000",
  subdued: "#656565",
  accent: "#000000",
  radius: 8,
  font: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
};

export const renderKitScope = () => ({
  RenderStyles
});

export const RENDER_CSS = `
  .scr { width: 100%; min-width: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  .scr button { margin: 0; appearance: none; text-align: center; }
  .scr button:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }

  /* Browser window: neutral traffic dots, centered URL, the docs' layered shadow. */
  .scr-window { position: relative; width: 100%; margin: 0 auto; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; touch-action: pan-y;
    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), 0 8px 14px rgba(11,13,24,.035), 0 16px 28px rgba(11,13,24,.04); }
  .scr-titlebar { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #ebebeb; background: #fff; }
  .scr-dot { width: 9px; height: 9px; border-radius: 50%; background: #e3e3e3; }
  .scr-url { margin: 0 auto; min-width: 0; max-width: calc(100% - 48px); font-size: 11px; color: #85817a; background: #f3f2ee; border-radius: 6px; padding: 3px 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scr-page { position: relative; overflow: hidden; }
  /* container-name: scr is what polaris-css.jsx's @container queries measure,
     so a phone viewport cannot switch the page to a mobile layout. */
  .scr-zoom { margin: 0 auto; box-sizing: border-box; container-type: inline-size; container-name: scr; }

  /* Reset: quiet text control in the chrome, shown once a render has moved on from its resting state. */
  .scr-reset { font-size: 11px; color: #85817a; background: none; border: 0; cursor: pointer; padding: 2px 4px; font-family: inherit; }
  .scr-reset:hover { color: #1a1a1a; }

  /* Tablet: iPad in landscape, near-black bezel, camera on the left edge, iPadOS status bar. */
  .scr-tablet { position: relative; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 12px 12px 12px 20px; background: #1c1c1e; border-radius: 24px; touch-action: pan-y;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 28px rgba(11,13,24,.18); }
  .scr-camera { position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); border-radius: 50%; background: #3a3a3c; box-shadow: inset 0 0 0 1px #111; }
  .scr-screen { position: relative; overflow: hidden; border-radius: 12px; background: #000; }
  .scr-tablet .scr-reset { position: absolute; right: 16px; top: 14px; z-index: 7; color: rgba(255,255,255,.55); }
  .scr-tablet .scr-reset:hover { color: #fff; }

  /* Main buttons the reader can press ripple softly so it's clear what responds. Plain text
     links and decorative controls don't. Paused on hover, off under reduced motion. */
  .scr-pressable { position: relative; }
  .scr-pressable::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: scr-ripple 2.4s ease-out infinite; }
  @keyframes scr-ripple {
    0% { box-shadow: 0 0 0 0 var(--scr-ripple, rgba(0, 113, 227, .45)); }
    60% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .scr-pressable:hover::after { animation: none; }
  @media (prefers-reduced-motion: reduce) { .scr-pressable::after { animation: none; } }
`;

export const useRenderZoom = (ref, designWidth) => {
  const [zoom, setZoom] = useState(0.6);
  useEffect(() => {
    const el = ref.current;
    if (!el || typeof ResizeObserver === "undefined") return undefined;
    const fit = () => setZoom(Math.max(0.2, Math.min(1, el.clientWidth / designWidth)));
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(el);
    return () => ro.disconnect();
  }, [designWidth]);
  return zoom;
};

export const RenderReset = ({onClick, className}) => <button type="button" className={"scr-reset" + (className ? " " + className : "")} onClick={onClick}>
    Reset
  </button>;

export const RenderStyles = () => <style>{RENDER_CSS}</style>;

export const RenderWindow = ({url, label, designWidth = 1168, gutter = 40, background = "#ffffff", actions, overlay, children}) => {
  const {RenderStyles} = renderKitScope();
  const ref = useRef(null);
  const total = designWidth + gutter * 2;
  const zoom = useRenderZoom(ref, total);
  const body = typeof children === "function" ? children({
    zoom
  }) : children;
  return <div className="not-prose scr" aria-label={label}>
      <RenderStyles />
      <div className="scr-window" ref={ref}>
        <div className="scr-titlebar">
          <span className="scr-dot" />
          <span className="scr-dot" />
          <span className="scr-dot" />
          <span className="scr-url">{url}</span>
          {actions}
        </div>
        <div className="scr-page" style={{
    background
  }}>
          <div className="scr-zoom" style={{
    zoom,
    width: total,
    padding: "0 " + gutter + "px"
  }}>
            {body}
          </div>
          {typeof overlay === "function" ? overlay({
    zoom
  }) : overlay}
        </div>
      </div>
    </div>;
};

Resale lets you sell individual serialized items, typically used or refurbished pieces from a trade-in or items that have finished their rental life. The customer buys a specific item in a specific condition, and Supercycle keeps the item's history and serial number through the sale.

<Frame type="glass" caption="Select Buy, then pick a condition to see its price.">
  <StorefrontResalePdp />
</Frame>

***

## How it works

When the Resale method is on for a product, the Methods app block shows a buy option next to any rental options, with a price for each pricing option you've created. Pricing options can be set per item condition or variant, so an unused item can cost more than a used one, or one storage size more than another.

Each sale is tracked through Supercycle's inventory. The item is marked as sold, its history stays on the record, and it leaves the rental pool.

***

## Resale and rental methods

Unlike calendar, subscription, and membership rental, where items come back to your inventory, resale transfers ownership to the customer for good. It suits:

* Items that have completed their rental lifecycle
* Refurbished or used inventory you want to clear
* Products customers would rather own than rent
* Inventory that no longer rents well

Resale can run alongside the rental methods on the same product, so the customer chooses whether to rent or buy.

***

## Configurations

<CardGroup cols={2}>
  <Card title="Importing products" icon="file-import" href="/documentation/setup/importing-products">
    Import products from Shopify and create Supercycle inventory.
  </Card>

  <Card title="Product setup" icon="sliders-simple" href="/documentation/methods/resale/product-setup">
    Turn on resale for a product and create its pricing options.
  </Card>
</CardGroup>