テーマ管理

テーマ管理 カスタマイズ トップ画面

カスタマイズ:トップ画面でできること

トップ画面のカスタマイズができます。

__________2021-07-21_23.03.36.png

カスタマイズ機能は対応したテーマテンプレート(ec_force_basic_theme)のみで利用可能です。

テーマ管理にテーマ(ec_force_basic_theme)を追加する方法は、テーマ管理 テーマを追加を参照ください。

2021/07以前に提供したすべてのテーマは本機能に対応していません。

セクション

トップ画面の各セクションでは、以下項目をカスタマイズできます。

ヘッダー version 1.13.0 からヘッダーセクションのデザインが新しくなりました。

Caution!!

ヘッダーの設定は全画面共通の設定です。
※パスワード保護画面を除く

ロゴ画像

ロゴアライメント ヘッダーセクションのロゴの配置を設定します。
  • 中央揃え
ロゴ画像 画像をアップロードして設定します。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
ロゴの幅 ロゴの幅を設定します。
ロゴのリンク先 ロゴのリンク先を設定します。設定無しの場合はトップページに遷移します。

スクリーンショット 2024-03-01 17.05.41.png

告知バー

告知を表示する 告知バーの表示有無を設定します。
トップのみ表示 「告知を表示する」チェックを入れた際に、告知バーをトップのみに表示するかの有無を設定します。
テキスト 告知バーに表示するテキストを設定します。
バー 告知バーの背景色を設定します。
テキスト 告知バーのテキストの色を設定します。


__________2021-07-27_21.37.57_____.png

バナー

バナーを表示する バナーの表示有無を設定します。
トップのみ表示 「バナーを表示する」チェックを入れた際に、バナーをトップのみに表示するかの有無を設定します。
PC画像 バナーとして表示する画像を設定します。
PCのみに適用されます。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
SP画像 バナーとして表示する画像を設定します。
SPのみに適用されます。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
バナーのリンク先 バナーを押下した際の遷移先を設定します。

ecfdev-12652_faq_1.png

ログイン状況

会員の名前を表示する 会員の名前の表示の有無を設定します。
アイコン横のテキスト(任意) アイコン画像の左横に任意のテキストを設定できます。
アイコン画像(任意) アイコン画像を設定します。
画像をアップロードして設定します。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。

スクリーンショット 2024-03-01 13.05.16.png

スライドショー version 1.13.0 からスライドショーセクションのデザインが新しくなりました。
スライドショーの設定を行います。
スライドショーの画像は最大6枚まで設定可能です(下図は2枚設定しています)。

スライドの表示順 セレクトボックスで数字を選択するとスライドの表示順を変更できます。
SP用のコンテンツを設定する PC表示とは別にスマートフォン表示時のスライドを設定できます。
スライドの自動切り換え チェックを入れるとスライドショーが自動で切り替わります。
切替え間隔 スライドの自動切り替え間隔の設定を行います。
切り替え間隔は、3秒〜9秒で設定可能です。

スクリーンショット 2024-04-15 17.19.54.png

画像 スライドショーに表示する画像を設定します。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
見出し 見出しのテキストを設定します。
小見出し 小見出しのテキストを設定します。
ボタンラベル スライドショーに設定するボタンのラベルを設定します。
ボタンリンク ボタン選択したときのリンク先を設定します。

__________2021-07-27_21.41.53.png

商品 version 1.13.0 から商品セクションのデザインが新しくなりました。

商品

見出し 商品セクションの見出しを設定します。
小見出し 商品セクションの見出しを設定します。

表示形式

並べて表示 商品を並べて表示します。
カルーセル表示 商品をカルーセル表示で表示します。

表示対象

表示するカテゴリー 選択した商品カテゴリーに属する商品にのみ表示します。複数の商品カテゴリーを選択できます。
何も選択されていない状態では、ステータスが表示になっている全ての商品が表示されます。
新着のみ 「新着フラグ:有効」の商品にのみ表示します。
SALE中のみ 「セールフラグ:有効」の商品にのみ表示します。

表示項目

商品詳細表示 商品の詳細を表示します。
商品名表示 商品名を表示します。
商品価格表示 商品の価格を表示します。
商品カテゴリー名表示 商品カテゴリー名を表示します。
商品ラベル表示 商品ラベルを表示します。

表示件数

行あたりの商品表示件数 表示件数の設定を行います。
表示件数は、1件〜5件で設定可能です。
※SPでは1スライド当たりの表示件数は2件までです。
表示行数 表示行数の設定を行います。
表示件数は、1件〜10件で設定可能です。
もっと見るボタン チェックボックスを外すと、もっと見るリンクボタンが表示されなくなります。
スクリーンショット 2024-03-01 13.36.21.png
商品カテゴリー
カテゴリーのスタイル 商品カテゴリーのデザインが設定可能です。
「余白なし」「均等揃え」から選択できます。
表示件数 表示件数の設定を行います。
表示件数は、1件〜12件で設定可能です。
表示するカテゴリー 選択された商品カテゴリーを表示します。
選択されている商品カテゴリー数が表示件数に満たない場合、選択されている商品カテゴリーの数が優先されます。
何も選択されていない場合、全ての商品カテゴリーから表示件数分の商品カテゴリーが表示されます
商品カテゴリーは「設定 > 商品 > 商品カテゴリー管理」で設定可能です。

ecfdev-12662_faq_1 (1).png

ニュース
見出し ニュースセクションの見出しを設定します。
小見出し ニュースセクションの小見出しを設定します。
表示するカテゴリー 表示するニュースカテゴリーを設定します(複数選択不可)。選択したカテゴリーに属するニュースのみを一覧で表示できます。
ニュースカテゴリーは「ショップ管理 > ニュースカテゴリー管理」で設定可能です。
デザイン ニュースのデザインを設定します。
  • リスト表示
  • グリッド表示
  • メディア風表示(初期値)
表示件数 表示件数の設定を行います。
表示件数は、1件〜5件で設定可能です。
もっと見るボタン 「もっと見る」ボタンの表示、非表示を設定します。

__________2021-07-27_16.13.14.png

コンセプト
テキストの表示位置 コンセプトセクションのデザインの設定をします。
画像 コンセプトセクションの背景画像を設定します。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
見出し コンセプトセクションの見出しを設定します。
本文 コンセプトセクションの本文を設定します。
背景 テキストの背景色を設定します。

ecfdev-12660_faq_1.png

サインアップ
画像 サインアップの背景に指定する画像を設定します。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
見出し サインアップセクションの見出しを設定します。
小見出し サインアップセクションの小見出しを設定します。
本文 サインアップセクションの本文を設定します。
__________2021-07-27_16.53.13.png
フッター

Caution!!

フッターの設定は全画面共通の設定です。
※パスワード保護画面を除く

フッターメニュー

フッターメニューの設定を行います。
フッターメニューは追加・削除が可能です。

カテゴリーの一覧を表示 フッター内の商品カテゴリーの「表示/非表示」の切り替えを行います。
※「表示」に設定した場合「設定 > 商品 > 商品カテゴリー管理」画面で表示と設定されているカテゴリーがすべて表示されます。
テキスト フッターに表示するテキストを設定します。
フッターメニューを追加する 「+」をクリックすると、フッターメニューが追加します。

フッターメニュー◯ 

◯内は数字が表示されます。

見出し フッターメニューの見出しを設定します。
リンクテキスト フッターメニュー配下のリンクテキストを設定します。
リンク先URL リンクテキスト選択時に遷移するリンク先を設定します。

__________2021-07-27_21.54.43.png
__________2021-07-27_21.52.50.png

ロゴ

ロゴ画像 フッターセクションのロゴ画像を設定します。
画像をアップロードして設定します。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
ロゴの幅 ロゴの幅を設定します。

SNSアカウント

SNSのリンク先を設定します。入力することで、各SNSアイコンが表示されます。
対象のSNSは以下になります。

  • Facebook
  • Twitter
  • Instagram
  • LINE

フッターの色を設定します。

背景 背景色を設定します。
見出し 見出しを設定します。
リンク リンクの色を設定します。
本文 本文の色を設定します。

__________2021-07-27_21.56.25.png

区切り線

Caution!!

区切り線セクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。

 

ECFDEV-10221_FAQ_1.png

バナー

Caution!!

バナーセクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。

PC画像 バナーとして表示する画像を設定します。
PCのみに適用されます。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
SP画像 バナーとして表示する画像を設定します。
SPのみに適用されます。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
バナーのリンク先 バナーを押下した際の遷移先を設定します。

ecfdev-12654_faq_1.png

動画

Caution!!

動画セクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。
※動画セクションは1つのみ設置可能

YouTube 動画 ID 再生するYouTubeの動画の設定ができます。
※動画 IDとはYouTubeのリンク内の v= 以降の半角英数字
(例) https://www.youtube.com/watch?v=GqTfuEiy7Kc
を再生する場合は「GqTfuEiy7Kc」を入力します。
表示サイズ 再生する動画の表示サイズが設定できます。
「大」を選択した場合には「動画を見る」ボタンが表示されます。
見出し 動画セクションの見出しを設定します。
小見出し 動画セクションの小見出しを設定します。

ecfdev-12659_faq_1.png

画像スライダー

Caution!!

画像スライダーセクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。

 

画像スライダーの画像は最大10枚まで設定可能です(下図は*枚設定しています)。

スライドの自動切換え チェックを入れると画像スライダーが自動で切り替わります。
切り替え間隔 スライドの自動切り替え間隔の設定を行います。
切り替え間隔は、3秒〜9秒で設定可能です。

スクリーンショット 2022-07-08 12.35.16.jpg

画像 画像スライダーに表示する画像を設定します。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
リンク 画像をクリックしたときのリンク先を設定します。

スクリーンショット 2022-07-08 12.35.29.jpg

ランキング

Caution!!

ランキングセクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。

ランキング対象商品が存在しない場合はランキングセクションが非表示となります。
※ランキング機能の詳細はこちらを参照してください。

■ランキング対象商品が存在しないケース
・「ショップの機能設定 > ランキング表示対象外商品」にて全商品が除外設定されている
・商品管理にて商品のステータスが全て非表示である

見出し ランキングセクションの見出しを設定します。
小見出し ランキングセクションの見出しを設定します。

表示項目

商品詳細表示 商品の詳細の表示/非表示を設定します。
商品名表示 商品名の表示/非表示を設定します。
商品価格表示 商品価格の表示/非表示を設定します。
商品カテゴリー表示 商品カテゴリーの表示/非表示を設定します。

表示件数

ランキング表示件数 ランキング表示件数の設定を行います。
表示件数は、1件〜5件で設定可能です。

ECFDEV-15111_FAQ_1.png

セクションを非表示にする

ショップに表示しないセクションを非表示に設定できます。
たとえば、新商品の販売を開始する準備ができるまでは、新商品セクションを一時的に非表示にできます。

  1. 編集するテーマファイルの「カスタマイズ」をクリックします。
  2. 「タブ:セクション」をクリックします。
  3. 非表示にするセクションの目玉アイコンをクリックします。
    __________2021-05-23_16.38.31.png
  4. 「保存する」をクリックします。

セクションを非表示にすると、目玉アイコンの表示が下図のようになります。

__________2021-05-23_16.39.08.png

非表示にしたセクションを表示するには、目玉アイコンを再度クリックします。

セクションを並び替える

ショップに表示するセクションの並び替えを行えます。

  1. 編集するテーマファイルの「カスタマイズ」をクリックします。
  2. 「タブ:セクション」をクリックします。
  3. 並び替えるセクションのドラックアンドドロップアイコンをクリックし、表示したい箇所へ移動します。
    ________________FAQ_1.png
  4. 「保存する」をクリックします。

セクションを追加する

ショップに表示するセクションを追加します。

  1. 編集するテーマファイルの「カスタマイズ」をクリックします。
  2. 「セクションを追加する」をクリックします。
    ________________FAQ_2.png
  3. 追加したいセクションをクリックし「選択する」をクリックします。
  4. 「保存する」をクリックします。

セクションを削除する

ショップに表示するセクションを削除できます。

  1. 編集するテーマファイルの「カスタマイズ」をクリックします。
  2. 「タブ:セクション」をクリックします。
  3. 「セクションを削除する」をクリックします。
    ________________FAQ_3.png
  4. 「保存する」をクリックします。

テーマ設定

テーマ設定では、ショップの色、文字体裁、SNSのリンク、ファビコン、動作を変更できます。

Point!!

テーマ設定で変更を加えた内容は、カスタマイズできるページすべてに適用します。
設定方法は、テーマ管理 カスタマイズをご確認ください。

__________2021-07-21_23.17.47.png

注意事項

テーマカスタマイズは、ecforceが提供するテーマテンプレート(ec_force_basic_theme)でのみ利用可能です。

  • 対象となるテーマテンプレート(ec_force_basic_theme)以外では本機能を利用できません。 対象外のテーマでは「カスタマイズ」をクリックした際に「このテーマはカスタマイズ機能に対応していません。」とのメッセージが表示され、テーマカスタマイズ画面に遷移できない状態になります。
  • 「アクション > コードの編集」からファイル編集をしたテーマはサポート対象外です。
  • カスタマイズ対応テーマのファイル構造の変更(ファイル名変更・ファイルの追加や削除)は非推奨です。

この記事の目次

このセクションの記事

テーマ管理