テーマ管理

テーマ管理

テーマ管理では、ショップの表示にHTML・CSS・JavaScript・画像を設定することで、より自由なデザインを行えます。 

テーマ管理における各種ファイルの仕様やLiquidの記載方法、必要なコンポーネントなどのご確認はテーマ管理の仕様書（テーマガイド）をご利用ください。

テーマ管理画面

テーマ管理画面は「ショップ管理 > テーマ管理」で表示されます。

テーマ管理画面における各項目

現在のテーマ	ショップに適用しているテーマを表示します。
テーマ名	テーマの名前を表示します。
最終保存	テーマを更新した日時を表示します。
アクション	アクション一覧の各操作を実行できます。
カスタマイズ	テーマのカスタマイズができます。
プレビュー有効期限	プレビューURLにアクセスできる有効期限を表示します。 有効期限が切れた場合は、プレビューをクリックすると新しいプレビューURLが生成され、確認可能となります。 有効期限はプレビューをクリックしてから2週間後です。 「プレビュー強制終了」を実行した場合、実行日時が有効期限です。
テーマライブラリ	アップロード済みのテーマ一覧を表示します。

アクション一覧

現在のテーマ、テーマライブラリに表示されている各テーマの「アクション」と「カスタマイズ」から以下の操作を行えます。

テーマをアップロード

「テーマライブラリ > テーマをアップロード」より、テーマをアップロードします。

• テーマダウンロードからダウンロードしたテーマZIPをアップロードできます。
• ダウンロードしたテーマを編集した後、アップロードする場合のテーマZIPの再作成方法は「テーマZIPファイルの作成方法」をご確認ください。

テーマ情報の編集

「アクション > テーマ情報の編集」より、テーマの「テーマ名」「説明」を編集できます。

編集手順

1. 「アクション > テーマ情報の編集」をクリックします。
2. テーマ情報編集モーダルが表示されます。
3. 「テーマ名」「説明」に対象のテーマ情報を記述します。
4. 記述が完了したら「保存」をクリックします。

注意事項

• テーマ名は「テーマを追加」から追加したテーマのみ変更可能です。
• テーマ名は半角英数と-（ハイフン）_（アンダースコア）のみ使用可能です。

コードの編集

「アクション > コードの編集」より、テーマファイルの編集を行えます。

コード編集について

コード編集画面でファイルツリー表示が使用です。
テーマテンプレート の一部ファイルはツリー表示でのみ表示・編集可能です。
テーマテンプレートは「テーマカスタマイズ対応テーマテンプレートについて（ec_force_basic_theme）」もあわせてご確認ください。

ファイルツリーへの変更はテーマ名右側の「ツリー表示アイコン」をクリックします。

元の表示形式へ戻す場合は「一覧表示アイコン」をクリックします。

ファイルツリー表示中はファイル検索機能が使用可能です。
ファイル名の部分一致検索となっており、一致するファイル名がリアルタイムで絞り込まれます。
フォルダの検索はできません。

編集手順

1. 編集を行いたいテーマファイルの「アクション > コードの編集」をクリックします。
2. 「コードの編集」画面にファイルツリーが表示されます。
   ファイルツリーから編集したいファイルをクリックし、コードを記述します。
   
3. 記述が完了したら「保存する」をクリックします。

テーマをダウンロードする

「アクション > ダウンロード」より、テーマをダウンロードできます。
テーマのZIPアップロードを行う際に、ダウンロードしたテーマを利用可能です。

ダウンロード手順

1. ダウンロードするテーマの「アクション」より、「ダウンロード」を選択します。
   
2. ダウンロードしたファイルは「ジョブ管理」でダウンロード可能です。
   

テーマZIPファイルをアップロードする

ローカルで編集したテーマのZIPファイルをアップロードする場合は「アクション > コードの編集」の「タブ：テーマZIPアップロード」でアップロードして使用します。

アップロード手順

1. 「タブ：テーマZIPアップロード」で「ファイルを選択」をクリックし、アップロードするファイルを選択します。

テーマZIPファイルの作成方法

テーマZIPの条件について

アップロードするテーマZIPは以下の条件を満たしている必要があります。
※条件を満たしていない場合、空のテーマが作成されます。

カスタマイズ機能に対応したテーマテンプレート（ec_force_basic_theme）は、ファイル構造を変更（ファイル名変更・ファイルの追加や削除）することは非推奨です。

テーマZIPファイル作成手順

1. ローカルのテーマディレクトリがある場所を開きます。
   
   
   
2. zip化したいテーマの中身を選択し、圧縮します。
   
   
   
3. ファイル名を半角英数に変更します。
   

ファイルをアップロードする

画像などのファイルを使用する場合は「アクション > コードの編集」の「タブ：ファイルアップロード」でアップロードして使用します。

アップロード手順

1. 「ファイルアップロード」で「ファイルを選択」をクリックし、アップロードするファイルを選択します。
   各ファイルをまとめるフォルダを作成する場合は「 フォルダを作成」をクリックします。
   

プレビュー

編集した内容をプレビューで確認できます。
プレビュー画面では画面遷移や購入など、稼働中のショップと同様の動作を確認できます。

プレビュー手順

1. 「現在のテーマ」「テーマライブラリ」における「アクション > プレビュー」または「アクション > コードの編集」の「タブ：ファイル管理」の「プレビュー」をクリックします。
   ※「タブ：ファイル管理」の「プレビュー」の場合、いずれの対象画面で「プレビュー」をクリックしてもショップのトップ画面のプレビューへ遷移します。トップ画面以外のプレビューを行いたい場合は、プレビューのトップ画面より該当画面へ画面遷移を行ってください。
   
   
2. プレビュー画面が表示されます。
   ※ecforceが提供するテーマテンプレート（ec_force_basic_theme）では、プレビュー表示時は、常にフッターが表示されます。
   
3. 「プレビューを終了」をクリックすると現在のテーマに切り替わります。
4. 「プレビューリンクをコピー」をクリックすると、クリップボードにプレビュー時のURLをコピーできます。

適用テーマを切り替える

編集したテーマの動作をプレビューで確認後、問題なければ適用されているテーマを新しいテーマへ切り替え、ショップへアクセスしてくるユーザへ表示します。

切り替え手順

1. テーマライブラリ（「現在のテーマ」以外のテーマが格納されています）から適用したいテーマについて「アクション > テーマを適用」をクリックします。
2. 適用されたテーマが「現在のテーマ」となり、それまで適用されていたテーマはテーマライブラリに移動します。