ShopifyにSticky Add to Cartを追加する方法

「Add to Cart」ボタンは、どの商品ページでも特に重要な要素のひとつです。ですが、ユーザーが商品ページをスクロールすると、元のボタンが画面外に消えてしまい、購入しづらくなることがあります。

Progus Sticky Add to Cart Barなら、ユーザーがページを見ている間も購入ボタンを常に表示できます。固定CTAが自分のストアに合うかまだ迷っている場合は、Sticky Add to Cartと通常のAdd to Cartボタンの比較もご覧ください。

このガイドでは、ShopifyストアにProgus Sticky Add to Cartを追加し、アプリを有効化して、固定バーをカスタマイズする方法を紹介します。

ステップ1：Progus Sticky Add to Cartをインストールして開く

まずは、次の2つの方法でアプリをインストールできます。

方法1： Shopify App Storeから

• Shopify App Storeを開く
• Progus Sticky Add to Cart Barを検索する
• Installをクリックする

方法2： Progus公式サイトから

公式ページから直接インストールすることもできます：Progus Sticky Add to Cart

インストール後： Shopifyの管理画面からアプリを開いてください。

メインダッシュボードにセットアップガイドが表示されます。ここからアプリの有効化、Sticky Add to Cart Barのカスタマイズ、ストア上で正しく動作しているかの確認ができます。

ステップ2：アプリを有効化する

Shopifyの管理画面からProgus Sticky Add to Cartを開くと、メインのセットアップガイドが表示されます。

まずはアプリを有効化しましょう。Activateをクリックします。

Shopifyのテーマアプリ埋め込み設定が開く場合があります。その場合はアプリ埋め込みを有効にし、右上のSaveをクリックしてください。

その後、Progus Sticky Add to Cartに戻り、必要に応じてセットアップ状況を更新してください。

ステップ3：カスタマイズパネルを開く

アプリが有効になったら、セットアップガイドに戻ってCustomizeをクリックします。

カスタマイズパネルが開き、Sticky Add to Cartの設定を編集したり、画面右側で変更内容をプレビューしたりできます。

ステップ4：バーの設定を調整する

まずはBarセクションから始めましょう。ここでは、Sticky Add to Cart Barの全体的な見た目や動作を設定できます。

たとえば、次のような項目を調整できます。

• 背景モードと背景色
• バーの表示位置と表示設定
• エフェクト
• 枠線
• 余白

商品ページの邪魔にならず、かつしっかり目に入る設定を選ぶのがポイントです。多くのストアでは、特にモバイルで画面下部にバーを配置するのがよい出発点になります。

ステップ5：カウントダウンや告知メッセージを追加する

Countdownセクションでは、固定バーに短いメッセージやタイマーを追加できます。

カウントダウンの表示タイミング、メッセージ内容、色、固定時間または終了日時を設定できます。

この機能は、実際のキャンペーンや期間限定オファーに使うのがおすすめです。購入の後押しになるよう、メッセージは短くわかりやすく保ちましょう。

ステップ6：商品情報をカスタマイズする

Productセクションでは、固定バーに表示する商品情報を選べます。

商品画像、商品名、価格、比較価格、割引バッジの表示・非表示を切り替えられます。

多くのストアでは、商品名・価格・Add to Cartボタンだけでも、見やすく使いやすいバーに十分仕上がります。

ステップ7：数量とバリエーションの設定を調整する

Quantityセクションでは、数量セレクターやバリエーション選択を有効にできます。

サイズやカラーなどのバリエーションがある商品では、バリエーション選択を表示すると購入しやすくなります。特にモバイルでは、選択肢を増やしすぎず、シンプルに保つことが大切です。

ステップ8：Add to Cartボタンをカスタマイズする

Add To Cartセクションでは、ボタンの文言、色、クリック後の動作を設定できます。

CTA文言は、Add to Cart、Add to Bag、Place an Orderなど、ストアに合わせて自由に設定できます。

また、ユーザーがボタンをクリックした後の動作も選べます。

• ページにとどまる
• カートへ移動する
• チェックアウトへ進む

多くのストアでは、Add to Cartのような明確で一般的な文言が最も無難です。購入までの導線を短くしたい場合は、カートやチェックアウトへ直接遷移させる設定もテストできます。

ステップ9：固定バーの表示場所を選ぶ

Displayセクションでは、Sticky Add to Cart Barをどこに表示するか設定できます。

表示対象は次の中から選べます。

• すべての商品
• 特定の商品
• 特定のコレクション

必要に応じて、特定の商品やコレクションを除外することも可能です。

初めて設定する場合は、まずAll productsで始めて、あとから表示ルールを調整するのがおすすめです。

ステップ10：プレビュー・テスト・設定確認を行う

設定を完了する前に、プレビュー画面でSticky Add to Cart Barがデスクトップとモバイルの両方でどう見えるか確認しましょう。CTAが見つけやすいか、文字が読みやすいか、重要なコンテンツを隠していないかをチェックしてください。

その後、実際の商品ページを開き、Sticky Add to Cart Barが表示されるまでスクロールして、商品をカートに追加してボタンの動作をテストします。問題なく動作したら、セットアップガイドに戻ってConfirmをクリックしてください。

これで、Progus Sticky Add to Cart Barの設定は完了です。Shopifyストアを閲覧中のユーザーにも、CTAを常に見やすく表示できるようになります。

インストール後のベストプラクティス

設定後は、固定バーをシンプルで見やすく、使いやすい状態に保ちましょう。

• ストアの配色や全体デザインに合わせる
• CTAは明確でわかりやすくする
• モバイル表示を丁寧にテストする
• 要素を一度に詰め込みすぎない
• カウントダウンや告知は実際のオファーがある場合にのみ使う

目的は、購入プロセスを簡単にすることであり、商品ページから注意をそらすことではありません。

Add to Cartボタンが見えているのにクリックされない場合は、こちらのガイドも参考にしてください：ユーザーがAdd to Cartをクリックしない理由 →

まとめ

Progus Sticky Add to Cart BarをShopifyストアに追加するのは、CTAの視認性を高め、購入までの流れをスムーズにするシンプルな方法です。

このアプリを使えば、Add to Cartボタンを常に表示し、固定バーをカスタマイズし、販促メッセージを追加し、表示場所も細かくコントロールできます。

セットアップはすばやく簡単で、無料でインストールできます。

Progus Sticky Add to Cartを試して、Add to Cartボタンを常に見える状態にしましょう →

よくある質問

ShopifyにSticky Add to Cartを追加するにはどうすればいいですか？

Shopify App StoreまたはProgus公式サイトからProgus Sticky Add to Cartをインストールし、Shopifyでアプリを有効化して、固定バーをカスタマイズし、商品ページでテストしてください。

インストールにコーディングの知識は必要ですか？

いいえ。Progus Sticky Add to Cartは、コードを書かずにすばやく簡単に設定できるよう設計されています。

Progus Sticky Add to Cartは無料ですか？

はい。無料でインストールできます。

Sticky Add to Cartはモバイルでも使えますか？

はい。設定を確定する前に、デスクトップとモバイルの両方で固定バーをプレビューしてテストできます。

固定バーはカスタマイズできますか？

はい。バーのデザイン、商品情報、カウントダウンメッセージ、Add to Cartボタン、表示ルールをカスタマイズできます。

Shopifyストアの表示速度に影響しますか？

このアプリは軽量に設計されていますが、Shopifyアプリをインストールした後は、ストアのパフォーマンスを確認するのがおすすめです。