Shopifyストアに送料無料バーを表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル送料無料バー｜あといくらで送料無料表示」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル送料無料バー｜あといくらで送料無料表示」は、カート金額に応じてリアルタイムで送料無料までの金額を表示できるアプリです。
アプリを利用することで、送料無料までの金額をプログレスバーで視覚的に表示し、顧客の購買意欲を高めることができます。また、バーの色やテキスト、表示位置などをノーコードで簡単に設定できるため、専門知識がない方でもスムーズに導入が可能です。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプル送料無料バー｜あといくらで送料無料表示」でできること
Shopify アプリである「シンプル送料無料バー｜あといくらで送料無料表示」は、以下のようにストアに送料無料のプログレスバーを設置できるアプリです。
主な特徴は次のとおりです。
-
送料無料までの金額をリアルタイムで表示
カート金額に応じて、送料無料まであといくら必要かを自動計算して表示します。 -
ノーコードで簡単カスタマイズ
送料無料になる金額やバーのデザインを、コード不要で自由に設定できます。 -
1 クリックでテーマに追加
インストール後、ワンクリックでストアに送料無料バーを設置できます。
これらを活用することで、カート落ちを減らし、より多くの購入を促進することができます。
ノーコードで送料無料バーを簡単に設置できる
送料無料バーをコード編集なしで簡単に設置できます。専門知識がなくても、誰でもすぐに導入可能です。
送料無料に必要な注文金額を設定できる
送料が無料になる金額を自由に設定できます。ストアの配送ポリシーに合わせて、適切な金額を設定しましょう。
ノーコードでデザインをカスタマイズできる
バーの色、テキスト、フォントサイズなど、見た目を自由にカスタマイズできます。ストアのブランドイメージに合わせて、最適なデザインに調整できます。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでストアへの送料無料バーアプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプル送料無料バーアプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額$4.89（1 週間の無料期間あり）となっております。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプル送料無料バー｜あといくらで送料無料表示」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額$4.89 で、1 週間の無料期間がございます。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプル送料無料バーのアプリブロックをテーマに追加
「シンプル送料無料バー｜あといくらで送料無料表示」を実際にテーマに組み込み、送料無料バーをストア上に表示できるように設定していきましょう。
自動でアプリをテーマに追加
アプリの管理画面を開いてください。
『テーマに送料無料バーを追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリが有効化されます。
「保存する」をクリックして、有効化は完了です。
以上で、テーマに自動的に送料無料バーアプリブロックが追加されます。
手動でアプリをテーマに追加
自動追加がうまくいかない場合や、別のテーマで手動調整したい場合、特定のページにアプリブロックを追加したい場合は以下の手順で行ってください。
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、サイドバーの埋め込みアプリアイコンをクリックします。
すると埋め込みアプリ一覧が表示されるので、「送料無料バー」を有効化してください。
有効化できたら「保存する」ボタンをクリックしてください。
以上で、手動でのブロック追加は完了です。
シンプル送料無料バーアプリのカスタマイズ
テーマにアプリブロックを追加したら、カスタマイズ画面より「シンプル送料無料バー｜あといくらで送料無料表示」のカスタマイズを行えます。
テーマカスタマイズ画面を開き、サイドバーサイドバーの埋め込みアプリアイコンをクリックします。
埋め込みアプリの一覧が表示されるので「送料無料バー」をクリックします。
すると下記のような設定項目が表示されます。
基本設定
「配送料無料になる購入金額（円）」に送料が無料になる金額を入力します。この金額に達すると、送料無料バーが 100%になり、達成メッセージが表示されます。
「左側の文言」「未達時のメッセージ」「達成時のメッセージ」で、それぞれの状態で表示するテキストをカスタマイズできます。[cart_total]、[threshold]、[remaining]といった変数を使用して、動的な金額表示が可能です。
デザイン設定
送料無料バーの見た目をカスタマイズできます。
- コンテナ幅：バー全体の幅を調整できます。
- 表示位置：ヘッダーの上部に固定表示するか選択できます。
- バーの高さ：プログレスバーの高さをピクセル単位で設定できます。
- プログレスバーを表示：プログレスバーの表示/非表示を切り替えられます。
カラー設定
各要素の色を自由に設定できます。
- 背景色（コンテナ）：バー全体の背景色
- テキスト色：文字の色
- バーの色：プログレスバーの色
- バーのトラック色：プログレスバーの背景色
- テキストの配置：左右に配置、または中央に配置を選択できます。
フォント・余白設定
テキストの見た目と余白を細かく調整できます。
- テキストサイズ（PC / SP）：PC とスマホそれぞれのフォントサイズ
- テキストとバーの間隔：テキストとプログレスバーの間のスペース
- コンテナの上下の内側余白（PC / SP）：バー内部の上下余白
追加の CSS
「追加の CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力して下さい。クラス名などは検証を利用して取得してください。
おわりに
今回は「シンプル送料無料バー｜あといくらで送料無料表示」の解説を行いました。
- 送料無料までの金額をリアルタイムで表示して、購買意欲を向上
- カート落ちを減らし、より多くの購入を促進
- 月額$4.89で利用可能（1 週間の無料期間あり）
送料無料バーを使って顧客の購買行動を促進し、売上向上にぜひお役立てください。
ここまでお読みいただき、誠にありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
