コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
オプション
<ご契約状況管理画面の使い方>
  • [契約管理ポータル]

フリーページ追加・変更

コマースクリエイター>フリーページ>フリーページ追加・変更

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

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

  • ご利用ガイド
  • 店舗紹介
  • LINE ID連携でお買い物が便利に

スタートアップテーマのご利用方法をご覧ください。

システムにより自動的に生成されるページの他に、自由にページを追加できます。

5,000ページまで追加できます。

レイアウト機能を利用し、フリーページごとにレイアウトを変更することができます。
表示コンテンツはhtmlやテキストの他、置換文字が利用できます。

特別なデザインを必要としない、シンプルなページに適しています。

目次

タイトル

フリーページのタイトル、TITLEタグの内容を設定できます。文字数:300字
タイトルはTITLEタグの内容となるため、フリーページを表示するブラウザのタブに表示されます。
また、検索エンジンの検索結果画面で見出しに使用される可能性があります。

URL

フリーページのパスを設定できます。半角英数・記号(_-/.):200字
ドメイン名/f/以降のパスを入力してください。フリーページのパスには「/」を使用でき、ディレクトリを設定できます。
(例) https://example.com/f/sample/sample.html

キーワード

キーワードではMETAタグのkeywordに出力する内容を設定できます。文字数:500字
ページのコンテンツに関連する語を「,(カンマ)」区切りで記載してください。
(例)サンプルショップ,店舗情報,渋谷店

概要

概要ではMETAタグのdescriptionに出力する内容を設定できます。文字数:250字
(例)サンプルショップ渋谷店の店舗情報です。

ページ見出し

フリーページ見出しに表示する内容を設定できます。文字数:300字

レイアウト割当

フリーページごとにレイアウトを変更することができます。

デフォルトレイアウト(サブメニュー表示)
レイアウト割当後のレイアウト(サブメニュー非表示)

レイアウト割当が空欄の場合

デフォルトレイアウト(共通のレイアウト)が適用されます。

レイアウトを変更する場合、本画面の「有効なレイアウト」に表示されたレイアウトのリンクを選択します。
レイアウト変更へ遷移できます。
またはコマースクリエイター>テーマ>(変更したいデバイスのテーマの)レイアウトを開きます。
表示されたレイアウト一覧にて、該当するフリーページを検索し、レイアウト変更画面にて変更します

レイアウト割当を設定する場合

フリーページごとに割当名を指定したオリジナルのレイアウトが適用されます。
同じ割当名が設定されたフリーページは同じレイアウトで出力されます。

割当名欄を選択すると、有効なフリーページ用レイアウトに設定されている割当名が候補として表示されます。
インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。(候補は10件まで表示されます。)

割当名を指定すると「有効なレイアウト」の表示が変わります。

レイアウト割当機能を利用するには、あらかじめレイアウトにて、フリーページ用レイアウトに割当名を設定し、かつ有効にしておく必要があります。
くわしい操作方法は、割当名を設定する-「レイアウト割当」機能で、ブランドやカテゴリごとに、表示デザインや表示内容を変える(商品詳細・商品グループ・フリーページ用レイアウト)をご覧ください。

また、フリーページ用に新たなレイアウト変更を作成後、レイアウト割当を指定する方法は、フリーページ用レイアウトを追加するをご覧ください。

フリーページ用レイアウトを追加する

フリーページのレイアウトを複製して、フリーページごとに使用するレイアウトを個別に指定して利用できます。

  1. コマースクリエイター>テーマ>(変更したいデバイスのテーマの)レイアウトを開きます。
  2. 「フリーページ(PC)」を検索し、複製するボタンを押下します。
  3. レイアウト複製ダイアログが表示されます。
    任意のレイアウト名を入力して、「レイアウトを複製する」ボタンを押下してください。
    レイアウトが複製されると、レイアウト変更画面へ遷移します。
  4. 「ページ本文(システムパーツ)」以外に、表示したいパーツを配置、並び替えし、レイアウトを作成してください。
    操作方法はレイアウト変更をご覧ください。
    「ページ本文(システムパーツ)」は、フリーページ追加・変更画面(本画面)にて設定します。
  5. レイアウト作成完了後、「割当名」を登録します。
    レイアウト変更画面上部の「割当名」の変更ボタンを押下します。
  6. レイアウト割当ダイアログが表示されますので、割当名を入力します。
    以後の手順は、割当名を設定する-「レイアウト割当」機能で、ブランドやカテゴリごとに、表示デザインや表示内容を変える(商品詳細・商品グループ・フリーページ用レイアウト)をご覧ください。
  7. 設定完了後のレイアウト画面の表示
  8. スマートフォン用/PC・その他用などデバイスにより、利用テーマを分けている場合は、全てのテーマに同様の作業を行います。
    「割当名」されていない場合、デフォルトレイアウトで表示されますので、いずれかのデバイスのみ表示が異なり、意図しない内容になる可能性がありますのでご注意ください。

有効なレイアウト

テーマごとに有効なレイアウトを表示します。
各テーマのレイアウト変更にリンクしており、指定されているレイアウト変更に遷移できます。
レイアウトでプレビューを確認できます。

「レイアウト割当」を指定すると、「レイアウト」欄の表示が該当の割当名が指定されたレイアウト名に変わります。

「未利用のテーマはこちら」を選択すると、デバイス設定されていないテーマで割当されているレイアウトが表示されます。

ページ本文

ページ本文に入力された内容は、すべてのテーマ(デバイス)共通に出力されます。

ページ本文にはHTMLタグやテキストを入力していただく外に、置換文字を入力していただけます。文字数:64,000字
ページ本文はフリーページ独自の機能で、ECサイトに表示する内容を、パーツを使用せずに設定できます。

置換文字を利用
htmlタグで入力

利用可能な置換文字

パーツ置換文字
他のパーツの表示内容を読み込んで表示できます。
いわゆる外部読込(include・入れ子)に近い使い方ができます。
くわしくはパーツ置換文字の活用方法をご覧ください。
アイテム置換文字
アイテムにアップロードしたファイルのパスを表示できます。
アイテムを入れ替えた場合にキャッシュの影響を受けないため、最新バージョンで表示できます。
くわしくはアイテム置換文字の活用方法をご覧ください。
会員情報置換文字
会員情報を表示できます。
アクセスされている会員ごとの情報を表示できます。置換文字一覧をご覧ください。
ログイン中または自動ログイン(ECサイト会員ログイン履歴あり)の場合に、表示できます。
ゲスト(非ログイン・ECサイト会員ログイン履歴なし)の場合は、一部しか表示されません。
(通常の)置換文字
ページ(レイアウト)ごとに記述可能な置換文字です。
共通(全ページ使用可能)の置換文字を表示できます。
置換文字一覧をご覧ください。
カート内の商品数
カート内の商品数を出力する要素に指定する特殊なclass指定です。
カート内の商品数についてをご覧ください。

パーツを読み込む

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

パーツは、ショップ全体で10,000件まで読み込めます。

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

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

[パーツを選択]

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

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

状況

公開するにチェックすると、ECサイトに表示されます。

保存する

フリーページを保存します。
状況にある「公開」チェックボックスはチェックせず、非公開状態で保存するボタンを押下すれば、ECサイトには表示されません。

キャンセルする

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

フリーページを削除する

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

プレビューを確認する

フリーページ一覧に戻り、プレビューボタンを押下します。
別タブでフリーページのプレビューが表示されます。

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

パーツ検索

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

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

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

パーツ一覧

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

種類
パーツの種類が表示されます。選択すると並び替えできます。
パーツ名
パーツの名称が表示されます。選択すると並び替えできます。
更新者
該当パーツの更新作業を最後に行った管理者の「アカウント名」が表示されます。
保存せずにパーツ変更画面を閉じた(作業途中)場合は、該当作業者の「アカウント名」は出力されません。
選択すると並び替えできます。
更新日時
パーツの更新日時が表示されます。選択すると並び替えできます。
選択するボタン
[パーツを選択]
選択したパーツのパーツ置換文字を入力できます。

[アイテム検索]ダイアログ

検索

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

アイテム一覧

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

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

アイテムの容量

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

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

アイテム追加

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

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

アイテムをドラッグする

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

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

アイテムを追加する

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

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

アイテム追加ダイアログ

アイテム名
アイテムの名前です。
URL
アイテムのファイルパスを指定できます。「https://店舗KEY.itembox.design/item/」に続くパスを指定できます。
/item/以下のディレクトリにあたる部分は、任意に指定できます。
ファイルパスにはファイル名を含んで入力してください。ファイル名まで指定すると、指定されたファイル名で保存できます。
未入力の場合は、「https://店舗KEY.itembox.design/item/アップロードされたファイル名」になります。
実際のURLは、静的HTMLファイル画像などそれ以外のファイルで異なります。
管理タグ
任意の管理タグを設定できます。
管理タグを指定してアイテム検索できます。コマースクリエイター>管理タグ一覧より任意の管理タグを追加できます。
同じフォルダやファイルは上書きする
すでに同じパスでアップロードされたファイルがある場合に、上書きアップロードできます。
パスが重複している場合でかつチェックがない場合は「パスは既に登録されています。」というエラーが表示されます。
保存する
アップロードされたアイテムとアイテム設定を保存します。