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

**URL:** <https://community.shopify.com/t/topic/52410>\
**Category:** 技術的なQ＆A\
**Created:** [July 8, 2021, 6:00am UTC](https://community.shopify.com/t/topic/52410 "2021-07-08T06:00:44Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

目的：バリエーション選択時に、切り替わった商品画像の下へ対応するバリエーション名を自動表示したい（これまでは画像に直接文字入れ）。テーマはPristage、ShopifyのLiquid（テンプレート言語）で実装予定。

試み：product-template内の画像下に表示位置を特定し、snippets/variant-options.liquidをrenderしてバリエーション名を表示する方針。ただし、Liquidのどのプロパティを使えば名称を取得できるか不明。

提案・見解：
- 有料テーマのため情報が限られる可能性。テーマドキュメントの確認、開発者への問い合わせ、エキスパート依頼を推奨。
- 自力で行う場合は、バリエーション画像を表示しているコードの入手元・関連付け方法を特定し、その取得元からvariant.titleなどを参照。

提示コード（要点）：
- 画像のaltテキスト（代替テキスト）とバリエーション名が一致している前提で、以下のLiquidを用いて画像下に名称を表示可能：
  for variant in product.variants → if variant.title == media.alt → <p>{{ variant.title }}</p>

現状：投稿者はまずテーマ開発者に相談する方針。コード案は示されたものの、実装・動作の報告はなく、解決は未確認。

<div class="post-metadata">

**Author:** ![IyTatsumi](https://avatars.discourse-cdn.com/v4/letter/i/8e8cbc/32.png) [@IyTatsumi](https://community.shopify.com/u/IyTatsumi)\
**Post date:** [July 8, 2021, 6:00am UTC](https://community.shopify.com/t/topic/52410/1 "2021-07-08T06:00:44Z")

</div>

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

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

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

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

[https://shopify.dev/api/liquid/objects/variant#variant-title](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の中に入るコードを示していただけますと幸いです。

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [July 17, 2021, 5:57am UTC](https://community.shopify.com/t/topic/52410/2 "2021-07-17T05:57:20Z")

</div>

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![IyTatsumi](https://avatars.discourse-cdn.com/v4/letter/i/8e8cbc/32.png) [@IyTatsumi](https://community.shopify.com/u/IyTatsumi)\
**Post date:** [July 20, 2021, 4:40am UTC](https://community.shopify.com/t/topic/52410/3 "2021-07-20T04:40:19Z")

</div>

[Jizo\_Inagaki](https://community.shopify.com/user/688968)様

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Anonymous\_b5e4e80908bdd379f40b33a0facae45b](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@Anonymous\_b5e4e80908bdd379f40b33a0facae45b](https://community.shopify.com/u/Anonymous_b5e4e80908bdd379f40b33a0facae45b)\
**Post date:** [October 15, 2021, 8:43am UTC](https://community.shopify.com/t/topic/52410/4 "2021-10-15T08:43:19Z")

</div>

{% for variant in product.variants %}  
{% if variant.title == media.alt %}

{{ variant.title }}

{% endif %}  
{% endfor %}

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