スライダー パーツ｜SHOP Builder

SHOP Builderを使用して高度なページを追加または編集する際に、「スライダー」パーツを追加して、ページに画像や動画を追加し、より美しくすることができます。

⚠️ 始める前に：

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

1. スライダーパーツを追加する

ステップ 1

SHOPLINE管理者に進み、> [オンラインストアデザイン] > [ページ] をクリックし、[高度なページ/編集]ボタンをクリックして高度なページの設定を開きます。

ステップ 2

パーツボタンをクリックします。

ステップ 3

「スライダー」パーツを選択します。

ステップ 4

スライダーのセットはデフォルトで1つ設定されており、画像と動画ボタンをクリックしてコンテンツを編集します。左側のアイコンをクリックして、画像や動画の順序をドラッグして調整します。

ステップ 5

画像パーツをクリックして、モバイル版とPC版それぞれに個別にアップロードします。

1. 一括アップロード

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

2. 単一アップロード

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

*注意：

• PC版の画像幅は2000px以上、モバイル版の画像幅は1080px以上であることを推奨します。
• 画像ファイル形式、数量などの理由でアップロードに失敗した場合、以下のエラープロンプトが表示されることがあります
  • アップロード失敗
    エラーメッセージ：画像のアップロードに失敗しました（サムネイルを表示できません）
     
  • 部分的なアップロード失敗
    エラーメッセージ：一部の画像のアップロードに失敗しました（サムネイルを表示する際にエラーのあるファイルを自動的にスキップします）

言語のドロップダウンメニューをクリックすると、サポートされている言語のリストが表示されます。各言語インターフェースに対して個別に画像をアップロードできます。

ステップ 6

画像、動画パーツをクリックして、画像および動画に関連する設定を編集します。

1. 画像

• 画像のトリミング：表示する画像のどの部分をトリミングするかを選択します（左上/上中央/右上/左中央/中央/右中央/左下/下中央/右下）。
• 画像の代替テキスト：画像の代替テキストを入力します。検索エンジンが画像の内容をよりよく理解できるように、画像の内容を説明する文を使用します。画像のALT説明について詳しくは、こちらの記事を参照してください。
• マスク：画像のマスキングの度合いを選択します。
• タイトル：商品タイトルを挿入します。以下のスタイル設定もカスタマイズできます。スタイル設定の表示順は：パーツのスタイル設定 > ストア設定です。
  • 見出しタグ：H1からH6までの6つのオプションがあります。システムのデフォルトはH3です。
  • テキストカラー：パレットを開いてテキストカラーを選択するか、カラーコードを入力します。
• コンテンツ：商品の説明を挿入します。以下のスタイル設定もカスタマイズできます。
  • テキストカラー：パレットを開いてテキストカラーを選択するか、カラーコードを入力します。
  • リスト：箇条書きリストまたは番号付きリストを追加できます。
  • 全画面編集：全画面編集モードに入って、コンテンツをより簡単に作成できます。
• 表示ボタン：顧客がストアフロントでこのボタンを見るかどうかを選択できます。
• ボタンテキスト：顧客が見るボタンのテキストをカスタマイズできます。
• リンク先：画像にURLを追加し、顧客がクリックすると新しいページにリダイレクトされるようにします。
  リンクを開く方法を選択できます：
  • 現在のウィンドウ：現在のウィンドウでURLを開きます。
  • 新しいウィンドウ：新しいウィンドウでURLを開きます。

2. 動画

• 動画のURL： 動画は再生時に自動的にミュートされるため、YoutubeまたはVimeoのURLを入力してください。
• マスク： 画像のマスキングの度合いを選択します。
• タイトル： 商品のタイトルを挿入します。次のスタイル設定もカスタマイズできます。スタイル設定の表示順は： パーツのスタイル設定 > ストア設定。 
  • 見出しタグ： H1からH6までの6つのオプションがあります。システムのデフォルトはH3です。
  • テキストカラー： パレットを開いてテキストカラーを選択するか、カラーコードを入力します。
• コンテンツ： 商品の説明を挿入します。次のスタイル設定もカスタマイズできます。
  • テキストカラー： パレットを開いてテキストカラーを選択するか、カラーコードを入力します。
  • リスト： 箇条書きリストまたは番号付きリストを追加できます。
  • 全画面編集： コンテンツをより簡単に作成するために全画面編集モードに入ることができます。
• 表示ボタン： 顧客がストアフロントでこのボタンを見るかどうかを選択できます。
• ボタンテキスト： 顧客が見るボタンのテキストをカスタマイズできます。
• リンク先： 画像にURLを追加し、顧客がクリックすると新しいページにリダイレクトされるようにします。
  リンクを開く方法を選択できます：
  • 現在のウィンドウ： 現在のウィンドウでURLを開きます。
  • 新しいウィンドウ： 新しいウィンドウでURLを開きます。

*注意：

• スタイル設定の表示順は： パーツのスタイル設定 > ストア設定。  
• カスタムリキッドを使用してページレイアウトを調整した場合、ウィジェットのスタイル設定を調整した後にカスタムリキッドのルールを編集する必要があります。
• スライダーのタイトルとコンテンツのフォントサイズをカスタマイズするには、左パネルの下部にある「フォントサイズ」オプションに移動します。詳細については、下記のステップ7：I. フォントサイズをご覧ください。
• 現在、Shopper Appはウィジェットのテキストカラーとフォントサイズのカスタマイズをサポートしていません。

ステップ7

その他の設定がサポートされています。

A. フルスクリーン

フルスクリーンモードがオフになっている：

フルスクリーンがオンになっている：

 

B. メディアサイズに合わせて高さを調整

「メディアサイズに合わせて高さを調整」が無効： 

スライダーの高さは画像の幅に基づいています。

• モバイルの幅/高さ比率 2:1
• モバイルの幅/高さ比率 3:4

「メディアに合わせて高さを調整」が有効： 

スライダーウィジェットの高さは最初の画像の高さに基づいています（画像の比率に従います）。

 

C. 画像の比率

デスクトップ版とモバイル版で画像の比率を個別に設定できます（3:4比率、2:1比率、1:1比率）。

• デスクトップ版の推奨画像比率
  • 「メディアサイズに合わせて高さを調整」が無効の場合、画像の比率はデフォルトで2:1に設定されます（2000 x 1000px）。
  • 「メディアサイズに合わせて高さを調整」が有効の場合、画像の元の比率が表示されます。幅は少なくとも2000pxを推奨します。
     
• モバイル版の推奨画像比率
  • 長方形（2:1比率） - 推奨単一画像寸法： 1080 x 540px。
  • 長方形（3:4比率） - 推奨単一画像寸法： 810 x 1080px
  • 正方形（1:1比率） - 推奨単一画像寸法： 1080 x 1080px。

D. パディング

画像とページの間のパディングを調整します。

 

E. 継続時間

スライダー全体の継続時間を1〜10秒の間で選択できます。

F. スタイル

顧客が次の画像をクリックする方法を選択できるボタン、インジケーター、またはサムネイルを選択できます。

G. テキスト位置（デスクトップ）

デスクトップの画像/動画のテキスト位置をニーズに応じて設定できます。「左上、中央上、右上、左中、中央、右中、左下、中央下、右下」から選択します。

 

H. テキスト位置（モバイル）

モバイルの画像/動画のテキスト位置をニーズに応じて設定できます。「メディアの下、メディアの上に重ねる」から選択します。

 

I. フォントサイズ

ニーズに応じて「ストア設定のデフォルト、大きなタイトルと小さな段落、特大タイトルと段落」を選択できます。

ステップ8

設定プロセス中に、下の保存ボタンをクリックして、新しく追加されたスライダーパーツを表示できます。
*注意：デスクトップ版またはモバイル版のプレビューを選択できます。

または、右上のプレビューボタンをクリックして、ストアフロントでプレビューできます。

ステップ 9

上記の設定が確認されたら、公開をクリックして、顧客が新しく更新されたコンテンツを表示できるようにします。

さらに読む

• お知らせバナー / ヘッダー設定 | ショップビルダー
• テキストパーツ | ショップビルダー
• ギャラリーパーツ | ショップビルダー
• テキスト付き画像パーツ | ショップビルダー
• 商品リストパーツ | ショップビルダー
• 商品スライダーパーツ | ショップビルダー
• SEO設定 | ショップビルダー
• フッター設定 | ショップビルダー