Shopifyでバナーを表示する2つの方法を紹介

## はじめに

Shopify ストアを運営する際に、視覚的な要素であるバナーは、顧客の関心を引き、売上を向上させるために重要な役割を果たします。バナーを効果的に活用することで、プロモーションの告知や新商品のお知らせ、季節ごとのキャンペーンなど、さまざまなメッセージを顧客に伝えることができます。

これらの方法を活用することで、ストアの魅力をさらに高め、顧客の購買意欲を引き出すことができます。初めての方でも簡単に設定できる手順を詳しく解説していきますので、ぜひ参考にしてください。

以下の記事を参考にしています。

- [Shopify にバナーを設置する方法を徹底解説！](https://unblog.unreact.jp/blog/b7p6qmm01)
- [Shopifyでバナーを実装する方法を考察](https://zenn.dev/natsume_katu/articles/3149e75dac3e46)
- [Shopify ストアでリンクに対応したバナーの実装方法や日本語アプリについて徹底解説！](https://unreact.jp/blog/shopify-banner)
- [Shopifyに画像バナーを追加できるアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-013-ur-banner-app/guide)

## Shopify におけるバナーとは？

Shopify におけるバナーとは、ストアのトップページや商品ページなどに表示される視覚的な要素で、訪問者の目を引くための重要なツールです。バナーは、特定の商品やプロモーションを強調したり、ブランドのメッセージを伝えたりするために活用されます。

バナーは、画像やテキスト、グラフィックを組み合わせてデザインされ、ショップのデザインやコンテンツに統一感を持たせることができます。Shopify では、テーマエディターやアプリを使って、簡単にバナーを設置・管理することが可能です。

効果的なバナーは、顧客の注意を引き、クリック率を高めるとともに、ストア全体のビジュアルを引き立て、訪問者を購入行動に導く役割を果たします。

## Shopify でバナーを表示する方法

Shopify でバナーを表示する方法として以下の2つが挙げられます。

- [アプリを用いてバナーを表示する方法](#アプリを用いてバナーを表示する)
- [テーマの標準機能を用いてバナーを表示する](#テーマの標準機能を用いてバナーを表示する)

Shopify でバナーを表示する一般的な方法は、専用のアプリを利用することです。アプリを使えば、テーマの標準機能では実現できない高度なカスタマイズが可能になり、より効果的なバナーの運用ができます。

テーマの標準機能を使ってバナーを表示する方法もありますが、カスタマイズの自由度は限定されます。より高度な機能を求める場合には、アプリの利用を検討する方が良いでしょう。

## アプリを用いてバナーを表示する

アプリを用いることで簡単に、より高度なデザインのバナーを実現できます。

今回は、「シンプル画像バナー｜お手軽広告バナーアプリ」というアプリを紹介いたします。

### シンプル画像バナー｜お手軽広告バナーアプリ

[![ja-sa-013-ur-banner-app_feature-media.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/490b2aa7-bae1-b618-c240-29f31efdd4f8.png)](https://apps.shopify.com/sa-013-ur-banner-app?locale=ja)

「シンプル画像バナー｜お手軽広告バナーアプリ」は、Shopify ストアに画像バナーを簡単に挿入できる便利なアプリです。特別なコーディング知識がなくても、直感的な操作でストアに魅力的なバナーを追加し、顧客の購買意欲を高めることができます。

このアプリを使用することで、ストアのページにリンク付きのバナーを手軽に表示することができ、訪問者を特定の商品ページやキャンペーンページへと誘導することが可能です。PCとスマホの表示に合わせて異なるバナー画像を設定できるため、デバイスに応じた最適なユーザー体験を提供できます。

### アプリの特徴

以下アプリの特徴です。

#### 簡単にリンクつき画像バナーをストア上に設置できる！

簡単にリンクつき画像バナーをストア上に設置できます。

![簡単にリンクつき画像バナーをストア上に設置できる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/1a2f7340-253c-b923-20c7-3322e79434c8.png)

#### PC用とスマホ用で異なる画像を設定できる！

PC用とスマホ用で異なる画像を設定できます。

![PC用とスマホ用で異なる画像を設定できる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/cd9e9b18-6720-5c4e-ec10-5e46407e4511.png)


#### レイアウトやリンク、余白をノーコードでカスタマイズできる！

レイアウトやリンク、余白をノーコードでカスタマイズできます。

![レイアウトやリンク、余白をノーコードでカスタマイズできる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/81ede78e-f978-5cec-fd38-9e133f2b6f7a.png)

#### 1クリックでテーマに追加できる！

1クリックでテーマに追加できます。

![1クリックでテーマに追加できる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/1c79e39c-8bc9-d9ec-612e-9e6c4c8a99e3.png)

それではアプリの使い方を見ていきましょう。

### アプリのインストール

[「シンプル画像バナー｜お手軽広告バナーアプリ」｜アプリストア](https://apps.shopify.com/sa-013-ur-banner-app?locale=ja)

上記のリンクにアクセスしてください。

以下のページに遷移します。「インストール」ボタンをクリックしてください。

![「インストール」ボタンをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/f9e7512a-5376-3f2f-5c16-9a225e53e755.png)

インストールが完了すると、以下の管理画面が表示されます。

![以下の管理画面が表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/ea1ab30e-19d6-395c-2617-631c71d3af64.png)

### アプリをテーマに追加

まず、アプリをテーマに追加します。

今回は、一例としてトップページにPC時とスマホ時で異なるバナーを表示させます。

手動でアプリをテーマに追加します。テーマカスタマイズ画面のトップページに移動してください。

![テーマカスタマイズ画面のトップページに移動](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/4f2a8993-03ba-5a11-3afa-2d4246534206.png)

「セクションを追加」>「アプリ」>「シンプル画像バナー」を選択してください。

![「セクションを追加」>「アプリ」>「シンプル画像バナー」を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/ea6d328d-d4ed-a00c-77ee-1055cc49b5c8.png)

アプリブロックの追加が確認できたら、「保存する」ボタンをクリックしてください。

![「保存する」ボタンをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/97f03235-5ffb-4624-de1b-0e85919c2bf2.png)

### バナー画像を設定

バナー画像を設定していきます。

「バナー画像設定」 > 「画像1」・「画像1（スマホ）」を設定してください。今回は、スマホ時とPC時で異なる画像を設定します。

![「バナー画像設定」 > 「画像1」・「画像1（スマホ）」を設定![スクリーンショット 2024-09-01 15.23.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/fc763cd6-9554-461b-b0b2-c57539762e25.png)
](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/22515ce1-372a-c77d-bfdd-cc44ed9c6ed9.png)

同様に、「バナー画像設定」 > 「画像2」・「画像2（スマホ）」を設定してください。

![「バナー画像設定」 > 「画像2」・「画像2（スマホ）」を設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/63c52213-100c-7652-d970-70f0bda0a670.png)

最後に、「保存する」ボタンをクリックしてください。

![「保存する」ボタンをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/f5ef95a7-aeda-585f-9a47-a808a9286d82.png)

以下のようにトップページでPC時・スマホ時で異なる画像を設定できました。

![トップページでPC時で異なる画像を設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/9fe484af-46ea-4bb7-b221-4afb91703927.png)

![トップページでスマホ時で異なる画像を設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/6876d45f-deed-8e61-435b-a75a747e337e.png)

他にも様々な設定項目があります。興味のある方は以下の公式ご利用ガイドをぜひご確認ください。

[Shopifyに画像バナーを追加できるアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-013-ur-banner-app/guide)

## テーマの標準機能を用いてバナーを表示する

テーマの標準機能を用いてバナー表示を行います。今回は、Dawn テーマの 「画像バナー」セクションでバナー表示を行います。

### 「画像バナー」セクションを追加

テーマカスタマイズ画面に移動してください。「セクションを追加」より、「画像バナー」を選択してください。

![「画像バナー」を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/9dab1c06-2b68-c651-182f-996141fd76e3.png)

### 「画像バナー」セクションの編集

「画像バナー」セクションの編集を行います。

「最初の画像」を設定してください。

![「最初の画像」を設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/ab8c7bce-7139-6d76-cc5e-be4d9464a963.png)

しかし、このままではバナーが見切れてしまいます。「バナーの高さ」を「最初の画像に合わせる」に設定することで、バナーが見切れないように調整できます。

![「バナーの高さ」を「最初の画像に合わせる」にします](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/c8b814e9-eee3-88b9-1485-9061553d221d.png)

最後に「保存する」ボタンをクリックしてください。

以上でテーマの標準機能を用いてバナーを表示できました。

## 終わりに

Shopify でバナーを効果的に表示することは、ストアの魅力を高め、顧客の購買意欲を引き出すために非常に重要です。本記事では、テーマの標準機能を使った方法と、アプリを利用した方法の2つをご紹介しましたが、やはりアプリを利用してバナーを表示する方が、より柔軟で効果的なバナー運用が可能になります。

本記事を参考にしてあなたの Shopify ストアにバナーを導入してみましょう。

最後まで読んでいただきありがとうございました。

## 参考記事

- [Shopify にバナーを設置する方法を徹底解説！](https://unblog.unreact.jp/blog/b7p6qmm01)
- [Shopifyでバナーを実装する方法を考察](https://zenn.dev/natsume_katu/articles/3149e75dac3e46)
- [Shopify ストアでリンクに対応したバナーの実装方法や日本語アプリについて徹底解説！](https://unreact.jp/blog/shopify-banner)
- [Shopifyに画像バナーを追加できるアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-013-ur-banner-app/guide)