【Shopify】編集したいソースコードってどうやって探すの？〜アナログ編〜
Shopifyで編集をする場合にどこに編集したいソースコードがあるのかがそもそも見つけられない！といったことを多く聞かれるのでまとめてみました。
私のやり方なのと非エンジニア向けなので、もっと効率が良い探し方があればぜひシェアしてください！
テキストエディター編
ターミナル編
補足情報
Shopifyの構造：Layout＞Templates＞Sections＞Snippets
お題：商品詳細ページのadd to cartボタンを探したい
テーマ：Debut
環境：Shopify管理画面
（ローカルにソースコードをダウンロードしてる場合の検索はVSCode編、ターミナル編をご確認ください。）
Layoutを省いた場合に商品詳細ページを構成している最上位のソースコードがTemplates＞product.liquidです。
※確認方法
要素の検証でbodyのclassを確認します。
<body class="template-product"> ー＞Templates＞product.liquidだとわかる。
TOPページの場合：<body class="template-index"> ー＞Templates＞index.liquidだとわかる。
product.liquidを確認するとsectionを呼び出しているのがわかるので、
Sections＞product-template.liquidをさらに確認しにいきます。
※product-template.liquidで[add]や[submit]を検索してもヒットしないので要素の検証で前後のソースコードを確認しここっぽいを更に絞り込んでいった結果sectionのなかっぽい！という流れ。
product-template.liquidでも[add]や[submit]を検索するとヒット！
無事に見つけることができました。
add to cartボタンの前に注意書きをしたいといった場合には、見つけたbuttonタグの前に任意の内容を記述し保存します。
※テーマによってはさらにSnippetsにある場合があります。
この記事が気に入ったらサポートをしてみませんか？