FROM CACHE - jp_header

コレクション一覧のサムネイル画像を任意で設定したい

rtrtjp
訪問者
2 0 0

コレクション一覧のサムネイルはメディアの最初のものになっていますが、
Wordpressのアイキャッチ画像のように任意に設定することは可能でしょうか。

5件の返信5

Jizo_Inagaki
Shopify Partner
990 373 690

使用されるテーマによって違いがあると思いますが、概ね以下の方法で変更可能だと思われます。

https://help.shopify.com/ja/manual/products/collections/collection-layout#part-73df83b2cbe007dd

上記方法がご要望を満たさない場合は以下のいずれかになります。

  • liquidファイルを編集して対応する
  • アプリで対応する

liquidファイルを編集して対応する場合、テーマごとに用意されているサポートサイトやフォーラム(英語などの他言語含む)にカスタマイズの実例が書かれている可能性もありますので、そちら探されると良いかもしれません。

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
rtrtjp
訪問者
2 0 0

質問の書き方が悪く恐れ入ります!
コレクション一覧に表示される、各商品のサムネイル画像を設定したいという意図での質問でございます。(そのままだとメディアの1枚目になっております)
何卒よろしくお願いいたします。

Jizo_Inagaki
Shopify Partner
990 373 690

こちらこそ記載内容が不足しており申し訳ありません。

使用されるテーマによって違いがあると思いますが、概ね以下の方法で変更可能だと思われます。

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ファイルを編集することになる可能性が高いかもしれません。

 

 

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
_osamu_iwasaki_
Shopify Partner
185 47 193

テーマによって画像の呼び出し方や条件の書き方が違うため、一概にこれが正解とは言えませんが、
既存のテーマの話ではなく、Liquidの話であればヒントを書きます。

まずはproductオブジェクトをJsonで出力してみてください。
これをみれば商品データの階層構造が分かるので、実現したいことへの理解が進むはずです。

 

{{ product | json }}

 

Jsonの構造に沿っていくとフューチャー画像が1つと、その他の画像のURLがあるはずです。
フューチャー画像はこう書くと出ます。

 

{{ product.featured_image }}

 

その他の画像が複数ある場合は、first、last、[n] でも選べます。
n値はメタフィールドで商品ごとに指定するほうが運用上使いやすいです。

 

{{ product.images.first }}

{{ product.images.last }}

{{ product.images[0] }}

{{ product.images[1] }}

{{ product.images[2] }}

 

 

株式会社フルバランス
Shopify Partner
1441 504 644

Liquidでやる場合の別の方法もあります。(雑な回答ですいません)

1.各画像のaltに特殊文字(例:featured)を含む様にする

2.collections.liquidを編集します。

 1. 該当商品に表示する画像をforで探します

    2.altにfeaturedを含む画像を表示します

 

少し処理が重くなりますが、よくある方法なので、汎用性の面ではおすすめです。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス