平日10:00~17:00
06-6485-6485
fshop-AI(研修中) AIチャットを開く

商品(表示設定)

商品(表示設定)

商品>商品追加/商品検索・一覧>商品(表示設定)

商品>表示設定(メイン)

特定の商品に対する表示内容を、個別にコントロールするための画面です。

特定の商品に対するSEO設定やレイアウト(デザイン)、おすすめ商品の表示において、店舗共通の設定を適用するか、商品固有の設定を適用するかを選択できます。

また商品画像パーツに、動画を表示するための設定も、本画面より行えます。

目次

<関連情報>

関連マニュアル

本画面から遷移する画面や関連マニュアルは以下をご覧ください。

レイアウト表示

「商品詳細」画面のレイアウト(デザイン)を個別に指定できる「レイアウト割当」機能を利用したい場合に設定します。

商品種別により表示される入力欄が異なります。

既存の「割当名」から選択する場合

事前に設定した割当名から選択できます。

通常・予約販売商品の場合

商品(表示設定)レイアウト表示-通常・予約


通常・定期販売商品の場合

商品(表示設定)レイアウト表示-通常・定期商品


定期販売商品の場合

商品(表示設定)レイアウト表示-定期・頒布会商品


頒布会販売商品の場合

商品(表示設定)レイアウト表示-定期・頒布会商品


入力欄をクリックすると、インクリメンタルサーチ機能で、入力文字の前方一致で候補が表示されます。

「割当名」を選択すると、表示されている選択肢に が表示されます。

  • 通常・予約販売商品の場合

「商品レイアウト割当」にて、商品詳細レイアウトの割当名を選択できます。
「定期商品レイアウト割当」入力欄は表示されません

  • 通常・定期販売商品の場合

通常販売時のレイアウト(デザイン)として、「商品レイアウト割当」にて、商品詳細レイアウトの割当名を選択できます。
定期販売時のレイアウト(デザイン)として、「定期商品レイアウト割当」にて、商品詳細(定期)の割当名を選択できます。
双方、入力可となります。

  • 定期販売商品の場合

「定期商品レイアウト割当」にて、商品詳細(定期)の割当名を選択できます。
「商品レイアウト割当」入力欄は、表示されますが、グレーアウト(入力不可)となります。

  • 頒布会販売商品の場合

「定期商品レイアウト割当」にて、商品詳細(定期)の割当名を選択できます。
「商品レイアウト割当」入力欄は表示されません。

[利用状況を確認]ボタン

押下すると、「レイアウト割当の利用状況」モーダルが開きます。

既存のレイアウト割当の利用状況を一覧で確認できます。

 表示内容について詳しくは、 「レイアウト割当の利用状況」モーダルをご覧ください。

新たに「割当名」を指定する場合

商品(表示設定)-レイアウト割当名

本項目にて、新たに割当名を登録することもできます。
ただしこの場合は、利用したい「レイアウト」(デザイン)に、「割当名」を忘れずに設定してください

入力欄に「割当名」を入力しEnterを押すと、新規割当名を追加できます。 文字数:100文字(カンマ(,)・スペースは利用不可)

設定した「割当名」に が表示されます。

SEO設定

「商品詳細」画面のSEO関連の設定を、登録・確認・変更できます。


ページ名(title)

商品(表示設定)-SEO設定ページ名(title)

【commerce creator > ページ設定】で設定されたタイトルを表示する

「商品詳細」画面のページ設定で設定しているページ名(title)を利用します。

所属グループのページ名設定を継承する

選択すると、メイングループに設定した商品グループの「ページ名(title)」と同じ内容になります。

下記固有のページ名にする

商品ごとに、個別のページ名(title)を利用したい場合に選択します。
ラジオボタンをチェックし、入力欄に設定します。 文字数:100文字


<ご注意事項>

メイングループのSEO設定にて、「下記固有のページ名にする」のラジオボタンを選択していない場合でも、本画面で「所属グループのページ名設定を継承する」を選択した場合には、入力値(空白含む)が設定中商品の「ページ名(title)」として利用されます。

ー[置換文字を入力]ボタン

押下すると、「置換文字」モーダルが表示されます。

利用可能な置換文字を一覧で確認し、モーダル上の を押下すると入力できます。

利用可能な置換文字一覧をご覧ください。

設定内容

以下を選択している場合に表示されます。

  • 「【commerce creator > ページ設定】で設定されたタイトルを表示する」
  • 「所属グループのページ名設定を継承する」

実際に出力される内容を表示します(本エリアでは、置換文字は置換されずにそのまま表示されます)。


説明(description)

商品(表示設定)-SEO設定説明(description)

【commerce creator > ページ設定】で設定された概要を表示する

「商品詳細」画面のページ設定で設定している概要を利用します。

所属グループの説明を継承する

選択すると、メイングループに設定した商品グループの「説明(description)」と同じ内容になります。

下記固有の説明にする

商品ごとに、個別の説明(description)を利用したい場合に選択します。
ラジオボタンをチェックし、入力欄に設定します。 文字数:250文字


<ご注意事項>

メイングループのSEO設定にて、「下記固有のページ名にする」のラジオボタンを選択していない場合でも、本画面で「所属グループのページ名設定を継承する」を選択した場合には、入力値(空白含む)が設定中商品の「説明(description)」として利用されます。

ー[置換文字を入力]ボタン

押下すると、「置換文字」モーダルが表示されます。

利用可能な置換文字を一覧で確認し、モーダル上の を押下すると入力できます。

利用可能な置換文字一覧をご覧ください。

設定内容

以下を選択している場合に表示されます。

  • 「【commerce creator > ページ設定】で設定された概要を表示する」
  • 「所属グループのページ名設定を継承する」

実際に出力される内容を表示します(本エリアでは、置換文字は置換されずにそのまま表示されます)。


キーワード設定

商品(表示設定-SEO設定キーワード設定

【commerce creator > ページ設定】で設定されたキーワードを表示する

「商品詳細」画面のページ設定で設定しているキーワードを利用します。

所属グループのキーワードを継承する

選択すると、メイングループに設定した商品グループの「キーワード設定」と同じ内容になります。

下記固有のキーワードにする

商品ごとに、個別のキーワードを利用したい場合に選択します。
ラジオボタンをチェックし、入力欄に設定します。 文字数:500文字


<ご注意事項>

メイングループのSEO設定にて、「下記固有のページ名にする」のラジオボタンを選択していない場合でも、本画面で「所属グループのページ名設定を継承する」を選択した場合には、入力値(空白含む)が設定中商品の「キーワード」として利用されます。

ー[置換文字を入力]ボタン

押下すると、「置換文字」モーダルが表示されます。

利用可能な置換文字を一覧で確認し、モーダル上の を押下すると入力できます。

利用可能な置換文字一覧をご覧ください。

設定内容

以下を選択している場合に表示されます。

  • 「【commerce creator > ページ設定】で設定されたキーワードを表示する」
  • 「所属グループのページ名設定を継承する」

実際に出力される内容を表示します(本エリアでは、置換文字は置換されずにそのまま表示されます)。

利用可能な置換文字一覧

「下記固有のページ名(title)/説明(description)/キーワード設定(keywords)にする」を選択した場合に、利用できる置換文字です。

画面内容置換文字説明
全ページ共通店舗名{% shop.name %}設定>店舗共通>ショップ基本設定に設定した店舗名に置換されます。
商品グループ商品グループ名{% category.name %}商品グループごとに置換されます。

「レイアウト割当の利用状況」モーダル

商品レイアウト割当-「レイアウト割当の利用状況」モーダル

レイアウト・レイアウト割当の利用/未利用状況を一覧で確認できます。

「割当名」やレイアウトの「利用」状況を確認した上で、スムーズにレイアウト割当名を設定できます。

価格表示

「通常価格(定価)」や「販売価格」「予約販売価格」などの前後に表示する文言を設定できます。

<ご注意事項>

  • バリエーション価格・バリエーション予約価格が設定されている場合は、[通常価格(定価)・通常価格]前後の文言は、ユーザー画面(ECサイト)上には表示されません。

定価表示設定

定価からの特別価格をアピールしたい際などにご利用ください。

表示イメージは、「商品詳細」画面「商品グループ/バンドル商品一覧」画面「商品検索結果一覧」画面をご覧ください。

商品(表示設定)-定価表示設定

【商品・商品グループ > 商品ページ設定】の「通常価格(定価)・販売価格表示設定」を利用する

設定>商品・商品グループ >商品ページ設定 -価格表示設定「通常価格(定価)・販売価格表示設定」の設定で表示されます。

下記固有の設定を表示する

商品ごとに、個別の文言を利用したい場合に選択します。(例:「メーカー希望価格」など)
ラジオボタンをチェックし、入力欄に設定します。 文字数:100文字

設定内容

以下を選択している場合に表示されます。

  • 「【商品・商品グループ > 商品ページ設定】の「通常価格(定価)・販売価格表示設定」を利用する」

実際に出力される内容を表示します(本エリアでは、置換文字は置換されずにそのまま表示されます)。


予約販売価格表示設定

※商品追加/基本設定(通常・予約)の場合のみ表示され、予約情報にて、「予約を受け付ける」のチェックONの場合のみ入力可能です。

予約販売ならではの特別価格をアピールしたい際などにご利用ください。

表示イメージは、「商品詳細」画面「商品グループ/バンドル商品一覧」画面「商品検索結果一覧」画面をご覧ください。

商品(表示設定)-予約販売価格表示設定

【商品・商品グループ > 商品ページ設定】の「販売価格・予約販売価格表示設定」を利用する

設定>商品・商品グループ >商品ページ設定 -価格表示設定「販売価格・予約販売価格表示設定」の設定で表示されます。

下記固有の設定を表示する

商品ごとに、個別の文言を利用したい場合に選択します。(例:「メーカー希望価格」など)
ラジオボタンをチェックし、入力欄に設定します。 文字数:100文字

設定内容

以下を選択している場合に表示されます。

  • 「【商品・商品グループ > 商品ページ設定】の「販売価格・予約販売価格表示設定」を利用する」

実際に出力される内容を表示します(本エリアでは、置換文字は置換されずにそのまま表示されます)。

在庫表示

「在庫管理をする」のチェックONの場合のみ、設定は有効となります。チェックがない場合は、設定に依らず[カートに入れる]ボタンが常に表示されます。

在庫数や在庫切れ時の挙動をコントロールします。

表示イメージは、利用しているカートボタンパーツにより異なります。
[バリエーション商品ではない場合]のカートボタンパーツ[バリエーション商品である場合]のカートボタンパーツから各ボタンパーツのリンク先にてご確認ください。


在庫数表示設定

「在庫あり」「残りわずか」などの表示形式を設定します。

商品(表示設定)-在庫表示設定

【商品・商品グループ > 商品ページ設定】の「在庫切れ設定の在庫表示設定」を利用する

設定>商品・商品グループ >商品ページ設定 -在庫切れ設定「在庫表示設定」の設定で表示されます。

<ご注意事項>

下記固有の設定を表示する

商品ごとに、個別の表示を行いたい場合に選択します。
ラジオボタンをチェックし、「表示しない」「在庫数を表示」「在庫僅少を表示」のいずれかを選択します。

ー「表示しない」を選択

在庫数を表示しません。

ー「在庫数を表示」を選択

在庫数を表示します。

<ご注意事項>

  • 「商品一覧」画面では、「バリエーション選択モーダル(カート・バリエーションごとにボタンパーツ利用)」利用時のみ表示可能です。

ー「在庫僅少を表示」を選択

在庫数は表示しませんが、ある在庫数以下になった場合に「在庫僅少閾値コメント」を表示します。

閾値は、商品基本設定(基本)-在庫情報「僅少表示閾値」にて設定します。
表示コメントは、コマースクリエイター>メッセージの「在庫僅少メッセージ」にて設定します。

<ご注意事項>

  • バリエーション在庫を設定しており、バリエーションごとに閾値を設定したい場合は、バリエーション詳細で設定します。
  • 表示コメントは表示する画面と商品種類(通常/バリエーション)により変更するメッセージが異なります。
設定内容

以下を選択している場合に表示されます。

  • 「【商品・商品グループ > 商品ページ設定】の「在庫切れ設定の在庫表示設定」を利用する」

実際に出力される内容を表示します。


在庫なし表示設定

在庫切れ時に表示するテキスト(例:「完売御礼」など)を設定します。

商品(表示設定)-在庫なし表示設定

【商品・商品グループ > 商品ページ設定】の「在庫切れ設定の購入可能在庫数設定」を利用する

設定>商品・商品グループ >商品ページ設定 -在庫切れ設定「購入可能在庫数設定」の設定で表示されます。

下記固有の設定を表示する

商品ごとに、個別の表示を行いたい場合に選択します。
ラジオボタンをチェックし、入力欄に設定します。 文字数:200文字

設定内容

以下を選択している場合に表示されます。

  • 「【商品・商品グループ > 商品ページ設定】の「在庫切れ設定の購入可能在庫数設定」を利用する」

実際に出力される内容を表示します。


予約在庫数表示設定

※商品追加/基本設定(通常・予約)の場合のみ表示され、予約情報にて、「予約を受け付ける」のチェックONの場合のみ入力可能です。

商品(表示設定)-予約在庫数表示設定

【商品・商品グループ > 商品ページ設定】の「予約商品在庫切れ設定」の予約在庫表示設定を利用する

設定>商品・商品グループ >商品ページ設定 -予約商品在庫切れ設定「予約在庫表示設定」の設定で表示されます。

<ご注意事項>

下記固有の設定を表示する

商品ごとに、個別の表示を行いたい場合に選択します。
ラジオボタンをチェックし、「表示しない」「在庫数を表示」「在庫僅少を表示」のいずれかを選択します。

ー「表示しない」を選択

予約在庫数を表示しません。

ー「在庫数を表示」を選択

予約在庫数表示します。

<ご注意事項>

「商品一覧」画面では、「バリエーション選択モーダル(カート・バリエーションごとにボタンパーツ利用)」利用時のみ表示可能です。

ー「在庫僅少を表示」を選択

予約在庫数は表示しませんが、ある在庫数以下になった場合に「予約在庫閾値コメント」を表示します。

閾値は、商品基本設定(基本)-在庫情報「予約在庫切れ僅少表示閾値」にて設定します。
表示コメントは、コマースクリエイター>メッセージの「予約在庫僅少メッセージ」にて設定します。

<ご注意事項>

  • バリエーション在庫を設定しており、バリエーションごとに閾値を設定したい場合は、バリエーション予約在庫で設定します。
  • 表示コメントは表示する画面と商品種類(通常/バリエーション)により変更するメッセージが異なります。
設定内容

以下を選択している場合に表示されます。

  • 「【商品・商品グループ > 商品ページ設定】の「予約商品在庫切れ設定」の予約在庫表示設定を利用する」

実際に出力される内容を表示します。


予約在庫なし表示設定

※商品追加/基本設定(通常・予約)の場合のみ表示され、予約情報にて、「予約を受け付ける」のチェックONの場合のみ入力可能です。

予約在庫切れ時に表示するテキスト(例:「予約販売数完売」など)を設定します。

商品(表示設定)-予約在庫なし表示設定

【商品・商品グループ > 商品ページ設定】の「予約商品在庫切れ設定」の購入可能在庫数設定を利用する

設定>商品・商品グループ >商品ページ設定 -予約商品在庫切れ設定「購入可能在庫数設定」の設定で表示されます。

下記固有の設定を表示する

商品ごとに、個別の表示を行いたい場合に選択します。
ラジオボタンをチェックし、入力欄に設定します。 文字数:200文字

設定内容

以下を選択している場合に表示されます。

  • 「【商品・商品グループ > 商品ページ設定】の「予約商品在庫切れ設定」の購入可能在庫数設定を利用する」

実際に出力される内容を表示します。

動画表示

「商品詳細」画面の商品画像パーツに動画を表示できます。

商品画像とともに、動画をカルーセルで表示することが可能です。 表示順は任意に設定可能です。

<iframe>タグによる読み込み、または<video>タグにて埋め込み表示します。

<ご注意事項>

  • 表示可能な動画は、1商品につき1動画となります。
  • バリエーション毎の動画の表示はできません。
  • 「商品動画」は、「商品一括登録」などのCSVによる一括登録は行えません。

<関連情報>


「動画表示を利用する」(チェックボックス)

「動画表示を利用する」

「動画表示を利用する」にチェックすると、「商品詳細」画面の商品画像が表示されるエリア(商品画像パーツ)に動画を含めて表示することができます。

画像と動画はカルーセルにて表示されます。


<商品動画が表示可能な条件>

「商品詳細」画面において、以下のパーツをご利用の場合に限ります。

「商品画像繰り返しパーツ」をご利用の場合は表示されません。


<チェックOFF時のご注意事項>

「動画表示を利用する」のチェックをOFFにした場合(動画を表示しない設定にした場合)は、
以下の設定(入力値)もすべて削除されます。


表示方法

※「動画表示を利用する」(チェックボックス)がOFFの場合は、必須項目はその限りではありません(必須解除)。

iframeによる埋め込み

iframeによる埋め込み

iframeによる埋め込みで、外部サービスにアップロードした動画を表示したい場合に選択します。
例えば、YouTubeやVimeoなどの動画共有サービスが、iframeによる埋め込みをサポートしています。

サーバに負荷をかけずに表示を行うことができます。
ただし外部サービスで動画を削除したり、タグが変更されるような操作を行った場合には、動画が表示されなくなるのでご注意ください。

「埋め込みタグ」欄に、各サービスから取得した埋め込みタグを登録してください。 必須 文字数:32,000文字

<ご利用可能サービス>

  • YouTube
  • Vimeo
  • TikTok

<ご利用いただけないサービス>

  • instagram

タグの埋め込みにはご留意いただきたい点がございます。必ず動画サービス埋め込みタグご利用時のご留意事項をご覧ください。

videoタグによる埋め込み

<video>タグによる埋め込み

アップロードした動画ファイル(mp4・webm・oggなど)を読み込んで表示したい場合に選択します。
動画のURLを入力するだけで、表示が可能です。また自動再生なども指定できます。

動画URL

動画のURLを入力してください。 必須 半角(URL形式):1,000文字

<ご注意事項>

  • http:// https://を含めて入力してください。
  • アイテムボックスのURLは入力できません(アイテムボックスに動画をアップロードはしないでください)。
  • CMSサーバへの動画アップロードは避けてください。
自動再生
ー「する」(チェックボックス)

チェックすると、「商品詳細」画面にて動画が表示された際に、自動的に再生がはじまります。
ミュートでの再生となります。

ー「動画をループ再生する」(チェックボックス)

チェックすると、動画がループして何度も再生されます。
「自動再生ー「する」」のチェックがONの場合のみ有効です。

チェックOFFの場合は、一度の再生で停止します。


サムネイル画像(URLパス) 必須

※「動画表示を利用する」(チェックボックス)がOFFの場合は、必須解除となります。

サムネイル画像URL

「商品画像パーツ」の下部にサムネイル表示される画像を指定できます。 半角(URL形式):1,000文字

<ご注意事項>

  • http:// https://を含めて入力してください。

動画見出し

動画見出し

サムネイル画像URLで指定したサムネイル画像の下に表示するキャプションを入力します。 文字数:100文字


表示位置

表示位置

画像を表示するパーツ内での、商品画像の表示順を設定できます。

カルーセルの最初

商品(画像設定)で登録した商品画像の一番前に動画を表示します。
「商品詳細」画面を開いたときに、一番最初に動画が表示されます。

「自動再生」を設定している場合、再生回数により重量課金される動画サービスなどをご利用の場合はご注意ください。

バリエーション商品の場合は、設定の組み合わせにおいて、動画の表示順に例外が発生します。
詳しくは、バリエーション商品にて「カルーセルの最初」選択時のご注意事項をご覧ください。

カルーセルの指定した位置

商品(画像設定)で登録した商品画像のうち、指定の画像の次に動画を表示します。

ラジオボタンを選択し、入力欄に数字を入力します。 1~40
入力した数字の画像の後に、動画が表示されます。(例:[3]と指定した場合は、4番目に動画が表示されます。)

カルーセルの最後

商品(画像設定)で登録した商品画像の一番後ろに動画を表示します(一番最後に動画が表示されます)。

バリエーション商品にて「カルーセルの最初」選択時のご注意事項

設定の組み合わせによっては、本項目で「カルーセルの最初」を選択している場合でも、
「商品詳細」画面を開いた際に、最初に表示される「メイン画像」に動画は表示されません

該当となる商品

カートパーツに、カート・バリエーション選択スライダーパーツを利用しているバリエーション商品

表示されないケース
[1] 設定>商品・商品グループ>商品ページ設定- バリエーション選択スライダー表示-バリエーション選択の初期値にて以下のいずれかを選択している場合
  • 「代表バリエーションを選択する」
  • 「1番目の選択肢を選択する」を選択している場合

この場合、設定に従い「代表バリエーション」「1番目の選択肢」のいずれかが、最初に表示されます。

[2] 画像の表示パーツとして、商品画像パーツを利用している場合

この場合、設定>商品・商品グループ>商品ページ設定- バリエーション選択スライダー表示-バリエーション選択の初期値にて、「初期値を設定しない」を選択している場合でも、動画は一番最初に表示されません

「商品サムネイル画像」が一番最初に表示される画像となります。

※画像表示パーツが、商品画像パーツ・フリックであれば、動画が最初に表示されます。

おすすめ商品表示

特定の商品をカートに入れた際、または「商品詳細」画面に表示する関連商品を設定します。


この商品をカートに入れたときに表示するおすすめ商品

この商品をカートに入れたときに表示するおすすめ商品

【カート > 購入画面設定】の「おすすめ商品設定」で設定された商品を表示する

設定>カート>購入画面設定で設定された商品を表示します。

下記固有のおすすめ商品を表示する

商品ごとに独自の「おすすめ商品」を表示したい場合に選択します。 文字数:4000文字/100文字(1行)/チルダ(~)・スペース利用不可

おすすめ商品は最大20件まで指定できます。

商品番号(枝番号をつけず)を1商品ずつ改行し登録してください。
空行は利用できません。

「商品詳細ページにも表示する」(チェックボックス)

チェックすると、「商品詳細」画面にも「おすすめ商品」を表示します。
チェックをはずすと、「商品詳細」画面には表示せず、カート投入時のみ表示されます。

設定内容

以下を選択している場合に表示されます。

  • 「【カート > 購入画面設定】の「おすすめ商品設定」で設定された商品を表示する」

実際に出力される内容を表示します(商品番号が表示されます)。 [すべて開く]を押下すると、設定されている商品番号がすべて表示されます。


表示パターン

おすすめ商品の表示パターンを選択できます。
登録されたすべての商品がカルーセルにて表示されます。

表示パターン

【カート > 購入画面設定】の「おすすめ商品設定」で設定された表示パターンを利用する

設定>カート>購入画面設定で設定された表示パターンでおすすめ商品を表示します。

下記固有の表示パターンを利用する

商品ごとに表示パターンを選択します。
表示パターンをA・B・Cのいずれか選択してください。表示項目がそれぞれ違います。

設定内容

以下を選択している場合に表示されます。

  • 「【カート > 購入画面設定】の「おすすめ商品設定」で設定された表示パターンを利用する」

実際に出力される内容を表示します(表示パターンが表示されます)。

ー パターンA

カートボタンが表示されます。商品価格などご注文に必要な情報も表示されます。

<ご注意事項>

表示パターンAを利用する際には、配置場所に関して注意事項がございます。必ずご覧ください。

ー パターンB

お気に入りボタンと商品価格は表示されますが、カートボタンは表示されません。

ー パターンC

お気に入りボタンと商品価格は表示されますが、商品名などは表示されません。
表示項目が少ない、シンプルな表示です。

各パターンの表示項目については任意商品表示パーツ-表示パターンをご覧ください。


<表示に関する注意事項>

以下の商品は、表示されません。

  • 表示パターンB・Cでは、会員ログイン状態のときに会員価格が登録されていれば会員価格が、なければ販売価格が表示されます。
  • ショッピングカート画面では、最後にカートに入れられた商品のおすすめ商品を表示します。
  • 商品詳細画面では、商品詳細に表示されている商品のおすすめ商品を表示します。
  • 以下の商品は表示されません。
    • 非公開の商品・削除済みの商品
    • ゲストの場合に、会員のみアクセス可とする商品
    • 闇市商品グループをメイングループに指定している商品
    • 販売期間が設定され、かつ販売期間中ではない商品
    • 在庫切れの商品
    • 予約販売商品で、かつ予約受付期間中ではない商品
    • 予約販売商品で、かつ予約在庫切れの商品
    • 定期・頒布会商品で、「定期・頒布会在庫数」設定をしており、申込上限に達している商品

※プレビューの場合、非公開商品は表示されます。その他は上記と同様です。

[プレビュー]ボタン

[プレビュー]ボタン

押下すると、「プレビュー」モーダルが表示されます。
該当の商品ページがプレビューモードで開きます。

プレビューモーダルの利用方法については、プレビューモード選択モーダルをご覧ください。

【参照】動画サービス埋め込みタグご利用時のご留意事項

基本的に、各サービス提供元のマニュアルをご覧ください。
以下については、futureshopで作成したECサイトに掲載するタグとして、設定いただきたいパラメータや属性となります。


全サービス共通

  • allow属性にfullscreenの設定してください。

YouTube

必須パラメータ

  • enablejsapi=1をクエリパラメータに付与してください。
  • クエリパラメータのsi=(××××)は削除しないでください。

オートプレイ有効化

  • autoplay=1mute=1をクエリパラメータに付与してください(自動再生時は、ミュートに設定にします)。
  • allow属性にautoplayを記述してください。

ループ再生有効化

  • loop=1playlist={動画ID}をクエリパラメータに付与してください。動画IDはURL末尾にある11桁の英数字です。{}は不要です。
<サンプルタグ>

上記全ての指定を盛り込んだタグのサンプルは以下の通りです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/vMdwyPfoMMI?si=rwww6KkYwKjjPmhc&enablejsapi=1&autoplay=1&mute=1&loop=1&playlist=vMdwyPfoMMI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

※本タグでは、futureshop関連の動画が流れます。そのままお使いにならないでください。


Vimeo

オートプレイ有効化

  • autoplay=1muted=1をクエリパラメータに付与してください(自動再生時は、ミュートに設定にします)。
  • allow属性にautoplayを記述してください。

ループ再生有効化

  • loop=1をクエリパラメータに付与してください。
<サンプルタグ>

上記全ての指定を盛り込んだタグのサンプルは以下の通りです。

<iframe src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1&loop=1" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay"></iframe>

※本タグでは、Vimeoのオフィシャル動画が流れます。そのままお使いにならないでください。


TikTok

必須パラメータ

  • iframeに設定するsrcは、www.tiktok.com/player/v1/{tiktok_post_id}の形式で必要なパラメータを付与してください。{}は不要です。

オートプレイ有効化

  • autoplay=1をクエリパラメータに付与してください。
    ただし、mutedは自動再生onの時もoffの時も設定しないでください(自動再生時は、ミュートになります)。
  • allow属性にautoplayを記述してください。

ループ再生有効化

  • loop=1をクエリパラメータに付与してください。
<サンプルタグ>

上記全ての指定を盛り込んだタグのサンプルは以下の通りです。

<iframe height="300" width= "400" src="https://www.tiktok.com/player/v1/6718335390845095173?&music_info=1&description=1&autoplay=1&loop=1" allow="fullscreen" title="test" allow="autoplay"></iframe>

※本タグでは、TikTokマニュアルで公開されているサンプル動画が流れます。そのままお使いにならないでください。