サムネイル

Shopify ストアでファイルを参照・アップロードする方法を徹底解説!

目次

はじめに

今回の記事では、Shopify ストアでファイルを参照・アップロードする方法に加えて、アップロードできるファイルの種類やファイルの管理について解説していきます。

まずは、ファイルの参照方法を見ていきましょう。

ファイルの参照方法

Shopify ストアのファイルを参照するには、管理画面の「コンテンツ」>「ファイル」より参照できます。

管理画面のコンテンツ>ファイルを開く

参照したいファイルのリンクアイコンをクリックすることで、ファイルのリンクをコピーできます。リンクがコピーできたら「リンクをコピーしました」というテキストが表示されます。

ファイルのリンクをコピー

コピーしたリンクを貼り付けてみると、選択した画像の参照ができました。

コピーしたリンクを貼り付ける

次は Shopify ストアにファイルをアップロードする方法について解説します。

Shopify ストアにファイルをアップロードする方法

Shopify ストアにファイルをアップロードする方法として、以下の 3 つの方法を紹介します。

・テーマのカスタマイズ画面からファイルをアップロードする
・商品管理からファイルをアップロードする
・コンテンツからファイルをアップロードする

まずは、テーマのカスタマイズ画面からファイルをアップロードする方法を解説していきます。

テーマのカスタマイズ画面からファイルをアップロードする

テーマのカスタマイズ画面からファイルをアップロードするには、ファイルを添付できるセクションを利用する必要があります。「セクションを追加」をクリックします。

セクションを追加をクリック

セクションの一覧が表示されるので、「テキスト付き画像」や「画像バナー」「動画」など、ファイルを添付できるセクションを選択します。今回は「テキスト付き画像」を追加します。

テキスト付画像を追加

追加された「テキスト付き画像」セクションを編集することで、Shopify ストアに画像ファイルをアップロードできます。

ストアにファイル画像をアップロード

「テキスト付き画像」セクションをクリックすると、「画像を選択」が表示されるので、こちらから 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 をクリック

「Replace」からアップロードしたいファイルを選択することで、ファイルの内容を別ファイルの内容に置き換えることができました。変更したら忘れずに保存しましょう。

ファイルをアップロード

次は Shopify ストアにアップロードされたファイルを削除する方法について解説します。

ファイルを削除する

管理画面の「コンテンツ」>「ファイル」ページより、ファイルの削除ができます。削除したいファイルのチェックボックスをクリックします。

削除したいファイルのチェックボックスをクリック

チェックボックスを有効にした状態で、画面右側の「ファイルを削除」をクリックすることでファイルの削除ができます。

ファイルを削除

ファイルの削除が完了すると、画面の下部に「ファイルが削除されました」と表示されます。

ファイルの削除完了

これで Shopify ストアにアップロードされているファイルの削除ができました。

こちらの記事では Shopify アプリを使用して画像バナーを追加する方法を解説しています。

また、画像を用いて LP を作成することもできます。

まとめ

今回の記事では、Shopify ストアでファイルを参照・アップロードする方法に加えて、アップロードできるファイルとファイルの種類や管理についても解説していきました。

Shopify ストアでファイルを管理することで、ファイルの管理とストアの運営を一元化できます。Shopify ストアでファイルを参照・アップロードして効果的なストア運営ができるようにしましょう。

おすすめ Shopify アプリ

シンプル追従営業日カレンダー|お手軽追従休業日設定のアイコン

シンプル追従営業日カレンダー|お手軽追従休業日設定

営業日カレンダーをストアに常に追従表示。定休日や臨時休業がお客様にひと目で伝わり、安心してお買い物いただけます。

シンプル店舗受け取り|お手軽ローカルピックアップのアイコン

シンプル店舗受け取り|お手軽ローカルピックアップ

お客様がカートページで受け取り店舗・日時を指定できます。テイクアウトや店舗受け取りにおすすめです。

シンプル注文履歴おすすめ商品|お手軽マイページアップセルのアイコン

シンプル注文履歴おすすめ商品|お手軽マイページアップセル

マイページの注文ページに、商品ごとに設定したおすすめ商品を表示。再購入を後押しします。

シンプル顧客メタフィールドCSVインポート・エクスポートのアイコン

シンプル顧客メタフィールドCSVインポート・エクスポート

顧客メタフィールドをCSVで一括管理。エクスポート・編集・インポートがかんたんに。

シンプルフォーム一体型LP|お手軽チャットボット購入のアイコン

シンプルフォーム一体型LP|お手軽チャットボット購入

チャットボット形式でお客様が迷わず注文できるLPを設置できます。コーディング不要で、テーマエディタから簡単に設定できます。

シンプル商品メタフィールドCSVインポート・エクスポートのアイコン

シンプル商品メタフィールドCSVインポート・エクスポート

商品やバリエーションのメタフィールドをCSVで一括管理。インポートもエクスポートもこのアプリひとつで完了。

シンプル新しいお客様アカウント拡張|生年月日・追加フォームのアイコン

シンプル新しいお客様アカウント拡張|生年月日・追加フォーム

誕生日や性別などの項目を、お客様アカウントのプロフィールページに追加できます。コーディング不要です。

シンプル2点目購入割引|2点目以降自動セール設定のアイコン

シンプル2点目購入割引|2点目以降自動セール設定

2点目以降の購入で自動割引。割引バッジと対象商品の表示で、まとめ買いを後押しします。

関連記事