カスタムボタンとは、商品ページに任意のメッセージとボタンを表示できる機能です。会員限定商品へのログイン誘導や、販売終了後のマイページ導線など、様々な場面で活用できます。
デモ商品で動作を確認できます→ [デモ]カスタムボタン
会員限定商品に非会員へのログイン・会員登録ボタンを表示する
販売終了後にマイページや関連コレクションへの導線を表示する
予約販売中に注意事項や詳細ページへのリンクを表示する
Online Store 2.0対応のShopifyテーマのみご利用いただけます
商品詳細ページのメイン商品にのみ表示されます
メッセージ・メインボタン・サブボタンの3要素で構成されます
メインボタン・サブボタンはテキストとリンクの両方が設定されている場合のみ表示されます
メッセージ内のリンクは新規タブで開きます。ボタンのリンクは同一タブで開きます
アクション（予約販売時）・（開始日前）・（終了日後）・（条件外）それぞれに個別設定できます
(1) Shopify管理画面の「オンラインストア」→「テーマ」を開く(2) 使用中のテーマの「カスタマイズ」をクリックする
(3) テーマエディタで商品ページのテンプレートを開く(4) 左側のブロック追加から「アプリ」タブを選択し、「カスタムボタン」を追加する(5) 表示位置を任意の場所に調整する(6) 「テーマエディターでデモを表示」をオンにしてデザインを確認・調整する
テーマエディタ上の設定項目
セクション | 項目 | 説明 |
|---|---|---|
基本外観 | 背景色 | コンテナの背景色 |
基本外観 | 文字色 | メッセージのテキスト色 |
基本外観 | 枠線色 | コンテナの枠線色 |
基本外観 | 枠線幅 | コンテナの枠線の太さ |
基本外観 | コンテナの角丸 | コンテナの角の丸み |
基本外観 | ボタンの角丸 | ボタンの角の丸み |
基本外観 | フォントサイズ | テキストの大きさ |
基本外観 | ボタン配置 | 横並び / 縦並び |
メインボタン | 背景色・文字色・枠線色 | メインボタンの色設定 |
サブボタン | 背景色・文字色・枠線色 | サブボタンの色設定 |
(7) 「保存」をクリックする
(1) 対象の予約販売ルールを開く(2) 「アクション」セクションから表示させたいタブ（予約販売時・開始日前・終了日後・条件外）を開く
(3) 「カスタムボタンを表示する」にチェックを入れる(4) 下記の項目を設定する
項目 | 説明 |
|---|---|
カスタムボタンのメッセージ | ボタン上部に表示するテキスト。 |
カスタムボタンのメインボタン：テキスト | メインボタンに表示するテキスト（例：今すぐ購入） |
カスタムボタンのメインボタン：リンク | メインボタンのリンク先URL |
カスタムボタンのサブボタン：テキスト | サブボタンに表示するテキスト（例：詳細を見る） |
カスタムボタンのサブボタン：リンク | サブボタンのリンク先URL |
(5) 「保存」をクリックする
(1) 対象の予約販売ルールを開く
(2) 右上の「翻訳」をクリックする
(3) 翻訳する言語を選択する(4) カスタムボタンの項目に翻訳データを入力する
(5) 「保存」をクリックする