今回は、Shopifyでファイルをアップロードする方法、そして画像管理する方法についてご紹介していきます。
Shopifyのファイルのアップロード方法は大きく分けて3つあります。
この記事ではそれぞれの方法をご紹介していますが、明確にアップロード方法が分かれている訳ではないため、用途に合わせて使い分けていただけたらと思います。
それではさっそくはじめていきましょう。
Shopifyのファイルアップロード方法
テーマのカスタマイズからアップロード
ストアをカスタマイズしていきながらファイルをアップロードできるため、こちらの方法でアップロードすることが一番多いかと思います。
実際にファイルを挿入した後のストアの見た目なども確認できるため、イメージしやすいかと思います。
- 管理画面の「テーマ」をクリック
- 「カスタマイズ」をクリック
テーマのカスタマイズ画面に移動します。
今回は「画像バナー」というセクションで紹介していますが、「テキスト付き画像」など様々なセクションで画像を追加することができます。
テーマのカスタマイズからアップロードされた画像は
「管理画面→設定→ファイル」で確認することができます。
※こちらは後ほどご紹介します。
アップロードできる画像の仕様
・ファイルサイズ：最大20メガバイト
・解像度：最大20メガピクセル
・ファイル形式：JPEG/PNG/GIF
商品情報やページのエディタからアップロード
今回は「ページ」からアップロードする手順をご紹介します。
商品情報を登録する画面からも商品画像などのファイルをアップロードすることもできます。
- 管理画面から「ページ」をクリック
- 既存のページか「ページを追加」から編集画面へ移動
こちらの「画像を挿入」から画像をアップロードできます。
アップロードできる画像の仕様はテーマのカスタマイズと同じになりますが、商品画像のみ異るため、詳細についてはShopifyの商品画像の公式ドキュメントからご確認ください。
管理画面のファイルからアップロード
- 管理画面の「コンテンツ」をクリック
- 「ファイル」をクリック
- 「ファイルをアップロード」からファイルをアップロード
こちらに表示されているファイルは、先述したアップロード方法なども含めてすべのファイルになります。
画像ファイル以外にも動画ファイルなどもここからアップロードできます。
アップロードしたファイルのURL
先ほどの「管理画面のファイルからアップロード」の画面で、各ファイル列にリンクが確認できます。
こちらからファイルのURLを取得することができるため、テーマのカスタマイズやその他直接ファイルのリンクを指定する際にご確認ください。
アップロードしたファイル名は後からでも自由に変更することができます。
注意点として、ストアのカスタマイズ時に直接ファイル名をコードで指定している場合などは、ファイル名を変更するとリンク切れを起こすため、コードの変更も必要になってきます。
画像管理方法
- Shopify管理画面のコンテンツから「ファイル」をクリック
- この中でアップロードされたすべてのファイルが確認できます
- 「すべて」という項目の右側の＋マークをクリック
ここで管理する画像のフォルダを作成することができるので、フォルダ名をつけましょう。
今回はブログのサムネイルを管理するフォルダーを作るため「ブログ記事サムネイル」とつけました。
このように「ブログ記事サムネイル」という欄ができたのが確認できます。
次に画面右上のフィルターボタンをクリックします。
- 検索フィルターに「pre」と入力
- 保存
今回はサムネイルのファイル名を「pre1〜pre-40」というようにつけているため、「pre」というフィルターをかけるとサムネイル画像のみ抽出されてるようになっています。
その他にもファイルの種類やサイズなど、様々なフィルターによって画像をまとめることができます。
まとめ
今回はShopifyでファイルのアップロード、画像管理方法についてご紹介しました。
通常はストア運営者自身がファイルを保管するサーバーなど準備して管理する必要がありますが、ShopifyではShopify側で準備している強固なサーバーを利用できるため、ストア運営者側で管理する必要はありません。
この点もShopifyを利用するメリットではないでしょうか。
ぜひ参考にしていただければ幸いです。
※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。
この記事の監修者
＼ShopifyでEC構築を検討中の方へ／
現在、Shopify公式は無料のお試しキャンペーンを実施しています。
百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。
下記の案内ページからキャンペーンの詳細をご確認ください。
)
)
)
)
)
)
)
)
