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

[ayakas]

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

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

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

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

[junichiokamura]

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

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

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

[ayakas]

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

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

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

[junichiokamura]

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

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