logo

【Shopify】管理画面からファイルをアップロード・画像管理する方法

【Shopify】管理画面からファイルをアップロード・画像管理する方法

今回は、Shopifyでファイルをアップロードする方法、そして画像管理する方法についてご紹介していきます。

Shopifyのファイルのアップロード方法は大きく分けて3つあります。
この記事ではそれぞれの方法をご紹介していますが、明確にアップロード方法が分かれている訳ではないため、用途に合わせて使い分けていただけたらと思います。

それではさっそくはじめていきましょう。

 Shopifyのファイルアップロード方法

テーマのカスタマイズからアップロード

ストアをカスタマイズしていきながらファイルをアップロードできるため、こちらの方法でアップロードすることが一番多いかと思います。

実際にファイルを挿入した後のストアの見た目なども確認できるため、イメージしやすいかと思います。

  1. 管理画面の「テーマ」をクリック
  2. 「カスタマイズ」をクリック

テーマのカスタマイズ画面に移動します。
今回は「画像バナー」というセクションで紹介していますが、「テキスト付き画像」など様々なセクションで画像を追加することができます。

テーマのカスタマイズからアップロードされた画像は
「管理画面→設定→ファイル」で確認することができます。
※こちらは後ほどご紹介します。

アップロードできる画像の仕様
・ファイルサイズ:最大20メガバイト
・解像度:最大20メガピクセル
・ファイル形式:JPEG/PNG/GIF

商品情報やページのエディタからアップロード

今回は「ページ」からアップロードする手順をご紹介します。
商品情報を登録する画面からも商品画像などのファイルをアップロードすることもできます。

  1. 管理画面から「ページ」をクリック
  2. 既存のページか「ページを追加」から編集画面へ移動

こちらの「画像を挿入」から画像をアップロードできます。
アップロードできる画像の仕様はテーマのカスタマイズと同じになりますが、商品画像のみ異るため、詳細についてはShopifyの商品画像の公式ドキュメントからご確認ください。

管理画面のファイルからアップロード

  1. 管理画面の「コンテンツ」をクリック
  2. 「ファイル」をクリック
  3. 「ファイルをアップロード」からファイルをアップロード

こちらに表示されているファイルは、先述したアップロード方法なども含めてすべのファイルになります。
画像ファイル以外にも動画ファイルなどもここからアップロードできます。

アップロードしたファイルのURL

先ほどの「管理画面のファイルからアップロード」の画面で、各ファイル列にリンクが確認できます。
こちらからファイルのURLを取得することができるため、テーマのカスタマイズやその他直接ファイルのリンクを指定する際にご確認ください。

アップロードしたファイル名は後からでも自由に変更することができます。
注意点として、ストアのカスタマイズ時に直接ファイル名をコードで指定している場合などは、ファイル名を変更するとリンク切れを起こすため、コードの変更も必要になってきます。

画像管理方法

  1. Shopify管理画面のコンテンツから「ファイル」をクリック
  2. この中でアップロードされたすべてのファイルが確認できます
  3. 「すべて」という項目の右側の+マークをクリック

ここで管理する画像のフォルダを作成することができるので、フォルダ名をつけましょう。
今回はブログのサムネイルを管理するフォルダーを作るため「ブログ記事サムネイル」とつけました。

このように「ブログ記事サムネイル」という欄ができたのが確認できます。
次に画面右上のフィルターボタンをクリックします。

  1. 検索フィルターに「pre」と入力
  2. 保存

今回はサムネイルのファイル名を「pre1〜pre-40」というようにつけているため、「pre」というフィルターをかけるとサムネイル画像のみ抽出されてるようになっています。

その他にもファイルの種類やサイズなど、様々なフィルターによって画像をまとめることができます。

まとめ

今回はShopifyでファイルのアップロード、画像管理方法についてご紹介しました。
通常はストア運営者自身がファイルを保管するサーバーなど準備して管理する必要がありますが、ShopifyではShopify側で準備している強固なサーバーを利用できるため、ストア運営者側で管理する必要はありません。

この点もShopifyを利用するメリットではないでしょうか。
ぜひ参考にしていただければ幸いです。

※この記事は2024年05月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【1ドル×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。