こんにちは、ゆらりすです。
今回は管理画面でデザインが変更できる、セクションの追加の備忘録です。
1.新しいsectionファイルを作成
管理画面のSectionsフォルダの中に [新しいsectionを追加する] ボタンをクリック
ファイル名を入力し [セクションを作成] をクリック

セクションを作成すると、下記画像のliquidファイルが作られます。

コードを確認すると、schemaで記述されていることがわかります。

2.schema内にコードを記述する
管理画面で設定できるようにセクション作成時には自動生成されないので、自身でコードを追加します。
schema内settingsの下に "presets" を追加し
その中に "name" を記述します。
settings終わりにカンマ(,)をお忘れなく
このnameに記述したものが管理画面の設定で見れるところになります。
※サイトに反映されているかわかるようにdivでSampleと記述しておきます。

3.管理画面での追加
Shopify管理画面にいき、セクション追加をクリックします。

schemaのコードが反映されていると、下記画像のように
schemaのnameに記述したセクション名が出てくるようになります。

今回セクション追加したものを選ぶとdivで記述したSampleが反映されているのがわかります。

これでオリジナルのセクションが作れるようになります!
※Shopifyのロゴはガイドラインに沿って使用させてもらっております。
https://www.shopify.com/