Glb_agさん、はじめまして。
参考サイト拝見しました。
「モデルの身長と、着用サイズを表示する方法」についてですが、
それぞれ商品画像にAltとして「モデル:164cm サイズ:S」が設定されており、
そちらのテキストが商品画像の上に固定され、出力されているものかと思われます。
方法の一つとして、以下のような形であれば実現可能かと思います。
【実装の手順】
①商品管理→メディア→右上アイコン→代替テキスト(alt)を編集より、「モデル:164cm サイズ:S」などのテキストを設定する
②media.liquidに商品画像オブジェクトに紐づいたaltテキストを呼び出す処理( {{ media.alt }}など )を記述する
③CSSで呼び出したテキストの見た目を調整する
【実際のコード】
media.liquid (私の場合51行目)
<div
id="{{ zoom_media_id }}"
style="padding-top:{{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100}}%;"
class="product-single__media{% if product.media.size > 1 %} product-single__media--has-thumbnails{% endif %}{% if enable_image_zoom %} js-zoom-enabled{% endif %}"
{% if enable_image_zoom %} data-image-zoom-wrapper data-zoom="{{ media | img_url: image_zoom_size, scale: image_scale }}"{% endif %}
data-image-loading-animation>
のコードの下に、以下コードを貼り付けてください。
<p class="media-alt">{{ media.alt }}</p>
<style>
.media-alt{
bottom: 0px;
z-index: 11111111;
color: red;
background-color: #fff;
font-weight: 700;
border-radius: 7px;
padding: 0 10px;
left: 50%;
position: absolute;
/* top: 50%; */
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
}
</style>
こちらで表示されるようになるかと思います。
参考になりましたら幸いです。
京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp
