Documentation menu

埋め込みテーマ

割り当てたテーマと対応CSS変数で埋め込みの外観を管理し、各公開ビューアーを適切なブランドに合わせます。

埋め込みテーマの仕組み

埋め込みテーマは、ストアフロント、ポータル、コレクション、ディーラー体験でPartGridビューアーが使用するビジュアルシステムを管理します。Theme Libraryで再利用可能なテーマを作成し、必要なバージョンを公開して、コレクションごとに既定テーマと異なる外観が必要な場合は上書きを割り当てます。

権限

テーマには、閲覧、作成、編集、削除、割り当て、テーマ案生成の個別権限があります。ロールで利用できない操作は非表示または無効になります。アクセスを確認・変更するにはロールを作成・管理するを参照してください。

Theme Libraryを開く

ダッシュボードまたは Integrations → Embed → Overview から Theme Library を開きます。既存テーマを選択して編集するか、必要なビジュアルシステムがまだない場合は再利用可能なテーマを作成します。

Basic modeの設定項目

Brand colors: primary、accent、background、surface、text、muted、border の色を設定します。
Typography: 見出しと本文のフォント、基本サイズ、行間、見出しの大文字小文字、ウェイトを設定します。
Layout and spacing: コンテンツ幅、セクション間隔、密度、モーション強度を調整します。
Shape and surfaces: 角丸、パネルとコントロールの上書き、影、ページスタイル、パネルスタイル、カラーモードを設定します。
Component styles: カード、ボタン、入力、バッジ、ナビゲーション、テーブル、タブ、ドロップダウンのスタイルを選択します。
Semantic surfaces: ビューアーキャンバス、パネル、アクティブ状態、ナビゲーションの共通色を設定します。
Annotations and markers: 展開図操作で使う線、ホットスポット、アウトライン、アクティブグローのスタイルを設定します。

Webサイトからドラフトを生成する

ロールでテーマ案生成が許可されている場合は Website URL を入力し、必要に応じて Logo URL、追加ページ、メモを指定します。Generate draft を選択し、PartGridが抽出した内容を確認してから、公開前に必要な調整を行います。

テーマバージョン

有効テーマとドラフト

埋め込みにテーマを割り当てる

Theme Libraryで必要な既定テーマを設定し、Integrations → Embed → Theme selection を開きます。コレクションとディーラーコレクションは、対象ごとに別テーマを選択しない限り埋め込み既定テーマを使用します。

割り当ての動作

Default: コレクションまたはディーラーコレクションに上書きがない場合に使用されます。
Collection override: 1つのコレクション埋め込みに選択テーマを適用します。
Dealer collection override: 1つの割り当て済みディーラー体験に選択テーマを適用します。
上書きを削除するには、既定テーマを再度選択します。

Advanced modeを使う

Advanced mode を選択すると、正規化されたテーマ全体をJSONで編集できます。Active theme JSON は有効バージョン、Draft token JSON は別管理のドラフトバージョンを制御します。

Advanced workflow

テーマエディターで Advanced mode を選択します。
有効な顧客体験を直接変更する場合だけ Active theme JSON を編集します。確認用の変更は Draft token JSON で準備します。
JSONを有効な形式に保ちます。不正なテーマJSONは保存されません。
Reset JSON で現在読み込まれている有効またはドラフト値へ戻せます。
編集したバージョンに応じて Save theme、Save draft、Publish draft を選択します。
広く配布する前に、影響する図面またはコレクションをプレビューします。

安定したCSS変数

承認済みのカスタムスタイル契約では、現在文書化されている安定した埋め込み変数は --pf-primary です。その他のテーマキーや実行時変数は、PartGridが別途文書化しない限りストアフロント連携契約としてサポートされません。

テーマをテストする

影響する図面またはコレクションをプレビューした後、実際のストアフロントまたはポータルページでもテストします。コントラスト、タイポグラフィ、パネル、コントロール、ホットスポット、部品カード、レスポンシブ表示、顧客操作を確認してください。

テストチェックリスト

想定した既定テーマまたはコレクション上書きが選択されていることを確認します。
意図した有効バージョンが公開されていることを確認します。
デスクトップとモバイルの両方を確認します。
Theme Libraryだけでなく、実際のストアフロントやポータル内でもテーマをテストします。
追加変更をまだ有効ビューアーへ反映したくない場合はドラフトへ戻ります。