余白設定｜SHOP Builder

4. EC + SC (EN).png

SHOP Builder でカスタムページを追加・編集する際は、ブロック間の余白を自由に調整できます。画像や商品などの間隔を適切に設定することで、見やすく整ったページを作成し、顧客により快適なショッピング体験を提供できます。

本記事では、以下の内容についてご説明します。

１、余白の種類

SHOP Builder の左側メニューでは、PC とモバイル版でそれぞれ、ブロックの上下・左右・四辺の余白を調整できます。
Screenshot_2023-04-17_at_5.32.32_PM.png

余白の種類	説明
ブロックの上下余白	ブロックの上下の余白を、PC版・モバイル版でそれぞれ調整できます。設定値：1～30、デフォルト値：30
ブロックの左右余白	ブロックの左右の余白を、PC版・モバイル版でそれぞれ調整できます。設定値：1～40、デフォルト値：15 ＊ご注意：PC 版の幅はモバイル版の２倍です。
ブロックの四辺余白	PC 版のブロックは、上下左右の余白を同時に調整できます。設定値：1～80、デフォルト値：15 ＊ご注意：モバイル版では四辺の余白を同時に調整することはできません。

各ブロックの余白を調整することで、デザイン全体に統一感のあるレイアウトに仕上げることができます。例えば、「画像ギャラリー」と「商品カテゴリ」の間の余白を０に設定すると、メインビジュアルと商品の間に一体感を持たせることができます。

画面例：

ブロック	調整可能な余白
画像ギャラリー商品カテゴリテキスト	ブロックの上下余白コンポーネントの左右余白ブロックの四辺余白
フッターエディター関連コンテンツ	コンテンツの上下余白コンテンツの左右余白コンテンツの四辺余白
カルーセル商品リスト商品カルーセル動画コレクション画像・テキスト Instagram ニュースレター商品紹介ブログアコーディオンカウントダウン	ブロックの上下余白ブロックの四辺余白

ブロック	調整可能な余白
画像ギャラリー商品カテゴリテキスト	ブロックの上下余白コンポーネントの左右余白ブロックの四辺余白
フッターエディター関連コンテンツ	コンテンツの上下余白コンテンツの左右余白コンテンツの四辺余白
カルーセル商品リスト商品カルーセル動画コレクション画像・テキスト Instagram ニュースレター商品紹介ブログアコーディオンカウントダウン	ブロックの上下余白ブロックの四辺余白