# 複数バリエーションを持つ商品の販売前と後の、「カートに入れる」ボタンの文字を変更したい

**URL:** <https://community.shopify.com/t/topic/414949>\
**Category:** 技術的なQ＆A\
**Created:** [May 19, 2025, 5:21am UTC](https://community.shopify.com/t/topic/414949 "2025-05-19T05:21:38Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

予約商品の販売期間に応じて「カートに入れる」ボタンのテキストを変更する実装で問題が発生しています。

**問題の詳細:**
- 商品メタフィールドで販売期間前は「COMING SOON」、販売期間後は「FINISHED」と表示する設定
- 初回表示では正常に動作するが、バリエーション選択を変更すると「SOLD OUT」に戻ってしまう
- ページを更新すれば元に戻る
- Dawnテーマを使用

**原因:**
Dawnテーマではバリエーション変更時にJavaScriptでコンテンツを書き換えるため、Liquidによる設定が上書きされる。

**提案された解決策:**
1. JavaScriptも併せてカスタマイズし、動的な書き換えに対応
2. バリエーション変更時にページ遷移させる(非推奨)
3. 専用アプリ(RuffRuff Selling Periods)の導入を推奨

**追加の注意点:**
Shopifyには特殊なURLで直接カートに商品を追加できる仕組みがあるため、その対策も必要。質問者は提案を受け入れ、テストを進める方針。

<div class="post-metadata">

**Author:** ![jaguar1](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@jaguar1](https://community.shopify.com/u/jaguar1)\
**Post date:** [May 19, 2025, 5:21am UTC](https://community.shopify.com/t/topic/414949/1 "2025-05-19T05:21:38Z")

</div>

ある特定の予約商品に販売期間前はカート機能をOFF、販売期間中はON、販売期間後はOFFといったものを商品メタフィールドを使って設定しています。

機能自体は正常に動作するのですが、「カートに入れる」ボタンの文字が販売期間前のOFFの時は「COMING SOON」、販売期間後のOFFの時は「FINISHED」と表示したいのですが、前も後もファーストセレクトではちゃんと表示されているものの、バリエーションの選択を変えると、デフォルト設定の「SOLD OUT」に切り替わってしまいます。ページ更新すれば「COMING SOON」や「FINISHED」に戻ります。

当方、Dawnテーマを使用しています。

下記、記述しているコードになります。

原因おわかりになりますでしょうか？

ぜひご教授いただければと思い、質問させていただきます。

何卒宜しくお願い致します。

{%- assign saleStartDate = product.metafields.custom.saleStartDate | date: “%s” -%}  
{%- assign saleEndDate = product.metafields.custom.saleEndDate | date: “%s” -%}  
{%- assign saleStartDateValue = product.metafields.custom.saleStartDate.value -%}  
{%- assign saleEndDateValue = product.metafields.custom.saleEndDate.value -%}  
{%- assign nowTime = “now” | date: “%s” -%}  
{%- assign startTimeLag = nowTime | minus: saleStartDate -%}  
{%- assign endTimeLag = nowTime | minus: saleEndDate -%}  
{%- assign stringNameAdd = ‘’ -%}  
{%- assign stringBuy = ‘’ -%}  
{%- if saleStartDateValue == null and saleEndDateValue == null -%}  
{%- assign stringNameAdd = ‘name=“add”’ -%}  
{%- assign stringBuy = ‘buy’ -%}  
{%- elsif startTimeLag \>= 0 and saleEndDateValue == null -%}  
{%- assign stringNameAdd = ‘name=“add”’ -%}  
{%- assign stringBuy = ‘buy’ -%}  
{%- elsif saleStartDateValue == null and endTimeLag \<= 0 -%}  
{%- assign stringNameAdd = ‘name=“add”’ -%}  
{%- assign stringBuy = ‘buy’ -%}  
{%- elsif startTimeLag \>= 0 and endTimeLag \<= 0 -%}  
{%- assign stringNameAdd = ‘name=“add”’ -%}  
{%- assign stringBuy = ‘buy’ -%}  
{%- endif -%}

\<button  
id=“ProductSubmitButton-{{ section\_id }}”  
type=“submit”  
{{ stringNameAdd }}  
class=“product-form\_\_submit button button–full-width {% if show\_dynamic\_checkout and product.selling\_plan\_groups == empty %}button–secondary{% else %}button–primary{% endif %}”  
{%- if stringBuy != ‘buy’ or product.selected\_or\_first\_available\_variant.available == false  
or quantity\_rule\_soldout  
or product.selected\_or\_first\_available\_variant == null  
-%}  
disabled  
{%- endif -%}

> 

{%- if stringBuy == 'buy' -%} {%- if product.selected\_or\_first\_available\_variant == null -%} {{ 'products.product.unavailable' | t }} {%- elsif product.selected\_or\_first\_available\_variant.available == false or quantity\_rule\_soldout -%} {{ 'products.product.sold\_out' | t }} {%- else -%} {{ 'products.product.add\_to\_cart' | t }} {%- endif -%} {%- elsif startTimeLag \<= 0 -%} COMING SOON {%- elsif endTimeLag \>= 0 -%} FINISHED {%- endif -%} {%- render 'loading-spinner' -%}

---

<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:** [May 20, 2025, 1:56am UTC](https://community.shopify.com/t/topic/414949/2 "2025-05-20T01:56:00Z")

</div>

@jaguar1 様

Dawnを利用されているとのことですので、

商品詳細ページでのバリエーション変更は、

ページ遷移ではなく、JavaScriptによるコンテンツの書き換えによってなされます。

JavaScriptで変更しているので、Liquidによる直接的な変更はなかったことにされます。

3つほどカスタマイズする方法があります。

1. LiquidだけでなくJavaScriptも変更し、JavaScriptによるコンテンツの書き替えに対応する
2. バリエーション変更時に、ページ遷移するようにカスタマイズしてしまう
3. アプリを導入する

2は紹介はしましたがオススメできないので、

開発パートナーがいらっしゃるなら1が良いです。

ちなみにですが、

Shopifyには、下記のようにステータスがアクティブで商品在庫があればカートに商品を入れることができるURLが存在します。

[https://techlab.q-co.jp/articles/155/](https://techlab.q-co.jp/articles/155/)

1の方法でも、カスタマイズを重ねれば対応できますが、

個人的におすすめなのは3です。

Shopifyコミュニティでも活動されているTsunさんのアプリが良いかと思います。

[https://ruffruff.app/pages/ruffruff-selling-periods](https://ruffruff.app/pages/ruffruff-selling-periods)

[https://community.shopify.com/user/1283410](https://community.shopify.com/user/1283410)

※おそらく上記のURL操作によるカート投入による購入も防げたと思うのですが、詳細はTsunさんにお問い合わせいただくのが良いです。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![jaguar1](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@jaguar1](https://community.shopify.com/u/jaguar1)\
**Post date:** [May 21, 2025, 1:05am UTC](https://community.shopify.com/t/topic/414949/3 "2025-05-21T01:05:49Z")

</div>

キュー田辺様

ご返信が遅くなり大変申し訳ございません。

ご返信いただきありがとうございます。承知いたしました。

また、特殊なURLが存在することもご教授いただきありがとうございます。

実際に問題がないかテストを重ねて対応していきたいと思います。

ありがとうございました。