商品画像の下にバリエーションの文字を表示させる

[IyTatsumi]

商品管理画面で「バリエーション」を複数登録し、「バリエーション画像」を指定しています。

ユーザーがバリエーションのボタンを選ぶと、指定した画像にイメージがスライドしますが、

その際に、バリエーション名を画像の下に表示させたいと考えています。

（これまではPhotoshopで画像に直接文字入れしていましたが、作業を楽にするためにコードで表示させたいです）

https://shopify.dev/api/liquid/objects/variant#variant-title

上記のリンクを参考にしながら進めており、

1. section > product-template の中の、イメージボックスの下に文字を表示させる箇所を特定
2. その箇所に {%- render -%}で「variant.options」を呼び出しを想定
3. 呼び出し元として、snippetsの中に「variant-options.liquid 」を新規作成

という手順で実装したいのですが、上記リンクの中のどの項目をsnippetsの中に入れれば、

バリエーション名を拾ってくれるのかがわからず困っております。

テーマは「Pristage」を使用しております。

もしわかる方がいらっしゃれば、snippetsの中に入るコードを示していただけますと幸いです。

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

[Jizo_Inagaki]

回答がつかないようなので、具体的な事柄は書けませんが一応記載したいと思います。

対象が有料テーマのため無料テーマに比べて回答できる方は減りますので、現状を鑑みますと以下のいずれかの方法を検討する必要があると思います。

• テーマのドキュメントから情報を探す
• テーマ開発者にサポート可能か相談する
• エキスパートやパートナーに依頼する

ご自身で対応される場合は、ドキュメントを読むことも重要ですが該当箇所のコードを読んで理解できるだけの知識が必要になります。
バリエーションの画像を表示しているコードを見つけ、その画像がどのようにして取得されているか(あるいはバリエーションと画像をどのように関連づけているか)を特定すれば、その取得元からtitleが取れるかもしれません。

以上ですが、個人的にはテーマ開発者かエキスパートやパートナーを頼ることをお勧めします。

[IyTatsumi]

Jizo_Inagaki様

お返事いただきありがとうございます。

そうですね…ご回答いただいた通り、

＞バリエーションの画像を表示しているコードを見つけ、その画像がどのようにして取得されているか(あるいはバリエーションと画像をどのように関連づけているか)を特定する

と結構ハードルの高いカスタムになりそうなので、一度テーマ開発の方に問い合わせてみて、難しそうであれば断念しようと思います。

参考になりました。ご回答、ありがとうございました。

[かず]

{% for variant in product.variants %}
{% if variant.title == media.alt %}<p>{{ variant.title }}</p>{% endif %}
{% endfor %}

これでいかがですか？
画像にバリエーション名と同じ代替テキストがセットされている必要があります。