パーツ一覧よりフリーパーツで作成されたパーツのボタン、
もしくは［パーツを追加する］ボタンよりフリーパーツを選択すると遷移します。

HTMLタグを利用して作成できるパーツを作成できます。

ECサイトにコンテンツとして表示するパーツを、フリーな（形式の決まっていない）形で作成できます。
HTMLタグを直接入力できます。
HTMLタグを使用できるコメント欄として使用できます。
置換文字を使用できます。
置換文字を使用し、パーツ内に他のパーツを読み込み表示（include・入れ子）できます。

パーツについての解説と利用方法については、パーツ一覧-パーツとはをご覧ください。

スタートアップテーマでは、フリーパーツで作成したパーツがすでにサンプルとして準備され、レイアウトに配置されています。利用方法などの参考として、管理画面内にてご覧ください。

スタートアップテーマでの利用例（一部）

ヘッダーナビゲーション
特定商取引法の表示本文
会員サービス案内バナー
売れ筋商品見出し
OGPタグ
レコメンド（ランキング・futureRecommend2））※futureRecommend2利用時の出力タグ/初期配置は、2023.7.31以前からコマースクリエイターをご利用の店舗様のみ

配置されているパーツの一覧はスタートアップテーマのご利用方法をご覧ください。

オプションを設定する
パーツ名
置換文字
表示内容
保存する
キャンセルする
フリーパーツを削除する
戻る
［パーツ検索］ダイアログ
［アイテム検索］ダイアログ

オプションを設定する

画面上部の［オプションを設定する］を押下すると、管理タグと備考を設定するダイアログが開きます。

備考にはパーツの用途や表示画面などを入力すると管理がしやすくなります。
管理タグについては、管理タグ追加・変更-管理タグ活用のポイントをご覧ください。

パーツ名

パーツの名称を設定できます。

置換文字

パーツ置換文字を入力します。
パーツ置換文字は複製・追加時に設定できます。一度設定すると変更はできません。

置換文字の活用方法

他のフリーパーツに、置換文字を記述すると読み込まれます。
変更や修正を加える際、該当のフリーパーツを一つ作業するだけで置換文字を記述した他のすべてのパーツに反映されるので、運用のミス防止や効率化につながります。

パーツ置換文字の活用方法もご参照ください。

表示内容

フリーパーツの内容です。文字数：32,000字
入力した内容がそのままECサイトに表示されます。HTMLタグを使用できます。

利用可能な置換文字

パーツ置換文字: 外のパーツの表示内容を読み込んで表示できます。
いわゆる外部読込（include・入れ子）に近い使い方ができます。; くわしくはパーツ置換文字の活用方法をご覧ください。
アイテム置換文字: アイテムにアップロードしたファイルのパスを表示できます。
アイテムを入れ替えた場合にキャッシュの影響を受けないため、最新バージョンで表示できます。; くわしくはアイテム置換文字の活用方法をご覧ください。
会員情報置換文字: 会員情報を表示できます。
アクセスされている会員ごとの情報を表示できます。置換文字一覧をご覧ください。
ログイン中または自動ログイン（ECサイト会員ログイン履歴あり）の場合に、表示できます。
ゲスト（非ログイン・ECサイト会員ログイン履歴なし）の場合は、一部しか表示されません。
レイアウトパーツ-表示条件「ログイン済み」と組み合わせてご利用ください。
商品独自コメント置換文字: 商品コメント設定（コマースクリエイター）に記載した内容を置換文字で表示できます。
表示できるのは商品詳細レイアウトの「商品詳細エリア（システムパーツグループ）」内、商品グループ／商品一覧レイアウトの「商品一覧（システムパーツグループ）」内となります。
詳しくは商品独自コメントの使用方法をご覧ください。
商品グループ独自コメント置換文字: 商品グループコメント設定（コマースクリエイター）に記載した内容を置換文字で表示できます。
表示できるのは商品グループレイアウトです。
（通常の）置換文字: ページ（レイアウト）ごとに記述可能な置換文字です。
商品情報や店舗情報、ページ情報など様々な情報を置換文字を通じて表示できます。
置換文字一覧をご覧ください。
カート内の商品数: カート内の商品数を出力する要素に指定する特殊なclass指定です。
カート内の商品数についてをご覧ください。

パーツを読み込む

［パーツを読み込む］ボタンを押下すると、［パーツ検索］ダイアログが表示され、パーツが読み込まれます。
パーツ一覧で［パーツを選択］を押下すると、「表示内容」のカーソル位置にパーツ置換文字が入力されます。

パーツ置換文字の活用方法

パーツ置換文字を入力することで、パーツを読み込み表示（include）できます。

変更や修正を加える際、該当のフリーパーツを一つ作業するだけで置換文字を記述した他のすべてのパーツに反映されるので、運用のミス防止や効率化につながります。

パーツ置換文字は{% parts123 %}のように、「{% 」と「 %}」を前後につけて入力してください。

置換文字を利用した表示内容のサンプル

パーツ置換文字が「parts123」「parts456」「parts789」のパーツの出力内容を、まとめて読み込んで表示できます。

<div>
{% parts123 %}
{% parts456 %}
{% parts789 %}
</div>

アイテムを読み込む

［アイテムを読み込む］ボタンを押下すると、［アイテム検索］ダイアログが表示され、画像が読み込まれます。
アイテム一覧で画像を選択すると、「表示内容」のカーソル位置にアイテム置換文字が入力されます。

アイテム置換文字の活用方法

アイテムへアップロードした画像ファイルなどへのリンクを入力する場合は、アイテム置換文字を使用してください。
アイテムのパスが出力されます。

アイテムへアップロードしたファイルのパスは（置換文字を使用せずに）直接指定できますが、アイテムにアップロードした画像ファイルを新しいファイルに入れ替えた場合、すぐに更新されません。
画像を快適にご覧いただくためのキャッシュ機能によるものです。
アイテム置換文字を利用すると、キャッシュ機能の影響なく、入れ替え直後に新しい画像ファイルを表示できます。

アイテム置換文字を入力するには、カーソルを「src="|"」のように「"」の間において、アイテムを読み込むボタンを押下します。

置換文字を利用した表示内容のサンプル

<img src="{% items[/item/path/filename.png] %}">

<img src="{% items[/item/path/filename.png] %}" srcset="{% items[/item/path/filename-L.png] %} 2x">

保存する

パーツを保存します。

キャンセルする

未保存の作業内容を破棄します。

フリーパーツを削除する

削除するボタンを押下すると、フリーパーツを削除できます。削除したパーツは復元できません。
フリーパーツを追加する（新規作成）場合には表示されません。

戻る

レイアウト設定から直接パーツを変更する場合にのみ表示されます。
押下すると、レイアウト設定に戻ります。
未保存の作業内容は破棄されます。
保存するボタンを押下した後、［戻る］ボタンを押下してください。

レイアウト設定から直接パーツを変更する方法については、パーツ配置エリア上からパーツを変更するをご覧ください。

［パーツ検索］ダイアログ

パーツ検索

パーツ置換文字を入力するパーツを検索できます。

キーワード: パーツをキーワードで検索できます。
検索対象は「パーツ名」「パーツ置換文字」「id」「class」「備考」です。部分一致で検索できます。
複数指定する場合は、空白で区切ってください。AND検索になります。
表示内容を検索対象にする: 表示内容を検索対象にするにチェックすると、フリーパーツの「表示内容」をキーワード検索対象にできます。
表示内容に記載した置換文字でも検索できます。
管理タグ: パーツを管理タグで検索できます。
管理タグ欄を選択すると、候補が表示されます。
インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
複数指定した場合は、OR検索になります。
種類: パーツを種類で検索できます。
フリーパーツ/カルーセル/コラム/メニュー/箇条書き/任意商品表示/パネルパーツから検索できます。複数指定した場合は、OR検索になります。
なお、システムパーツはパーツ一覧から変更できないため、検索できません。
システムパーツはメッセージまたは管理画面の各種設定項目に従い出力されます。

詳しくはシステムパーツ一覧をご覧ください。
検索するボタン: 指定した条件でパーツを検索できます。

パーツ一覧

検索条件に合致したパーツが表示されます。

種類: パーツの種類が表示されます。選択すると並び替えできます。
パーツ名: パーツの名称が表示されます。選択すると並び替えできます。
更新日時: パーツの更新日時が表示されます。選択すると並び替えできます。
選択するボタン: 選択したパーツのパーツ置換文字を入力できます。

［アイテム検索］ダイアログ

検索

アイテム名: アイテム名とアイテム置換文字、パスで検索できます。部分一致で検索できます。複数指定する場合は、空白で区切ってください。AND検索になります。
パス: アイテムをパスで検索できます。部分一致で検索できます。複数指定はできません。
管理タグ: 管理タグ一覧で検索できます。管理タグ欄を選択すると、候補が表示されます。インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
検索するボタン: 指定した条件でアイテムを検索できます。

アイテム一覧

アイテムを選択すると、画像欄に入力できます。

パス: アイテムのパスが表示されます。項目名を選択すると並び替えできます。
画像: 画像が表示されます。画像によっては縮小表示されます。
画像を押下すると、拡大表示できます。
アイテム名: アイテム名が表示されます。項目名を選択すると並び替えできます。
更新日時: アイテムの更新日時が表示されます。項目名を選択すると並び替えできます。
サイズ: アイテムのファイルサイズが表示されます。項目名を選択すると並び替えできます。
選択するボタン: アイテム選択ボタンです。選択するボタンを押下すると画像欄に入力できます。

アイテムの容量

保存できるアイテムの容量はプランによって違います。

保存済みのアイテムの合計ファイルサイズとアイテムを保存できるディスクサイズが表示されます。
十分な空き領域がなければ、アイテムをアップロードできません。
空き領域が少ない場合は、アイテムから不要なアイテムを削除してください。

アイテムの追加方法

一覧にアイテムがない場合は、アップロードできます。

アイテムはファイル単位でアップロードできます。アップロードしたボタン画像ファイルは「アイテム」として保存され、一覧に表示されます。

アイテムをドラッグ＆ドロップで追加

アップロードしたいファイルをドラッグして、管理画面のアップロード領域にドロップしてください。
ファイルごとにアップロードする場合は、ドラッグ&ドロップでアップロードできます。（ZIPファイルでのアップロードはできません。）

アイテム追加ダイアログが開きます。

［アイテムをアップロードする］ボタンから追加

ファイル選択ダイアログが開きます。アップロードしたいファイルを選択してください。