2026/10/13

【徹底解説】Shopify アプリ「シンプルオークション|お手軽競売・入札販売」でできること

@ 信条刃

Shopify

【徹底解説】Shopify アプリ「シンプルオークション|お手軽競売・入札販売」でできること

シンプルオークション|お手軽競売・入札販売のアプリ紹介画像

「この商品、いくらで出せばいいんだろう」。一点物の古着、限定コラボのスニーカー、作家のハンドメイド作品を扱っていると、値付けで手が止まることがあります。安くすれば一瞬で売り切れて機会損失になり、高くすればいつまでも売れ残ります。

そんな商品に向いているのが、お客様同士に競ってもらうオークション形式の販売です。この記事では、Shopify の商品ページでオークションを開ける日本製アプリ「シンプルオークション|お手軽競売・入札販売」について、管理画面の全画面とテーマエディタの全設定を、実際の画面を使って一つずつ解説します。

料金や画面の構成だけでなく、画面上には書かれていない仕様(いつ落札者が決まるのか、編集すると何が消えるのか)まで、アプリの実装を確認したうえでまとめました。導入を検討している方も、すでに使っていて細かい挙動を知りたい方も、気になる章から読んでみてください。

シンプルオークションとは

シンプルオークションは、UnReact が開発・提供している Shopify アプリです。Shopify App Store から無料体験付きでインストールでき、管理画面・ストアフロント・通知メールのすべてが日本語で用意されています。

できることを大きく分けると、次の 5 つです。

  • オークションの作成 … 開始価格・最低入札差額・期間・対象商品を決めるだけで、商品ページがオークション会場になります
  • 自動入札(プロキシ入札) … お客様が上限額を決めておけば、他の入札に合わせてアプリが代わりに競り上げます
  • 即決価格と自動延長 … 即決価格でその場で落札できる仕組みと、終了間際の入札で終了時刻を延ばす仕組みがあります
  • ウォッチリストと入札履歴 … お客様が気になる商品を保存し、マイページで入札状況を確認できます
  • 落札後の処理の自動化 … 落札が決まると Shopify の下書き注文を作り、落札者へ支払い用のメールを送ります

オークション中の商品ページ。カウントダウンと価格の表、ログインボタンが並んでいる

シンプルオークションを使うメリット

英語の画面に悩まされない

アプリストアで見つかるオークションアプリは海外製が中心で、設定画面やお客様に届くメールが英語のままのことが少なくありません。シンプルオークションは管理画面のメニューから、ストアフロントのボタン、確認ダイアログ、落札通知メールの文面まで日本語が初期値なので、翻訳作業をせずに始められます。

テーマに追加して保存するだけで表示される

アプリ埋め込み(App Embed)を有効にする工程がありません。管理画面の「テーマに追加」からテーマエディタを開き、保存するだけで商品ページにオークションが出ます。テーマのコードを触る必要もありません。

落札後の請求までアプリに任せられる

オークションで意外と手間がかかるのが、落札後に「落札者だけが、落札価格で」購入できるようにする作業です。シンプルオークションは落札が決まった時点で落札価格の下書き注文を作り、その請求書へのボタンが付いたメールを落札者に送ります。支払いが無いときの催促メールや、次点への繰り上げも管理画面から行えます。

シンプルオークションのデメリット・注意点

  • 入札にはお客様のログインが必要です … 誰が入札したかを特定するため、ログインしていないお客様には入札フォームの代わりにログインの案内が出ます。会員登録の手間を嫌うお客様が一定数いる点は理解しておきましょう
  • 他のお客様の入札はリアルタイムでは反映されません … ページを開いたままにしていても、他の人の入札で表示が自動更新されることはありません。最新の価格はページの再読み込みで表示されます
  • 終了から落札者の決定まで最大 1 分ほどかかります … 終了処理は 1 分ごとに動く仕組みのため、終了時刻ちょうどにメールが届くわけではありません
  • ウォッチリスト系ブロックの文言は初期値が英語です … オークションフォームは日本語ですが、ウォッチリストのボタンや一覧の文言は英語が初期値なので、日本語のストアでは書き換えが必要です

料金プラン

プランは Basic Plan の 1 種類だけで、機能の制限による上位プランはありません。

  • 月払い … 月額 $24.99
  • 年払い … 年額 $249.99(実質 2 か月分お得)
  • 無料体験 … インストールから 7 日間

オークションの数や商品の数に上限はありません。無料体験の間にテーマへの追加とテスト用のオークションまで試しておくと、本番運用のイメージがつかみやすくなります。

インストールとアプリ管理画面

インストールの流れ

Shopify 管理画面の「設定」→「アプリと販売チャネル」から Shopify App Store に進んで「シンプルオークション」を検索し、アプリのページで「インストール」を押します。アクセス権限と料金プランの承認画面が続けて出るので、内容を確認して承認すればインストール完了です。

Shopify 管理画面の左下にある設定メニュー

アプリと販売チャネルの画面からアプリストアへ進むボタン

アプリ管理画面の構成

アプリを開くと、左メニューに「ダッシュボード」「オークション設定」「オークション商品」「入札履歴」「顧客一覧」「メール設定」「設定」の 7 つが並びます。管理画面を日本語で表示していて質問集が用意されているときは「よくある質問」も加わり、画面右下には「ご利用ガイドは こちら」のリンクが常に表示されます。

各画面の説明

ダッシュボードで開催状況と最新の入札を確認する

「ダッシュボード」は、オークションの件数と最新の入札をひと目で確認する画面です。

  • 「オークション状況」… 「開始前」「実施中」「終了」の件数が並びます。「終了」は終了処理(落札者の決定)まで済んだものだけを数えるため、終了時刻の直後は最大 1 分ほど一覧の件数とずれることがあります。
  • 「オークション設定を管理」… オークション設定一覧に移動します。
  • 「直近の入札履歴」… 新しい順に最大 10 件、「商品名」「入札者ID」「メールアドレス」「入札額」「入札日時」が並びます。行を押すとその商品の詳細画面に移動します。入札が 1 件も無いときは「まだ入札がありません」と表示されます。
  • 「入札履歴を管理」… 入札が 1 件以上あるときに表示され、入札履歴一覧に移動します。

オークション設定を作成・編集する

「オークション設定」は、開始価格や期間などの条件と、対象の商品をひとまとめにしたものです。1 つの設定に複数の商品を入れると、同じ条件で商品ごとに別々のオークションが開かれます(即決も商品ごとです)。

オークション設定一覧

「オークション設定一覧」には、作成した設定が並びます。

オークション設定一覧。タブ・検索欄・並び替えボタンと、オークションごとの商品数・開始価格・ステータスが並んでいる

  • 「オークション設定を作成」 … 新しい設定の作成画面に移動します
  • タブ「すべて」「開始前」「実施中」「終了」 … ステータスで絞り込みます
  • 「オークション設定名で検索」 … 設定名で検索します
  • 「並び替え」 … 「作成日」「開始日」「終了日」と「古い順」「新しい順」を組み合わせて並べ替えます(初期は作成日の新しい順)
  • 一覧の列 … 「オークション」(設定名)「商品数」「開始価格」「最低入札差額」(割合のときは % 表示)「ステータス」「開始日」「終了日」
  • 行を押す … 編集画面に移動します

設定を削除するときは、行のチェックを入れて「オークション設定を削除」を押します。「オークション設定を削除しますか?」という確認が出て、「オークション設定を削除すると元に戻すことができず、再度設定が必要です。」と表示されるので、「削除する」を押すと削除され「オークション設定を削除しました」と表示されます(やめるときは「キャンセル」)。

🚨 削除すると、その設定に入っていた 入札・落札結果・自動入札もすべて消えます。商品のオークション表示も外れます。終わったオークションの記録を残しておきたいときは削除しないでください。

設定が 1 件も無いときは「オークション設定がありません」と表示されます。

オークション設定作成の画面

「オークション設定を作成」を押すと「オークション設定作成」の画面が開きます。既存の設定を開いたときは「オークション設定編集」の画面になり、項目は同じです。入力すると画面上部に保存バーが出るので、作成時は「作成する」、編集時は「更新する」で保存します。「キャンセル」や左上の戻る矢印で離れようとすると「保存されていない変更があります。破棄しますか?」と確認されます。

オークション設定作成の画面。基本設定と期間設定のカードが表示されている

基本設定

オークション設定編集の基本設定。オークション設定名・開始価格・最低入札差額の種別・最低入札差額が入っている

  • オークション設定名 … 内容: 管理用の名前です。「顧客向けメールで表示されます。」とある通り、落札通知などのメールにも載るので、お客様に見せてよい名前にしてください / 初期値・入力のルール: 必須・100 文字まで
  • 開始価格 … 内容: 最初の入札で必要な金額です。入札が 1 件も無い間は、この金額以上で入札できます / 初期値・入力のルール: 必須・0 より大きい金額
  • 最低入札差額の種別 … 内容: 「固定額」か「割合(%)」を選びます。固定額は毎回同じ金額ずつ、割合は現在価格に対する割合(端数は切り上げ)ずつ上がります / 初期値・入力のルール: 初期値は「固定額」
  • 最低入札差額 … 内容: 2 件目以降の入札で、現在価格に最低いくら上乗せするかです。現在価格 12,000 円・差額 500 円なら、次は 12,500 円以上で入札できます / 初期値・入力のルール: 必須・0 より大きい値。割合は 0.1% のように小数も使えます
期間設定

期間設定のカード。開始日・開始時間・終了日・終了時間を入力する欄がある

「開始日」「開始時間」「終了日」「終了時間」を入れます。開始日の初期値は今日、時間の初期値は 00:00 です。日時は Shopify のストア設定のタイムゾーンで扱われます。終了日時は開始日時より後にしてください。

開始日時になるとストアフロントの表示は自動で「開催中」に切り替わり、終了日時を過ぎると最大 1 分ほどで落札者が決まります。

商品設定

商品設定のカード。商品を選択とコレクションから追加のボタンと、選択済みの商品が表示されている

  • 「商品を選択」… Shopify の商品選択画面が開き、複数の商品を選べます。選び直すと、選んだ内容で置き換わります。
  • 「コレクションから追加」… コレクションを 1 つ選ぶと、そのコレクションの商品をすべて(重複は除いて)リストに足します。商品が多いときに便利です。
  • 「N件の商品が選択されています」で件数を確認できます。各商品の「削除」で 1 件ずつ、チェックを入れて「選択した商品を除外」でまとめて外せます。
  • 商品は 1 つ以上必要です。オークションでは各商品の最初のバリエーションが落札商品として扱われます。

同じ商品をほかのオークション設定にも入れようとしたときは、保存時に次の確認が出ます。

  • 実施中のオークションに入っている商品があるとき … 「登録できない商品があります」と表示され、「以下の商品は、現在実施中のオークションに設定されているため登録できません。該当商品を除外してください。」と案内されます。「閉じる」で戻り、その商品を外してから保存してください。
  • 開始前のオークションに入っている商品があるとき … 「オークション設定の上書き確認」と表示され、「以下の商品は、他の開始前オークションに設定されています。保存すると既存のオークション設定が上書きされます。」と案内されます。「上書きして保存」を押すと、元の設定からその商品が外れてこちらに入ります。
  • 終了したオークションの商品は、そのまま新しい設定に入れられます。同じ商品を何度でもオークションにかけられます。
追加設定と自動延長設定

追加設定のカード。即決価格・自動入札を許可する・自動延長設定の延長時間と判定時間がある

  • 即決価格 … 内容: この金額以上で入札すると、その場で落札が確定します(支払額は即決価格ちょうど)。「設定しない場合は空欄にしてください」 / 初期値・入力のルール: 空欄(任意)
  • 自動入札を許可する … 内容: 画面の説明どおり「有効にすると、入札者は最大入札額を設定でき、他の入札があった場合に上限の範囲で自動的に入札されます(プロキシ入札)。無効の場合は通常の入札のみです。」 / 初期値・入力のルール: オフ
  • 延長時間(分) … 内容: 「終了間際に入札があった場合の延長時間」です / 初期値・入力のルール: 空欄。1〜1440 分
  • 判定時間(分) … 内容: 「終了何分前の入札で延長するか」です / 初期値・入力のルール: 空欄。1〜1440 分

自動延長は「延長時間(分)」と「判定時間(分)」の両方を入れたときだけ有効です(片方だけだと保存できません)。たとえば両方 5 分にすると、終了 5 分前以降に入札が入るたびに終了時刻が 5 分延びます。延長は何度でも続きます。即決での落札では延長しません。

🚨 自動延長で延びたオークションを編集して保存すると、終了日時は入力欄の日時に戻ります。延長中のオークションは、なるべく編集しないでください。

保存するとどうなるか・入力エラーの表示

作成すると「オークション設定を作成しました」、更新すると「オークション設定を更新しました」と表示されて一覧に戻ります。保存した時点で、商品ページにオークションの情報(開始価格・日時など)が書き込まれます。編集で商品を外すと、その商品の入札・落札結果は削除されます。

入力に不足があると、次のメッセージが項目の下に表示されます。

  • オークション設定名を入力してください … 設定名を入れます
  • オークション設定名は100文字以内で入力してください … 100 文字以内に縮めます
  • オークション開始価格を入力してください … 開始価格を入れます
  • 最低入札差額を入力してください … 最低入札差額を入れます
  • オークション開始日を設定してください / オークション開始時間を設定してください … 開始の日付・時間を入れます
  • オークション終了日を設定してください / オークション終了時間を設定してください … 終了の日付・時間を入れます
  • 終了日時は開始日時より後に設定してください … 終了を開始より後にします
  • 商品を1つ以上選択してください … 商品を選びます
  • 正しい数値を入力してください … 金額や分に数字を入れます
  • 延長時間は1〜1440分(24時間)で設定してください / 判定時間は1〜1440分(24時間)で設定してください … 1〜1440 の範囲にします
  • 延長時間と判定時間はどちらも設定してください … 自動延長を使うなら両方、使わないなら両方空欄にします

オークション商品の状況と落札結果を確認する

オークション商品一覧

「オークション商品一覧」は、オークションに入っている商品を商品単位でまとめた画面です。

オークション商品一覧。商品ごとのオークション数・入札数・ステータスが並んでいる

  • タブ「すべて」「開始前」「実施中」「終了」で絞り込めます(複数のオークションに入っている商品は、実施中 → 開始前 → 終了の順で代表のステータスを出します)。
  • 「商品名で検索」で探せます。
  • 列は「商品名」「オークション数」(その商品が入っているオークション設定の数)「入札」(合計の入札数)「ステータス」です。
  • 行を押すと商品の詳細画面に移動します。商品が無いときは「オークション商品はありません」と表示されます。
オークション商品詳細

「オークション商品詳細」の画面は、見出しが商品名になります。

オークション商品詳細。商品情報・オークション一覧・自動入札のカードが表示されている

  • 「商品情報」… 商品の画像と名前です。
  • 「オークション一覧」… この商品が入っているオークションごとに「オークション設定名」「開始日時」「終了日時」「入札数」「落札者」「落札価格」「ステータス」が並びます。設定名を押すとその設定の編集画面に移動します。オークションに入っていないときは「紐づくオークションがありません」と表示されます。
  • 「自動入札」… 自動入札が設定されているときだけ表示されます。「各顧客が設定した最大入札額(上限)です。上限額は顧客本人には非公開です。」とあるとおり、お客様ごとの「顧客」と「上限額」はストア運営者だけが確認できます。

終了して落札者が決まったオークションには「落札結果」のカードが並びます。

落札結果のカード。落札者・落札価格・購入リンクと、入金催促メールを送信・次の入札者に繰り上げのボタンがある

  • 落札者 / 落札価格 … 落札したお客様のメールアドレスと金額です
  • 購入リンク「下書き注文を開く」 … 落札時に自動で作られた Shopify の下書き注文(請求書)を開きます。落札者はメールのボタンからこの請求書で支払います
  • 「決済完了」 … 落札者が支払いを済ませ、下書き注文が注文になったときに表示されます
  • 「入金催促メールを送信」 … 未払いのときに表示されます。「入金依頼メールを送信しますか?」「落札者に入金を催促するメールを送信します。」の確認で「送信する」を押すと、メール設定の「入金依頼」の内容で送られ「入金依頼メールを送信しました」と表示されます
  • 「次の入札者に繰り上げ」 … 未払いで、次点のお客様がいるときに表示されます。「次の入札者に繰り上げますか?」「現在の落札者の下書き注文を削除し、次に高い入札額の顧客に落札通知メールを送信します。この操作は元に戻せません。」の確認で「繰り上げる」を押すと実行され「次の入札者に繰り上げました」と表示されます
  • 「スキップされた入札者」 … 繰り上げで落札者から外れたお客様のメールアドレスが表示されます

繰り上げると、元の落札者には「落札が取り消されました」というメールが、新しい落札者には落札通知が、運営者には管理者向けの落札通知が送られます。決済が済んだ落札は繰り上げできません。

入札履歴を確認・削除する

「入札履歴一覧」には、すべての入札が新しい順に並びます。

入札履歴一覧。商品名・オークション名・入札者ID・入札額・入札種別・入札日時・ステータスの列が並んでいる

  • 「メールアドレス、顧客ID、オークション名で検索」で絞り込めます。
  • 列は「商品名」「オークション名」「入札者ID」「入札額」「入札種別」「入札日時」「ステータス」です。
  • 「入札種別」の「自動」は、自動入札(上限額)によってアプリが代わりに入れた入札、「手動」はお客様が自分で入れた入札です。
  • 落札した入札には、ステータスに「落札」が付きます。
  • 「入札者ID」を押すと、顧客一覧がそのお客様で絞り込まれます。行を押すと商品の詳細画面に移動します。

入札を消すときは、チェックを入れて「入札履歴を削除」を押します。「入札履歴を削除しますか?」「入札履歴を削除すると、顧客が入札したデータが削除されます。削除された入札はもとに戻すことができません。」の確認で「削除する」を押すと「入札履歴を削除しました」と表示されます(やめるときは「キャンセル」)。落札が決まった入札を含めると「落札が決定している入札は削除できません」と表示され、削除されません。入札が無いときは「入札がありません」と表示されます。

入札したお客様を管理する(ブラックリスト)

「顧客一覧」には、一度でも入札したお客様が並びます(Shopify のすべての顧客ではありません)。

顧客一覧。顧客ID・メールアドレス・ステータス・入札数・最終入札日が並び、有効とブロック中のお客様がいる

  • タブ「すべて」「有効」「ブロック中」で絞り込めます。「顧客名・メールアドレス・顧客IDで検索」で探せます。
  • 列は「顧客ID」「メールアドレス」「ステータス」(「有効」または「ブロック中」)「入札数」「最終入札日」です。
  • 行か「編集」アイコンを押すと「顧客詳細」が開きます。

顧客詳細のダイアログ。顧客ID・メールアドレス・ステータス・入札数・最終入札日と、ブラックリストに追加ボタンがある

  • 「Shopify顧客詳細を開く」… Shopify 管理画面の顧客ページを新しいタブで開きます。
  • 「ブラックリストに追加」… 「ブラックリストに追加しますか?」「ブラックリストに追加すると、この顧客は入札できなくなります。また、現在開催中のオークションの落札対象からも外れます。」の確認で「追加する」を押すと「ブラックリストに追加しました」と表示されます(やめるときは「キャンセル」)。
  • 「ブラックリストから解除」… ブロック中のお客様に表示されます。押すとすぐに解除され「ブラックリストから解除しました」と表示されます。
  • 「閉じる」でダイアログを閉じます。

ブラックリストはメールアドレス単位で効きます。登録しても過去の入札は消えませんが、終了時の落札者の決定からは外れます。入札したお客様がまだいないときは「顧客がいません」と表示されます。

通知メールの内容と送信先を決める

「メール設定」では、アプリが自動で送るメールの宛先・件名・本文を編集できます。すべてのメールは初期状態で「送信する」になっています。編集すると保存バーが出るので「保存する」で保存し(「破棄」で取り消し)、「メール設定を保存しました」と表示されれば完了です。

メール設定の共通設定。管理者メールアドレス・ロゴ画像URL・ボタンの色と、メールの種類の一覧が並んでいる

共通設定
  • 管理者メールアドレス … 「オークション開始通知の送信先です。」と書かれていますが、管理者向けの落札通知もここに届きます。空欄だと運営者向けのメールは送られません。形式が違うと「有効なメールアドレスを入力してください」と表示されます
  • ロゴ画像URL … 「メールヘッダーに表示されます。空欄はストア名をテキスト表示。」画像の URL を入れます。URL の形でないと「有効なURLを入力してください」と表示されます
  • ボタンの色 … メール内のボタンの色です
メールの種類と送られるタイミング

左の一覧で「管理者向け」の「開始通知」「落札通知」、「顧客向け」の「落札通知」「高値更新通知」「入金依頼」を切り替えます。それぞれに「ON」「OFF」の状態が表示されます。

  • 開始通知(管理者向け) … 送られるタイミング: オークションが始まった直後(最大 1 分以内) / 宛先: 管理者メールアドレス
  • 落札通知(管理者向け) … 送られるタイミング: 落札が決まったとき(終了・即決・繰り上げ) / 宛先: 管理者メールアドレス
  • 落札通知(顧客向け) … 送られるタイミング: 落札が決まったとき。支払い用の「購入手続きへ進む」ボタン付き / 宛先: 落札者
  • 高値更新通知 … 送られるタイミング: 自分の最高入札を、ほかのお客様が上回ったとき / 宛先: 上回られたお客様
  • 入金依頼 … 送られるタイミング: オークション商品詳細で「入金催促メールを送信」を押したときだけ / 宛先: 落札者

開始通知(管理者向け)の編集画面。使用できる変数・件名・本文の欄がある

落札通知(管理者向け)の編集画面

落札通知(顧客向け)の編集画面

高値更新通知の編集画面。前回の入札額や現在の最高入札額の変数が使える

入金依頼の編集画面。購入リンクの変数が使える

メールの編集欄
  • 右上のスイッチで「送信する」「送信しない」を切り替えます。
  • 「使用できる変数」… 件名や本文に書くと実際の値に置き換わる文字です。表示されるのは「ストア名」「顧客メールアドレス」「オークション名」「商品名」「落札価格」「前回の入札額」「現在の最高入札額」「購入リンク」「商品リンク」「開始日時」「終了日時」「商品数」「ストアURL」「ボタン」のうち、そのメールで使えるものです。{button} を書いた位置にボタンが入り、書かなければ末尾に付きます。なお {shopName}(ストア名)は、myshopify.com の前の部分(ストアのドメイン名)になります。
  • 「件名」「本文」「ボタンテキスト」を編集します(管理者向けの落札通知にはボタンがありません)。件名・本文・ボタンテキストは空欄にできません(入金依頼の本文のみ空欄可)。
  • 本文は「リッチテキスト」と「HTML」を切り替えて編集できます。HTML のときは「整形」でコードを読みやすく整えられます。「プレビュー」で仕上がりを確認できます。
テストメール送信

画面下の「テストメール送信」で「送信先メールアドレス」を入れて「テストメールを送信」を押すと、いま選んでいる種類のメールを、保存前の編集内容のまま見本の値で送れます(件名の先頭に[テスト]が付きます)。送れたら「テストメールを送信しました」と表示されます。

テーマへの追加と管理画面の言語を設定する

左メニューの「設定」を開くと「基本設定」の画面になります。

基本設定の画面。テーマにオークション機能を追加と言語設定のカードがある

テーマにオークション機能を追加

「テーマを選択してストアにオークション機能を追加します。」と書かれたカードです。「テーマのバージョンによっては、選択欄が空欄になる場合があります。その際は、右下の「ご利用ガイド」を参照して手動で追加してください。」とあるとおり、テーマが選べないときはこのガイドの「ストアフロントの設定」を見て手動で追加してください。

  • 「テーマを選択」… 公開中のテーマと未公開のテーマから選びます。公開中のテーマは「(公開中のテーマ)」と付いて最初から選ばれています。
  • 「テーマに追加」… テーマエディタを新しいタブで開き、デフォルト商品テンプレートに「オークションフォーム」ブロックを追加した状態にします。テーマエディタで「保存」を押すまでは反映されません。
  • 「テーマをプレビュー」… 選んだテーマの商品ページのプレビューを新しいタブで開きます。

その下に「「テーマに追加」をクリック後、アプリブロックの自動追加が失敗する場合は、右下よりご利用ガイドを参照してアプリブロックの手動追加をお試しください。」という案内が表示されます。

言語設定

「アプリの管理画面の言語を選択してください。」と書かれたカードです。「言語を選択」で 20 言語から選び「変更する」を押すと、管理画面の表示言語が変わります。この設定はお使いのブラウザに保存されます。設定していないときは Shopify 管理画面の言語に合わせて表示されます。

画面の下には、UnReact のほかのアプリを紹介する「おすすめアプリ」が表示されます(右上の × で閉じられます)。

テーマへの追加

管理画面の「設定」で「テーマに追加」を押すと、テーマエディタがデフォルト商品テンプレートを開いた状態で起動し、商品情報セクションの末尾に「オークションフォーム」ブロックが入ります。この時点ではまだ反映されておらず、右上の「保存」を押して初めてストアに出ます。

テーマに追加を押した直後のテーマエディタ。商品情報セクションの末尾にオークションフォームが入っている

自動で入るのはオークションフォームだけで、それ以外のブロックはテーマエディタの「ブロックを追加」→「アプリ」タブから自分で追加します。

ブロックを追加のアプリタブ。シンプルオークションの 4 つのブロックが並ぶ

ストアフロントの見た目を変える

ここからはテーマエディタで設定できる項目を、ブロックごとに全部紹介します。設定名は画面の表記のまま、括弧の中に種類と既定値、選べる範囲を書いています。

オークションフォーム|シンプルオークション

カウントダウン、価格の表、入札フォーム、入札履歴をまとめて出す中心のブロックです。開始前・開催中・終了後で表示が自動で切り替わります。

オークションフォームの商品の指定
  • 商品(商品・既定: 表示中の商品(自動))… オークションを表示する商品です。商品ページに置くと、そのページの商品が自動で入ります。別の商品を指定すると、その商品のオークションが表示されます。
  • カートボタンを非表示(チェック・既定: オン)… 同じセクション内のカート追加ボタン・数量・価格・バリエーション選択・購入ボタンを隠します。オークション中に通常購入されるのを防ぐための設定です。テーマ独自の部品(画面下に固定表示されるカートボタンなど)は隠れないことがあります。

オークションフォームの設定パネル(商品の指定)1枚目

オークションフォームのカウントダウン設定
  • 残り時間のカウントダウンを表示(チェック・既定: オン)… 開催中に「終了までの残り時間」をカウントダウンで表示します。
  • 残り時間のラベル(テキスト・既定: オークション終了まで・「残り時間のカウントダウンを表示」がオンのときに表示)… カウントダウンの上に出る見出しです。
  • 開始までのカウントダウンを表示(チェック・既定: オン)… 開始前に「開始までの残り時間」をカウントダウンで表示します。
  • 開始までの時間のラベル(テキスト・既定: オークション開始まで・「開始までのカウントダウンを表示」がオンのときに表示)… 開始前カウントダウンの上に出る見出しです。
  • カウントダウンのスタイル(選択・既定: デフォルト・デフォルト / コンパクト / 大きい・「残り時間のカウントダウンを表示」がオンのときに表示)… カウントダウンの大きさと形です。商品ページの余白に合わせて選びます。
オークションフォームのオークション情報設定
  • 現在価格を表示(チェック・既定: オン)… 情報テーブルに「現在価格」の行を表示します。
  • 現在価格のラベル(テキスト・既定: 現在価格・「現在価格を表示」がオンのときに表示)… 情報テーブルの「現在価格」行の見出しです。
  • 開始価格を表示(チェック・既定: オン)… 情報テーブルに「開始価格」の行を表示します。
  • 開始価格のラベル(テキスト・既定: 開始価格・「開始価格を表示」がオンのときに表示)… 情報テーブルの「開始価格」行の見出しです。
  • 即決価格を表示(チェック・既定: オン)… 情報テーブルに「即決価格」の行を表示します。即決価格を設定していないオークションでは、オンでも行は出ません。
  • 即決価格のラベル(テキスト・既定: 即決価格・「即決価格を表示」がオンのときに表示)… 情報テーブルの「即決価格」行の見出しです。
  • 開始日時を表示(チェック・既定: オン)… 情報テーブルに「開始日時」の行を表示します。
  • 開始日時のラベル(テキスト・既定: 開始日時・「開始日時を表示」がオンのときに表示)… 情報テーブルの「開始日時」行の見出しです。
  • 終了日時を表示(チェック・既定: オン)… 情報テーブルに「終了日時」の行を表示します。
  • 終了日時のラベル(テキスト・既定: 終了日時・「終了日時を表示」がオンのときに表示)… 情報テーブルの「終了日時」行の見出しです。
  • 入札数を表示(チェック・既定: オン)… 情報テーブルに「入札数」の行を表示します。
  • 入札数のラベル(テキスト・既定: 入札数・「入札数を表示」がオンのときに表示)… 情報テーブルの「入札数」行の見出しです。
  • 日付の並び順(選択・既定: YYYY/MM/DD(年/月/日)・YYYY/MM/DD(年/月/日) / MM/DD/YYYY(月/日/年) / DD/MM/YYYY(日/月/年))… 開始日時・終了日時の日付の並びです。海外のお客様が多いストアでは「MM/DD/YYYY(月/日/年)」も選べます。
  • 12時間表示(AM/PM)を使用(チェック・既定: オフ)… オンにすると時刻を 12 時間表示(AM/PM)にします。
  • 入札履歴を表示(チェック・既定: オン)… 入札の一覧(金額と日時)を表示します。入札者の名前は表示されず、本人の入札だけ「(あなた)」が付きます。
  • 入札履歴のタイトル(テキスト・既定: 入札履歴・「入札履歴を表示」がオンのときに表示)… 入札履歴の見出しです。
  • 入札履歴なしメッセージ(テキスト・既定: まだ入札がありません・「入札履歴を表示」がオンのときに表示)… まだ入札が1件も無いときに入札履歴の欄に出る文言です。

オークションフォームの設定パネル(オークション情報設定)1枚目

オークションフォームの設定パネル(オークション情報設定)2枚目

オークションフォームの入札フォーム設定
  • 入札ボタンの文字(テキスト・既定: 入札する)… 入札ボタンの文言です。
  • 最低入札額のラベル(テキスト・既定: 現在の最低入札額)… 入札フォームの上に出る「いまいくら以上で入札できるか」の見出しです。
  • 自動入札の説明タイトル(テキスト・既定: 自動入札について)… 自動入札を許可したオークションでだけ表示される、自動入札の説明の見出しです。
  • 自動入札の説明文(テキスト(複数行)・既定: 最大入札額を設定すると、他の方が入札した際に、設定した上限額まで自動で入札されます。上限額は他の入札者には表示されません。最大入札額が同じ入札が複数存在する場合、入札時刻が最も早い入札が優先されます。)… 自動入札の仕組みの説明文です。自動入札を許可したオークションでだけ表示されます。
  • 最大入札額のラベル(テキスト・既定: あなたの最大入札額)… 自動入札を許可したオークションで、入力欄の見出しとして表示されます(入力した金額が上限額として扱われます)。
  • 最大入札額の注記(テキスト(複数行)・既定: 入力した金額は他の入札者には表示されません。他の方が入札した場合、上限の範囲で自動的に入札されます。)… 入力欄の下に出る注記です(自動入札を許可したオークションのみ)。
  • 設定中の上限額のラベル(テキスト・既定: 設定中の上限額)… 自動入札を設定済みのお客様に、いま設定している上限額を見せるときの見出しです。
  • 自動入札取消ボタンの文字(テキスト・既定: 自動入札を取り消す)… 設定中の自動入札を取り消すボタンの文言です。
  • ログインメッセージ(テキスト・既定: オークションに参加するにはログインする必要があります。)… ログインしていないお客様に、入札フォームの代わりに表示する案内文です。
  • ログインボタンの文字(テキスト・既定: ログイン / アカウント登録)… ログイン画面(/account/login)へ移動するボタンの文言です。

オークションフォームの設定パネル(入札フォーム設定)1枚目

オークションフォームの設定パネル(入札フォーム設定)2枚目

オークションフォームのメッセージ設定
  • 即決落札メッセージ(テキスト・既定: 即決価格で落札されました)… 即決価格で落札されて終了したときに表示します。
  • オークション終了メッセージ(テキスト・既定: このオークションは終了しました)… オークションが終了したときに表示します。
  • 落札価格の接頭辞(テキスト・既定: 落札価格: )… 終了後に落札価格の前に付ける文言です。
  • 開始前メッセージ(テキスト・既定: オークション開始前です)… 開始前に表示する文言です。
  • 開始日時の接頭辞(テキスト・既定: 開始日時: )… 開始前に開始日時の前に付ける文言です。
  • 入札成功メッセージ(テキスト・既定: 入札を受け付けました)… 入札が受け付けられたときに表示します。
  • 即決成功メッセージ(テキスト・既定: 落札しました)… 即決価格で落札できたときに表示します。
  • 入札金額の接頭辞(テキスト・既定: 入札金額: )… 入札成功時に金額の前に付ける文言です。
  • 即決成功の詳細(テキスト・既定: 。購入手続きの案内をご確認ください。)… 即決成功時のメッセージの後ろに続く文言です。
  • 入札成功の詳細(テキスト・既定: 。現在の最高入札額に反映されました。)… 入札成功時のメッセージの後ろに続く文言です。
  • 入札額不足エラー({min}=最低額, {increment}=最低入札差額)(テキスト・既定: 最低入札額: {min}(最低入札差額: {increment}))… 入力した金額が最低入札額に届かないときに表示します。{min} は最低入札額、{increment} は最低入札差額に置き換わります。
  • オークション非アクティブエラー(テキスト・既定: このオークションは現在入札を受け付けていません)… 開始前や終了後に入札しようとしたときに表示します(ページを開いたまま終了時刻を過ぎた場合など)。
  • 落札済みエラー(テキスト・既定: この商品は既に落札済みです)… その商品が即決などで既に落札されているときに表示します。
  • 入札失敗エラー(テキスト・既定: 入札に失敗しました。もう一度お試しください。)… 通信エラーなどで入札できなかったときに表示します。ブラックリストに登録されたお客様が入札した場合もこの文言になります。
  • 送信中メッセージ(テキスト・既定: 送信中...)… 入札を送信している間、ボタンに表示します。
  • 金額未入力エラー(テキスト・既定: 金額を入力してください)… 金額が空欄、または数字でないときに表示します。
  • 入札額不足エラー(テキスト・既定: 入札可能金額に達していません)… 現在のバージョンでは使われていません。金額不足のときは上の「入札額不足エラー({min}=最低額, {increment}=最低入札差額)」が表示されます。
  • ログイン要求メッセージ(テキスト・既定: 入札するにはログインが必要です)… ログインしていない状態で入札しようとしたときに表示します。
  • 自動入札で上回られた時のメッセージ(テキスト・既定: 他の入札者の自動入札により、現在あなたは最高入札者ではありません。)… 入札した直後に、他のお客様の自動入札(上限額)に負けたときに表示します。
  • 自動入札取消メッセージ(テキスト・既定: 自動入札を取り消しました)… 自動入札を取り消したときに表示します。
  • 入札確認: タイトル(テキスト・既定: 入札の確認)… 入札ボタンを押したときに出る確認ダイアログの見出しです。
  • 入札確認: 本文({amount})(テキスト・既定: {amount} で入札しますか?)… 確認ダイアログの本文です。{amount} は入札額に置き換わります。
  • 即決確認: 本文({amount})(テキスト・既定: {amount} で即決入札しますか?この金額で落札が確定します。)… 即決価格以上で入札するときの確認ダイアログの本文です。{amount} は金額に置き換わります。
  • 入札確認: 実行ボタン(テキスト・既定: 入札する)… 確認ダイアログの実行ボタンです。
  • 入札確認: 取消ボタン(テキスト・既定: キャンセル)… 確認ダイアログの取消ボタンです。
  • 自動入札取消: タイトル(テキスト・既定: 自動入札の取消)… 自動入札を取り消すときの確認ダイアログの見出しです。
  • 自動入札取消: 本文(テキスト・既定: 設定中の自動入札(最大入札額)を取り消しますか?すでに行われた入札は取り消されません。)… 自動入札を取り消すときの確認ダイアログの本文です。
  • 自動入札取消: 実行ボタン(テキスト・既定: 取り消す)… 自動入札の取消を実行するボタンです。
  • 自動入札取消: 不可の説明(テキスト・既定: 現在価格が上限額を超えているため取り消せません)… 現在価格が上限額を超えていて取り消せないとき、取消ボタンに重ねて表示する説明です。
  • 入札履歴: 自分の入札の表記(テキスト・既定: (あなた))… 入札履歴で、お客様本人の入札の横に付ける表記です。

オークションフォームの設定パネル(メッセージ設定)1枚目

オークションフォームの設定パネル(メッセージ設定)2枚目

オークションフォームの設定パネル(メッセージ設定)3枚目

オークションフォームのスタイル設定
  • ラベルの文字の大きさ(スライダー・既定: 14px・10〜24px(1刻み)・「残り時間のカウントダウンを表示」がオンのときに表示)… カウントダウンの見出しの文字サイズです。
  • ラベルの文字の色(色・既定: #6b7280・「残り時間のカウントダウンを表示」がオンのときに表示)… カウントダウンの見出しの色です。
  • タイマーの文字の大きさ(スライダー・既定: 24px・14〜48px(1刻み)・「残り時間のカウントダウンを表示」がオンのときに表示)… カウントダウンの数字の大きさです。
  • タイマーの文字の色(色・既定: #111827・「残り時間のカウントダウンを表示」がオンのときに表示)… 区切りの「:」と単位(日・時間・分・秒)の色です。
  • タイマーの背景色(色・既定: #111827・「残り時間のカウントダウンを表示」がオンのときに表示)… カウントダウンの数字の背景色です。
  • タイマーの数字の色(色・既定: #ffffff・「残り時間のカウントダウンを表示」がオンのときに表示)… カウントダウンの数字の色です。
  • 情報ラベルの色(色・既定: #6b7280)… 情報テーブルの見出し(現在価格など)の色です。
  • 情報値の色(色・既定: #111827)… 情報テーブルの値(金額・日時)の色です。
  • ボタンの背景色(色・既定: #111827)… 入札ボタンとログインボタンの背景色です。
  • ボタンの文字色(色・既定: #ffffff)… 入札ボタンとログインボタンの文字色です。

オークションフォームの設定パネル(スタイル設定)1枚目

オークションフォームの追加設定
  • 追加の CSS(テキスト(複数行)・既定: 空欄)… このブロックだけに効く CSS を書けます。見た目を細かく調整したいとき用です。

オークションフォームの設定パネル(追加設定)1枚目

オークション情報|シンプルオークション

文字の行だけで状況を伝える軽量なブロックです。行ごとに表示する時期を選べるので、コレクションページの商品カード付近などにも置けます。

オークション情報の商品の指定
  • 商品(商品・既定: 表示中の商品(自動))… どの商品のオークション情報を出すかです。商品ページでは自動でその商品になります。コレクションページなど商品ページ以外に置くときは、ここで商品を選ばないと何も表示されません。

オークション情報の設定パネル(商品の指定)1枚目

オークション情報の表示項目設定
  • ステータスの表示条件(選択・既定: 常に表示・非表示 / 常に表示 / オークション開始前 / オークション中 / オークション終了後)… 選択肢で、その行を出す時期を決めます。「常に表示」はいつでも、「オークション開始前」「オークション中」「オークション終了後」はその時期だけ、「非表示」は出しません。
  • 開始前のラベル(テキスト・既定: 開始前・「ステータスの表示条件」が「非表示」以外のときに表示)… ステータス行に、開始前のときに出す文言です。
  • 開催中のラベル(テキスト・既定: 開催中・「ステータスの表示条件」が「非表示」以外のときに表示)… ステータス行に、開催中のときに出す文言です。
  • 終了のラベル(テキスト・既定: 終了・「ステータスの表示条件」が「非表示」以外のときに表示)… ステータス行に、終了後に出す文言です。
  • ステータスのアイコン(画像・既定: 空欄・「ステータスの表示条件」が「非表示」以外のときに表示)… 行の先頭に表示するアイコン画像です(24px で表示)。空欄ならアイコンなしです。
  • 残り時間の表示条件(選択・既定: 常に表示・非表示 / 常に表示 / オークション開始前 / オークション中 / オークション終了後)… 選択肢で、その行を出す時期を決めます。
  • 残り時間のテキスト({days}, {hours}, {minutes}, {seconds} が置換されます)(テキスト・既定: 残り時間: {days}日{hours}時間{minutes}分{seconds}秒・「残り時間の表示条件」が「非表示」以外のときに表示)… 残り時間の行の書式です。{days}・{hours}・{minutes}・{seconds} が日・時間・分・秒に置き換わります。開始前は開始までの、開催中は終了までの時間を毎秒更新で表示し、終了後は出ません。
  • 残り時間のアイコン(画像・既定: 空欄・「残り時間の表示条件」が「非表示」以外のときに表示)… 行の先頭に表示するアイコン画像です(24px で表示)。
  • 現在価格の表示条件(選択・既定: 常に表示・非表示 / 常に表示 / オークション開始前 / オークション中 / オークション終了後)… 選択肢で、その行を出す時期を決めます。
  • 現在価格のテキスト({current_price} が置換されます)(テキスト・既定: 現在価格: {current_price}・「現在価格の表示条件」が「非表示」以外のときに表示)… 現在価格の行の書式です。{current_price} が現在価格に置き換わります(入札が無い間は開始価格と同じ額)。
  • 終了時のテキスト({current_price} が置換されます)(テキスト・既定: 落札価格: {current_price}・「現在価格の表示条件」が「非表示」以外のときに表示)… 終了後に現在価格の行の代わりに出す書式です。{current_price} が落札価格に置き換わります。
  • 現在価格のアイコン(画像・既定: 空欄・「現在価格の表示条件」が「非表示」以外のときに表示)… 行の先頭に表示するアイコン画像です(24px で表示)。
  • 開始価格の表示条件(選択・既定: 常に表示・非表示 / 常に表示 / オークション開始前 / オークション中 / オークション終了後)… 選択肢で、その行を出す時期を決めます。
  • 開始価格のテキスト({start_price} が置換されます)(テキスト・既定: 開始価格: {start_price}・「開始価格の表示条件」が「非表示」以外のときに表示)… 開始価格の行の書式です。
  • 開始価格のアイコン(画像・既定: 空欄・「開始価格の表示条件」が「非表示」以外のときに表示)… 行の先頭に表示するアイコン画像です(24px で表示)。
  • 入札数の表示条件(選択・既定: 常に表示・非表示 / 常に表示 / オークション開始前 / オークション中 / オークション終了後)… 選択肢で、その行を出す時期を決めます。
  • 入札数のテキスト({bid_count} が置換されます)(テキスト・既定: 入札数: {bid_count}・「入札数の表示条件」が「非表示」以外のときに表示)… 入札数の行の書式です。
  • 入札数のアイコン(画像・既定: 空欄・「入札数の表示条件」が「非表示」以外のときに表示)… 行の先頭に表示するアイコン画像です(24px で表示)。
  • 開始日時の表示条件(選択・既定: 常に表示・非表示 / 常に表示 / オークション開始前 / オークション中 / オークション終了後)… 選択肢で、その行を出す時期を決めます。
  • 開始日時のテキスト({start_date} が置換されます)(テキスト・既定: 開始日時: {start_date}・「開始日時の表示条件」が「非表示」以外のときに表示)… 開始日時の行の書式です。
  • 開始日時のアイコン(画像・既定: 空欄・「開始日時の表示条件」が「非表示」以外のときに表示)… 行の先頭に表示するアイコン画像です(24px で表示)。
  • 終了日時の表示条件(選択・既定: 常に表示・非表示 / 常に表示 / オークション開始前 / オークション中 / オークション終了後)… 選択肢で、その行を出す時期を決めます。
  • 終了日時のテキスト({end_date} が置換されます)(テキスト・既定: 終了日時: {end_date}・「終了日時の表示条件」が「非表示」以外のときに表示)… 終了日時の行の書式です(自動延長で延びた場合は延長後の日時)。
  • 終了日時のアイコン(画像・既定: 空欄・「終了日時の表示条件」が「非表示」以外のときに表示)… 行の先頭に表示するアイコン画像です(24px で表示)。

オークション情報の設定パネル(表示項目設定)1枚目

オークション情報の設定パネル(表示項目設定)2枚目

オークション情報の設定パネル(表示項目設定)3枚目

オークション情報のフォーマット設定
  • 日付の並び順(選択・既定: YYYY/MM/DD(年/月/日)・YYYY/MM/DD(年/月/日) / MM/DD/YYYY(月/日/年) / DD/MM/YYYY(日/月/年))… 日付の並びです。
  • 12時間表示(AM/PM)を使用(オークション情報のフォーマット設定・チェック・既定: オフ)… オンにすると時刻を 12 時間表示(AM/PM)にします。

オークション情報の設定パネル(フォーマット設定)1枚目

オークション情報の文字設定
  • 文字の大きさ(スライダー・既定: 14px・10〜32px(1刻み))… すべての行の文字サイズです。
  • 文字の色(色・既定: #111827)… すべての行の文字色です。
  • 文字の太さ(選択・既定: 通常・通常 / やや太い / 太い)… 文字の太さです。
オークション情報の追加設定
  • 追加の CSS(オークション情報の追加設定・テキスト(複数行)・既定: 空欄)… このブロックだけに効く CSS を書けます。

ウォッチリストボタン|シンプルオークション

文字付きのボタンで、ウォッチリストへの追加と削除を切り替えます。オークション対象でない商品にも使えます。

ウォッチリストボタンの商品の指定
  • 商品(商品・既定: 表示中の商品(自動))… ウォッチリストに入れる商品です。
  • アイコンの種類(選択・既定: ハート・ハート / 星 / ブックマーク)… ボタンに付けるアイコンの形です。

ウォッチリストボタンの設定パネル(商品の指定)1枚目

ウォッチリストボタンのボタン設定
  • ボタンの高さ(スライダー・既定: 44px・0〜100px(1刻み))… ボタンの高さです。
  • ボタンの最大幅(スライダー・既定: 500px・100〜500px(4刻み))… ボタンの横幅の上限です。
  • アイコンの大きさ(スライダー・既定: 16px・10〜24px(1刻み))… アイコンの大きさです。ボタンの文字サイズにも使われます。
  • テキスト配置(選択・既定: 中央揃え・左揃え / 中央揃え / 右揃え)… ボタン内のアイコンと文字の寄せ方です。
ウォッチリストボタンの未登録時設定
  • アイコンの色(色・既定: #ffffff)… アイコンの色を指定します。ストアの配色に合わせて変えられます。
  • ボタンの文字(テキスト・既定: Add to watchlist)… まだウォッチリストに入れていないときのボタンの文言です。初期値は英語(Add to watchlist)なので、日本語のストアでは「ウォッチリストに追加」などに書き換えてください。
  • ボタンの文字色(色・既定: #ffffff)… ボタンの文字色を指定します。
  • ボタンの背景色(色・既定: #111827)… ボタンの背景色を指定します。
  • ボタンの枠線の太さ(スライダー・既定: 0px・0〜5px(1刻み))… ボタンの枠線の太さを調整します。
  • ボタンの枠線の色(色・既定: #111827)… ボタンの枠線の色を指定します。
  • ボタンの枠線の丸み(スライダー・既定: 8px・0〜100px(4刻み))… ボタンの枠線の丸みを調整します。

ウォッチリストボタンの設定パネル(未登録時設定)1枚目

ウォッチリストボタンの登録済み時設定
  • アイコンの色(色・既定: #DD1D1D)… アイコンの色を指定します。
  • ボタンの文字(テキスト・既定: Added to watchlist)… ウォッチリストに入れた後のボタンの文言です。初期値は英語(Added to watchlist)なので「ウォッチリストに追加済み」などに書き換えてください。
  • ボタンの文字色(色・既定: #111827)… ボタンの文字色を指定します。
  • ボタンの背景色(色・既定: #f9fafb)… ボタンの背景色を指定します。
  • ボタンの枠線の太さ(スライダー・既定: 1px・0〜5px(1刻み))… ボタンの枠線の太さを調整します。
  • ボタンの枠線の色(色・既定: #e5e7eb)… ボタンの枠線の色を指定します。
  • ボタンの枠線の丸み(ウォッチリストボタンの登録済み時設定・スライダー・既定: 8px・0〜100px(4刻み))… ボタンの枠線の丸みを調整します。
ウォッチリストボタンのポップアップ設定
  • ログインメッセージ(テキスト・既定: Please log in to add to your watchlist)… ログインしていないお客様がボタンを押したときに出るポップアップの文言です。初期値は英語です。
  • ログインボタンの文字(テキスト・既定: Login)… ポップアップのログインボタンの文言です(ログイン画面へ移動します)。初期値は英語(Login)です。

ウォッチリストボタンの設定パネル(ポップアップ設定)1枚目

ウォッチリストボタンの追加設定
  • 追加の CSS(ウォッチリストボタンの追加設定・テキスト(複数行)・既定: 空欄)… このブロックだけに効く CSS を書けます。
ウォッチリストボタンの余白設定
  • 上部余白(スライダー・既定: 16px・0〜40px(1刻み))… ボタンの上の余白です。
  • 下部余白(スライダー・既定: 16px・0〜40px(1刻み))… ボタンの下の余白です。

ウォッチリストボタンの設定パネル(余白設定)1枚目

ウォッチリストアイコン|シンプルオークション

ハート・星・ブックマークのアイコンだけで、ウォッチリストを出し入れするブロックです。

ウォッチリストアイコンの商品の指定
  • 商品(ウォッチリストアイコンの商品の指定・商品・既定: 表示中の商品(自動))… ウォッチリストに入れる商品です。商品ページ以外に置くときは必ず商品を選んでください(選ばないと表示されません)。
  • アイコンの種類(選択・既定: ハート・ハート / 星 / ブックマーク)… アイコンの形です。
  • アイコンの位置(選択・既定: 左・左 / 中央 / 右)… アイコンを置く位置です。
  • アイコンの大きさ(スライダー・既定: 15px・0〜32px(1刻み))… アイコンの大きさです。
  • アイコンの色(オフ)(色・既定: #DD1D1D)… ウォッチリストに入れていないとき(輪郭だけのアイコン)の色です。
  • アイコンの色(オン)(色・既定: #DD1D1D)… ウォッチリストに入れたとき(塗りつぶしのアイコン)の色です。

ウォッチリストアイコンの設定パネル(商品の指定)1枚目

ウォッチリストアイコンのポップアップ設定
  • ログインメッセージ(テキスト・既定: Please log in to add to your watchlist)… ログインしていないお客様がアイコンを押したときに出るポップアップの文言です。初期値は英語です。
  • ログインボタンの文字(テキスト・既定: Login)… ポップアップのログインボタンの文言です。
ウォッチリストアイコンの余白設定
  • 上部余白(スライダー・既定: 0px・0〜40px(1刻み))… アイコンの上の余白です。
  • 下部余白(スライダー・既定: 0px・0〜40px(1刻み))… アイコンの下の余白です。
  • 左余白(スライダー・既定: 0px・0〜40px(1刻み))… アイコンの左の余白です。
  • 右余白(スライダー・既定: 0px・0〜40px(1刻み))… アイコンの右の余白です。
ウォッチリストアイコンの追加設定
  • 追加の CSS(ウォッチリストアイコンの追加設定・テキスト(複数行)・既定: 空欄)… このブロックだけに効く CSS を書けます。

ウォッチリストアイコンの設定パネル(追加設定)1枚目

ウォッチリスト|シンプルオークション

ログイン中のお客様がウォッチリストに入れた商品を一覧で見せるブロックです。固定ページと旧来のお客様アカウントページにだけ置けます。

ウォッチリストのタイトル設定
  • タイトル(テキスト・既定: Watchlist)… 一覧の見出しです。初期値は英語(Watchlist)なので、日本語のストアでは「ウォッチリスト」などに書き換えてください。
  • 文字の大きさ(PC)(スライダー・既定: 24px・0〜40px(1刻み))… 文字の大きさ(PC)を調整します。
  • 文字の大きさ(SP)(スライダー・既定: 24px・0〜40px(1刻み))… 文字の大きさ(SP)を調整します。
  • 下部余白(PC)(スライダー・既定: 20px・0〜40px(1刻み))… 下部余白(PC)を調整します。
  • 下部余白(SP)(スライダー・既定: 20px・0〜40px(1刻み))… 下部余白(SP)を調整します。

ウォッチリストの設定パネル(タイトル設定)1枚目

ウォッチリストのリスト設定
  • 文字の色(色・既定: #000000)… 商品名・価格の文字色です。
  • 枠線の色(色・既定: #dddddd)… 商品と商品の区切り線の色です。
  • 商品がない場合のメッセージ(リッチテキスト・既定: No products in your watchlist)… ウォッチリストが空のときに出す文言です。初期値は英語です。
  • 未ログイン時のメッセージ(リッチテキスト・既定: Please log in to view your watchlist)… ログインしていないお客様に出す文言です。初期値は英語です。

ウォッチリストの設定パネル(リスト設定)1枚目

ウォッチリストのアイコン設定
  • アイコンの種類(選択・既定: ハート・ハート / 星 / ブックマーク)… 各商品の右に出す削除アイコンの形です。
  • アイコンの大きさ(ウォッチリストのアイコン設定・スライダー・既定: 15px・0〜32px(1刻み))… アイコンの大きさです。
  • アイコンの色(オフ)(色・既定: #DD1D1D)… アイコンの色(オフ)を指定します。
  • アイコンの色(オン)(色・既定: #DD1D1D)… アイコンの色(オン)を指定します。
ウォッチリストの追加設定
  • 追加の CSS(ウォッチリストの追加設定・テキスト(複数行)・既定: 空欄)… このブロックだけに効く CSS を書けます。
ウォッチリストの余白設定
  • 上部余白(PC)(スライダー・既定: 40px・0〜120px(4刻み))… 上部余白(PC)を調整します。
  • 下部余白(PC)(スライダー・既定: 40px・0〜120px(4刻み))… 下部余白(PC)を調整します。
  • 上部余白(SP)(スライダー・既定: 40px・0〜120px(4刻み))… 上部余白(SP)を調整します。
  • 下部余白(SP)(スライダー・既定: 40px・0〜120px(4刻み))… 下部余白(SP)を調整します。

ウォッチリストの設定パネル(余白設定)1枚目

お客様アカウントのブロック

新しいお客様アカウントのマイページ(プロフィール)には「入札履歴」と「ウォッチリスト」を置けます。Shopify 管理画面の「設定」→「お客様アカウント」→「カスタマイズ」→ 使用中の設定の「編集」と進み、ページを「プロフィール」に切り替えて「ブロックを追加」から選びます。

お客様アカウントのエディタでブロックを追加を押し、ウォッチリストと入札履歴が選べる状態

どちらのブロックも、設定パネルには「Heading」「Empty title」「Empty description」の 3 項目があり、空欄なら購入者の言語に合わせた既定の文言が使われます。入札履歴はタブ「すべて」「開催中」「落札」「終了」で絞り込め、ウォッチリストは「カード表示」「リスト表示」を切り替えられます。落札したお客様のウォッチリストには「落札しました」と「入金する」ボタンが表示されます。アプリを入れ直すと配置が外れるので、再インストール後は置き直してください。

入札履歴ブロックを追加したエディタ。Heading・Empty title・Empty description の欄がある

ウォッチリストブロックを追加したエディタ。商品が無いときの案内が表示されている

アプリを使わずにコードで作るとしたら

参考までに、オークションの一部をテーマのコードだけで作るとどうなるかを見てみます。まずは一番手軽な「終了までのカウントダウン」です。商品メタフィールドに終了日時(ここでは custom.auction_end_at)を入れておき、Liquid でその値を JavaScript に渡します。

{% assign end_at = product.metafields.custom.auction_end_at %}
{% if end_at %}
  <div class="my-countdown" data-end="{{ end_at | date: '%Y-%m-%dT%H:%M:%S%z' }}">
    <span data-remaining></span>
  </div>
{% endif %}

date フィルタで ISO 形式に整えておくと、JavaScript の Date でそのまま読めます。メタフィールドが空の商品では何も出力しないよう、if で囲んでいます。

次に、1 秒ごとに残り時間を計算して書き換える JavaScript です。

document.querySelectorAll('.my-countdown').forEach((el) => {
  const end = new Date(el.dataset.end).getTime();
  const out = el.querySelector('[data-remaining]');
  const tick = () => {
    const ms = Math.max(0, end - Date.now());
    const d = Math.floor(ms / 86400000);
    const h = Math.floor((ms % 86400000) / 3600000);
    const m = Math.floor((ms % 3600000) / 60000);
    const s = Math.floor((ms % 60000) / 1000);
    out.textContent = ms ? `残り ${d}日 ${h}時間 ${m}分 ${s}秒` : '終了しました';
    if (ms) setTimeout(tick, 1000);
  };
  tick();
});

ここまでは数十行で作れます。ただし、これはあくまで「時計」です。実際のオークションには、入札額が最低額を満たしているかをサーバーで確かめる処理、同時に入札が来たときの順番の制御、上限額を使った自動入札、終了時に最高額の入札者を決めて落札価格の請求書を作る処理、上回られたお客様へのメール通知が必要になります。どれもテーマのコードだけでは作れず、外部のサーバーとデータベースを用意して保守し続けることになります。

入札の受付から落札後の請求までを自前で用意する手間を考えると、まずはアプリで始め、運用しながら見せ方をテーマエディタの設定で調整していくのが現実的です。

海外製オークションアプリからの乗り換え・併用の進め方

すでに Auction Today や Tipo Product Auction、Auction Pro といった海外製のオークションアプリを使っていて、シンプルオークションへの切り替えを考えている方もいると思います。ここでは、画面の説明を踏まえた切り替えの手順をまとめます。

同じ商品に 2 つのオークションを出さない

2 つのアプリを入れたまま同じ商品をそれぞれのオークションに登録すると、商品ページに入札フォームが 2 つ並び、別々の価格で入札が進んでしまいます。切り替え期間中は「この商品はどちらのアプリで出すか」を商品ごとに決め、片方のアプリのオークションにだけ登録してください。シンプルオークションの側は、オークション設定の商品設定に入れた商品でしかブロックが表示されないため、登録しない商品には何も出ません。

開催中のオークションは終わるまで待つ

入札が入っているオークションを途中で別のアプリに移すと、それまでの入札履歴や上限額は引き継げません。開催中のものは元のアプリで最後まで終わらせ、新しく始めるオークションからシンプルオークションに切り替えるのが安全です。

埋め込みとカートボタンの設定を見直す

海外製アプリの多くはテーマのアプリ埋め込みを有効にして動くため、使わなくなったらテーマエディタの「アプリ埋め込み」でオフにしておきましょう。また、シンプルオークションのオークションフォームには「カートボタンを非表示」の設定がありますが、他のアプリが独自にカートボタンを隠している場合は二重の指定になることがあります。切り替え後は商品ページを実際に開き、カートボタンと価格の表示が意図どおりかを確認してください。

お客様への案内

入札するにはストアへのログインが必要なので、切り替えのタイミングで「入札にはアカウント登録が必要です」と告知しておくと、当日の問い合わせを減らせます。マイページに入札履歴とウォッチリストのブロックを置いておけば、お客様が自分の入札状況を確認する場所もできます。

まとめ

シンプルオークションは、値付けが難しい一点物や限定品を、お客様同士の競り合いで売るための日本製アプリです。開始価格と期間を決めて商品を選べば、商品ページにカウントダウンと入札フォームが並び、終了後は下書き注文と支払い案内のメールまで自動で用意されます。

設定項目は多いものの、ほとんどは見た目や文言の調整で、最低限必要なのは「メール設定の管理者メールアドレス」「オークション設定」「テーマへの追加と保存」の 3 つだけです。まずは 7 日間の無料体験で、テスト用のオークションを一つ開いてみてください。

おすすめ Shopify アプリ

オークションと組み合わせると便利な、UnReact の Shopify アプリを紹介します。

© 2021 powerd by UnReact