# セールバッジの代わりにオフ率を表示する方法について

**URL:** <https://community.shopify.com/t/topic/282607>\
**Category:** 技術的なQ＆A\
**Created:** [January 6, 2024, 8:49am UTC](https://community.shopify.com/t/topic/282607 "2024-01-06T08:49:25Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

ユーザーがShopifyテーマ「DAWN 12.0.0」で、セールバッジの代わりに割引率（オフ率）を全ページに表示したいと相談。

**現状と課題：**
- 以前はアプリ「Prime Product Badges Stickers」を使用していたが、フィルターアプリとの相性問題で表示速度が低下
- 商品ページ（price.liquid）には割引率コードの実装に成功
- card-product.liquidに同様のコードを追加したが、特集コレクションでは「%OFF」のみ表示され、割引率の数値が出ない
- 商品詳細ページ下部の特集コレクションセクションでは、該当商品の割引率が全商品に誤って反映される問題も発生

**回答内容：**
新垣氏が、liquidオブジェクトと変数の特性理解が必要と指摘。商品詳細ページではproductオブジェクトに該当商品情報が格納され、分岐条件がないため特集コレクション内の全商品に同じ割引率が表示されると説明。

解決には各ページ・セクション内でロジックを組む必要があり、ChatGPTへの相談や専門家への依頼を推奨。

**結果：**
ユーザーは専門家に個別相談することを決定し、スレッドは終了。

<div class="post-metadata">

**Author:** ![itawasaaa](https://avatars.discourse-cdn.com/v4/letter/i/71e660/32.png) [@itawasaaa](https://community.shopify.com/u/itawasaaa)\
**Post date:** [January 6, 2024, 8:49am UTC](https://community.shopify.com/t/topic/282607/1 "2024-01-06T08:49:25Z")

</div>

はじめまして、タイトルの通り、セールバッジの代わりにオフ率を表示する方法についての質問です。

現在テーマは" **DAWN12.0.0**"を利用しています。

私自身はHTML/CSSをいじれる程度の知識しか持ち合わせておりません。

**特集コレクション、商品一覧ページ、検索ページなど、セクションやテンプレート問わず価格が表示されるすべての場所に割引率のバッジを表示したい** というのがご相談したい内容となります。

以前までバッジの表示についてはPrime Product Budges Stickersというアプリを使用しておりましたが、フィルターアプリなどとの相性が悪いせいか表示速度が激落ちしてしまったため、今後は必要最低限のバッジを直にテーマに打ち込もうと思っております。

ネット上の情報などを元に、商品ページのプライス横には下記のコードを **price.liquid** 内に実装することができました。

```markup
{%- liquid assign discountrate = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round -%}

.
.
.

      {{ discountrate }}%OFF
    

```

しかしながら、以下の通り **card-product.liquid** に同様のコードを入力すると、特集コレクションのセクションには\*\*「%OFF」しか表示されませんでした。\*\*

```markup
{%- liquid assign discountrate = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round -%}

.
.
.

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {%- if card_product.quantity_price_breaks_configured? -%}
              
                {{ 'products.product.volume_pricing.note' | t }}
              

            {%- endif -%}

             {%- if card_product.compare_at_price > card_product.price and card_product.available -%}
              
                {{ discountrate }}%OFF
              
               {%- endif -%}

```

また、商品ページの下部にも特集コレクションのセクションを設置しているのですが、そちらでは該当掲載商品の割引率が特集コレクション内の全商品に反映されてしまいます。

冒頭に記載したように、コレクションの商品グリッドや検索ページなど、全てのプライス横にバッジを表示したいのですが、 **ここまでできているのだったら自力で解決できそうな問題なのか、もしくはShopify Expertsの方々に依頼した方が良いものか** 、ご回答いただけましたら幸いです。

（DAWNのアップデートによってどこら辺の記述方法が変化しているかなどもわからない素人です。）

よろしくお願い申し上げます。

---

<div class="post-metadata">

**Author:** ![NIIGAKI\_HYUGA](https://avatars.discourse-cdn.com/v4/letter/n/f05b48/32.png) [@NIIGAKI\_HYUGA](https://community.shopify.com/u/NIIGAKI_HYUGA)\
**Post date:** [January 9, 2024, 2:45am UTC](https://community.shopify.com/t/topic/282607/2 "2024-01-09T02:45:43Z")

</div>

@itawasaaa

初めまして。新垣です。

自力で解決するには、liquidオブジェクトや変数の特性について理解しておく必要があります。

例えば、

> 商品ページの下部にも特集コレクションのセクションを設置しているのですが、そちらでは該当掲載商品の割引率が特集コレクション内の全商品に反映されてしまいます。

商品詳細ページでは、該当掲載商品の情報がproductオブジェクトに格納されます。discountrate変数には分岐条件が設定されていないので、該当掲載商品の情報がproductオブジェクトに格納されたまま、特集コレクションセクションでも表示されてしまいます。

これを回避するには、Webコンポーネントの考え方も混ぜながらprice.liquid内で全てのページ内、セクション内で機能するロジックを組む必要があります。（それぞれのページで作成しても良いが、保守運用上好ましくない）

ChatGPTに聞いてみてできなければ、内容的にも難しいので専門の方に依頼するのをお勧めいたします！

（差し出がましいかもですが、GitHubを使ってないのであれば必ずテーマを複製してからコード編集することをおすすめします！）

以上、参考になりましたら幸いです。

---

<div class="post-metadata">

**Author:** ![itawasaaa](https://avatars.discourse-cdn.com/v4/letter/i/71e660/32.png) [@itawasaaa](https://community.shopify.com/u/itawasaaa)\
**Post date:** [January 15, 2024, 7:31am UTC](https://community.shopify.com/t/topic/282607/3 "2024-01-15T07:31:00Z")

</div>

丁寧なご返信ありがとうございます。  
リキッドの変数が絡んでくると手に負えないので、専門の方に個別に相談してみます！