カスタムコンテンツブロック｜SHOP Builder

カスタムページを編集する際、「カスタムコンテンツ」ブロックを追加すると、テキスト、商品、画像、動画を自由に組み合わせた多彩なレイアウトを作成できます。ストアページをより魅力的なページに仕上げられます。

⚠️ ご利用前にご注意ください：

• SHOP Builder は現在、Ultra Chic、Kingsman、Varm、Philia テンプレートでのみ利用できます
• SHOP Builder でページを作成した後に、別のストアテンプレートへ切り替えた場合、ページは引き続き表示されますが、編集できなくなり、レイアウトが崩れる可能性があります。ページを公開する前に、表示内容を十分ご確認ください。
   

本記事では、以下の内容についてご説明します：

• カスタムコンテンツブロックの追加
• ストアフロントでの表示

1. カスタムコンテンツブロックの追加

STEP 1.

SHOPLINE 管理画面で、「ストアデザイン ＞ ストアページ」に移動し、「新規ページを追加 ＞ カスタムページ」をクリックするか、既存ページの横にある「編集」をクリックして、編集画面を開きます。

＊ご注意：が表示されているカスタムページのみ編集可能です。 

STEP 2.

「＋ブロック」ボタンをクリックし、新しいブロックを追加します。

STEP 3.

「拡張機能」の「カスタムコンテンツ」をクリックします。

＊ご注意：本ブロックは現在、Shopper App には対応していません。

STEP 4.

商品、画像、テキスト、動画のコンポーネントを自由に組み合わせられます。表示順を変更するには、のアイコンをドラッグします。デフォルトでは、画像コンポーネントと商品コンポーネントがそれぞれ１つ追加されています。

＊ご注意：各カスタムコンテンツブロックには、コンポーネント（商品／画像／テキスト／動画）を最大３つまで追加できます。３つのコンポーネントを追加すると、「追加」ボタンは自動的に非表示になります   。

STEP 5.

コンポーネント（商品／画像／テキスト／動画）ごとに設定が必要な項目が異なります。下記の表を参照し、設定してください。

STEP 6.

続いて、以下４項目の設定については、下記の表を参照し、設定してください。

STEP 7.

上記の設定が完了したら、「保存」をクリックすると、右側に適用結果が表示されます。上部のアイコンをクリックすると、PC 版とモバイル版の表示を切り替えられます。

STEP 8.

「プレビュー」をクリックして設定内容に問題がないことを確認したら、「公開」をクリックします。

２、ストアフロントでの表示

PC版

カスタムコンテンツブロックに含まれるコンポーネントの数や種類に応じて、レイアウトの比率が自動的に切り替わります：

1.  コンポーネントが２つあり、１つ目が画像／動画コンポーネントの場合

１つ目の画像／動画コンポーネントは３分の２の幅で表示され、２つ目のコンポーネントは３分の１の幅で表示されます。

＊ご注意：１つ目のコンポーネントが画像／動画以外の場合は、均等に表示されます。。

2. コンポーネントが３つある場合

コンポーネントの種類に関わらず、すべて均等に表示されます。

モバイル版

設定したコンポーネントの順番に従って、上から順に表示されます。

関連記事

• ギャラリーブロック｜SHOP Builder
• テキストブロック｜SHOP Builder
• 動画コレクションブロック｜SHOP Builder