テーマ管理

テーマ管理 コードの編集

コードの編集画面でできること

インストールされたテーマのソースコードの編集・ファイル追加が可能です。

カスタマイズ対応テーマテンプレート(ec_force_basic_theme)のコード編集について

ec_force_basic_themeをコード編集する場合は「コード編集したカスタマイズ対応テーマテンプレート(ec_force_basic_theme)を最新のテーマバージョンにアップデートする方法」をよくご確認いただき、運用開始後も継続して保守運用を行ってください。

コード編集画面(通常)

全てのテーマで本機能は利用可能です。
カスタマイズ対応テーマテンプレート(ec_force_basic_theme)やファイルの追加・削除、ファイル名の変更を実施(非推奨)した場合は対応していない画面があるため、ファイルツリーを利用してください。

コード編集画面 ファイルツリー表示

ファイルツリーを利用する

  1. テーマ管理にアクセスします。
  2. コードを確認、編集したいテーマの「アクション > コードの編集」をクリックします。
  3. サイドバー上部のテーマ名の右側のアイコン(ツリー表示)をクリックします。
    ※一覧表示に戻す場合はアイコン(一覧表示)をクリックします。
  4. 対象のテーマのファイルがすべて表示されます。

ecfdev-11870_faq_4.png

新規ファイルを作成する

ファイルツリー表示では、各フォルダの配下に新規ファイルを作成することができます。

  1. 各フォルダの右端に表示されている「・・・」をクリックします。
  2. 表示された「新規ファイル」をクリックします。
    ecfdev-11870_faq_5.png
  3. フォルダの最上部にファイル入力カラムに作成したいファイル名を入力してください。
    ※拡張子まで入力してください。
    ecfdev-11870_faq_6.png
  4. キーボードのEnterキーを押すことでファイル作成が行われます。
    ※拡張子が指定されていないファイル名は作成されません。
    ※作成をキャンセルしたい場合は、入力カラム以外のフィールドをクリックしてください。

注意点

  • 使用可能な拡張子は「.liquid」「.css」「.json」のみです。
  • フォルダ作成はできませんのでご注意ください。
  • 同一フォルダ内では同一名でのファイル作成はできません。
  • 新規作成されたファイルはファイル一覧表示には表示されません。
  • コマンドでの上の階層へのファイル作成はできません。

ファイルを削除する

ファイルツリー表示では、各ファイルを削除することができます。

  1. 各ファイルの右端に表示されている「・・・」をクリックします。
  2. 表示された「削除」をクリックします。
    ecfdev-11870_faq_7.png

注意点

  • 一度削除したファイルは復元できないのでご注意ください。
  • フォルダ内のファイルをすべて削除するとフォルダも削除されます。
  • ファイル削除により、テーマ管理の機能が利用できなくなる場合やショップ画面の表示が崩れる恐れがあるためご注意ください。

ファイル名を変更する

ファイルツリー表示では、各ファイルのファイル名を変更することができます。

  1. 各ファイルの右端に表示されている「・・・」をクリックします。
  2. 表示された「ファイル名変更」をクリックします。
    ecfdev-11870_faq_8.png
  3. 対象のファイル名が入力可能となるので、変更したいファイル名を入力してください。
    ※拡張子の変更も可能です。
    ecfdev-11870_faq_9.png
  4. キーボードのEnterキーを押すことでファイル名変更が行われます。
    ※拡張子が指定されていない場合は、変更内容は保存されません。
    ※変更をキャンセルしたい場合は、入力カラム以外のフィールドをクリックしてください。

注意点

  • 使用可能な拡張子は「.liquid」「.css」「.json」のみです。
  • 同一フォルダ内では同一名でのファイル名への変更はできません。
  • ファイル一覧表示に表示されているファイル名を変更すると、一覧表示では対象ファイルのコードが表示されなくなります。
  • コマンドでのファイルのフォルダ移動はできません。
  • ファイル名変更により、テーマ管理の機能が利用できなくなる場合やショップ画面の表示が崩れる恐れがあるためご注意ください。
  • グローバルナビゲーション(ハンバーガーメニュー)は、「ファイル:ec_force/shop/sections/header.liquid」内の<i class="u-icon--menu"></i>にて表示させております。

この記事の目次

このセクションの記事

テーマ管理