はじめに

今回の記事は Shopify アプリ「送料無料キャンペーン｜リテリア 告知」の解説記事になります。

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

「送料無料キャンペーン｜リテリア 告知」は、Shopify ストアに送料無料バーや LINE 誘導バーなどの告知バーを表示することができるアプリです。

送料無料バーを表示することで、顧客にキャンペーンを訴求することができます。

ストアに送料無料バーや LINE 誘導バーなどの告知バーを表示したいという方は、ぜひインストールしていただきたいです。

送料無料キャンペーン｜リテリア 告知

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

「送料無料キャンペーン｜リテリア 告知」でできること

「送料無料キャンペーン｜リテリア 告知」を使用すると、以下の画像のように自分の好きなデザインでストアに送料無料バーや LINE 誘導バーなどの告知バーを表示することができます。（デモサイトはこちらです。）

送料無料バーのバーの色/配置/アニメーション、文字のサイズ/色、など豊富なカスタマイズを揃えているため、ストアにあったデザインにカスタマイズすることができます。

:::message alert
Online Store 2.0 非対応テーマ（Debut・Brooklyn・Narrative など）は、アプリの動作対象外となりますので、ご注意ください。
:::

アプリのインストール

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

ストアの管理画面の「アプリ管理」画面に表示されている「ストアをカスタマイズ」をクリックして、Shopify app store に移動してください。

アプリストアで、「送料無料キャンペーン｜リテリア 告知」を検索してください。
検索結果に「送料無料キャンペーン｜リテリア 告知」が表示されますので、クリックしてアプリの紹介ページを開きます。

「アプリを追加する」ボタンをクリックして、自分の Shopify ストアにアプリを追加します。
Shopify パートナーアカウントをお持ちの方は、開発ストアにインストールを行うことで全ての機能を無料でご利用いただくことが可能です。

マーチャント用のアカウント（普通の Shopify アカウント）ですと、月額 $4.90 でご利用いただけます。また、7 日間の無料お試し期間をご利用いただいてアプリの挙動をご確認いただくことができます。

以下の画像のようなアプリのインストール確認画面が表示されます。
プライバシポリシーなどにご同意いただける場合は、「アプリをインストール」をボタンをクリックしてください。

アプリの請求画面が表示されます。「承認」ボタンをクリックすることで、アプリの管理画面にアクセスできるようになります。
請求が始まるタイミングは、承認してから 7 日後から取りますので、安心して承認ボタンをクリックしてください。7 日間以内にアンインストールした場合は、アプリの料金は一切請求されません。

:::message
開発ストアの場合は、請求画面は表示されません。マーチャントにストアのオーナー権を移行した後に請求が開始されます。
:::

以下のようなアプリの管理画面が表示されれば、インストールは完了です。

アプリの詳しい使い方

ここからは、アプリの詳しい使い方について説明していきます。

アプリの自動追加

「送料無料キャンペーン｜リテリア 告知」には、アプリの自動追加機能があり、1 クリックでアプリをテーマに導入することができます。
自動インストールを行うとストアの TOP ページにランキングを表示するためのアプリブロックが挿入されます。

:::message
自動インストールでは、TOP ページにランキングコレクションが挿入されます。TOP ページ以外でランキングコレクションを表示したい場合は、アプリの手動追加を参考にアプリブロックを追加してください。s
:::

アプリの管理画面で「アプリをインストールするテーマを選択」でアプリを挿入するテーマを選択します。

テーマを選択したら、「有効化」ボタンをクリックすることで、自動インストールが行われます。

「プレビュー」ボタンをクリックすることで、アプリがインストールされたアプリの画面を開くことができます。

初期状態の送料無料バーが、ストアに表示されていればインストールは完了です。

アプリの手動追加

アプリの自動追加がうまくいかない場合などは、手動でアプリブロックを有効化してください。

管理画面の「オンラインストア」を開きます。アプリを導入したいテーマの「カスタマイズ」テーマエディタを開きます。

左下の「テーマ設定」から「アプリを埋め込む」を押します。

そうすると、リテリア 告知のチェックボタンが表示されるので、チェックボタンをオンにします。

初期状態の送料無料バーがストアに表示されていれば、手動でのアプリ追加は完了です。

アプリのカスタマイズ

アプリの設定項目について説明します。

常時表示の設定

「画面固定:パソコン時」にチェックを入れると告知バーが画面に固定されて、常時表示されるようになります。

アニメーションの設定

「スライドイン」にチェックを入れると、下記動画のように、告知バーをスライドインさせることができます。

バーの位置の設定

「バーの位置」を選択することで、画面上部や画面下部など、バーを表示させる位置を決定することが出来ます。

バーの余白の調整

「バー余白(縦)、バー余白(横)」でバーの端とテキストの間に余白を設ける事ができます。

バー余白(縦)では上下の余白、バー余白(横)では左右の余白を調節できます。

バーの背景色

「背景色」では、バーの背景の色を指定できます。

※次の「背景画像」で画像が選択されているときは、背景の色は適用されません。

バーの背景画像

「背景画像」では、バーの背景画像を設定できます。

画像がバーよりも大きい場合は、画像上部が切り取られて適用されます。

テキストとボタン間の余白を設定

「テキスト・ボタン間余白」では、テキストとボタンの間の余白を調節できます。

テキストとボタンの位置を設定

「テキスト位置」では、テキストの配置を指定することができます。

選択出来る項目は、左寄せ、中央寄せ、右寄せの３種類です。

テキストの設定

「テキスト」では、バーに表示するテキストを入力します。

ここのテキストでは、Liquid を書くことが出来ます。

Liquid については、こちらを参考にしてください。

テキストのフォントサイズ・色・太さの設定

「フォントサイズ」、「フォントウェイト」、「文字色」を設定することで、バーのテキストのフォントサイズ、色、太さを変更することが出来ます。

ボタンのテキスト設定

ボタン設定の「テキスト」で、ボタンのテキストを設定できます。

ボタンのリンク設定

ボタン設定の「リンク」で、ボタンをクリックした際に飛ばすページを設定できます。

Shopify のページだけでなく、外部のページ飛ばすことも可能です。

ボタンのデザイン設定

ボタンの余白、背景色、枠線、ボタンの角の丸み、枠線の色を設定することで
ボタンのデザインを自由にカスタマイズできます。

終わりに

今回は、「送料無料キャンペーン｜リテリア 告知」の解説を行いました。

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

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

送料無料キャンペーン｜リテリア 告知
もし、うまく動かない、設定方法がわからない、さらに機能を追加して欲しい等ありましたら、下記よりお問い合わせいただけますと幸いです。

https://www.re-terior.com/contact-us