販売期間を設定する方法
期間外は自動でカートボタンを無効化

Shopifyのデフォルト仕様では、公開日がそのまま販売開始日となるため、販売開始前に商品ページだけを先に表示させたり、販売終了後に自動で商品を非公開にしたりすることはできません。

そのため、期間限定販売を行いたい場合や販売開始前から商品ページを公開して告知したい場合には、アプリを導入するか、テーマを編集して独自に機能を追加する必要があります。

本記事では、アプリを使わずにコード編集で販売期間を設定する方法をご紹介します。
「費用を抑えて機能を実装したい」「自由度の高いカスタマイズをしたい」という方に最適な方法です。

今回のゴールは

アプリを使わずに販売期間を設定

好きなように設定できたり初期費用や月額費用がかからない反面、アプリを使用しない場合はテーマファイルに自分でコードを書く必要があるため、テーマをアップデートする場合には新たに追記の必要が発生します。

その点は留意して方法を選択しましょう。

メリット	デメリット
費用がかからない	テーマアップデート時に手動更新が必要
カスタマイズの自由度が高い

完成イメージ

販売期間設定を行うメリット

• 販売終了時間に操作する手間や遅れるリスクを削減
  該当機関に管理画面で待機する必要なし
• 販売開始までに告知することで予め流入を集めやすい
  販売開始してすぐに売れる状態を予め作ることで売上UP
• お気に入り機能と販売開始告知との合わせ使いでCVRアップ
  販売開始前にお気に入りに入れ、開始後に通知をメールに飛ばすことで購入につなげる

販売期間設定を行う方法

やり方は2つありますが、今回は汎用性の高い①のコードを具体的に紹介いたします。

①：メタフィールドを新設＋管理画面から対象商品の販売期間設定＋該当ファイルのコード編集

②：該当ファイルのコード編集

本記事のコードはShopify標準テーマ「Dawn」で確認しています。別テーマの場合はファイル構造が異なる可能性があるため、コード挿入位置を調整してください。

① メタフィールド新設＋該当ファイルのコード編集方法

コード編集するファイル

• snippets/buy-buttons.liquid

流れは以下の通りでシンプル且つ簡単です。

１．メタフィールドの設定

設定 > メタフィールドとメタオブジェクト > 商品 > 「定義を追加する」

開始時間と終了時間の2種類作成します。

名前は任意でOKですが、ここでは次の2.のコード内で使用している名前に合わせて

開始時間は「start_date」、終了時間は「end_date」と置きました。

タイプ：日付と時刻、単一の値

保存したのち、対象の商品ページ内のメタフィールドに開始時間と終了時間をそれぞれもしくは片方記入します。

２．カートに入れるボタンの無効化設定

• <button>直前に以下のコードを追記

{%- assign now = ‘now’ | date: “%s” -%} {%- assign start = product.metafields.custom.start_date | date: “%s” -%} {%- assign end = product.metafields.custom.end_date | date: “%s” -%} {%- assign out_of_period = false -%} {%- if start and now < start -%} {%- assign out_of_period = true -%} {%- endif -%} {%- if end and now > end -%} {%- assign out_of_period = true -%} {%- endif -%} コピー

• 既存のボタンにすでにある disabled 判定の if 文に 「or out_of_period」を追加

↓変更後

{% if product.selected_or_first_available_variant.available == false
  or quantity_rule_soldout
  or product.selected_or_first_available_variant == nil
  or out_of_period //追記文
%}
  disabled
{% endif %}

• ボタンテキストの条件に「販売期間外」を追加

条件追記とともに、ifをelsifに変えることもお忘れなく。

<span>
{%- if out_of_period -%} //追記文
販売期間外です //追記文
{%- elsif product.selected_or_first_available_variant == nil -%}

３．今すぐ購入ボタンの非表示設定

通常「今すぐ購入」ボタンも表示させている場合には、以下のように「]and out_of_period == false」を追記。

{%- if show_dynamic_checkout and out_of_period == false -%}
{{ form | payment_button }}
{%- endif -%}

以上です。

Shopifyの販売期間設定まとめ

shopifyのDawnテーマでアプリなしで販売期間設定を行う方法を紹介しました。事前に商品ページを公開しておきつつ、カートはしめておきたい場合や期間終了後、自動的にカートをしめたい場合などにご活用いただけます。複数商品で異なる販売期間を設定したい場合も都度テーマファイルを編集するのではなく、各商品ページのメタフィールドで設定できるようにした管理しやすい方法です。費用をかけず、カスタマイズの自由度も高いうえ、初心者でも簡単にできるコード編集のやり方をまとめました。