Shoprocket ホスト型ストアフロントをセットアップする

ホステッドストアフロントとは？

Shoprocketホステッドストアフロントは、すべてのプランで利用可能です。

ホステッドストアフロントは、Shoprocketネットワーク上にホストされた別のミニサイトです。セットアップは迅速で便利で、技術的な知識は不要です。ホステッドストアフロントは、独自のウェブサイトがまだない販売者や、主なウェブサイトからストアフロントを分離しておきたいと思っている販売者に最適です（選択の結果またはサイトの技術的制限によるもの）。

Shoprocketネットワークは、グローバルなコンテンツ配信ネットワーク（CDN）を使用して、不具合がないときに関しては、超高速なスピードと絶対的な安堵感を保証します。私たちの公共ステータスページはこちらです。

Shoprocketは、オムニチャネルeCommerceプラットフォームであり、ユーザーが独自のウェブサイト、第三者のブログ、ホステッドストアフロント、またはソーシャルメディアチャンネルでショッピングをしている場合でも、シームレスな顧客体験を提供します。すべてが同じ管理セールスダッシュボードに結び付いています。

デモホステッドストアフロントは、こちらで見ることができます: https://demo.shoprocket.io/

1. ホステッドストアフロントページに移動

ダッシュボード内から左側のサイドバーで販売チャネルをクリックし、次に>  ホステッドストアを選択します。

そこから、ホステッドストアフロントエディタが表示され、行った変更を視覚化するためのリアルタイムプレビューパネルがあります。

2. ストアフロントの初期カスタマイズ

左側のカスタマイズセクションはすでに開いているはずです; ここで次のようなものが見つかります:

• ホステッドストアを有効にする - ホステッドストアフロントを有効/無効にします。無効にすると、ストアフロントは完全に非表示になります。
• ストアフロントにアクセスするためのリンク。
• サブドメインフィールド - サブドメイン名を設定します: ストアフロント名を使用することをお勧めします（例: my-Storefront-name.shoprocket.io）。

独自のドメイン名（例: my-Storefront-name.com）を使用することもできます。設定方法についての指示は、ライブチャットアイコンからお問い合わせください。

3. ページレイアウトの変更

以下にあるページレイアウトセクションを拡張すると、ページに含めたい要素を指定できます。例えば:

• ストア名を表示 - ストアフロント名を表示/非表示にします。
• ストアロゴ - 大きなストアロゴを表示/非表示にし、変更します。
• ファビコン - ファビコンを変更します: ブラウザのURLバー/タブに表示される小さなアイコンのことです。詳細はこちら。
• カバー画像を表示 - ページ上部にある大きな画像のヘッダーを表示/非表示にし、変更します。（推奨サイズは1200px幅×300px高、.jpg形式）。
• 説明を表示 - カバー画像の下にあるストアフロントの紹介/説明テキストを表示/非表示にし、変更します。

• ボトムテキストを表示 - ストアフロントの下部に表示されるテキストエリアを表示/非表示にし、変更します。利用規約や配送ポリシーに最適です。

4. 商品表示オプションの設定

製品が製品/カートのドロップダウンで選択されていることを確認してください:

以下のオプションは、オプションセクションを拡張することで利用できます:

• 表示する商品 - すべての製品または特定のカテゴリの製品のみを表示するように選択します。
• 製品サイズ - ページ上の表示サイズを設定します（小、中、大）。
• 画像のフィット - 商品画像が利用可能なサイズに切り取られるべきか、縮小されるべきかを定義します（切り取られるとすべての画像が同じサイズでより均一に見えるようになります）。
• ボタンスタイル - 「標準」（テキスト付きの長方形ボタン）、「ミニマル」（アイコン付きの円形ボタン）、または「ホバー時」（製品にホバーしたときにのみ表示されるアイコン付きの円形ボタン）から選択します。

• デフォルトのソート順 - 商品がデフォルトでリストされるソート順を定義します（デフォルト、新着順、名前: A-Z、名前: Z-A、価格: 低-高、価格: 高-低）。
• ページあたりの商品数 - 各ページに読み込む商品数を指定します（ページネーションは自動的に表示または非表示になります）。
• 在庫切れの商品を非表示にする - 在庫切れの商品を完全に非表示にするか、「在庫切れ」のメッセージとともに表示するかを選択します。

5. 含めるページ機能の選択

上記のように製品が製品/カートのドロップダウンで選択されていることを確認し、含むセクションを拡張します。

以下の機能をオンまたはオフに切り替えることができます:

商品カードのフィルターオプション

• 検索ボックス - 製品埋め込みの上に「検索」フィールドを表示します（複数の商品埋め込みのみ利用可能）。
• ソートボックス - ソート順のドロップダウンメニューを表示します（複数の商品埋め込みのみ利用可能）。
• ページあたりの制限ボックス - ページあたりのアイテム数のドロップダウンメニューを表示します（複数の商品埋め込みのみ利用可能）。
• 通貨ボックス - 顧客が希望の通貨で価格を表示できるように通貨のドロップダウンを表示します（通貨はまずストアフロント設定で有効にする必要があります）。
• 言語ボックス - 顧客が言語を切り替えられるように言語のドロップダウンを表示します（ロケールはまず設定で設定する必要があります こちら）。
• カテゴリボックス - カテゴリのドロップダウンを表示し、顧客がカテゴリによって製品をフィルタリングできるようにします（複数の商品埋め込みのみ利用可能）。
  

商品カードの機能

• 商品名 - 商品名を表示します（製品の一般タブで設定済み）。
• 商品価格 - 商品価格を表示します（製品の一般タブで設定済み）。
• 商品画像 - 商品のヒーロー画像を表示します（製品のメディアタブで設定済み）。
• 商品要約 - 商品要約テキストを表示します（製品の一般タブで設定済み）。
• 画像クリックでモーダルを開く - 画像をクリックすると、ポップアップモーダルで商品詳細が表示されます。
• 商品を見るボタン - ポップアップモーダルで商品詳細を開くボタンを表示します。
• カートに追加ボタン - アイテムをカートに追加するボタンを表示します（オプションはホバーしたときに上に表示され、より高度なオプション/バリエーションが必要な製品はクリック時に商品表示モーダルを開きます）。
• 最小/最大注文量 - 設定されている場合、製品の最小および最大注文量を表示します（製品の在庫タブで設定済み）。

• 送料無料リボン - 無料配送が適用される場合、商品に「送料無料」リボンを表示します（製品の配送タブで設定済み）。
  
• 新商品リボン - 過去20日以内に追加された製品に「新しい」リボンを表示します。
  
• デジタルダウンロードリボン - 購入時にダウンロード可能なファイルを含む製品に「デジタルダウンロード」リボンを表示します（製品のファイルタブで設定済み）。
  

6. 商品ポップアップモーダルの設定

上記のように製品が製品/カートのドロップダウンで選択されていることを確認し、商品ポップアップ表示セクションを拡張します。

このセクションは、上記の5の画像クリックでモーダルを開くまたは商品を見るボタンのいずれかが有効な製品にのみ適用されます。

ポップアップは、以下の機能をオンまたはオフにすることで構成できます:

• 商品名 - 商品名を表示します（製品の一般タブで設定済み）。
• 商品価格 - 商品価格を表示します（製品の一般タブで設定済み）。
• 商品画像 - 商品のヒーロー画像を表示します（製品のメディアタブで設定済み）。
• 商品要約 - 商品要約テキストを表示します（製品の一般タブで設定済み）。
• 商品説明 - 商品説明を表示します（製品の一般タブで設定済み）。
• 数量選択 - 数量選択フィールドを表示します（無効にすると、カートには1つしか追加できません）。
• 画像サムネイル - 画像ギャラリーのサムネイルを表示します。
• 商品レビュー - 商品レビューを表示します。
• 商品SKU - 商品のストックキーピングユニット（SKU）を表示します（製品の在庫タブで設定済み）。
• 商品カテゴリ - 商品にリンクされたカテゴリを表示します（製品のカテゴリタブで設定済み）。
• ソーシャル共有アイコン - ソーシャルメディアチャネルに商品を1回のクリックで共有できるボタンを表示します。
• 関連商品 - 関連商品を表示します（製品の関連タブで設定済み）。
• 最小/最大注文数 - 設定されている場合、製品の最小および最大注文数量を表示します（製品の在庫タブで設定済み）。

さらにオプション

• 画像フィット - 商品画像が利用可能なサイズに切り取られるべきか、縮小されるべきかを定義します（切り取られるとすべての画像が同じサイズでより均一に見えるようになります）。
• サムネイルレイアウト - 画像ギャラリーのサムネイルを画像ギャラリーの下に水平に配置するか、左側に垂直に配置するかを選択できます。
• バリエーションスタイル - 「ドロップダウン」メニューまたは「プレーン」テキストメニューのいずれかを選択します。

7. 商品表示スタイルの設定

上記のように製品が製品/カートのドロップダウンで選択されていることを確認し、スタイルセクションを拡張します。

以下の色を設定するために「スポイト」を使用します:

•  商品タイトル
•  商品価格
•  商品要約
•  "購入"の背景
•  "購入"のテキスト
•  "表示"の背景
•  "表示"のテキスト
•  商品背景
•  "カートを表示"の背景
•  "カートを表示"のテキスト

追加ポップアップオプション

• 商品パディング - 商品カードのエッジ内にパディングを追加します。
• 商品シャドウ - 商品カードの外に影効果を追加します。
• 丸みのあるエッジ - 商品カードに丸みのあるエッジを追加します。

ホステッドストアフロントのスタイルをより制御するために、カスタムCSSを追加できます。詳細はこちらです。

8. カート表示オプションの設定

以下のようにカートが製品/カートのドロップダウンで選択されていることを確認し、オプションセクションを拡張します。

以下のオプションが利用可能です:

• バスケット位置 - 表示位置を選択します。

• バスケットスタイル -ページの上部にバブルとして表示するか、サイドバーに表示します。

9. カート表示スタイルの設定

上記のようにカートが製品/カートのドロップダウンで選択されていることを確認し、スタイルセクションを拡張します。

以下の色を設定するために「スポイト」を使用します:

• "バスケット"の色
• "バスケット"の背景
• "バスケット"のカウンター背景
• "バスケット"のテキスト色
• "バスケット"のカウンターテキスト色
• カート背景
• カートテキスト色
• カートボタン背景
• カートボタンの色
• カートリンクテキスト色
• カートボーダーの色

ストアフロントの外観に満足したら、設定を更新ボタンを押して、ストアフロントリンクを共有し、販売を開始してください。