【Shopify】編集したいソースコードってどうやって探すの？〜VSCode編〜

Shopify管理画面でコードを編集するからのアナログ編

ターミナル編

事前準備
1. テキストエディタ：Visual Studio Code（VSCode）をダウンロードしておいてください。
ダウンロードから日本語化までのまとめは下記を参考にどうぞ。
そのほか、おすすめのプラグインなどは検索するといろいろとまとめられているのでお好みで追加してみてください。

【エンジニア入門】Visual Studio Codeを日本語化する方法 | .NETコラム

2. 検索を実施したいソースコードをローカルにダウンロードしておいてください。

お題：商品詳細ページのadd to cartボタンを探したい
テーマ：Debut
環境：VSCode

まず、検索したい箇所の大体のあたりを付けるために要素の検証を使用します。

今回はclassの中にある「product-form__cart-submit」を使用して検索したいと思います。
（非エンジニアの自分からすると「これなら検索にひっかかるかな〜」くらいの気持ちです。）

VSCodeで該当のフォルダーを開きます。（先にダウンロードしたテーマファイル一式のフォルダーです。）

フォルダー内検索のショートカットキーを使用します。
Mac：Shift + command + F
Win：Shift + Ctrl + F
検索バーが表示されるので先程の「product-form__cart-submit」をコピペします。（入力するとすぐに検索結果が表示されます。）

エディターで開くと更に行数なども確認できます。

今回は商品詳細ページということでscssファイルなどは探している箇所じゃないなと判断ができるので確認対象から省きます。

では、探している箇所はfeatured-product.liquidとproduct-template.liquidのどっちなんだ！ということに関しては、product.liquidを確認します。
※Layoutを省いた場合に商品詳細ページを構成している最上位のソースコードがTemplates＞product.liquidです。

確認したところ、product-template.liquidは呼び出されているようですがfeatured-product.liquidは検索しても引っかからないので商品詳細ページでは使用されていなさそうです。
※ファイル内検索のショートカットキー
Mac：command + F
Win：Ctrl + F

【補足】sectionの呼び出し方
{% section 'ファイル名' %}
例）{% section 'featured-product' %}
今回はproduct.liquidでfeatured-product.liquidが呼び出されていない（{% section 'featured-product' %}がない）ので商品詳細ページ（product.liquid）にはfeatured-product.liquidがないということになります。

ということで、今回探している「商品詳細ページのadd to cartボタン」はproduct-template.liquidにいることが判明しました！