簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

株式会社リテリアのアイコン
株式会社リテリア

はじめに

今回の記事は、Shopify アプリである「らくらく余白調整 | リテリア Margin」の解説記事になります。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。

興味がある方は、以下の URL よりアプリのインストールを行って下さい。

https://apps.shopify.com/margin-1?locale=ja&from=zenn

「らくらく余白調整 | リテリア Margin」は、Shopify のセクション間の余白を調整することができるアプリです。

通常、Shopify で細かくデザイン調整する方法はコーディングしかありませんが、こちらのアプリを使用するとノーコードで微妙な余白を調整することができます。

それでは、アプリをインストールするとできること・インストール方法・使い方の解説を行っていきます。

「らくらく余白調整 | リテリア Margin」でできること

Shopify アプリである「らくらく余白調整 | リテリア Margin」をインストールすると、以下のようにノーコードで余白を調整することができます。

余白を広げるのは勿論、余白を狭めることもできます。PC 時、スマホ時の余白を別々に設定することも可能です。

それでは、「らくらく余白調整 | リテリア Margin」のインストール方法と使い方を解説していきます。

アプリのインストール

それでは、実際にアプリのインストールを行っていきましょう。

ストアの管理画面のアプリ管理から、ストアをカスタマイズに移動しましょう。

アプリの検索窓に、らくらく余白調整 | リテリア Marginと入力して下さい。

広告に敗北していますが、4 番目に出てきました。

こちらをクリックして、アプリ画面に移動して下さい。

アプリを追加するをクリックして、ストアにアプリを追加しましょう。
Shopify パートナー用のアカウント(通称開発アカウント)でインストールを行うと、全ての機能を無料で利用することができます。
ちなみに、マーチャント用のアカウントだと、月額 2.99 ドルで利用できます。7 日間の無料プラン付きです。

アプリを追加するをクリックすると、以下の画面に遷移します。

右上のアプリをインストールをクリックして、アプリのインストールを行いましょう。

以下の管理画面に遷移します。ここまでで、アプリのインストールは終了です。

アプリの設定

それでは次に、アプリの設定を行いましょう。

テーマに反映有効化をクリックします。

有効化が終了したら、次にプレビューをクリックしましょう。

ストアのトップページの一番下に、余白調整が追加されているのが確認できます。

そして、対応する部分に余白が挿入されているのが確認できます。

ここまでで、アプリの導入は一通り完了です。

それでは次に、細かいアプリの使い方を見てみましょう。

余白を調整する

基本的にこのアプリでできることは、余白を調整することだけです。

余白調整(大)余白調整(中)余白調整(小)の3つのアプリブロックを追加することができます。

各々の余白セクションは、調整できる余白の幅が異なります。
実際にこのアプリブロックを利用して、余白を調整してみましょう。
以下のような、セクションとセクションの間にこちらのブロックを挿入してみます。

アプリブロックから挿入されたセクションは、通常のセクションと同じようにドラッグアンドドロップで動かすことができます。

上の赤線の目のマークの右側をつかんで、動かします。

ドラックアンドドロップが終了すると、以下のようになります。

少し、セクション間の余白が広くなったのが確認できますね。

それでは次に、余白の大きさを調整してみましょう。

こちらを操作すれば OK です。

余白を大きくすると、以下のようになります(流石にここまで大きくすることは無いと思いますが...)

逆に余白を小さくして、重ね合わせることも可能です。

三種類のセクションはそれぞれ、余白を調整できる大きさが違います。

また、PC とスマホのそれぞれについて、別々の余白を設定することも可能です。

余白を調整して、訴求力の高いサイトを作成しましょう。

終わりに

今回は、「らくらく余白調整 | リテリア Margin」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。

https://apps.shopify.com/margin-1?locale=ja&from=zenn

recommendおすすめ記事

らくらくお気に入りリスト | リテリア wishlistのアイコン
アプリ解説

Shopifyでお気に入り機能を実装するアプリ『リテリア wishlist』を解説

セット売り|リテリア セット販売のアイコン
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

らくらく見出し挿入アプリ|リテリア Titleのアイコン
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

スマホナビゲーション|リテリア Navigationのアイコン
アプリ解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

よくある質問どこでも挿入|リテリア FAQのアイコン
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

どこでもYouTube動画埋め込み|リテリア Videoのアイコン
アプリ解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!

らくらくバナー設置アプリ|リテリア Bannerのアイコン
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

追従購入ボタンらくらく挿入|リテリア Buy Buttonのアイコン
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

送料無料キャンペーン|リテリア 告知のアイコン
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

スライドショー挿入アプリ|リテリア スライドショーのアイコン
アプリ解説

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

クーポンコード 1クリックでコピー|リテリア Couponのアイコン
アプリ解説

画像をクリックするだけでクーポンコードをコピーできるShopifyアプリ「リテリア Coupon」の解説

離脱防止ポップアップバナー挿入アプリ|リテリア Popupのアイコン
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

らくらく日本語フォント設定|リテリア Font Pickerのアイコン
アプリ解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

商品ページ発売予告アプリ|リテリア Coming Soonのアイコン
アプリ解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

どこでもカートに追加|リテリア ぽんぽんカートのアイコン
アプリ解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

らくらく商品レビュー|リテリア Reviewのアイコン
アプリ解説

日本製商品レビューShopifyアプリ「リテリア Review」の使い方を徹底解説

らくらくランキング表示アプリ|リテリア Rankingのアイコン
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

Aboutページらくらく作成|リテリア About Usのアイコン
アプリ解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説

LINE誘導ボタンらくらく設置|リテリア LINE誘導のアイコン
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説