Shopifyの商品ページの説明の作成の際に、通常エディターを使用して作成しますが、
時にはエディターからhtmlのソースコードを編集する事が必要なときもあります。
ここでは商品説明文内に、Youtube動画を挿入し、ソースコードを編集して、
自身のチャンネル内の関連動画のみ表示させる設定方法を解説いたします。
目次
① Shopify商品ページで商品説明のソースコードを編集する方法
〉ステップ1: ホーム画面を開き、左メニュー「商品管理」を開く
Shopify 管理画面へのアクセスURL：https://admin.shopify.com/store/{shop名}となります。
もしくは、https://admin.shopify.com/login からアクセス下さい。
管理画面にログイン後、下記の通りお進みください。
管理画面＞商品管理（画面の左）
〉ステップ2: 商品編集画面の説明＞エディター右側「</>」のマーク
ソースコードを編集する為、エディターから「</>」のマークで「HTMLを見る」をクリックします。
管理画面＞商品管理＞商品編集画面の説明＞エディター右側「</>」のマーク
〉ステップ3: ソースコードの中から編集したい箇所を見つけ書き換えます
Youtubeの動画の埋め込みコードの中の動画リンクを編集したい場合は、
下記画像の青い下線部分のリンクを変更したいリンクに書換えて保存してください。
「src=”( この中に差し替えたいリンクを入力してください。 )”」
「共有」の埋め込みコードで発行されるコードの動画URLの末尾に「?rel=0」を書き込むと他の関連動画が非表示となります。
<iframe title=”YouTube video player” src=” 動画のURL ?rel=0″ height=”315″ width=”560″ allowfullscreen=”” allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” frameborder=”0″></iframe>
〉ステップ4: 初めての方は商品を複製してからソース編集を行って下さい
※ご注意ください。
保存すると元に戻せません。
初めて作業を行う際は、まずは商品を複製して予備の商品を作ってから行う事をお勧め致します。
