Back icon

Back to all posts

SC Product Options + PageFlyでショッピング体験を向上させる方法

Offer an elevated shopping experience on Shopify with the SC Product Options integration for PageFly.

今日の顧客は、迅速で使いやすく、エラーがなく、モバイルフレンドリーで、パーソナライズされ、多チャネルのショッピング体験を期待しています。

66% の顧客が、ウェブサイトでのフラストレーションのある体験がブランドの全体的な評価に悪影響を与えると述べています。そして 55% の人が、悪いモバイル体験が会社との関わりを避ける理由になると言っています。

現在、ウェブサイトの変更やショッピング体験の向上には、コードを書くチームは必要ありません。コード不要で、Shopify ストアをカスタマイズするために必要なツールを提供する、使いやすくインストールしやすいアプリケーションが多数存在します。

これらのアプリの多くは、他のプラットフォームやアプリケーションとシームレスに統合でき、技術スタック全体での統合が容易です。

この記事では、ウェブカスタマイズツールの柔軟なスイートを提供するために統合する 2 つのアプリを紹介します。SC Product OptionsPagefly です。

具体的には、Pagefly アプリ内で SC Product Options 要素をどのように使用するかを示します。開始するには、まず PageflySC Product Options を Shopify ストアにインストールする必要があります。どちらも無料で試用できるので、コストをかけずにこれらのツールを試すことができます。

SC Product Options

SC Product Options は、Shopify マーチャントが製品やカスタムフィールドなどの商品オプションをよりコントロールし、顧客により個人的なショッピング体験を提供できるように設計されました。では、SC Product Options がどのように機能するかを簡単に見てみましょう:

Kiel James Patrick は、海事をテーマにした衣料品やジュエリーを販売しており、異なるカスタマイズやパーソナライズのオプションを提供するために SC Product Options を使用しています。

たとえば、以下のようなブレスレットを購入しようとする顧客は、色、サイズ、モノグラムフォント、そして希望するモノグラムを選択することで、商品のパーソナライズを完全に行い、その後カートに追加できます。

Image Via: Kiel James Patrick

Shopify にはこれらのオプションは標準装備されていません。カスタム開発が選択肢にない場合、SC Product Options のようなアプリを使用すると、よりカスタマイズされたパーソナライズされた体験を提供するのが簡単です。この 記事 で、ショッピング体験を向上させるために商品オプションを使用しているストアの例をさらに確認できます。

SC Product Options について

Product Options についておさらいしたところで、Pagefly 内の SC Product Options 要素 の使用方法について説明します。この機能は、顧客に理想的なショッピング体験を提供するために必要な商品オプションとカスタムフィールドをマーチャントに提供するように設計されています。

準備はできましたか?

SC Product Options へのアクセス方法

最初に行うべきことは、Pagefly 統合ウィンドウに SC Product Options を追加することです。以下の手順に従ってください:

ステップ 1:左側のツールバーで サードパーティ要素 を追加します。次に、サードパーティ要素を編集する ボタンをクリックします。

ステップ 2:ポップアップページの 統合 ページで 「SC Product Options」 を検索します。

Bold Product Options element

ステップ 3:ドロップダウンメニューに表示された SC Product Option 要素 をクリックします。

ステップ 4:適用したいバリアントを選び、次に ドラッグ & ドロップ してページエディターに追加します。

Bold Product Options element

これらの手順に従えば、SC Product Options バリアントをエディターページに正常に追加できました。

バリアントについての注意点

バリアントとは、単一の製品に利用可能な構成、色、またはオプションの数を指します。Shopify の標準では、マーチャントは 1 つの商品につき最大 100 種類のバリアントしか使用できません。これは単一の商品には十分に見えますが、例を見るとそうではない場合がわかります。

例えば、5 つのサイズがあるシャツを販売するとします。また、そのシャツは 8 色展開で、3 つのプリントオプションも提供したいとします。簡単な計算 (5 x 8 x 3 = 120) で、すでに Shopify のバリアント制限を超えていることがわかります。コンピュータ、自転車、家具のような複雑なカスタマイズ可能なアイテムは、商品ごとに何千ものバリアントが必要になる場合があります。

一部の役立つワークアラウンドは こちら にありますが、SC Product Options は Shopify のバリアント制限を超え、各製品のオプションを提供する最もシンプルな方法です。

続ける準備ができましたか?

SC Product Options の設定

この要素を使用する前に、SC Product Options アプリをストアにインストールし、使用したいオプションを設定する必要があります。

SC Product Options ダッシュボードで、オプション > オプションセットを作成 を選択します

Bold Product Options

次に、SC Product Options アプリで使用したいすべてのカスタムオプションを作成します。

Bod Product Options

最後に、オプションセットを保存 を選択してすべての変更を保存します。

これで、商品オプションを作成しました!バリアント数を気にせず、異なる製品ごとに多くのオプションセットを作成できます。

注意:時々オプションセットが保留中になり、ライブビューにすぐに表示されないことがあります。プロセスを速めるために、ヘルプが必要ですか? > リキッドインストール に移動し、自動アップデートを開始 を選択してください。

Bold Product Options

スタイリング設定

SC Product Options 要素のスタイリングをカスタマイズしたい場合は、スタイリング タブで行うことができます。

フォントとスペーシング、境界サイズと色、エフェクトを選択して、商品ページをブランドに合わせ、顧客に最高のショッピング体験を提供しましょう。

Bold Product Options element

スタイリングタブについての詳細な情報は こちら でご覧いただけます。

まとめ

SC Product Options を使用してより良いショッピング体験を提供するための方法の一つについて学んでいただけたことを願っています。

Shop Circle は、eコマースツールの最初の運営者として、ブランドが売上を促進し、より遠くまで、より早く成長し、制限なくスケールするのを助けるアプリを提供しています。

SC Product Options をダウンロードして、14 日間の無料トライアルを試してみてください。