Editable Components

Complete reference for all customizable theme components.

Available Components

Component	Purpose
`TImage`	Merchant-editable image
`TText`	Editable inline text
`THeading`	Editable heading (h1-h6)
`TParagraph`	Editable paragraph
`TSpan`	Editable inline span
`TColor`	Customizable color value
`TSection`	Named section wrapper
`TButton`	Styled, editable button
`TLink`	Styled, editable link
`TProductCard`	Product display card
`TProductGrid`	Responsive product grid
`TCollectionGrid`	Collection display grid
`TCartSummary`	Shopping cart summary
`TCheckoutForm`	Checkout form component

Usage Example

Every editable component requires a unique name prop:

Editable Components

TSX

import {
  TImage, THeading, TParagraph,
  TColor, TSection, TProductGrid, useProducts
} from "threeu-sdk/theme";

function CollectionPage() {
  const { data: products = [] } = useProducts();
  return (
    <>
      <TSection name="collection.hero">
        <TImage name="collection.hero.banner"
          src="/collection-banner.jpg" alt="Banner" />
        <THeading name="collection.hero.title">
          New Arrivals
        </THeading>
      </TSection>
      <TSection name="collection.products">
        <TProductGrid products={products} columns={3} />
      </TSection>
    </>
  );
}

Theme Overview

Theme Config