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

**URL:** <https://community.shopify.com/t/topic/211016>\
**Category:** 技術的なQ＆A\
**Created:** [April 25, 2023, 6:55am UTC](https://community.shopify.com/t/topic/211016 "2023-04-25T06:55:13Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

「Envy」テーマを使用したShopifyストアで、TOPページのFeatured collectionに表示される商品画像にランキングアイコンを重ねる方法についての質問。

**提案された解決策：**
- 最初にLiquidコードでの条件分岐が提案されたが、質問者はTOPページのコレクション表示にのみアイコンを重ねたいと補足
- Qcoltdが、有料テーマのためLiquid編集ができないことを説明し、CSSでの代替案を提示
- カスタマイズCSSに追加するサンプルコードを提供（`:after`疑似要素と`:nth-child`セレクタを使用）
- 左から順に5つの商品に異なるアイコン画像を表示する実装例を提示

**現在の状況：**
- 質問者が画像URLでエラーが発生し、絶対パスの使用について確認中
- Qcoltdは、Shopifyにアップロードした画像は絶対パスで問題ないと回答
- エラーが続く場合は、custom.cssなどのファイルに記載する方法も提案

<div class="post-metadata">

**Author:** ![Anonymous\_336adae115cb02c300837a5b8ca78c8c](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@Anonymous\_336adae115cb02c300837a5b8ca78c8c](https://community.shopify.com/u/Anonymous_336adae115cb02c300837a5b8ca78c8c)\
**Post date:** [April 25, 2023, 6:55am UTC](https://community.shopify.com/t/topic/211016/1 "2023-04-25T06:55:13Z")

</div>

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

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

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

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [April 25, 2023, 8:39am UTC](https://community.shopify.com/t/topic/211016/2 "2023-04-25T08:39:23Z")

</div>

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

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

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

```

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

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

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

---

<div class="post-metadata">

**Author:** ![Anonymous\_336adae115cb02c300837a5b8ca78c8c](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@Anonymous\_336adae115cb02c300837a5b8ca78c8c](https://community.shopify.com/u/Anonymous_336adae115cb02c300837a5b8ca78c8c)\
**Post date:** [April 25, 2023, 12:33pm UTC](https://community.shopify.com/t/topic/211016/3 "2023-04-25T12:33:42Z")

</div>

ありがとうございます。

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [April 27, 2023, 11:06am UTC](https://community.shopify.com/t/topic/211016/4 "2023-04-27T11:06:33Z")

</div>

@Anonymous_336adae115cb02c300837a5b8ca78c8c

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

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

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

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

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

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

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

 ![Qcoltd_0-1682593021830.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/a/7a8165a85bc072de6c886a9a437894ced1d115bc.png)

**サンプルcss**

```markup
.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つ表示するように作成していますが、

個数はご調整ください。

---

<div class="post-metadata">

**Author:** ![Anonymous\_336adae115cb02c300837a5b8ca78c8c](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@Anonymous\_336adae115cb02c300837a5b8ca78c8c](https://community.shopify.com/u/Anonymous_336adae115cb02c300837a5b8ca78c8c)\
**Post date:** [April 27, 2023, 2:32pm UTC](https://community.shopify.com/t/topic/211016/5 "2023-04-27T14:32:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [April 28, 2023, 1:10am UTC](https://community.shopify.com/t/topic/211016/6 "2023-04-28T01:10:23Z")

</div>

@Anonymous_336adae115cb02c300837a5b8ca78c8c

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

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

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

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

ご参考まで。

(キュー小坂)