テーマ管理 カスタマイズ

カスタマイズでできること

テーマカスタマイズに対応したテーマテンプレート（ec_force_basic_theme）では、ショップの基本的な見た目や雰囲気を、独自のブランドに合わせてカスタマイズできます。

カスタマイズ画面

カスタマイズ画面は「ショップ管理 > テーマ管理」の各テーマの「カスタマイズ」をクリックすると表示されます。

タブ：セクション

「タブ：セクション」では、ページのコンテンツをセクションという単位で区切り、セクションごとに内容をカスタマイズできます。

追加と削除

セクションは追加と削除が行えます。
セクションの削除は各セクション内で行えます。

タブ：テーマ設定

「タブ：テーマ設定」では、ショップの色、文字体裁、SNSのリンク、ファビコン、動作を変更できます。
テーマ設定で変更を加えた内容は、カスタマイズできるページすべてに適用されます。

色を編集する

ショップのさまざまな部分のカラーを設定できます。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「色」をクリックします。
3. 編集する項目のカラーアイコンをクリックします。
4. カラーピッカーから変更するカラーを選択します。
   

   カラーの指定

   カラーピッカーのスライダーで指定する方法と、カラーピッカー内のテキストフィールドに16進数カラーコードを直接指定する方法があります。

5. 【保存する】をクリックします。

文字体裁を編集する

ショップのテキストに使用するフォント、フォントサイズを設定できます。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「文字体裁」をクリックします。
3. 編集する項目のフォント設定から使用するフォントを指定します。
4. フォントサイズを変更する場合は、スライドバーから使用するフォントサイズを選択します
5. 「保存する」をクリックします。

SNSを編集する

ショップの商品詳細画面に表示されるSNSアイコンの表示非表示を設定できます。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「SNS」をクリックします。
3. 表示するSNSのチェックボックにチェックを入れます。
   設定できるSNSは「Facebook」「twitter」「LINE」です。
4. 「保存する」をクリックします。

SNSシェア先のチェックを入れると、商品詳細画面にSNSシェアアイコンが表示されます。

ファビコンを編集する

ショップのファビコンを設定できます。
ファビコンは「ウェブブラウザーのタブ」や「ブックマークページ」などに表示される小さな正方形の画像またはロゴを指します。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「ファビコン」をクリックします。
3. ファビコン画像の「画像を選択する」をクリックして、画像ファイルをアップロードします。
4. 「保存する」をクリックします。

動作を編集する

ショップの画面遷移におけるエフェクトの有効無効を設定できます。
「画面遷移エフェクト有効」にチェックを入れた場合、ショップの画面遷移にアニメーションが追加されます。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「動作」をクリックします。
3. 「画面遷移エフェクト有効」にチェックを入れます。
4. 「保存する」をクリックします。

アイコンを編集する

各商品画像下部に表示できる下記アイコンの表示/非表示を設定できます。
・お気に入りアイコン
　商品詳細画面に遷移することなくお気に入り登録ができる機能です。
・カート追加アイコン
　商品詳細画面に遷移することなくカートに商品を入れることができる機能です。
    ※セット商品ではセット選択画面へ遷移します。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「アイコン」をクリックします。
3. 「お気に入りアイコン」「カート追加アイコン」にチェックを入れます。
4. 「保存する」をクリックします。

各アイコンのチェックボックスにチェックを入れると、各商品画像下部にアイコンが表示されます。

PC、SPの表示切り替え

プレビュー表示について、PCでの表示、SPでの表示の切り替えができます。
保存される前に確認ができます。

※各カスタマイズ画面毎のPC表示、SP表示にそれぞれURLが付与されているため、リンクを用いた共有も可能です。

PCでの表示

SPでの表示

設定の保存

テーマの設定の変更が完了したら「保存する」を選択して保存します。

カスタマイズする画面の切り替え

カスタマイズする画面を切り替えられます。
画面上部中央にある画面名の箇所から切り替え可能です。

※各カスタマイズ画面毎のPC表示、SP表示にそれぞれURLが付与されているため、リンクを用いた共有も可能です。

カスタマイズする画面の詳細については「このセクションの記事」をご確認ください。

注意事項

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