はじめに
ECサイトで期間限定商品や販売終了日が決まっている商品を扱う場合、「いつまで購入できるのか」を商品ページ上で明示することは、ユーザーの判断を助ける重要な情報になります。
しかしShopifyでは、商品公開日時の設定はできるものの、販売終了日を商品単位で管理し、それに応じて表示や購入可否を制御する標準機能は用意されていません。
そこで本記事では、商品ページに購入可能期限を表示し、期限を過ぎた場合は購入ボタンを無効化するカスタマイズをご紹介します。
メタフィールドの活用とLiquidの追加のみで実装できますので、ぜひ最後までご覧ください！
実装方法
1. 商品メタフィールドを作成
商品ごとに販売終了日を管理するため、専用のメタフィールドを設定します。
管理画面で設定 > メタフィールドとメタオブジェクト > 商品と進み、「定義を追加する」から下記内容で新規メタフィールドを作成します。
- 名前例：販売終了日
- ネームスペース：custom / キー：sales_end_date
- タイプ：日付
メタフィールドに日付が設定されていない商品は「期限なし」として扱われます。
2. 商品ページに販売終了日を表示するためのコードを組み込む
「main-product.liquid」の任意の箇所に下記Liquidコードを追加します。（画像はクリックで拡大します）
今回は、商品情報ブロックの上部（{%- for block in section.blocks -%}...{%- endfor -%}の直前）に追加しています。
{% assign sales_end_date = product.metafields.custom.sales_end_date %}
{% assign is_sales_expired = false %}
{% if sales_end_date %}
{% assign today_timestamp = 'now' | date: '%s' %}
{% assign end_timestamp = sales_end_date | date: '%s' %}
{% if today_timestamp > end_timestamp %}
{% assign is_sales_expired = true %}
{% endif %}
{% endif %}
{% if sales_end_date and is_sales_expired == false %}
<div class="sales-limit-info">
この商品は
<strong>{{ sales_end_date | date: "%Y年%-m月%-d日" }}</strong>
まで購入可能です。
</div>
{% endif %}
{% if is_sales_expired %}
<div class="sales-limit-expired">
この商品の販売期間は終了しました。
</div>
{% endif %}
3. 購入ボタンを制御する
購入期限を過ぎた場合に購入ボタンを無効化するため、同Liquidファイルの購入ボタン表示部分を下記の通り変更します。
{%- when 'buy_buttons' -%}
{%- render 'buy-buttons',
block: block,
product: product,
product_form_id: product_form_id,
section_id: section.id,
show_pickup_availability: true
-%}↓ 下記に変更
{%- when 'buy_buttons' -%}
{% unless is_sales_expired %} <!-- 販売中 -->
{%- render 'buy-buttons',
block: block,
product: product,
product_form_id: product_form_id,
section_id: section.id,
show_pickup_availability: true
-%}
{% else %} <!-- 販売終了時 -->
<button class="button button--disabled button--full-width" disabled>
現在購入できません
</button>
{% endunless %}
4. 商品ごとにメタフィールドを設定
販売終了日を設定したい商品のメタフィールドに任意の日付を設定し、保存します。
上記手順により、販売終了日より前は「この商品は○年○月○日まで購入可能です。」と表示され、販売終了日以降は「この商品の販売期間は終了しました。」と表示されます。
5. 実装時の注意点
- 管理画面での運用
期限延長は日付を変更、期限解除はメタフィールドを空欄にすることで管理が可能です。 - 在庫切れとの優先順位
在庫切れ・非公開など、Shopify標準の購入不可状態が優先されます。
本実装は「期限管理の補助」として扱うのが安全です。 - クイック追加ボタンの制御
テーマエディタにて、商品テンプレート > 商品グリッド > クイック追加 でスタンダードまたは一般を選択している場合は、「card-product.liquid」の該当箇所も編集する必要があります。
まとめ
いかがでしたか？
商品ページに購入可能期限を表示することで、ユーザーは購入判断がしやすくなり、期間限定商品の意図も正しく伝えることが可能になります。
EC運営においても、販売終了日の管理を商品単位で行える・表示と購入可否を自動で切り替えられるといったメリットがあります。
今回ご紹介した方法は、JavaScriptに依存せずLiquidの編集で実装できるシンプルな構成です。
期間限定商品や販売スケジュールが決まっている商品を扱う場合の一つの実装例として活用できます。
本カスタマイズを応用すれば、コレクションページでの期限表示なども可能です。
実装に関するご不明点やお悩み・お困りごとがある方はぜひお気軽にお問い合わせください！