商品画像とテキストパーツおよび商品リストパーツ｜ワンページストア

「商品画像とテキスト」パーツと「商品リスト」パーツを追加または編集することで、ストアに画像と説明を追加できます。また、パーツをカスタマイズして、ストアに最適なストアフロントのレイアウトを作成し、顧客からの閲覧や訪問を増やすことができます。

⚠️ 始める前に、次のことに注意してください：

• これらの機能は、ワンページストアでのみサポートされています。
• SHOPビルダーは現在、Ultra Chic、Kingsman、Varm、およびPhiliaテーマテンプレートをサポートしています。他のテンプレートに切り替えると、ワンページストアは利用できなくなります。

この記事では、以下の内容をカバーします：

• 商品画像とテキストパーツ
• 商品リストパーツ

1. 商品画像とテキストパーツ

ステップ 1

商品とストアのレイアウト設定の手順に従って、ワンページストアを設定します。次に、商品画像とテキストをクリックします。

\

ステップ 2

「商品」、「画像」または「テキスト」パーツを追加することを選択できます。

*Note: 最大4つのパーツを追加できます。異なる組み合わせや
複数の同様のパーツを使用できます。

例えば：
1. 商品 x4 
2. 画像 x3 + テキスト x1
3. 商品 x2 + 画像 x2

i. 商品

ステップ 1. 「商品」ドロップダウンリストを開き、+商品をクリックします。

ステップ 2. 商品を選択し、確認をクリックします。
 

*Note: 商品セットは現在サポートされていませんが、[近日中に対応予定]です。

ii. 画像

「画像」ドロップダウンリストを開き、デスクトップまたはモバイル画像を追加することを選択します。次に、画像のALTテキストを設定します。

iii. テキスト

「テキスト」ドロップダウンリストを開きます。タイトル、サブタイトル、コンテンツを入力します。また、見出しタグ、テキストの色、フォントサイズ、太字、ハイパーリンクを調整することもできます。

*Notes:

• 見出しタグについて詳しく知りたい場合は、次を参照してください：ストアの見出しタグの設定。
  
• スタイル設定の表示順は、パーツのスタイル設定 > ストア設定です。
• カスタムリキッドを使用してページレイアウトを調整した場合、パーツのスタイル設定を調整した後にカスタムリキッドのルールを編集する必要があります。
• 現在、Shopper Appはパーツのテキストの色とフォントサイズのカスタマイズをサポートしていません。

ステップ 3

マージンとテキストの配置を調整し、商品概要と非表示の商品を表示するかどうかを選択します。完了したら、保存をクリックしてすべての変更を保存します。

• パディング：画像とテキスト、ページの間のマージンを調整できます。
• テキストの配置：左、中央、または右の配置を選択できます。
• 商品概要を表示：トグルをオンにして商品概要を表示します。オフにすると非表示になります。
• 非表示の商品を表示：トグルをオンにして非表示の商品を表示します。オフにすると非表示になります。

ステップ 4

保存後、右側でコンテンツをプレビューできます。また、右上のプレビューページボタンをクリックして、完全なストアフロントを表示することもできます。

ステップ 5

上記のすべての設定を完了し、確認したら、公開をクリックします。これにより、顧客はこのワンページストアで行った変更を表示できるようになります。

2. 商品リストパーツ

ステップ 1

商品とストアのレイアウト設定の手順に従って、ワンページストアを設定します。次に、商品リストをクリックします。

ステップ 2

「商品」または「 カテゴリ」パーツを追加することを選択できます。

ステップ 3

i. 商品

ステップ 1. 最大 40 商品を選択します。次に、次へをクリックします。

*注意：商品セットは現在サポートされていません。

ステップ 2. 商品をドラッグして順序を再整理します。完了したら確認をクリックします。

ステップ 3. 選択した商品は左側のバーに表示されます。鉛筆アイコンをクリックして編集するか、ゴミ箱アイコンをクリックして削除します。

ii. カテゴリ

ステップ 1. 商品カテゴリを選択します。次に、次へをクリックします。

*注意：最大 40 商品を表示できます。カテゴリに 40 商品を超える商品が含まれている場合、後ろに近い商品は One-Page ストアに表示されません。

ステップ 2. 選択したカテゴリは左側のバーに表示されます。鉛筆アイコンをクリックして編集するか、ゴミ箱アイコンをクリックして削除します。

ステップ 4

タイトル、テキストの配置、行ごとの商品数、マージンを設定します。次に、商品概要と非表示の商品を表示するかどうかを選択します。設定が完了したら、保存をクリックしてすべての変更を保存します。

• タイトル：カテゴリのタイトルを入力し、テキストの見出しタグを設定します。
• テキストの配置：左、中央、または右の配置を選択できます。
• 行ごとの商品数：カテゴリ内の行数（左右）、PC バージョンのみ利用可能です。
• パディング：画像とテキスト、ページ間のマージンを調整できます。
• 商品概要を表示：トグルをオンにして商品概要を表示します。オフにすると非表示になります。
• 非表示の商品を表示：トグルをオンにして非表示の商品を表示します。オフにすると非表示になります。

ステップ 5

保存後、右側でコンテンツをプレビューできます。また、右上のプレビューページボタンをクリックして、完全なストアフロントを表示することもできます。

ステップ 6

上記のすべての設定を完了し、確認したら、公開をクリックします。これにより、顧客はこの One-Page ストアで行った変更を表示できるようになります。