カウントダウン|SHOP Builder

4. EC + SC (EN).png

アプリを通じて高度なページを追加または編集する際に、顧客にストアキャンペーンがまもなく開始または終了することを思い出させるために、お知らせバナーとしてカウントダウンパーツを追加できます。また、ボタンをデザインし、イベントへのハイパーリンクを挿入して、オンラインストアの訪問者に期待感を提供することもできます。

 

⚠️ 始める前に:

  • アプリは現在、Ultra Chic、Kingsman、Varm、およびPhiliaテーマテンプレートのみをサポートしています。
  • アプリを使用してページを作成した後、他のテーマテンプレートに切り替えてもページは表示されますが、編集できず、レイアウトが崩れる可能性があります。この点に注意してページを公開してください。

この記事では、次のことを学びます


1. カウントダウンパーツを追加する

ステップ 1

SHOPLINE管理画面に進み、> [オンラインストアデザイン] > [ページ] をクリックして、高度なページ/編集をクリックして高度なページ設定ページを開きます。EN1.png

 

ステップ 2

1. お知らせバナーとしてカウントダウンパーツを追加する

お知らせバナーのボタンをクリックします。EN_2-1-1_SHOP_Builder_Countdown_fix.png

カウントダウンをクリックしてカウントダウンパーツを追加します。EN_2-1-2_SHOP_Builder_Countdown_fix.png
 

 

2. コンテンツにカウントダウンパーツを追加する

パーツのボタンをクリックします。EN2.png

 

「拡張」パーツの下にあるカウントダウンをクリックします。
EN3.png

 

ステップ 3

カウントダウンの内容と設定は左側の列で編集できます。「期間」セクションに移動して、イベントの開始時刻と終了時刻を設定します。右側のプレビューエリアにパーツを表示するには、下部の保存をクリックします。

Screenshot 2025-05-08 at 3.01.01 PM.png
 

*注意事項:

  • イベント期間を設定していない場合、カウントダウンパーツは右側のプレビュー画面に表示されません。
  • Varmテーマテンプレートは異なるカウントダウンパーツデザインを提供しています。
    Screenshot 2025-05-08 at 3.08.53 PM.png

     

ステップ 4

「カウントダウン開始」セクションを展開して、イベント前のカウントダウンのタイトル、内容、ボタンを設定します。

  • タイトル:今後のイベントのタイトルを入力します
  • 内容:今後のイベントの説明を入力します
  • ボタンを表示:ボタンを表示または非表示にするためのオン/オフ切り替え
  • ボタンテキスト:ボタンのテキスト内容を設定します
  • リンク先イベントのURLを貼り付けることができます。顧客はイベントボタンをクリックするとこのURLに移動します
  • リンクを開くイベントのURLを現在のウィンドウまたは新しいウィンドウで開くことを選択できます
     

EN5.png

 

ステップ 5

「カウントダウン終了」セクションを展開して、イベント中のカウントダウンのタイトル、内容、ボタンを設定します。

  • タイトル:進行中のイベントのタイトルを入力します
  • 内容:進行中のイベントの説明を入力します
  • ボタンを表示:ボタンを表示または非表示にするためのオン/オフ切り替え
  • ボタンテキスト:ボタンのテキスト内容を設定します
  • リンク先イベントのURLを貼り付けることができます。顧客はイベントボタンをクリックするとこのURLに移動します
  • リンクを開くイベントのURLを現在のウィンドウまたは新しいウィンドウで開くことを選択できます
     

EN6.png

 

ステップ 6

パーツのパディングとテキストの配置(左/中央/右)を設定します。
EN7.png

 

ステップ 7

パーツの色設定を調整します。パーツの色をカスタマイズするかどうかを設定するために、トグルをオン/オフに切り替えます。

トグルをオンにすると、これらのパーツの色をカスタマイズできます: 背景、テキスト、テキストリンク、ボタン背景、ボタンテキスト。
EN8.png

 

ステップ 8

セットアッププロセス中に、下の保存ボタンをクリックすると、右側のプレビューエリアに新しく追加されたカウントダウンパーツが表示されます。
*注意:ページはPC版またはモバイル版でプレビューできます。

Screenshot 2025-05-08 at 3.02.13 PM.png

Screenshot 2025-05-08 at 3.03.31 PM.png

またはページをプレビューをクリックしてストアフロントをプレビューします。

Screenshot 2025-05-08 at 3.04.40 PM.png
 

ステップ 9

上記のセットアップを確認したら、右上の公開ボタンをクリックして、顧客がストアフロントで新しいページコンテンツをすべて表示できるようにしてください。

Screenshot 2025-05-08 at 3.05.26 PM.png

 

2. 注意事項

  • イベント時間はGMT+Nとして表示されます。
  • どのタイムゾーンにいても、ウィジェットのカウントダウン時間はオンラインストアのタイムゾーンです。
  • イベント時間は絶対的です。顧客がどのタイムゾーンにいても、イベントカウントダウンの残り時間はオンラインストアの時間 - 終了時間です。
    例えば、あなたのオンラインストアのタイムゾーンがGMT+8で、イベントの終了時間が12月25日12:00(GMT+8)です。
    • 顧客AはGMT+8のタイムゾーン(あなたのオンラインストアと同じタイムゾーン)にいて、12月25日の09:00(GMT+8)に、Aが見たイベントの残りカウントダウン時間は12 - 9 = 3時間です。
    • 顧客BはGMT+9のタイムゾーン(あなたのオンラインストアより1時間進んでいる)にいて、12月25日の10:00(GMT+9)(GMT+8の09:00に相当)に、Bが見たキャンペーンのカウントダウン時間は依然として12 - 9 = 3時間です。

 

さらに読む



 

 

 

 

この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント