# 特定の商品にのみ「販売期間前」という表示をしたい

**URL:** <https://community.shopify.com/t/topic/372265>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [November 8, 2024, 8:47am UTC](https://community.shopify.com/t/topic/372265 "2024-11-08T08:47:50Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

**課題:** Shopifyテーマ「DAWN 11.0.0」で、在庫0の商品のうち特定の商品だけ「売り切れ」表示を「販売期間前」に変更したい。

**解決方法:**

- 対象商品に「販売期間前」タグを追加
- 以下3つのファイルに条件分岐コードを追加:
  - `buy-buttons.liquid`: 購入ボタンの表示制御
  - `price.liquid`: 価格横の表示制御
  - `card-product.liquid`: コレクション一覧での表示制御

**実装内容:**

商品タグに「販売期間前」が含まれ、かつ在庫が0の場合に「販売期間前」と表示する条件分岐を各ファイルに追加。具体的なコード例と挿入位置が画像付きで提示されている。

**結果:**

質問者は提示された方法で商品詳細ページとコレクション一覧ページの両方で「販売期間前」表示に成功し、問題が解決した。

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [November 8, 2024, 8:47am UTC](https://community.shopify.com/t/topic/372265/1 "2024-11-08T08:47:50Z")

</div>

使用テーマ：DAWN 11.0.0

在庫０の商品のうち、特定の商品だけ「販売期間前」という表示にしたいです。

販売期間前表示をしたい商品のタグに「販売期間前」を追加してみました。

Sectionのmain-product-liquidが商品詳細ページと考えて、ここに条件分岐のコードを追加すれば解決

できるのではないかと考えました。

「販売期間前」というタグがあった場合は在庫０でも完売表示ではなく任意の表示にする、というコードを追加したく、どなたかこの条件のコードがわかる方がいらっしゃいましたらご教示いただきたく存じます。

また、そもそもやり方が間違っておりましたら正しいやり方について教えていただけると幸いです。

---

<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:** [November 11, 2024, 9:37am UTC](https://community.shopify.com/t/topic/372265/2 "2024-11-11T09:37:03Z")

</div>

@uf2 様

ご質問いただいている、販売期間前を表示したい件ですが、

こちらは、価格の右側と購入ボタンの『 **売り切れ** 』表示を『 **販売期間前** 』としたいとご要望と認識し回答させていただきます。

下記変更方法はDawn11.0.0のデフォルトを前提としています。

### **変更方法**

1.管理画面のテーマ \> 『•••』 \> コードを編集をクリック

 ![Qcoltd_0-1731317012727.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/c/2c52a46cae25e08b5afd8434c729e6518b3c3331.jpeg)

2.テーマを絞り込むに『 **buy-buttons.liquid** 』と『 **price.liquid** 』入力しそれぞれのファイル開く

3.『 **buy-buttons.liquid** 』の66行目と67行目の間に下記コードを追加

```markup
{%- if product.tags contains '販売期間前' and product.variants.first.inventory_quantity == 0 -%}

{%- else -%}

```

 ![Qcoltd_1-1731317278975.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/a/bac4295e39cc214c813ecec6a1193bc0aeffd98c.png)

4.『 **buy-buttons.liquid** 』の112行目に下記コードを追加

```markup
{%- endif -%}

```

 ![Qcoltd_2-1731317437085.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/c/9ca066e1fb067becaceddcb4b6bf1a5063801dc1.png)

5.『 **price.liquid** 』の124行目と125行目の間に下記コードを追加

```markup
{%- if product.tags contains '販売期間前' and product.variants.first.inventory_quantity == 0 -%}
販売期間前
{%- else -%}

```

 ![Qcoltd_3-1731317552037.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/c/3c711ba1cfce15111149d40e6ba5aee5c63bb339.png)

6.『 **price.liquid** 』の129行目に下記コードを追加

```markup
{%- endif -%}

```

 ![Qcoltd_4-1731317625529.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/b/bbfc3d41631cf3d2673d529c05eda8fac88a65f5.png)

以上で、在庫が **0** で商品タグ『 **販売期間前** 』付いている商品は下記のように、表示されるかと思います。

※Shopifyのキャッシュで切り替わりに時間がかかる場合がありますので、ご了承ください。

 ![Qcoltd_5-1731317698528.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/1/41ba565eb5ccd8be7b9dde64bc3efc52b3b5f8f3.png)

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [November 13, 2024, 7:40am UTC](https://community.shopify.com/t/topic/372265/3 "2024-11-13T07:40:07Z")

</div>

株式会社Q

小坂 様

ご丁寧に画像付きで解説いただき誠にありがとうございます。

ご指南いただいた通り編集したところ、無事に「販売開始前」表示をすることができました…！

上記は商品詳細ページに入った際の、価格横と数量下の表示に対応しているかと存じますか、

コレクションで商品が並んでいる際の、画像左下に表示される「売り切れ」表示も同様に

「販売開始前」にしたいと考えております。

この場合でしたらどこのファイルを編集すればよいでしょうか…？

内容的にprice-liquidで張り付けたコードを流用できるのではないかと思ったのですがやり方がわからず…。

お忙しいところ重ねて質問してしまい大変恐縮なのですが、お手すきの際にご確認いただけましたら幸いです。

---

<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:** [November 13, 2024, 10:09am UTC](https://community.shopify.com/t/topic/372265/4 "2024-11-13T10:09:45Z")

</div>

@uf2 様

ご質問いただきました、一覧の「売り切れ」部分を「販売開始前」に変更したい件ですが、

『 **card-product.liquid** 』が対象のファイルとなります。

ファイル内で、下記二つのコードを

```markup
{{- 'products.product.sold_out' | t -}}

```

```markup
{{ 'products.product.sold_out' | t }}

```

下記としていただければと思います。

```markup
{%- if card_product.tags contains '販売期間前' and card_product.variants.first.inventory_quantity == 0 -%}
販売期間前
{%- else -%}
{{- 'products.product.sold_out' | t -}}
{%- endif -%}

```

```markup
{%- if card_product.tags contains '販売期間前' and card_product.variants.first.inventory_quantity == 0 -%}
販売期間前
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}

```

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [November 14, 2024, 6:09am UTC](https://community.shopify.com/t/topic/372265/5 "2024-11-14T06:09:04Z")

</div>

小坂様

ご回答いただきありがとうございます。

無事「販売期間前」表示に切り替えることができました。

ずっとやり方がわからず困っていたため大変助かりました。この度は誠にありがとうございました。