【Shopifyアプリ】ストアに送料無料バーを導入したい - 送料無料キャンペーン -

## 本記事について
どうも、副業を頑張る社会人Yao Shunです。

最近、Shopify のデフォルト機能だけだと案件を受注するのはかなり難しいと痛感しました。。。

そこで、Shopify アプリについて知識をつけるため、記事を書き始めました。

今回は、Shopifyストアに送料無料バーを実装できるShopifyアプリについて調べてみたので、皆さんに共有をしたいと思います。

## 本記事で紹介するアプリ

下記の3アプリを紹介します。

- [送料無料バー.amp](https://apps.shopify.com/shipping-bar-1?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=1&surface_type=search) : &d

https://apps.shopify.com/shipping-bar-1?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=1&surface_type=search

- [送料無料バー](https://apps.shopify.com/shopify-application-64?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=2&surface_type=search) : Huckleberry, Inc.

https://apps.shopify.com/shopify-application-64?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=2&surface_type=search

- [送料無料キャンペーン｜リテリア 告知](https://apps.shopify.com/reterior-announcement?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=4&surface_type=search) : 株式会社リテリア

https://apps.shopify.com/reterior-announcement?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=4&surface_type=search

それぞれのアプリについて解説していきます。

## 送料無料バー.amp

一文で言うと、「**送料が無料になるまでの金額をストアに表示してくれる**」アプリです。

### 機能

- カートに入っている商品の合計金額から、送料無料金額までの差額を表示
- 送料無料バーの色や文字色を変更可
- カート内商品の有無によって文言の変更可

### 料金

無料

https://apps.shopify.com/shipping-bar-1?locale=ja&st_campaign=about-app&st_source=admin&utm_campaign=installed&utm_content=contextual&utm_medium=shopify&utm_source=admin

:::note warn
OS 2.0には対応していなので、テーマのコードが汚れる可能性があります。
また、私のストアではアプリをインストールしてもストアに反映されませんでした。
:::

## 送料無料バー

一文で言うと、「**送料が無料になるまでの金額をストアに表示してくれる**」アプリです。
（一文は、先ほどのアプリと同じです。。ひねりがなくてすいません、、）

カート内にある商品の合計金額を自動計算し、送料が無料になるまでの価格をストアに表示してくれます。

表示させるバーのデザインをアプリ管理画面で簡単に編集することが出来るので、Shopifyに慣れていない方でも使用できるかと思います。

**【アプリ管理画面】**
アプリ管理画面では、誘導に従うことで簡単に送料無料バーを作成することができます。
デザイン編集画面も説明がわかりやすく、不慣れな自分でも簡単に導入できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696479/3991ea4a-4909-06c6-5e61-45c7946751c0.png)

**【ストア画面】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696479/a3571695-b707-49e2-fca1-a5aac486a4b5.png)


### 機能

- 送料無料までの金額の設定
- メッセージ機能
    - 絵文字利用可能
    - カートに入れられた商品の合計金額によってメッセージを変更可能
    - 条件を満たした場合も自動でメッセージを変更
- スタイル機能
    - バーの背景色・文字色をショップのデザインに合わせて自由に設定可能


### 料金
無料

:::note warn
OS 2.0には対応していないので、テーマのコードが汚れる可能性があります。
:::

## 送料無料キャンペーン｜リテリア 告知
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696479/352786fd-0a2d-26af-b8c4-b37dc27c9f70.png)

一文で言うと、「**送料無料、LINE誘導、お知らせなど、自由自在にカスタマイズできるバーを作成できる**」アプリです。

送料無料バー、LINE誘導バー、お知らせバーなどの告知バーを自由自在に作成できます。

また、バーの中にボタンを埋め込むことができるので、コレクションページやイベント紹介ページ、LINE友達追加リンクまで埋め込む事が可能です。

**【アプリ管理画面】**
アプリ管理画面では、自動インストールや手動インストールの方法が記載されているため、スムーズにインストールすることができます。
インストールした後は、セクションが追加されそこでデザインカスタマイズができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696479/3dd24023-ab55-43fb-2fca-9cb270f083b5.png)

**【ストア画面】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696479/241103e7-f799-91ce-6d68-284d5afe4593.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2696479/f065ae63-31a8-c549-cdd0-48fb5e0dc470.png)


### 機能

- バーのテキストを変更可能
- デザイン編集
    - 文字の大きさ・色
    - ボタンの色・リンク先・枠線
    - バーの背景色・アニメーション
    - バーの位置（画面の上下）

### 料金
$4.90 / 月　

**※7日間の無料体験があるので、気軽に導入できます。
また、オープンしていない開発ストアでは無料でずっと使用できます。**

:::note
OS 2.0に対応しており、インストール、アンインストールを簡単にできます。
:::

## まとめ

今回は、Shopify ストアに送料無料バーを導入できる3つのアプリを紹介しました。

無料で使いたい人は HUCKLEBERRY さんの「送料無料バー」、ストアに合ったデザインで告知をしたい方はリテリアさんの「送料無料キャンペーン｜リテリア 告知」が良いかと思いました。

個人的には色々カスタマイズできる「送料無料キャンペーン｜リテリア 告知」を使っていこうかと思います。

今回はこの辺で👋

### 紹介したアプリ
- [送料無料バー.amp](https://apps.shopify.com/shipping-bar-1?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=1&surface_type=search) : &d

https://apps.shopify.com/shipping-bar-1?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=1&surface_type=search

- [送料無料バー](https://apps.shopify.com/shopify-application-64?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=2&surface_type=search) : Huckleberry, Inc.

https://apps.shopify.com/shopify-application-64?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=2&surface_type=search

- [送料無料キャンペーン｜リテリア 告知](https://apps.shopify.com/reterior-announcement?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=4&surface_type=search) : 株式会社リテリア

https://apps.shopify.com/reterior-announcement?locale=ja&surface_detail=%E9%80%81%E6%96%99%E7%84%A1%E6%96%99%E3%83%90%E3%83%BC&surface_inter_position=1&surface_intra_position=4&surface_type=search