フリーパーツ追加・変更

コマースクリエイター>パーツ>フリーパーツ

コマースクリエイター>パーツ>フリーパーツ
パーツ一覧よりフリーパーツで作成されたパーツの ボタン、もしくは[パーツを追加する]ボタンよりフリーパーツを選択すると遷移します。

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

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

  • ヘッダーナビゲーション
  • 特定商取引法の表示本文
  • 会員サービス案内バナー
  • 売れ筋商品見出し
  • OGPタグ

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

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

ECサイトにコンテンツとして表示するパーツを、フリーな(形式の決まっていない)形で作成できます。

HTMLタグを直接入力できます。
HTMLタグを使用できるコメント欄として使用できます。

置換文字を使用できます。
置換文字を使用し、パーツ内に他のパーツを読み込み表示(include・入れ子)できます。

フリーパーツは、10,000件まで追加できます。

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

<目次>

オプションを設定する

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

備考にはパーツの用途や表示画面などを入力すると管理がしやすくなります。 備考は、 文字数:400字

管理タグについては、管理タグ追加・変更-管理タグ活用のポイントをご覧ください。

[オプションを設定する]ボタン

[オプションを設定する]ボタン

オプション設定ダイアログ

オプション設定ダイアログ

備考の表示場所

備考の表示場所

パーツ名

パーツ名

パーツの名称を設定できます。 文字数:100字

置換文字

置換文字

パーツ置換文字を入力します。

どのパーツの置換文字であるか、分かりやすい任意の文字列を入力してください。 半角英数・記号(._-):100字
パーツ置換文字は複製・追加時に設定できます。一度設定すると変更はできません

置換文字の活用方法

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

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

表示内容

表示内容

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

パーツを読み込む

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

[パーツ検索]ダイアログ

[パーツ検索]ダイアログ

くわしくはパーツ検索をご覧ください。

[パーツを選択]

[パーツを選択]

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

パーツ置換文字を入力することで、パーツを読み込み表示(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">

利用可能な置換文字

パーツ置換文字

外のパーツの表示内容を読み込んで表示できます。
いわゆる外部読込(include・入れ子)に近い使い方ができます。

くわしくはパーツ置換文字の活用方法をご覧ください。

アイテム置換文字

アイテムにアップロードしたファイルのパスを表示できます。
アイテムを入れ替えた場合にキャッシュの影響を受けないため、最新バージョンで表示できます。

くわしくはアイテム置換文字の活用方法をご覧ください。

会員情報置換文字

会員情報を表示できます。

アクセスされている会員ごとの情報を表示できます。

ログイン中または自動ログイン(ECサイト会員ログイン履歴あり)の場合に、表示できます。
ゲスト(非ログイン・ECサイト会員ログイン履歴なし)の場合は、一部しか表示されません。
レイアウトパーツ-表示条件「ログイン済み」と組み合わせてご利用ください。

置換文字一覧をご覧ください。

商品独自コメント置換文字

商品コメント設定(コマースクリエイター)に記載した内容を置換文字で表示できます。
表示できるのは商品詳細レイアウトの「商品詳細エリア(システムパーツグループ)」内、商品グループ/商品一覧レイアウトの「商品一覧(システムパーツグループ)」内となります。

詳しくは商品独自コメントの使用方法をご覧ください。

商品グループ独自コメント置換文字

商品グループコメント設定(コマースクリエイター)に記載した内容を置換文字で表示できます。
表示できるのは商品グループレイアウトです。

(通常の)置換文字

ページ(レイアウト)ごとに記述可能な置換文字です。
商品情報や店舗情報、ページ情報など様々な情報を置換文字を通じて表示できます。

置換文字一覧をご覧ください。

カート内の商品数

カート内の商品数を出力する要素に指定する特殊なclass指定です。
カート内の商品数についてをご覧ください。

保存する

パーツを保存します。


キャンセルする

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


フリーパーツを削除する

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


戻る

戻る

レイアウト変更から直接パーツを変更する場合にのみ表示されます。
押下すると、レイアウト変更に戻ります。

未保存の作業内容は破棄されます。
保存するボタンを押下した後、[戻る]ボタンを押下してください。

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