テーマ管理

テーマ管理

テーマ管理

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

Caution!!

設定の誤りにより生じたトラブルについては、弊社で責任を負いかねます。
ご了承のうえで、テーマ管理機能をご利用ください。

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

テーマ管理画面

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

ecfdev-11870_faq_10.png

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

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

アクション一覧

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

  • テーマの情報の説明を変更する場合は「アクション > テーマ情報の編集」をクリックします。
  • 「現在のテーマ」を切り替える場合は、「テーマライブラリ」内の「アクション > テーマを適用」をクリックします。
  • テーマを未適応にする場合は「アクション > テーマを未適用」をクリックします。
  • テーマのプレビュー行う場合は「アクション > プレビュー」をクリックします。
  • テーマ管理画面からプレビューを終了する場合は「アクション > プレビュー強制終了」をクリックします。
  • 登録済のテーマをコピーして新しく登録する場合は「アクション > 複製」をクリックします。
  • テーマのzipファイルをダウンロードする場合は「アクション > ダウンロード」をクリックします。
  • テーマのショップに表示される文言を変更する場合は、「アクション > 言語の編集」をクリックします。
    ※詳細は「テーマ管理 言語の編集」をご確認ください。
  • テーマファイルを編集する場合は「アクション > コードの編集」をクリックします。
  • テーマを削除する場合は「アクション > 削除」をクリックします。
  • テーマをカスタマイズする場合は「カスタマイズ」をクリックします。
    ※詳細は「テーマ管理 カスタマイズ」をご確認ください。

言語の編集・カスタマイズについて

本機能に対応したテーマのみで利用可能です。
2021/07以前に提供したテーマはすべて本機能を利用できません。
※未対応のテーマで利用しようとした場合「このテーマは○○に対応していません。」とエラーメッセージが表示されます。

テーマをアップロード

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

ecfdev-11870_faq_11.png

テーマ数の上限は20個です。
上限に達している場合は、テーマ追加の前に使用していないテーマを削除してください。

スクリーンショット 2021-10-13 10.49.53.png

テーマ情報の編集

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

_____FAQ_2_2107release.png

編集手順

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

注意事項

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

_____FAQ_3_2107release.png

コードの編集

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

Caution!!

コードの編集で編集したテーマなど、ショップ独自でのコーディング・一部を変更したテーマはサポート対象外です。
編集により、機能が正常に動作しなくなった場合の修正対応や新機能の追加にともなう記述の変更は、ショップで実施ください。
最新のテーマ仕様は「ecforce テーマガイド」に記載しています。
最新の ec_force_basic_theme は「テーマを追加」よりいつでも追加可能です。

コード編集について

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

ファイルツリーへの変更はテーマ名右側の「ツリー表示アイコン」をクリックします。
スクリーンショット 2022-01-06 20.08.55.jpg

元の表示形式へ戻す場合は「一覧表示アイコン」をクリックします。
スクリーンショット 2022-01-06 20.11.01.jpg

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

スクリーンショット 2022-01-06 20.18.57.jpg

テーマ編集時の注意事項

「現在のテーマ」(本番適用中)のテーマファイルを更新した場合、即座にサイトに反映されます。

テーマ編集時は現在ご利用中のテーマファイルをコピーした新規テーマを作成し、 コピーしたテーマがテーマライブラリにある(本番適用外)状態での編集を推奨します。動作確認はプレビュー表示にて実施し、動作確認が完全に終了した後に適用テーマの切り替えを実施します。

編集手順

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

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

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

ダウンロード手順

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

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

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

アップロード手順

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

スクリーンショット 2021-10-13 11.08.33.png

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

テーマZIPの条件について

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

  • .git などの隠しディレクトリ / ファイルがZIPファイルの中に存在しないこと
  • 以下の「テーマZIPファイル作成手順」に従って必要なフォルダを圧縮していること(操作の詳細手順はお使いのOS、ツールにより異なります)

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

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

  1. ローカルのテーマディレクトリがある場所を開きます。
    create_theme_zip_1.png

  2. zip化したいテーマの中身を選択し、圧縮します。
    create_theme_zip_2.png

  3. ファイル名を半角英数に変更します。
    create_theme_zip_3.png

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

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

アップロード手順

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

プレビュー

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

Caution!!

プレビューには、有効期限があります。
有効期限がすぎるとプレビューはできません。

プレビュー手順

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

「プレビューを終了」をクリックせずにプレビューを閉じた場合

・プレビュー表示時にブラウザを閉じ、公開中のショップにアクセスしたときは、公開中のテーマで表示されます。
(プレビュー表示にはなりません。)

・ブラウザの複数タブで異なるプレビューを開いたときに、それぞれのプレビューで表示されます。

・複数のプレビューが開いている状態で強制終了されたプレビューをリロードすると404エラーになります。

・上記方法は、PCブラウザでのプレビュー表示方法です。
スマートフォンで確認する場合は、プレビュー実行時にブラウザに表示されるURL(https://契約ドメイン/shop?preview=xxxx)をコピーしたうえで、スマートフォンへ該当URLを送信します。
スマートフォンよりプレビューリンクのURLへアクセスすると、スマートフォン実機でもプレビュー表示が可能です。

適用テーマを切り替える

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

切り替え手順

  1. テーマライブラリ(「現在のテーマ」以外のテーマが格納されています)から適用したいテーマについて「アクション > テーマを適用」をクリックします。
  2. 適用されたテーマが「現在のテーマ」となり、それまで適用されていたテーマはテーマライブラリに移動します。
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

この記事の目次

このセクションの記事

テーマ管理