コレクション一覧のサムネイルはメディアの最初のものになっていますが、
Wordpressのアイキャッチ画像のように任意に設定することは可能でしょうか。
Topic summary
コレクション一覧ページで表示される各商品のサムネイル画像を任意に設定する方法についての質問。デフォルトではメディアの最初の画像が使用されるが、これを変更したいという要望。
提案された解決方法:
-
テーマ設定から変更: 一部のテーマでは管理画面の「コレクションの記事のサムネイル」設定で変更可能。ただし、テーマによって対応状況が異なる。
-
Liquidファイル編集: より汎用的な方法として、collections.liquidファイルを直接編集する方法が複数提案されている。
product.images[0]、product.images[1]などで特定の画像を指定- 画像のaltタグに特殊文字（例：「featured」）を含め、forループで該当画像を検索・表示する方法
現状: Liquidでの具体的なコード記述方法について、さらに詳しい説明を求める質問が出ており、議論は継続中。テーマによって実装方法が異なるため、使用中のテーマに応じた対応が必要。
使用されるテーマによって違いがあると思いますが、概ね以下の方法で変更可能だと思われます。
https://help.shopify.com/ja/manual/products/collections/collection-layout#part-73df83b2cbe007dd
上記方法がご要望を満たさない場合は以下のいずれかになります。
- liquidファイルを編集して対応する
- アプリで対応する
liquidファイルを編集して対応する場合、テーマごとに用意されているサポートサイトやフォーラム(英語などの他言語含む)にカスタマイズの実例が書かれている可能性もありますので、そちら探されると良いかもしれません。
1 Like
質問の書き方が悪く恐れ入ります！
コレクション一覧に表示される、各商品のサムネイル画像を設定したいという意図での質問でございます。（そのままだとメディアの1枚目になっております）
何卒よろしくお願いいたします。
こちらこそ記載内容が不足しており申し訳ありません。
使用されるテーマによって違いがあると思いますが、概ね以下の方法で変更可能だと思われます。> > https://help.shopify.com/ja/manual/products/collections/collection-layout#part-73df83b2cbe007dd
テーマによっては、上記の「コレクションの記事のサムネイル」を設定することで、連動してコレクションの一覧の画像が変更されます。
参考URL: https://community.shopify.com/c/Shopify-Design/Debut-theme-Change-Collection-list-images/td-p/476238
「コレクションの記事のサムネイル」では変更できない場合、以下の方法などを検討する必要があると思います。
上記方法がご要望を満たさない場合は以下のいずれかになります。> > liquidファイルを編集して対応する> アプリで対応する
なお、軽く探したところ該当するアプリが見つかりませんでしたので、liquidファイルを編集することになる可能性が高いかもしれません。
1 Like
テーマによって画像の呼び出し方や条件の書き方が違うため、一概にこれが正解とは言えませんが、
既存のテーマの話ではなく、Liquidの話であればヒントを書きます。
まずはproductオブジェクトをJsonで出力してみてください。
これをみれば商品データの階層構造が分かるので、実現したいことへの理解が進むはずです。
{{ product | json }}
Jsonの構造に沿っていくとフューチャー画像が１つと、その他の画像のURLがあるはずです。
フューチャー画像はこう書くと出ます。
{{ product.featured_image }}
その他の画像が複数ある場合は、first、last、[n] でも選べます。
n値はメタフィールドで商品ごとに指定するほうが運用上使いやすいです。
{{ product.images.first }}
{{ product.images.last }}
{{ product.images[0] }}
{{ product.images[1] }}
{{ product.images[2] }}
3 Likes
Liquidでやる場合の別の方法もあります。（雑な回答ですいません）
1.各画像のaltに特殊文字(例：featured)を含む様にする
2.collections.liquidを編集します。
- 該当商品に表示する画像をforで探します
2.altにfeaturedを含む画像を表示します
少し処理が重くなりますが、よくある方法なので、汎用性の面ではおすすめです。
お世話になります。
Liquidでやる場合の別の方法もあります。（雑な回答ですいません）
1.各画像のaltに特殊文字(例：featured)を含む様にする
2.collections.liquidを編集します。
- 該当商品に表示する画像をforで探します
2.altにfeaturedを含む画像を表示します
こちらのコードの記載方法をご教授いただけませんでしょうか？
お手数をお掛け致しますが、よろしくお願い致します。