SHOP Builder でカスタムページを編集する際は、「商品カテゴリタブ」ブロックを追加することで、ストアのレイアウトの自由度を高め、ページのスペースを有効活用し、より多くの商品を掲載できます。顧客は各タブボタンをクリックするだけで、簡単にカテゴリを切り替えながら商品を閲覧できます。
⚠️ ご利用前にご注意ください：
- SHOP Builder は現在、Ultra Chic、Kingsman、Varm、Philia テンプレートでのみ利用できます。
- SHOP Builder でページを作成した後に、別のストアテンプレートへ切り替えた場合、ページは引き続き表示されますが、編集できなくなり、レイアウトが崩れる可能性があります。ページを公開する前に、表示内容を十分ご確認ください。
本記事では、以下の内容についてご説明します：
１、商品カテゴリタブブロックの追加
STEP 1.
SHOPLINE 管理画面で、「オンラインストアデザイン ＞ オンラインストアページ」に移動し、「新規ページを追加 ＞ カスタムページ」をクリックするか、既存ページの横にある「編集」をクリックして、編集画面を開きます。
＊ご注意：が表示されているカスタムページのみ編集可能です。
STEP 2.
「＋ブロック」ボタンをクリックします。
STEP 3.
「商品カテゴリ」の「商品カテゴリタブ」ブロックをクリックします。
＊ご注意：本ブロックは現在、Shopper App には対応していません。
STEP 4.
表示内容に合わせて、商品カテゴリまたは個別の商品の表示を選択できます。「＋商品カテゴリタブ」または「＋商品タブ」をクリックして、タブボタンを追加します。
＊ご注意：
- 「商品タブ」１つにつき、最大 20 商品まで追加できます。
- 「商品カテゴリタブ」１つにつき、最大 20 商品まで表示できます。20 商品を超える場合は、画面下部の「もっと見る」をクリックすると、残りの商品を確認できます。１つのカスタムページには、最大 10 個の「商品カテゴリタブ」を追加できます 。
STEP 5.
タブボタンを追加後、以下の表を参考に内容と表示スタイルを設定してください。
タブ名 |
タブに表示する名称を設定します。最大 40 文字まで入力できます。 |
| 商品 |
タブ名の下にある「＋商品」または「＋商品」をクリックし、このタブに表示する商品を選択します。商品が非公開または非表示の場合、ストアフロントには表示されません。 |
| タブボタンの表示スタイル |
タブボタンのスタイルは「下線」、「塗りつぶし」、「枠線」の 3 種類から選択できます。また、配置やフォントサイズも変更可能です。 「塗りつぶし」または「枠線」を選択した場合は、タブボタンの角丸を調整できます。 |
| ブロックタイトル |
ブロックのタイトルを入力し、文字揃えを選択します。 |
| 商品の表示列数とカルーセル設定 |
画像比率は 3:4 または 1:1 から選択できます。PC 版とモバイル版それぞれの商品表示列数を設定できます。PC 版は最大 6 列、モバイル版は最大 3 列まで設定できます。 また、カルーセルのナビゲーションは、「ボタン」と「ドット」の 2 種類から選択可能です。 商品カルーセルブロックの詳細については「商品カルーセルブロック」をご参照ください。 |
STEP 6.
続いて、以下３つの設定については、下記の表を参考に設定してください。
| 非表示商品の表示 |
非表示商品を表示するかどうかを設定します。デフォルトはオフです。 有効にすると、このページを利用して非表示の商品をアピールできます。また、SEO 設定で、このページを検索エンジンのインデックス対象外に設定することもできます。 |
「もっと見る」ボタンの表示 |
「もっと見る」ボタンを表示するかどうかを設定します。デフォルトはオンです。 有効化後：
|
余白 |
ブロックの上下および外側の余白を調整できます：
＊ご注意：モバイル版では外側余白を調整することはできません。 |
STEP 7.
上記の設定が完了したら、「保存」をクリックすると、右側に適用結果が表示されます。上部のアイコンをクリックすると、PC 版とモバイル版の表示を切り替えられます。
STEP 8.
「プレビュー」をクリックして設定内容に問題がないことを確認したら、「公開」をクリックします。
２、ストアフロントでの表示
設定した商品カテゴリタブに応じて、ストアフロントではタブを切り替えながら商品を閲覧できます。
PC 版
モバイル版
関連記事
コメント