Shopifyストアに追従するトップに戻るボタンを導入できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2025/05/19

はじめに

今回の記事は、Shopify アプリである「シンプルトップに戻るボタンアプリ」のご利用ガイドです。

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

「シンプルトップに戻るボタンアプリ」は、ページをスクロールした際に画面上へ固定表示される トップに戻るボタン をストアに導入できるアプリです。長いページであっても、ユーザーがワンクリックで素早くトップへ戻れるようになるため、利便性を向上し、離脱率を下げることに貢献します。

ご興味のある方は、以下の URL からインストールしてみてください。

アプリの価格は、月額 $3.99（1 週間の無料トライアルあり） となっております。

Shopify アプリである「シンプルトップに戻るボタンアプリ」は、以下のようにページに トップに戻るボタン を設置できるアプリです。

主な特徴は次のとおりです。

トップに戻るボタンのデモ表示

様々なアイコンから選べる！好きなアイコン画像も設定可能！
アプリが用意しているアイコンを選ぶだけでなく、ブランドに合わせたオリジナルの画像を使うこともできます。

アイコン選択画面

全ページ適用のイメージ

ノーコードで見た目をカスタマイズできる！
ノーコードで直感的に位置やサイズ、アニメーションなどを調整でき、ストアの雰囲気に合わせたデザインを実現できます。

カスタマイズ設定画面

テーマへの追加画面

では、実際にアプリをインストールしてみましょう。

アプリをインストールしただけではストアに反映されない場合があります。そこでテーマへの追加方法を確認しておきましょう。

もし自動追加がうまくいかない場合は、以下の手順で有効化してください。

アプリの有効化ができたら、見た目をカスタマイズしていきましょう。

テーマカスタマイズ画面を開き、埋め込みアプリアイコンをクリックします。

テーマカスタマイズ画面の埋め込みアプリアイコン

埋め込みアプリ一覧が表示されるので、「シンプルトップに戻るボタンアプリ」をクリックします。

埋め込みアプリ一覧からアプリを選択

すると、以下のような設定項目が表示されるので、ここで設定をしてきます。

アプリの設定画面

設定できる主な項目は次のとおりです。

アイコン設定
- デフォルトで用意されたアイコンから選択可能です。
- 「カスタムアイコン」を選択すると独自の画像を設定できます。（推奨サイズ 512px × 512px）
ボタンの大きさ
- ピクセル単位でボタン全体の大きさを調整できます。
ボタンの丸み
- ボタンの角をどれだけ丸めるかを設定できます。
枠線の表示 / 枠線の太さ
- ボタンの外枠ラインを表示するかどうか、および太さを設定できます。
ホバー時のアニメーション
- ホバー時に拡大・縮小、または何もしないなどのアニメーションを設定できます。
表示スタイル
- 常時表示やスクロールダウン時のみ表示など、表示トリガーを切り替えられます。