Shopify 管理画面からファイルをアップロードする

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

Gaji-Labo では Shopify というEコマース用プラットフォームのテーマ開発を行っています。

今回の記事では、 Shopify 管理画面でのファイルアップロードの方法についてまとめたいと思います。

Shopify 関連記事はこちらの記事にまとまっておりますので、あわせてお読みください。

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

Shopify にファイルをアップロードする方法については大きく分けて3つあります。

• テーマのカスタマイズから画像ファイルをアップロードする（画像のみ）
• 商品情報やページのリッチテキストエディタから画像ファイルをアップロードする（画像のみ）
• 管理画面 > 設定 > ファイルからファイルをアップロードする

この内、画像以外もアップロードが可能なのは3つ目の「ファイル」からアップロードする方法のみとなります。

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

セクションの設定で画像をアップロードできる設定にしてあるものは、その設定項目から画像のアップロードができます。

Shopify デフォルトテーマである Debut テーマのセクションである「テキストオーバーレイ付き画像」セクションを例にすると、

1. 管理画面 > テーマ > カスタマイズからテーマカスタマイズ画面を開く
2. 既存のセクションを選択するか、セクションを追加するから新しく「テキストオーバーレイ付き画像」セクションを追加する
3. 画像を選択する から画像をアップロードする

この手順でセクションに画像をアップロードし、設定することができます。アップロードした画像はテーマファイルの config/settings_data.json 内にURLが追加されます。

アップロードした画像は管理画面 > 設定 > ファイルから確認することができます。

アップロードできる画像の要件は以下のようになっています。

商品情報やページのリッチテキストエディタから画像ファイルをアップロードする

商品情報やページのリッチテキストエディタからも画像のアップロードができます。

アップロードの仕様はテーマのカスタマイズと同様ですが、商品画像のみアップロードできるファイルの要件が異なっています。詳しくは商品画像の公式ドキュメントをご確認ください。

管理画面 > 設定 > ファイル からファイルをアップロードする

管理画面の「ファイル」ページからから直接ファイルをアップロードすることもできます。「ファイル」ページは管理画面の「設定」内に存在しています。こちらはファイルの要件内であれば画像以外でもアップロードできます。

ファイルの要件は以下のようになっています。

アップロードしたファイルの管理について

管理画面内でアップロードされたファイルは全て管理画面 > 設定 > ファイルから確認でき、ここからファイルの確認やプレビュー、削除が可能です。

ただし、既にアップロードされたファイルをリネームすることや差し替えることはできません。そのため、ファイルに変更を加えたい場合は既存のファイルを削除し再度アップロードし直す必要があります。

まとめ

今回はShopify 管理画面でのファイルアップロードの方法についてまとめてました。

Shopify の運用に携わっている方の参考にしていただければ幸いです。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。