初めまして。Debutのテーマを使用しています。
商品写真にモデルの身長と、着用サイズを表示する方法を教えていただけると幸いです。
添付のようなイメージです。この写真はこちらのサイトから拝借しました。
https://store.soeju.com/products/008-short-sleeve-cocoon-blouse
よろしくお願いいたします。
Topic summary
商品写真上にモデルの身長・着用サイズのテキストを重ねて表示したい（ShopifyのDebutテーマ）。参考サイトと添付画像で期待する見え方が提示されている。
提案された実装手順：
- 商品管理のメディアで代替テキスト（alt）に「モデル:164cm サイズ:S」などを設定。
- テーマの media.liquid で {{ media.alt }} を追記してテキストを出力。
- CSSで表示位置や見た目を調整。
用語補足：
- alt＝画像の代替テキスト（アクセシビリティ用の説明文）。
- media.liquid＝商品メディアの表示を制御するテンプレートファイル。
最新状況：
- 指示どおり media.liquid に追記したが、画像上にテキストが表示されない。
- media.liquid が旧バージョンであることの影響があるか不明で、確認依頼あり。スクリーンショットが添付。
結論・進捗：
- 具体的な原因や解決策はまだ特定されておらず、議論は継続中。
以下アカウントからの返信をご確認下さい。
Glb_agさん、はじめまして。
参考サイト拝見しました。
「モデルの身長と、着用サイズを表示する方法」についてですが、
それぞれ商品画像にAltとして「モデル:164cm サイズ:S」が設定されており、
そちらのテキストが商品画像の上に固定され、出力されているものかと思われます。
方法の一つとして、以下のような形であれば実現可能かと思います。
【実装の手順】
①商品管理→メディア→右上アイコン→代替テキスト(alt)を編集より、「モデル:164cm サイズ:S」などのテキストを設定する
②media.liquidに商品画像オブジェクトに紐づいたaltテキストを呼び出す処理( {{ media.alt }}など )を記述する
③CSSで呼び出したテキストの見た目を調整する
【実際のコード】
media.liquid (私の場合51行目)
のコードの下に、以下コードを貼り付けてください。
{{ media.alt }}
こちらで表示されるようになるかと思います。
参考になりましたら幸いです。
1 Like
