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

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

はじめに

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

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

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

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

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

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

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

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

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

リテリア 告知の機能

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

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

アプリのインストール

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

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

Shopify app store に移動

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

クリックしてアプリの紹介ページを開く

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

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

アプリをインストール

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

アプリをインストール

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

アプリをインストール

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

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

アプリの管理画面

アプリの詳しい使い方

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

アプリの自動追加

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

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

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

アプリを挿入するテーマを選択

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

「有効化」ボタンをクリック

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

「プレビュー」ボタンをクリック

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

インストールは完了

アプリの手動追加

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

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

「カスタマイズ」テーマエディタを開く

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

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

チェックボタンをオンにする

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

手動でのアプリ追加は完了

アプリのカスタマイズ

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

常時表示の設定

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

常時表示の設定

常時表示の設定

アニメーションの設定

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

アニメーションの設定

バーの位置の設定

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

バーの位置の設定

バーの位置の設定

バーの余白の調整

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

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

バーの余白の調整

バーの余白の調整

バーの余白の調整

バーの背景色

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

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

バーの背景色

バーの背景画像

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

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

バーの背景画像

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

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

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

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

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

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

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

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

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

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

テキストの設定

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

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

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

テキストの設定

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

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

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

ボタンのテキスト設定

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

ボタンのテキスト設定

ボタンのリンク設定

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

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

ボタンのリンク設定

ボタンのデザイン設定

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

ボタンのデザイン設定

終わりに

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

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

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

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

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

recommendおすすめ記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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