特定のコレクションに含まれる商品画像にアイコンを重ねたい

[まみむめも]

こんにちは。
「Envy」というテーマで作成しているオンラインショップに
売上ではない、独自のルールで定めたランキングを（SNSでメンションされたランキング等）
Featured collectionとしてTOPページに表示させたいと思っています。

そこで、サムネイル画像の右上あるいは左上に順位の画像を重ねたいです。

過去の質問から、新着商品にNEWのアイコンをつける、などは拝見したのですが
指定の商品（指定のコレクションに含まれるもの）に上記の対応をしたい場合
どのようにすればよいか、ご教示いただけますでしょうか。

よろしくお願いします。

[株式会社フルバランス]

お世話になっております。

例えば、商品がFeaturedという名前のコレクションに属しているとき、アイコンを表示しようとすると、以下のように条件分岐すればできるかと思います。

{% if product.collections contains 'featured' %}
　アイコンのHTML
{% endif %}

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

[まみむめも]

ありがとうございます。

こちらは、どのリキッドに記載すればよろしいでしょうか？

また、説明が不足していたかもしれませんが

商品ページの画像はそのままに、TOPページにFeatured collectionとして表示させる画像のみにアイコンを重ねたいと思っています。

その場合でも有効ですか？

[Qcoltd]

@まみむめも 

ご質問いただいていている、ランキングの画像を重ねたい件ですが、

ご使用のテーマが有料テーマのため、トライアルではliqiudの編集ができませんので、

CSSで調整を行いましたが保存できないため、あくまでプレビュー上での確認となります。

表示しない場合もあること、ご了承ください。

オンラインストア > カスタマイズより、

左メニューのカスタマイズCSSに下記サンプルcssを追加いただければ、

添付画像のように表示時するかと思われます。

サンプルcss

.homepage-featured-products .grid__item {
  position: relative;
}
.homepage-featured-products .grid__item:after {
  position: absolute;
  content: '';
  width: 30px;
  height: 30px;
  color: #000;
  top: 10px;
  left: 25px;
  z-index: 3;
  background-size: contain;
}
.homepage-featured-products .grid__item:nth-child(1):after {
  background-image: url('表示したい画像のURL');
}
.homepage-featured-products .grid__item:nth-child(2):after {
  background-image: url('表示したい画像のURL');
}
.homepage-featured-products .grid__item:nth-child(3):after {
  background-image: url('表示したい画像のURL');
}
.homepage-featured-products .grid__item:nth-child(4):after {
  background-image: url('表示したい画像のURL');
}
.homepage-featured-products .grid__item:nth-child(5):after {
  background-image: url('表示したい画像のURL');
}

Featured collectionに表示しているものに、左から順に5つ表示するように作成していますが、

個数はご調整ください。

[まみむめも]

@Qcoltd 
いつもありがとうございます・・！
なぜか画像のURLがエラーが出てしまうのですが
絶対パスだとダメなんですか？
申し訳ありませんがご教示いただけますと幸いです。

[Qcoltd]

@まみむめも

プレビュー上で試したところ、

Shopifyにアップロードした画像は絶対パスで問題ありませんでしたが、

それでもエラーが出てしまうのでしたら、

custom.cssなどのファイルに記載いただくのも一つの方法かと思われます。

ご参考まで。

(キュー小坂)