アプリなしで商品ページが公開された状態で特定の日時に販売開始する方法について紹介します。
Shopifyストアで商品公開の予約方法はとてもシンプルです。
「商品管理ページ > 公開する > オンラインストア」という項目のカレンダーアイコンをクリックして、公開日を指定すればOKです。
詳しい解説は以下の公式ヘルプセンターのページをご確認ください。
ただ、販売開始日時まで公開されないため、オンラインストア上で発売予告が出来ない点などのデメリットがあります。
SNSなどで宣伝したくても、予め商品の詳細が確認できるURLがない･･可能であれば、商品ページが公開された状態で特定の日時に購入ができるようにしたいものです。
先日、Shopify関連でよく参考にするサイトから、その方法について紹介する記事があったので、紹介したいと思います。
こんなイメージ
その記事とは、株式会社ファイブビットさんの【要Liquidスキル】Shopifyでアプリを使わずに販売開始日時を指定する方法という記事です。
ざっく紹介すると、
①商品に「販売日時指定」というタグをつける
②商品のテンプレートファイルを修正：「販売日時指定」というタグを持つ商品は、購入ボタンを非表示にする
②Shopify Flowでワークフローを作成：特定の日にちになると、「販売日時指定」というタグを削除する → 購入ボタンが表示される
という手法です。
なかなかグッドアイデアではないでしょうか！
商品テンプレートを修正(Liquid)
修正を加えるテンプレートファイルは「main-product.liquid」になります。
株式会社ファイブビットさんの記事では、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' -%}
{% if product.tags contains '販売開始日時指定' %}
{% for tag in product.tags %}
{% if tag contains '販売開始日時指定テキスト_' %}
<div class="preorder-button">{{ tag | remove:'販売開始日時指定テキスト_' }}</div>
<style>
.preorder-button {
text-align: center;
background: #eaeaea;
padding: 1em;
border: 1px solid #bababa;
font-weight: bold;
}
.price-per-item__container {
display: none;
}
</style>
{% endif %}
{% endfor %}
{% else %}
{%- render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true -%}
{% endif %}タグは「販売開始日時指定」と「販売開始日時指定テキスト_販売開始は〇月〇日を予定しています」の2つを付けておきます。
タグ「販売開始日時指定」が入っていれば「for文」を使ってループを開始。タグを１つずつ取り出します。
ループの中に「販売開始日時指定テキスト_販売開始は〇月〇日を予定しています」タグが入っていれば、「販売開始日時指定テキスト_」を削除({{ tag | remove:'販売開始日時指定テキスト_' }})し「販売開始は〇月〇日を予定しています」を表示させるという仕様になっています。
Shopify Flow
最後はShopify Flowでワークフローを作成します。
上述したように、特定の日にちになると、「販売日時指定」というタグを削除するフローになります。
【要Liquidスキル】Shopifyでアプリを使わずに販売開始日時を指定する方法にフローを作成する動画が載っておりますので、ぜひ確認してみてください。
簡単にフローを説明しますと、
①トリガー：Scheduled time / 特定の日時を指定）
②実行１：Get product data / 商品のタグデータを取得
③実行２：For each loop (iterate) / ループで商品各データ照会
④実行３：Remove product tags / タグを削除
になり、このフローによって「販売日時指定」タグが削除され、「購入ボタン」表示されるのです。
テンプレートファイル修正やタグ付け、ワークフローの作成など、少々面倒な作業がありますが、アプリなしでできるし、応用次第で色々なシーンで試せるので共有いたします！
最後まで読んでいただきありがとうございました！
追記：「Get product data」のデータ取得について
上記で紹介した「Get product data」における、データ取得の特徴について以下の記事にまとめたので、興味のある方はぜひご一読ください。
【Shopify Flow】ちょっと気になる「Get product data」「Get customer data」データの絞り込みについて
