商品画像の下に文字を入れる方法

AI-generated summary

商品画像の下に文字を表示する方法として、固定テキストならテーマコードの編集で対応できるという回答が示された。対象箇所は主に product-template.liquid などの商品画像を出力している部分で、そこにテキストを追加する形。

色やサイズのように商品ごと・選択肢ごとに変わる表示をしたい場合は、Shopifyの「バリエーション」を使い、Liquidで variant(商品バリエーション情報)を参照して出力する必要があると説明された。Shopifyには初期状態で色やサイズが固定定義されているわけではなく、各商品でオプションとして登録されている前提。

具体的な色のLiquid変数名だけで即答できる形ではなく、まず商品にバリエーションが設定されているか確認すること、必要に応じてShopify公式ヘルプとLiquidの variant オブジェクト資料を参照するよう案内された。結論として、実装自体は可能だが、希望位置への表示にはコード編集が必要で、詳細実装は今後の確認事項として残っている。

ZOZOTOWNの商品ページのように商品画像の下に文字を入れる方法は無いでしょうか?

もし方法を知っている方がいらしたら教えていただきたいです。

よろしくお願いいたします。

参考ページ https://zozo.jp/shop/corpustokyo/goods-sale/52999553/?did=87778942&rid=1093

単純に固定文字を入れる場合は、テーマのコード編集で可能かと思います。

お使いのテーマのproduct-template.liquidあたりの商品画像を表示しているコードにテキストを挿入。もし、色やサイズのバリエーションを出すのであれば、そのLiquid変数を挿入することで可能です。

ほとんどのテーマは商品をバリエーション管理すると、そのバリエーション(色やサイズ)が商品ページに選択可能な形で商品画像と共に表示されます(どうしても自分の希望にあった場所ぴったりに表示となると上記のようなコード編集が必要ですが。。)

ご返信ありがとうございます。

色を出すLiquid変数が分からなくて。。申し訳ありませんが教えていただけますでしょうか。。

よろしくお願いいたします。

まずは、商品のバリエーションについてご確認ください。

https://help.shopify.com/ja/manual/products/variants

https://help.shopify.com/ja/manual/products/product-media/add-images-variants

Shopifyでは、初めから固定の色やサイズといった属性は定義しておりません。マーチャントが商品にバリエーションを追加して、色やサイズといった名称のオプションを登録すればそうなります。

ですので対象のショップがバリエーションとして色を登録していると仮定すると、Liquidで該当するバリエーションの内容を表示することになるかと思います。

バリエーションは、APIやLiquid上ではvariant という属性になるので、その変数を使うことになります。
https://shopify.dev/docs/themes/liquid/reference/objects/variant