ディベロッパー（開発者向け設定）
ディベロッパー(開発者向け設定)
こちらの項目はテーマファイルのコードへの編集を加えるためのものです。
テーマファイルのコードの編集はCSS・JavaScript・Liquid等のコードに慣れているShopifyパートナーなどを雇うことをおすすめいたします。
バックアップ
将来のアップデートに対応するためにも、テーマカスタマイズで行った変更を把握し記録を残しておくこと。また git などの使用を推奨します。
ファイルの変更
変更は別のファイルにしておくこと。下記の CSS と Javascript コードを別の独立したファイルとしての使用オプションを用意しています。
設定
CSSでのカスタマイズを有効化
‘CSSでのカスタマイズを有効化’にチェックを入れ設定を保存します。
テーマファイルのコードを編集する > アセット(Assets)フォルダ内にあるcustom.cssファイルにCSSコードを記述します。
JavaScriptでのカスタマイズを有効化
‘JavaScriptでのカスタマイズを有効化’にチェックを入れ設定を保存します。
テーマファイルのコードを編集する > アセット(Assets)フォルダ内にあるcustom.jsファイルにJavaScriptコードを記述します。
『MISEル』のカスタムCSS カスタム JavaScript
カスタムCSS と カスタムJavascriptはShopifyテーマのコード編集からアクセスできます。
オンラインコードエディタを開く
カスタマイズしたいテーマのメニューから｢コードを編集｣を選択します。
テーマのファイル アセットフォルダ
下記のような｢オンラインコードエディタ｣が開きますので。
｢custom.css｣ と｢custom.js｣というファイルが｢アセット｣のフォルダ内にあります。
CSSコードは ｢custom.css｣のファイル内に、JavaScriptコードは｢custom.js｣のファイル内に記述してください。
セクション
また MISEルテーマのセクション・ブロックの中にはクラスを設定できるものがありますので、詳細なカスタマイズを行いたい際にはご活用ください。(例: ビルダーセクション・プロモボックス)
ビルダーへのCSSクラス追加例
.my-misell-builder {
background-color: #fff0f5;
}