ギャラリーブロック｜SHOP Builder – SHOPLINE Help Center

4. EC + SC (EN).png

SHOP Builderを使用すると、詳細ページを追加または編集する際に、画像パーツを使用してタブを画像で豊かにし、より美的に魅力的にすることができます。

⚠️ 始める前に：

SHOP Builderは現在、Ultra Chic、Kingsman、Varm、およびPhiliaテーマテンプレートのみをサポートしています。
SHOP Builderを使用してページを作成した後、他のテーマテンプレートに切り替えてもページは表示されますが、編集できず、レイアウトが崩れる可能性があります。ページを公開する前にこの点に注意してください。

1. 画像パーツを追加する

ステップ 1

SHOPLINE管理画面に進み、> [オンラインストアデザイン] > [ページ]をクリックし、[詳細ページ/編集]ボタンをクリックして詳細ページの設定を開きます。 Screen_Shot_2022-06-30_at_11.06.19_AM.png

ステップ 2

ウィジェットボタンをクリックします。 Screen_Shot_2022-06-17_at_11.03.01_AM.png

ステップ 3

ギャラリーパーツを選択します。 Screen_Shot_2022-06-30_at_10.29.15_AM.png

ステップ 4

1. 一括アップロード

システムは画像ファイルの修正日付に基づいて、上から下へ、最も最近編集されたものから以前のものへと並べ替えます。

2. 単体アップロード

1つの画像を一度にアップロードすることもでき、サムネイルは一括アップロードと同様に並べ替えられます。

*Note:

現在、最大16枚の画像の追加をサポートしています。
画像ファイル形式、数量などの理由でアップロードに失敗した場合、次のエラープロンプトが表示されることがあります
- アップロード失敗
  エラーメッセージ：画像のアップロードに失敗しました（サムネイルを表示できません）
- 部分的なアップロード失敗
  エラーメッセージ：一部の画像のアップロードに失敗しました（サムネイルを表示する際にエラーファイルを自動的にスキップします）

複数の画像を追加した場合は、左側の ___2022-06-30___10.34.59.png アイコンをクリックして、画像の順序をドラッグして調整します。

ステップ 5

画像パーツをクリックして、PCとモバイルインターフェース用に別々にアップロードします。

*Note: PC版の画像幅は2000px以上、モバイル版の画像幅は1080px以上を推奨します。 Screen_Shot_2022-06-17_at_11.47.09_AM.png

言語のドロップダウンメニューをクリックすると、サポートされている言語のリストが表示されます。各言語インターフェース用に画像を個別にアップロードできます。 Screen_Shot_2022-06-30_at_11.39.37_AM.png

ステップ 6

画像関連の設定を編集します。

画像のトリミング：表示する画像の部分を選択します（左上/中央上/右上/左中/中央/右中/左下/中央下/右下）。
画像の代替テキスト：画像の代替テキストを入力します。検索エンジンが画像の内容をよりよく理解できるように、画像の内容を説明する文を使用してください。画像のALT説明について詳しくは、こちらの記事を参照してください。
マスク：画像のマスキングの度合いを選択します。
タイトル：商品タイトルを挿入します。次のスタイル設定をカスタマイズすることもできます。スタイル設定の表示順は：ウィジェットのスタイル設定 > ストア設定。
- 見出しタグ：H1からH6までの6つのオプションがあります。システムのデフォルトはH3です。
- テキストカラー：パレットを開いてテキストカラーを選択するか、カラーコードを入力します。
- フォントサイズ：16/20/24/28/32から選択できます。実際のフォントサイズは、ストア設定で設定したフォントサイズに基づいて比例的にスケールされます。
URLリンク：画像にURLを追加し、顧客がクリックすると新しいページにリダイレクトされるようにします。
リンクを開く方法を選択できます：
- 現在のウィンドウ：現在のウィンドウでURLを開きます。
- 新しいウィンドウ：新しいウィンドウでURLを開きます。