Shopify ストアでファイルを参照・アップロードする方法を徹底解説！
目次
はじめに
今回の記事では、Shopify ストアでファイルを参照・アップロードする方法に加えて、アップロードできるファイルの種類やファイルの管理について解説していきます。
まずは、ファイルの参照方法を見ていきましょう。
ファイルの参照方法
Shopify ストアのファイルを参照するには、管理画面の「コンテンツ」>「ファイル」より参照できます。
参照したいファイルのリンクアイコンをクリックすることで、ファイルのリンクをコピーできます。リンクがコピーできたら「リンクをコピーしました」というテキストが表示されます。
コピーしたリンクを貼り付けてみると、選択した画像の参照ができました。
次は Shopify ストアにファイルをアップロードする方法について解説します。
Shopify ストアにファイルをアップロードする方法
Shopify ストアにファイルをアップロードする方法として、以下の 3 つの方法を紹介します。
・テーマのカスタマイズ画面からファイルをアップロードする
・商品管理からファイルをアップロードする
・コンテンツからファイルをアップロードする
まずは、テーマのカスタマイズ画面からファイルをアップロードする方法を解説していきます。
テーマのカスタマイズ画面からファイルをアップロードする
テーマのカスタマイズ画面からファイルをアップロードするには、ファイルを添付できるセクションを利用する必要があります。「セクションを追加」をクリックします。
セクションの一覧が表示されるので、「テキスト付き画像」や「画像バナー」「動画」など、ファイルを添付できるセクションを選択します。今回は「テキスト付き画像」を追加します。
追加された「テキスト付き画像」セクションを編集することで、Shopify ストアに画像ファイルをアップロードできます。
「テキスト付き画像」セクションをクリックすると、「画像を選択」が表示されるので、こちらから Shopify ストアに画像ファイルをアップロードします。
「画像を選択」をクリックすると、モーダルが表示されます。「画像を追加」をクリックするか、「ドラッグ&ドロップ」で画像をアップロードしましょう。
無事に Shopify ストアに画像をアップロードできました。アップロードが完了したら「ファイルがアップロードされました」と表示されます。
アップロードした画像は Shopify ストア内で使用することができます。「テキスト付き画像」セクションに追加した画像を挿入すると、ストア上に表示できます。
次は、商品管理からファイルをアップロードする方法を解説します。
商品管理からファイルをアップロードする
Shopify ストアには管理画面の「商品管理」からファイルをアップロードすることもできます。右上の「商品を追加する」をクリックしましょう。
「商品を追加する」ページの「新規アップロード」よりファイルアップロードができます。
今回は動画ファイルをアップロードします。Shopify ストアには画像ファイル以外にも動画ファイルをアップロードすることができます。
追加すると、Shopify ストアに動画ファイルをアップロードすることができました。
「商品管理」にも動画ファイルを添付した商品が追加されています。
最後に、「コンテンツ」からファイルをアップロードする方法を解説します。
コンテンツからファイルをアップロードする
管理画面の「コンテンツ」から Shopify ストアにファイルをアップロードすることもできます。「コンテンツ」>「ファイル」の画面右上にある「ファイルをアップロード」をクリックします。
アップロードしたいファイルを選択してファイルをアップロードしましょう。
アップロードが完了したら「ファイルがアップロードされました」と表示されます。
次は、Shopify ストアにアップロードできるファイルについて解説していきます。
アップロードできるファイル
Shopify ストアにアップロードできるファイルには「画像ファイル」や「ビデオファイル」、「一般的なファイル」があります。アップロードできるファイルのサイズや形式を一つ一つ見ていきましょう。
画像ファイル
Shopify ストアにアップロードできる画像ファイルは以下の通りです。
| 属性 | 要件 |
|---|---|
| ファイルサイズ | 最大 20 MB (メガバイト) |
| 解像度 | 最大 25 MP (メガピクセル) |
| アスペクト比 | 100:1 ～ 1:100 |
| ファイル形式 | JPEG、PNG、WEBP、HEIC、GIF |
ファイルサイズは最大 20MB までで、アスペクト比は 100:1 ～ 1:100 となっています。ファイルは JPEG、PNG、WEBP、HEIC、GIF 形式のものを利用するようにしましょう。
ビデオファイル
Shopify ストアにアップロードできるビデオファイルは以下の通りです。
| 属性 | 要件 |
|---|---|
| ファイルサイズ | 最大 1 GB (ギガバイト) |
| 解像度 | 最大解像度 4 K |
| 動画の長さ | ビデオの長さ最長 10 分 |
| ファイル形式 | MOV と MP4 |
1 GB 超えるサイズのビデオまたは 10 分を超えるビデオの共有を希望する場合は、YouTube や Vimeo などのビデオホスティングサービスを使用して、ビデオの共有リンクをコンテンツに追加できます。
次は一般的なファイルを見ていきましょう。
一般的なファイル
Shopify ストアには「一般的なファイル」をアップロードすることもできます。一般的なファイルとは、HTML 以外のファイルで、顧客がダウンロードすることを目的としているファイルです。
| 属性 | 要件 |
|---|---|
| ファイルサイズ | 最大 20 MB |
| ファイル形式 | HTML 以外のファイル形式 |
「一般的なファイル」には次のようなファイル形式があります。
・JS
・CSS
・GIF
・JPEG
・PNG
・JSON
・CSV
・PDF
・WebP
・HEIC
顧客がダウンロードすることを目的としている場合、ファイルサイズが 20 MB までに収まるようにしましょう。アップロードできるファイルの詳細はこちら
次はファイルの管理について解説します。
ファイルの管理
アップロードしたファイルは管理画面の「コンテンツ」>「ファイル」より管理できます。Shopify ストアにアップロードされたファイルを編集する方法や削除する方法を解説していきます。
ファイルを編集する
Shopify ストアにアップロードされているファイルは、「フォーカルポイント」を追加したり別ファイルの内容へ置き換えたりすることができます。
まずは、「フォーカルポイント」を追加してみましょう。
フォーカルポイントの追加
Shopify の「フォーカルポイント」を設定することで、画像サイズと画面サイズが異なる場合でも設定した部分にピントを合わせることができます。
「フォーカルポイント」の詳細はこちら
まずは、Shopify ストアにアップロードされている画像に「フォーカルポイント」を追加してみましょう。今回は赤枠のファイルに「フォーカルポイント」を追加します。
ファイルをクリックすると、モーダルが表示されるので、「フォーカルポイントを追加する」をクリックします。
「ドラッグしてフォーカルポイントを調整」というテキストが表示されるので、顧客に注目させたい部分にポイントを調整しましょう。設定したら忘れずに保存しましょう。
次はファイルの内容を別ファイルの内容に置き換えて見ましょう。
ファイル内容を別ファイルの内容に置き換える
Shopify ストアにアップロードされたファイルを別ファイルの内容に置き換えるには、画像の「･･･」をクリックします。
下記画像のように「Replace」と「Download」が表示されるため、「Replace」をクリックしましょう。
「Replace」からアップロードしたいファイルを選択することで、ファイルの内容を別ファイルの内容に置き換えることができました。変更したら忘れずに保存しましょう。
次は Shopify ストアにアップロードされたファイルを削除する方法について解説します。
ファイルを削除する
管理画面の「コンテンツ」>「ファイル」ページより、ファイルの削除ができます。削除したいファイルのチェックボックスをクリックします。
チェックボックスを有効にした状態で、画面右側の「ファイルを削除」をクリックすることでファイルの削除ができます。
ファイルの削除が完了すると、画面の下部に「ファイルが削除されました」と表示されます。
これで Shopify ストアにアップロードされているファイルの削除ができました。
こちらの記事では Shopify アプリを使用して画像バナーを追加する方法を解説しています。
また、画像を用いて LP を作成することもできます。
まとめ
今回の記事では、Shopify ストアでファイルを参照・アップロードする方法に加えて、アップロードできるファイルとファイルの種類や管理についても解説していきました。
Shopify ストアでファイルを管理することで、ファイルの管理とストアの運営を一元化できます。Shopify ストアでファイルを参照・アップロードして効果的なストア運営ができるようにしましょう。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
