Liquid、JavaScriptなどに関する質問
商品管理画面で「バリエーション」を複数登録し、「バリエーション画像」を指定しています。
ユーザーがバリエーションのボタンを選ぶと、指定した画像にイメージがスライドしますが、
その際に、バリエーション名を画像の下に表示させたいと考えています。
(これまではPhotoshopで画像に直接文字入れしていましたが、作業を楽にするためにコードで表示させたいです)
https://shopify.dev/api/liquid/objects/variant#variant-title
上記のリンクを参考にしながら進めており、
という手順で実装したいのですが、上記リンクの中のどの項目をsnippetsの中に入れれば、
バリエーション名を拾ってくれるのかがわからず困っております。
テーマは「Pristage」を使用しております。
もしわかる方がいらっしゃれば、snippetsの中に入るコードを示していただけますと幸いです。
よろしくお願いいたします。
回答がつかないようなので、具体的な事柄は書けませんが一応記載したいと思います。
対象が有料テーマのため無料テーマに比べて回答できる方は減りますので、現状を鑑みますと以下のいずれかの方法を検討する必要があると思います。
ご自身で対応される場合は、ドキュメントを読むことも重要ですが該当箇所のコードを読んで理解できるだけの知識が必要になります。
バリエーションの画像を表示しているコードを見つけ、その画像がどのようにして取得されているか(あるいはバリエーションと画像をどのように関連づけているか)を特定すれば、その取得元からtitleが取れるかもしれません。
以上ですが、個人的にはテーマ開発者かエキスパートやパートナーを頼ることをお勧めします。
お返事いただきありがとうございます。
そうですね…ご回答いただいた通り、
>バリエーションの画像を表示しているコードを見つけ、その画像がどのようにして取得されているか(あるいはバリエーションと画像をどのように関連づけているか)を特定する
と結構ハードルの高いカスタムになりそうなので、一度テーマ開発の方に問い合わせてみて、難しそうであれば断念しようと思います。
参考になりました。ご回答、ありがとうございました。
{% for variant in product.variants %}
{% if variant.title == media.alt %}<p>{{ variant.title }}</p>{% endif %}
{% endfor %}
これでいかがですか?
画像にバリエーション名と同じ代替テキストがセットされている必要があります。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024