フローティングボタンの位置を調整する

RuffRuff 購入特典のフローティングボタンは、テーマエディタで表示位置を選び、端からの距離や上下位置をモバイルとデスクトップ別に調整できます。

位置の標準は右下です。標準の距離は、モバイルが端から12px、デスクトップが端から24pxで、従来の表示位置と同じです。

• 位置を「左下」「右下」「左真ん中」「右真ん中」から選ぶ

• 下端や左右端からの距離、中央からの上下位置をpx単位で調整する

• モバイルとデスクトップで、別々の距離を設定する

有効にする手順は、ウィジェットの「ステップ1 埋め込みアプリを有効にする」を確認してください。

(1) テーマエディタで「フローティングボタン」を開く

Shopify管理画面 → オンラインストア → テーマ → カスタマイズを開いてください。埋め込みアプリのアイコンから「RuffRuff 購入特典」を展開し、「フローティングボタン」の項目を表示します。

(2) 「位置」を選択する

「位置」で、「左下」「右下」「左真ん中」「右真ん中」のいずれかを選択してください。選んだ位置に合わせて、距離の入力欄が切り替わります。

(3) 距離を調整する

モバイルとデスクトップそれぞれの入力欄で、距離や上下位置を調整してください。スライダーを動かすほか、数値を直接入力しても変更できます。

(4) 設定を保存する

画面右上の「保存」を選択してください。オンラインストアを開き、モバイルとデスクトップの幅でボタンの位置を確認します。

選んだ位置によって、表示される入力欄が変わります。

「位置」と、ボタンの表示・非表示、アイコン、バッジカラーは、それぞれ別の項目です。

項目名の先頭には、「モバイルの」または「デスクトップの」が付きます。画面幅が640px未満の場合はモバイルの値、640px以上の場合はデスクトップの値が使われます。

• 中央からの上下位置: マイナスで上、プラスで下へ移動します。0pxは画面の縦中央です。

• 刻み: 入力値は刻みに合わせて調整されます。たとえば、下端からの距離に71pxは指定できません。

• 標準値: 設定を変更しない場合の値です。従来の表示位置と同じです。

• 保存される値: 「下端からの距離」と「中央からの上下位置」は別々に保存されます。位置を切り替えても、もう一方の値は残ります。

ボタンを選択すると開くウィジェットの位置は、端末と位置に応じて変わります。

• デスクトップ（左下・右下）: ボタンの上にウィジェットを開き、選んだ左右端に揃えます。

• デスクトップ（左真ん中・右真ん中）: 左のボタンなら右隣、右のボタンなら左隣に開きます。

• モバイル: 位置にかかわらず、画面の下部に全幅で表示します。

• 画面が小さい場合: デスクトップでも、ボタンの上に160px、またはボタンの横に320pxの余白を確保できない場合は、画面の下部に全幅で表示します。

• ウィジェット

• ウィジェットが表示されない