キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

フリーページ追加・変更

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

フリーページ

タイトル

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

URL

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

キーワード

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

概要

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

ページ見出し

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

レイアウト

デフォルトレイアウト(共通のレイアウト)を使用する

レイアウト割当が空欄の場合、デフォルトレイアウトが使用されます。

レイアウトを変更する場合、「有効なレイアウト」に表示されたレイアウトのリンクを選択すれば、レイアウト変更へ遷移できます。
または管理画面メニューよりテーマを表示します。いずれかのテーマから「レイアウト」を押下してください。
レイアウト一覧が表示されます。画面上部の種類からフリーページを選択して「検索する」ボタンを押下してください。フリーページ用レイアウトの変更するボタンを押下してください。

ページごとにレイアウトを指定する場合は、割当名を使用してレイアウトを指定します。割当名を設定しなければ、全フリーページ共通のレイアウトであるデフォルトレイアウトが使用されます。

レイアウト割当(フリーページごとにレイアウトを指定する)

割当名を設定すれば、同じ割当名が設定されていて、かつ有効なレイアウトでフリーページが表示されます。詳しくはレイアウト割当をご覧ください。

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

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

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

管理画面メニューよりテーマを表示します。いずれかの テーマから「レイアウト」を押下してください。

レイアウト一覧が表示されます。「フリーページ」の複製するボタンを押下してください。 「フリーページ」が見つからない場合は、画面上部の種類からフリーページを選択して「検索する」ボタンを押下してください。

レイアウト複製ダイアログが表示されます。任意のレイアウト名を入力して、「レイアウトを複製する」ボタンを押下してください。
レイアウトが複製されると、レイアウト変更画面へ遷移します。

フリーページに表示したい内容が保存されたパーツを配置するなど、フリーページに使用するレイアウトを作成してください。

レイアウトを作成したら、レイアウト変更画面上部の「割当名」の変更ボタンを押下してください。
レイアウト割当ダイアログが表示されますので、割当名を入力します。割当名入力欄を選択すると、候補が表示されますので、該当する割当名があれば選択してください。割当名は複数入力できます。
割当名を入力したらOKボタンを押下します。

同じ作業を「利用中」の表示があるすべてのテーマで行います。スマートフォン用/PC・その他用など、複数のテーマ使用している場合は、両方のテーマでレイアウトを複製し、同じ割当名を入力してください。いずれかのテーマで「割当名」が設定されたフリーページ用レイアウトが保存されていない場合、デフォルトレイアウトで表示されます。いずれかのデバイス設定でフリーページを閲覧した場合に、意図しない内容になる可能性があります。

レイアウト変更画面に戻りますので、保存するボタンを押下します。

フリーページ変更画面で、レイアウト割当欄を選択し、割当名を入力します。
保存するボタンを押下すると、フリーページのレイアウトが、割当名で指定したフリーページ用レイアウトに変更されます。

有効なレイアウト

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

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

ページ本文

ページ本文はフリーページ独自の機能で、ECサイトに表示する内容を、パーツを使用せずに設定できます。本文はテーマによらず、すべてのテーマで共通して表示されます。
ページ本文はテーマごと(デバイスごと)に本文の表示内容を設定できません。ページごとに特別なデザインを必要としない、シンプルなページに適しています。

ページ本文にはHTMLタグやテキストを入力していただく外に、以下の置換文字を入力していただけます。

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

パーツ置換文字

パーツ置換文字を入力することで、パーツを読み込み表示(include)できます。パーツ置換文字で指定されたパーツの出力内容をすべて本文内に読み込んで表示できます。

ページ本文のパーツ置換文字を入力したい箇所にカーソルをあわせて、パーツを読み込むボタンを押下します。
パーツ検索ダイアログが表示されますので、キーワード・管理タグ・種類など検索条件を指定して検索するボタンを押下してください。
検索結果一覧に表示されたパーツの選択するボタンを押下すると、カーソル位置にパーツ置換文字が入力されます。

または、パーツ一覧で置換文字コピーボタンを押下すると、クリップボードにコピーできます。

パーツ置換文字は{% parts123 %}のように、「{% 」と「 %}」を前後につけて入力してください。
下記は置換文字を利用した本文のサンプルです。パーツ置換文字が「parts123」「parts456」「parts789」のパーツの出力内容を、まとめて読み込んで表示できます。

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

アイテム置換文字

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

アイテム置換文字を入力するには、カーソルを「src="|"」のように「"」の間において、アイテムを読み込むボタンを押下します。
アイテム検索ダイアログが表示されますので、キーワード・URL・管理タグなど検索条件を指定して検索するボタンを押下してください。
検索結果一覧に表示されたアイテムの選択するボタンを押下すると、カーソル位置にアイテム置換文字が入力されます。

または、アイテム一覧で置換文字コピーボタンを押下すると、クリップボードにコピーできます。

アイテム置換文字は「{% items[ /item/path/filename.png ] %}」のように、「{% items[」と「] %}」をアイテムの「パス」の前後につけて入力してください。アイテムの画像パスはアップロード時に「/item/」に続く形で指定できます。
下記は置換文字を利用した表示内容のサンプルです。

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

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

状況

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

保存する

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

キャンセルする

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

プレビューを確認する

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

変更

削除

フリーページ削除するボタンを押下すると、フリーページを削除できます。

パーツ検索

パーツ検索

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

キーワード

パーツをキーワードで検索できます。検索対象は「パーツ名」「パーツ置換文字」「id」「class」「備考」です。部分一致で検索できます。
複数指定する場合は、空白で区切ってください。AND検索になります。

表示内容を検索対象にする

表示内容を検索対象にするにチェックすると、フリーパーツの「表示内容」をキーワード検索対象にできます。表示内容に記載した置換文字でも検索できます。

管理タグ

パーツを管理タグで検索できます。管理タグ欄を選択すると、候補が表示されます。インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。複数指定した場合は、OR検索になります。

種類

パーツを種類で検索できます。フリーパーツ/カルーセル/コラム/メニュー/箇条書き/任意商品一覧/パネルパーツから検索できます。複数指定した場合は、OR検索になります。
なお、システムパーツはパーツ一覧から変更できないため、検索できません。システムパーツはメッセージまたは以前からの管理画面より変更できます。詳しくはシステムパーツ一覧をご覧ください。

検索するボタン

指定した条件でパーツを検索できます。

パーツ一覧

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

種類

パーツの種類が表示されます。選択すると並び替えできます。

パーツ名

パーツの名称が表示されます。選択すると並び替えできます。

更新日時

パーツの更新日時が表示されます。選択すると並び替えできます。

選択するボタン

選択するボタンを押下するとパーツ置換文字を入力できます。

アイテム検索

検索

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

アイテム一覧

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

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

アイテムの容量

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

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

アイテム追加

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

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

アイテムをドラッグする

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

アイテムを追加する

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

アイテム追加ダイアログ

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

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。