🟦
ディベロッパー(開発者向け設定)
ディベロッパー(開発者向け設定)
こちらの項目はテーマファイルのコードへの編集を加えるためのものです。
こちらの機能･編集に関してはCSS・JavaScript・Liquid等のテーマコードに慣れているShopifyパートナーなどを雇うことをおすすめいたします。
CSS･JavaScript･Liquidコードの編集につきましてはテーマサポート範囲外となります｡
あらかじめご了承お願いいたします｡
バックアップ
将来のアップデートに対応するためにも、テーマカスタマイズで行った変更を把握し記録を残しておくこと。また 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クラス追加例
ご注意
｢custom.css｣・｢custom.js｣のコード記述を反映させるには｢テーマ設定｣のディベロッパーにて、それぞれのファイルを適用させるようチェックを入れてください。
コードの編集はプログラミングなどに関する専門的な知識が必要です。
不用意なコードの編集はテーマに不具合を起こす可能性がありますのでご注意ください。
独自にコード編集を行ったテーマに関してはテーマサポート対象外とさせていただきますので予めご了承ください。