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

ishigaki

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

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

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

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

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

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

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

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

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

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

「テキストオーバーレイ付き画像」セクションの設定画面を開いた状態

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

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

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

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

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

属性要件
ファイルサイズ最大20メガバイト
解像度最大20メガピクセル
ファイル形式JPEGまたはJPG
プログレッシブJPEG
PNG
GIF

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

「ページ」のリッチテキストエディタ

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

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

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

管理画面の設定から「ファイル」ページを開いた状態

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

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

属性要件
ファイルサイズ最大20メガバイト
解像度最大20メガピクセル
アスペクト比100:1~1:100
ファイル形式有料プランであればどの形式でもアップロード可能

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

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

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

まとめ

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

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

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

ishigaki

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。