既存のウェブサイト - エンベッドのカスタマイズ

既存のウェブサイトに埋め込むためのガイドはこちらをご覧ください。

Shoprocketでは、ダッシュボードのコードジェネレーターを使って、コード埋め込みの見た目を完全に制御できます。

表示したい埋め込みタイプ（シングルプロダクトウィジェット、フルページプロダクト、複数プロダクト、ショッピングカート）を選択し、含めたい要素を有効/無効にし、サイズ、スタイル、動作をカスタマイズします。

埋め込みコードを変更したら、表示させたいウェブサイトにコピーして貼り付ける必要があります。（将来の変更を行う場合は、再度コードをコピーして貼り付ける必要があります）

左側のメニューで「デフォルト設定として保存」をクリックすると、埋め込み設定を保存でき、今後生成するすべての埋め込みコードが同じ設定から始まります。

オプション

左側のメニューの「オプション」セクションから利用可能なオプションは以下の通りです：

1. 表示するプロダクト - すべてのプロダクトを表示するか、特定のカテゴリのプロダクトのみを表示するかを選択します
2. プロダクトサイズ - 埋め込むアイテムの表示サイズを設定します（小、中、大）
3. 画像フィット - プロダクト画像を利用可能なサイズにクロップするか、スケールダウンするかを定義します（クロップすると、すべての画像が同じサイズで均一に保たれます）
4. ボタンスタイル - 「標準」（テキスト付きの長方形ボタン）、「ミニマル」（アイコン付きの円形ボタン）、または「ホバー時」（プロダクトにマウスオーバーしたときのみ表示されるアイコン付きの円形ボタン）から選択します
5. デフォルトのソート順 - プロダクトがデフォルトで表示されるソート順を定義します（デフォルト、新着順、名前：A-Z、名前：Z-A、価格：低-高、価格：高-低）
6. ページあたりのプロダクト数 - 表示するプロダクトの数を指定します
7. 在庫切れのプロダクトを隠す - 在庫切れのプロダクトを完全に隠すか、「在庫切れ」のメッセージを表示するかを選択します

含まれるもの

「含まれるもの」セクションから含める要素を指定できます。例えば、「プロダクトを見る」ボタンや「リボン」を含めることができます。

左側のメニューの「含まれるもの」セクションから利用可能な項目は以下の通りです：

1. 検索ボックス - プロダクト埋め込み上部に「検索」フィールドを表示します（複数プロダクト埋め込みのみ利用可能）
2. ソートボックス - ソート順ドロップダウンメニューを表示します（複数プロダクト埋め込みのみ利用可能）
3. ページあたりのリミッター - ページあたりアイテムのドロップダウンメニューを表示します（複数プロダクト埋め込みのみ利用可能）
4. 通貨ボックス - 顧客が希望する通貨で価格を表示するための通貨ドロップダウンを表示します（通貨はストア設定で最初に有効にする必要があります）
5. 言語ボックス - 顧客が言語を切り替えるための言語ドロップダウンを表示します（ストアのテキストは設定で最初に設定する必要があります）
6. カテゴリボックス - カテゴリ別にプロダクトをフィルターできるためのカテゴリドロップダウンを表示します（複数プロダクト埋め込みのみ利用可能）
7. プロダクト名 - プロダクト名を表示します
8. プロダクト価格 - プロダクト価格を表示します
9. プロダクト画像 - プロダクトのヒーロー画像を表示します
10. プロダクト要約 - プロダクトの要約テキストを表示します
11. プロダクトを見るボタン - フルプロダクト詳細をモーダルで開くためのボタンを表示します
12. カートに追加するボタン - アイテムをカートに追加するためのボタンを表示します（オプションはホバー時に上に表示され、より高度なオプション/バリエーションが必要なプロダクトはクリック時にプロダクト表示モーダルが開きます）
13. 最小/最大注文数量 - プロダクトで設定されている場合、利用可能な最小および最大注文数量を表示します
14. 送料無料リボン - 無料配送が適用される場合、プロダクトに「送料無料」リボンを表示します
15. 新商品リボン - 過去20日以内に追加されたプロダクトに「新」リボンを表示します
16. デジタルダウンロードリボン - 購入時にダウンロード可能なファイルを含むプロダクトに「デジタルダウンロード」リボンを表示します

プロダクト表示ポップアップ

「プロダクトを表示」オプションが有効なプロダクトについて、モーダルに表示する要素をカスタマイズできます：

1. プロダクト名 - プロダクト名を表示します
2. プロダクト価格 - プロダクト価格を表示します
3. 数量選択 - 数量選択フィールドを表示します（無効にすると、一度に1つしかカートに追加できません）
4. プロダクト画像 - プロダクト画像ギャラリーを表示します
5. 画像サムネイル - 画像ギャラリーのサムネイルを表示します
6. プロダクトレビュー - プロダクトレビューを表示します
7. プロダクト要約 - プロダクト要約テキストを表示します
8. プロダクト説明 - プロダクトの説明を表示します
9. プロダクトSKU - プロダクトの在庫管理単位（SKU）を表示します
10. プロダクトカテゴリ - プロダクトにリンクされたカテゴリを表示します
11. ソーシャル共有アイコン - サービスに1クリックでプロダクトを共有するためのボタンを表示します
12. 関連プロダクト - 関連するプロダクトを表示します
13. 最小/最大注文数量 - プロダクトで設定されている場合、利用可能な最小および最大注文数量を表示します

以下のオプションからも選択できます：

1. 画像フィット - プロダクト画像を利用可能なサイズにクロップするか、スケールダウンするかを定義します（クロップすると、すべての画像が同じサイズで均一に保たれます）
2. 画像幅 - 画像の幅を設定します
3. 画像高さ - 画像の高さを設定します
4. サムネイルレイアウト - 画像ギャラリーのサムネイルを画像ギャラリーの下に水平方向に配置するか、左側に垂直方向に配置するかを決めます
5. バリエーションスタイル - 標準の「ドロップダウン」メニューから選ぶか、「プレーン」テキストメニューから選ぶかを選択します
   (再開発中)

スタイル

以下の色をジェネレーターを通じてカスタマイズできます：

• プロダクトタイトル
• プロダクト価格
• プロダクト要約
• 購入ボタンの背景
• 購入ボタンのテキスト/アイコン
• プロダクトを見るボタンの背景
• 見るボタンのテキスト/アイコン
• カートを見るボタンの背景
• カートを見るボタンのテキスト
• バスケットウィジェットの色
• バスケットの背景
• バスケットテキストの色
• プロダクトアイテムの背景

コーディングスキルがある方には、埋め込みを好きなだけスタイリングするために自分のCSSルールを使用することもできます。iFramesを使用していないため、ページにレンダリングされるすべてのコンテンツはDOMの一部であり、自分のCSSでスタイリングできます。

Your CSSルールが私たちのものよりも具体的であることを確認してください。

例えば、私たちはこのルールを持っています：

.sr-filters-wrap {
   background: #fff;
}

これを上書きするには、親要素を前置きした独自のCSSルールを作成します。例えば：

body .sr-filters-wrap { 
   background: #000; 
}

あなたが私たちのルールの前に「body」要素を追加したので、あなたのルールは私たちのものよりもターゲットが絞られ、優先されます。

より快適であれば、コード埋め込みジェネレーター内で直接変更を加えることもできます。