パーツ一覧
ECサイトにコンテンツとして表示できるパーツの一覧です。
パーツを作成するだけでは、ECサイトには表示されません。レイアウトに配置する必要があります。
スタートアップテーマでは、ECサイトの動作上必須となる「システムパーツ」、およびフッタ・ヘッダ・パンくずなどの汎用的なパーツはすでに用意されており、レイアウトに配置済みです。
構成を参考にしていただきながら、デザインカンプ段階に、どのようなパーツ構成にするかについて検討いただくと、後の運用がしやすくなります。
※配置されているパーツの一覧はスタートアップテーマのご利用方法をご覧ください。
目次
パーツとは
パーツとは、ECサイトの表示内容を入力し、レイアウトに配置することで、任意のページデザインを構築できる機能です。
ECサイトの表示内容の一部をパーツとして追加・変更できます。パーツは、どのテーマのどのレイアウトにも配置できます。
利用方法としては以下を参考にしてください。
- デザインカンプを作る
- 各ページのデザイン要素やコンテンツを分割し、それぞれを「パーツ」として作成する（※分割のポイント）
- 表示したいデザインやコンテンツを構成する「パーツ」を各テーマのレイアウトに配置する
- ページが表示されます。
- ページを更新したい場合は、更新したいコンテンツを構成している「パーツ」の内容を変更する、もしくは、更新用にあらたな「パーツ」を作成し、差し替える
※分割のポイント
- 更新頻度が高いコンテンツ（例えばキャンペーンバナーなど）は独立した「パーツ」にする
レイアウトから「パーツ」を外すと簡単に非表示にでき、さらに差し替え用の「パーツ」を配置すれば簡単に更新できます。 - 特定の条件でのみ表示させていたコンテンツ（例えば新規会員のみに付与する特典など）は独立した「パーツ」にする
表示条件を利用し、コンテンツを表示・非表示にできます。 - 複数のページや複数のテーマ（デバイス最適化で作成する場合）に共通で表示したいコンテンツは独立した「パーツ」にする
更新・修正の場合、該当「パーツ」を一つ変更するだけで、全ページ、全デバイスに反映されます。
パーツの種類
パーツには以下の種類があります。
フリーパーツ
フリーな（形式が決まっていない）HTMLタグを直接入力できるパーツを追加できます。
HTMLタグを使用できるコメント欄として使用できます。
置換文字を利用できます。
パーツ置換文字を使用することで、他のパーツを読み込み表示（include・入れ子）できます。
アイテム置換文字を使用することで、アイテム一覧にアップロードしたファイルのパスを表示できます。
商品情報や会員情報を表示する置換文字も使用できます。
CSSや外部サービス連携用のタグのみの記述にも利用できます。
スタートアップテーマでの利用例（一部）
- ヘッダーナビゲーション
- 特定商取引法の表示本文
- 会員サービス案内バナー
- 売れ筋商品見出し
- OGPタグ
- レコメンド（ランキング・futureRecommend2）※futureRecommend2利用時の出力タグ/初期配置は、2023.7.31以前からコマースクリエイターをご利用の店舗様のみ
パネルパーツ
複数のパーツをまとめてレイアウトに配置できます。
レイアウトでは一つのパーツとして表示されます。
管理画面のUIでパーツの読込表示（include・入れ子）を設定できます。
ヘッダやフッタ、サイド部分などの共通部分の管理に適しています。
スタートアップテーマでの利用例（一部）
- headタグ共通（スマートフォン）
- サブエリア（メニュー等・PC）
- 告知バナーパネル
パターンパーツ
あらかじめシステムで用意した形式（パターン）のパーツを管理画面UIを利用して追加できます。
最小限のHTMLタグ入力で、ECサイトによくあるパーツを追加できます。
下記の種類があります。
- カルーセルパーツ
- トップページなどにあるカルーセルを追加できます。
スライドの1枚ごとに画像・キャプション・リンクを設定できます。 - スタートアップテーマでの利用例（一部）
- トップページカルーセル
- コラムパーツ
- 画像＋見出し＋本文で構成されるコラムを追加できます。
一つのコラムパーツで1から4コラムまで作成できます。
コラムを追加した後、コラムの表示順を変更できます。
コラムの配置の縦・横も簡単に設定できます。 - スタートアップテーマでの利用例（一部）
- トップページコラム
- 商品グループ共通告知
- 箇条書きパーツ
- 箇条書き形式でパーツを追加できます。
行頭文字（リストマーカー）なし・記号・数字に加え、注釈（※）、パンくずリンク（フリーページ用）にも対応できます。
行を追加した後、行の表示順を変更できます。 - スタートアップテーマでの利用例（一部）
- 最新情報
- ECサイトのメニュー（ナビゲーション）を追加できます。
任意のメニュー項目を追加、配置できるできるだけでなく、商品グループ情報を読み込み、グループの親子関係を自動的にメニューの階層に設定できます。 - スタートアップテーマでの利用例（一部）
- ヘッダーナビゲーションメニュー
- 商品カテゴリメニュー
- フッターメニュー
- 任意商品表示パーツ
- 商品番号を登録するだけで、商品を横に並べて表示できるパーツです。
20商品まで登録でき、カルーセル形式で横にスライド（フリック）できます。 - スタートアップテーマでの利用例（一部）
- 売れ筋商品
- 新着アイテム
- おすすめ商品
その他のパーツ
パーツ一覧に表示されませんが、以下のパーツがあります。
パーツ一覧
パーツを検索し、一覧表示できます。
全件が初期表示され、種類順にソートされています。条件を指定して検索し、操作対象のパーツを一覧に表示します。
パーツの上限は最大で10,000までです。
検索条件
- キーワード
- パーツをキーワードで検索できます。
検索対象は「パーツ名」「パーツ置換文字」「id」「class」「備考」です。
部分一致で検索できます。半角・全角や英字の大文字・小文字については、区別して検索できます。
複数指定する場合は、空白で区切ってください。AND検索になります。 - 表示内容を検索対象にする
- 表示内容を検索対象にするにチェックすると、フリーパーツの「表示内容」をキーワード検索対象にできます。
表示内容に記載した置換文字でも検索できます。 - 管理タグ
- パーツを管理タグで検索できます。
管理タグ欄を選択すると、候補が表示されます。
インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
複数指定した場合は、OR検索になります。 - 種類
- パーツを種類で検索できます。
フリーパーツ/カルーセル/コラム/メニュー/箇条書き/任意商品表示/パネルパーツから検索できます。
複数指定した場合は、OR検索になります。
なお、システムパーツはパーツ一覧から変更できないため、検索できません。
システムパーツはメッセージまたは管理画面の各種設定項目に従って出力されます。
詳しくはシステムパーツ一覧をご覧ください。 - 検索するボタン
- 指定した条件でパーツを検索できます。
一覧表示項目
- 種類
- パーツの種類が表示されます。選択すると並び替えできます。
- パーツ名
- パーツの名称が表示されます。選択すると並び替えできます。
- 更新日時
- パーツの更新日時が表示されます。選択すると並び替えできます。
変更する
パーツを変更します。変更ボタンを押下すると、パーツ種類ごとの変更画面へ遷移します。
複製する
パーツを複製します。複製ボタンを押下すると、複製ダイアログが表示されます。
複製ダイアログでパーツとパーツ置換文字を入力し、「パーツを複製する」ボタンを押下すると、複製されます。
複製元パーツの内容をコピーして新しいパーツを追加できます。
パーツ置換文字をコピーする
押下すると、パーツ置換文字をコピーできます。
フリーパーツ表示内容やフリーページ本文に、パーツ置き換え文字を貼り付ける際に使用します。
パーツを追加する
フッタ部分にあるパーツを追加するボタンを押下します。
パーツを追加するボタンを押下すると、パーツ選択ダイアログが表示されます。
なお、パネルパーツとフリーパーツを追加する場合は、選択肢から直接追加できます。（ショートカットメニューです。）
その他のパーツを追加するを選択すると、パーツ選択ダイアログが表示されます。
パーツ選択ダイアログ上にて、パターンパーツ（カルーセルパーツ、コラムパーツ、箇条書きパーツ、メニューパーツ、任意商品表示パーツ ）またはフリーパーツ・パネルパーツの中から、追加するパーツを選択してください。
パーツを選択すると、各パーツの追加画面に遷移します。
各項目を設定し、［保存する］を押下すると保存され、パーツ一覧に表示されます。
パーツを保存した時点では、どのレイアウトにも配置されていませんので、ECサイトに表示されることはありません。
ECサイトに公開せずに、構築作業を続けられます。
作業完了後、作成したパーツを有効なレイアウトに配置すれば、ECサイトに表示できます。レイアウトをご覧ください。