Shopifyで販売開始時間を指定する方法。発売時刻ぴったりに自動で売り始める

アパレルやスニーカー、グッズ販売では「◯月◯日 0時発売」のように発売日時を予告して、その瞬間を待ってもらう売り方が定番です。Shopifyの標準機能でも、商品の公開日時を予約すれば発売時刻に自動で売り始められます。ただし標準の予約は発売まで商品ページを隠しておく仕組みなので、「発売前からページを見せて告知し、時刻が来たら買えるようにする」には別の組み方が要ります。

この記事では、標準の公開予約の手順と、それで足りない場合の組み方を整理します。

Shopify標準でよくある2つのやり方と、その穴

商品の公開日時を予約する（標準機能）

Shopifyには、商品をオンラインストアに公開する日時を予約する機能が標準で入っています。発売時刻に誰かが管理画面で公開ボタンを押す必要はありません。手順は次のとおりです。

管理画面で「商品管理」を開く
対象の商品を開く
商品ステータスの欄で次を行う
1. ステータスが「アクティブ」になっていることを確認する
2. 公開の欄で、オンラインストアの横にあるカレンダーのアイコンを押す
3. 公開する日付と時刻を選ぶ（時刻は 1:23 p.m. のように分単位で入力できます）
4. 任意: ほかの販売チャネルにも予約を入れる場合は、そのチャネルの横のカレンダーのアイコンから同じように日時を選ぶ
公開を予約するボタンを押す
保存する

予約の前に、ストアの一般設定でタイムゾーンが日本になっているかを確認してください。Shopifyは、予約した時刻どおりに公開されるようにこの設定を確認するよう案内しています。

注意点が3つあります。

商品がアクティブのときだけ動きます。予約した時刻に商品が下書きのままだと公開されません
バリアント単位では予約できません。「新色だけ後から発売」のような出し分けは、この機能ではできません
Shopアプリでは使えません。予約が効くのは対応している販売チャネルだけです

この方法で「発売時刻に自動で売り始める」ことはできます。ただしShopifyの説明どおり、これは予約した日時まで商品をストアから隠しておく機能です。予約日時までは商品ページがストア上で表示されないので、発売前の告知ページとしては使えず、「発売までの期待を高める」期間がまるごと使えません。発売前からページを見せて告知に使いたいなら、このあとの方法になります。

出典: Shopifyヘルプセンター「Future publishing」

商品は公開しておき、案内文だけ「◯日発売」と書く

商品ページを先に公開して告知に使えるようにする方法です。ただし購入ボタンは生きているので、発売前に買えてしまいます。フライング購入をあとからキャンセルして回る作業は、お客様との関係の面でもCSコストの面でも避けたいところです。

テーマを編集して自分で組む方法と、その限界

アプリを使わず、商品メタフィールドに発売日時を持たせてテーマのLiquidで購入ボタンを出し分ける方法もあります。検索で見かけることが多い方法なので、先に整理しておきます。

組み方はこうです。商品メタフィールド（例: custom.launch_at、型は「日付と時刻」）に発売日時を入れておき、テーマ側で現在時刻と比較して、発売前は購入フォームを出さず、発売後は通常どおり出します。

このとき、日時の比較は必ずUnixタイムスタンプに変換してから行います（| date: '%s' | times: 1 を通してから比較する、ということです）。日時オブジェクトと文字列を直接比較すると、ストアフロントで comparison of ActiveSupport::TimeWithZone with String failed というLiquidエラーになります。

もうひとつ、実装で必ず踏む落とし穴があります。購入フォームは自分で組み直さないでください。 テーマにもとから入っている購入ブロック（Dawnなら buy-buttons を呼び出している箇所。テーマによって名前が違います）を、発売時刻の条件でそのまま囲みます。form 'product' から書き起こしてバリアントIDを hidden input に固定すると、色やサイズを選べない商品ページになります。触るのは「購入ブロックを出すか、発売日時の案内を出すか」の分岐だけにしてください。

この方法の利点は、月額費用がかからないことです。テーマを触れる人がいて、発売時刻が「だいたいその頃」でよいなら、これで足ります。

ただし「時刻ぴったり」には向きません

Liquidの 'now' は、お客様がページを見た瞬間の時刻ではありません。Shopifyの公式ドキュメントは date フィルタの説明でこう明記しています。

The timestamp will reflect the time that the Liquid was last rendered. Because of this, the timestamp might not be updated for every page view, depending on the context and caching.

つまり 'now' が返すのは「そのページのHTMLが最後に生成された時刻」で、閲覧した時刻と一致するとは限りません。発売時刻をまたいでもキャッシュされた古いHTMLが返れば、購入ボタンは出てこないことになります。

これが痛いのは、まさにアクセスが集中する新作ドロップの瞬間です。発売時刻をまたいだのにキャッシュされた古いHTMLが返り、「人によってはボタンが出ていない」が起きると、そのままカゴ落ちになります。

キャッシュの影響を避けるなら、時刻の判定はレンダリング時ではなくブラウザ側で継続的に行うことになります（このあと紹介するアプリもこの方式です）。ただしその場合、判定に使われるのは閲覧者の端末時計です。そしてどちらの方式も、購入ボタンの表示を制御しているだけで、サーバー側で購入そのものを成立しないようにしているわけではありません。

つまり「発売前に見せない」と「発売前に絶対に買わせない」は別のレイヤーの話です。表示の制御で足りるのか、チェックアウトでの検証まで必要なのかは、扱う商品の性質で決めてください。

「ページは見せる、購入は止める、時刻で自動解放」が理想形

つまり必要なのは、次の3つを同時に満たす状態です。

商品ページは発売前から公開されていて、告知・集客に使える
購入ボタンは発売時刻まで無効になっている
発売時刻になったら、人手なしで自動的に購入できるようになる

COMING SOON SETTING は、この状態を作るためのアプリです。商品ごとに発売日時を設定すると、発売前は購入ボタンが無効なCOMING SOON表示＋カウントダウンになり、時刻が来ると自動で通常の販売表示に切り替わります。

組み方の要点

セットアップの全手順は操作ガイドにまとめてあるので、ここでは運用設計に関わるポイントだけ挙げます。

日時はストアのタイムゾーンで解釈されます。日本のストアなら Asia/Tokyo なので、「0時発売」をUTCに換算するような事故は起きません。販売開始時刻は30分刻みで選べます
カウントダウンの文言はアプリの設定ページで一度保存してから。初期値のままでよい場合も保存が必要で、これを飛ばすとストアフロントに文言が出ません
コレクション単位でまとめて設定できます。「26SS 新作」のようなコレクションを作っておけば、シーズンの新作をまとめて同じ発売日時にできます
発売前のボタンのラベルは商品ごとに変えられます（例: 「8/20 0:00 発売」）

発売までの期間を売上に変える運用

ページを先に公開できるようになると、発売前の期間が販促に使えるようになります。

発売予告の投稿にそのまま商品ページのURLを載せる。カウントダウンが出ているページ自体が告知素材になります
メルマガやLINEの配信を「発売直前」にもう一本入れる。ページを見て待っているお客様への最後のひと押しです
深夜発売でも、当日は誰も作業しない前提でスケジュールを組む。発売の瞬間の作業がゼロになるのが、この仕組みのいちばんの価値です

発売日を決めてから当日を迎えるまでの段取り全体は、Shopifyで新作ドロップを回す段取りに発売時刻から逆算したチェックリストとしてまとめています。

注意点

発売時刻の切り替わりは、閲覧しているお客様の端末の時刻で判定されます。端末の時計が大きくずれている場合は、切り替わりのタイミングもその分ずれます。

また一部のテーマでは、テーマ側の実装によって購入ボタンを完全に隠しきれないことがあります。導入したら必ず、発売前の商品ページを実際に開いて「ボタンが無効になっているか」「時刻を過ぎたら自動で戻るか」を確認してください。確認手順も操作ガイドに記載しています。