Shopifyでセクション間の余白を調整できるアプリを解説

Shopifyのストアでデザインを作っていると、「セクションとセクションの間の余白を調整して見た目を整えたい」 ときがあるかと思います。

そういうときは、テーマの編集画面の左側にあるセクションをクリックしてみましょう。画面右側に表示される項目に「余白を調整できる欄」があれば、そこで整えることが可能です。

しかし以下のように、画面左側にあるセクションをクリックしても、画面右側に余白を調整する欄がないことも多々あります。

そういう場合は、「コーディングを行う」「アプリを導入する」 といった方法でセクションの余白を調整することになります。

コーディングでの余白の調整については、調整したいセクション以外の多くの部分に影響がでてしまう場合もあり、意外と難しいケースもあるかもしれません。

そこで今回は、「コーディングはできれば避けたい」という人に向けて、ノーコードのアプリで余白を調整する方法を解説していきたいと思います。

本記事では以下の記事を参考にして解説していきます。
簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

余白を調整するアプリについて

今回、使用するアプリは以下の通りです。
らくらく余白調整 | リテリア Margin

このように余白に幅を持たせたり

マイナスの余白を用いてセクションを重ねたりができます。

このアプリには以下のような特徴があります。

• ノーコードで余白を調整できる
• テーマの編集画面で見た目を確認しながら調整できる
• マイナスの余白を作ってセクション同士を重ねることもできる
• 日本人エンジニアによるサポートあり
• 月額料金は2.99ドル、7日間の無料体験期間あり

らくらく余白調整 | リテリア Marginの使い方

ここからは、Shopifyのストアでセクションの余白を調整できるアプリについて、インストール方法やカスタマイズ方法を解説していきます。

アプリのインストール方法

まず、ストアの管理画面でアプリ>アプリと販売チャネルの設定>ストアをカスタマイズとクリックしましょう。

検索ボックスにらくらく余白調整 | リテリア Marginと入力して検索し、該当のアプリを選んでアプリを追加するをクリックします。

アプリをインストールをクリックします。

すると以下のダッシュボードが表示されます。テーマに反映の項目でアプリをインストールするテーマを選び（ここではStudioを選択しています）、有効化をクリックします。

アプリをインストールしましたのポップアップがでたら、プレビューをクリックしましょう。

ストアのホームページが表示されます。

画面左側の項目を下の方までスクロールすると、余白調整（大） というアプリが追加されているのが確認できます。

アプリのカスタマイズ方法

アプリをカスタマイズする前に、余白を調整したい場所までアプリを移動します。

画面左側の項目の、余白調整（大） があるアプリの右側をクリックしてドラッグアンドドロップします。

今回は、スライドショーと特集コレクションの間の余白を調整していきたいと思います。

PCの余白を調整

画面左側の項目で余白調整（大） をクリックすると、画面右側に余白の幅を設定する欄がでてきます。

PC・スマホそれぞれについて、余白の幅を設定可能です。

• 画面左側
  

• 画面右側
  

試しに余白の幅をさまざまな数値に変更してみると、以下のようなデザインになりました。

• 128px
  

• 400px
  

• -32px
  

• -160px（スライドショーと特集コレクションのセクションが重なっている）
  
  

スマホの余白を調整

スマホの余白を調整する場合は、画面上部・右側にあるパソコンのマークをクリックしてモバイルを選択しましょう。

スマホの表示を確認しながら、PCのときと同じ手順で余白の幅を決めていきます。

余白調整アプリを増やす

余白調整アプリを増やしたい場合は、画面左側の項目を下までスクロールし、セクションを追加をクリックして下までスクロールすると以下のようにアプリを追加できます。

あとは初めのように、アプリをドラッグアンドドロップして余白を調整したい場所に移動すればOKです。

余白調整アプリには大・中・小がある

なお、この余白調整アプリには大・中・小があり、以下のように設定できる余白の幅が異なります。状況に合わせて使い分けてみてください。

• 余白調整（大）：-800px～800px
• 余白調整（中）：-400px～400px
• 余白調整（小）：-50px～50px

まとめ

今回はShopifyのストアで余白を調整できるアプリについて解説してきました。

ノーコードで余白を調整できるため、誰でも気軽にストアのデザインを整えられる点が便利だと思います。

今回使用したアプリとアプリの特徴は以下の通りです。
らくらく余白調整 | リテリア Margin

• ノーコードで余白を調整できる
• テーマの編集画面で見た目を確認しながら調整できる
• マイナスの余白を作ってセクション同士を重ねることもできる
• 日本人エンジニアによるサポートあり
• 月額料金は2.99ドル、7日間の無料体験期間あり

以下は今回参考にした記事です。
簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

ここまでお読みいただき、ありがとうございました。