カスタムボタン

カスタムボタンは、予約販売ルールを適用した商品の商品ページに、任意のメッセージとボタンを表示できる機能です。会員限定商品へのログイン誘導や、販売終了後のマイページ導線など、状態に応じた案内に活用できます。

動作は「[デモ]カスタムボタン」のデモ商品で確認できます。

• 会員限定商品に、非会員向けのログイン・会員登録ボタンを表示する

• 販売終了後に、マイページや関連コレクションへの導線を表示する

• 予約販売中に、注意事項や詳細ページへのリンクを表示する

• Online Store 2.0対応のShopifyテーマだけで利用できます。テーマにアプリブロックを追加する必要があります（ステップ1）

• スタータープラン以上で利用できます。旧ライトプランでは設定欄が操作できず、ストアにも反映されません。

• テーマで埋め込みアプリ「RuffRuff 予約販売」が有効になっている必要があります。

• 商品ページのメイン商品にだけ表示されます。商品一覧内の商品には表示されません

• メッセージ・メインボタン・サブボタンの3要素で構成されます

• メインボタン・サブボタンは、テキストとリンクの両方を入力した場合だけ表示されます

• メッセージ内のリンクは新しいタブで開きます。ボタンのリンクは同じタブで開きます

• アクションの「予約販売時」「条件外」「開始日前」「終了日後」の各タブで、個別に設定できます

商品ページのテンプレートに、カスタムボタンのアプリブロックを追加します。

(1) Shopify管理画面 → オンラインストア → テーマを開く

(2) 使用中のテーマの「カスタマイズ」を選択する

(3) テーマエディタで商品ページのテンプレートを開く

(4) 左側の「ブロックを追加」で「アプリ」タブを選択し、「カスタムボタン」を追加する

(5) 表示位置を任意の場所に調整する

(6) 「テーマエディターでデモを表示」を有効にして、デザインを確認・調整する

実際のボタンとの重複を避けるため、確認が終わったら無効に戻してください。

アプリブロックの設定は、上から「プレビュー設定」「スペーシング」「基本外観」「メインボタン」「サブボタン」の5つのセクションに分かれています。

メインボタンとサブボタンには、それぞれ背景色・文字色・枠線色を設定できます。

(7) 「保存」を選択する

表示する内容は、予約販売ルールの「アクション」で状態ごとに設定します。

(1) 対象の予約販売ルールを開く

(2) 「アクション」セクションで、表示する状態のタブを開く

タブは左から「予約販売時」「条件外」「開始日前」「終了日後」の順に並びます。「開始日前」「終了日後」のタブでは、先に「開始日前アクションを有効にする」「終了日後アクションを有効にする」にチェックを付けると、以降の設定項目が表示されます。

(3) 「詳細設定」にある「カスタムボタンを表示する (Online Store 2.0対応テーマのみ)」にチェックを付ける

(4) 次の項目を設定する

入力例は、各項目の入力欄に薄く表示される例示です。実際の値は入力してください。

(5) 「保存」を選択する

カスタムボタンのメッセージ・ボタンのテキスト・リンクは、言語ごとに設定できます。リンクも翻訳対象のため、言語ごとに異なる遷移先を指定できます。

(1) 対象の予約販売ルールを開く

(2) 右上の「翻訳」を選択する

(3) 翻訳する言語を選択する

(4) カスタムボタンの各項目に翻訳後のテキストを入力する

(5) 「保存」を選択する

翻訳画面には、元の言語で値を入力している項目だけが表示されます。カスタムボタンの5項目がすべて未入力のタブは、翻訳画面にも表示されません。

• アクション

• 会員限定で販売する

• 翻訳・多言語対応