実践：既存テーマのコードを読み、改修する
Horizon / Dawnのスニペットを読み解き、商品カードにバッジを追加する改修を一人で完了できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、既存テーマのコードを読み、商品カードに「新着」バッジを足す改修を一人で通せるようになります。
受託では、実案件の8割が「既存テーマの小さな改修」なので、ファイルの特定からTheme Checkまで通せれば最初の案件を受けられます。
直すファイルはどう探すか
テンプレートのJSON → セクション → renderされるスニペット、とたどって目的のHTMLを特定します。
最短はブラウザの開発者ツールです。
直したい要素のクラス名（card__badgeなど）をコピーして、テーマのファイル全体を検索します。
改修はどこまで小さくするか
「商品カードに新着バッジ」なら、バッジの分岐にelsifを1つ足すだけです。
変更は小さく、元のコードの流儀に合わせます。
Dawnの{%- -%}付きの書き方、翻訳キー（tフィルタ）経由の文言、設定からの配色クラスを、そのまま踏襲します。
文言は'products.product.new_arrival' | tのようにキーで書き、locales/ja.jsonにキーを足します。
日本語を直書きすると、運用者が管理画面のテーマ文言の編集メニューで変えられなくなります。
表示されないときはどう調べるか
①別のテーマ（複製前）を編集していないか、②条件が偽になっていないか（jsonで値を確認）、③翻訳キーが無くてtranslation missingになっていないか、④Theme Checkで構文エラーが出ていないか、の順に見ます。
Liquidはエラーで止まらないので、「静かに失敗」を疑います。
発展：Horizon系ではどこを直すか
Horizonの商品カードは、テーマブロックで組まれています（blocks/_product-card.liquidがcontent_for 'blocks'で子ブロックを描画し、snippets/product-card.liquidをrenderします）。
バッジの分岐は商品カードのギャラリーブロック（執筆時点ではblocks/_product-card-gallery.liquid）の中にあり、スタイルはsnippets/product-badges-styles.liquidに分かれています。
ファイル名ではなく、中身を「badge」で全文検索して該当箇所を特定します。
ファイル名と構成は版で変わるので、常に検索から入ります。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。