ShopifyのAdvanced Custom Fields使用時の画像アップロードに関するメモ

Advanced Custom Fields自体は試しに入れてみた程度ですが、画像の部分が気になったので調べたことをメモとして。

前提

• ShopifyでAdvanced Custom Fieldsを利用して画像を用いる
• この画像はどこにアップロードされるのか知りたい

ヘルプやドキュメントをみても分からず、検索でも見つけられず、画像はどこにアップロードされるのかがわかりませんでした。

参考

• Advanced Custom Fields – オンラインストア用のEコマースプラグイン – Shopify アプリストア
• Shopify Custom Fields Apps – Advanced Custom Fields Shopify App – ArenaCommerce
• Using Metafields in Your Shopify Theme – ArenaCommerce Help Center
• Shopify App Documentation – ArenaCommerce Help Center

Advanced Custom FieldsはWPで同じ名前のプラグインを出していてただでさえ探しにくいのに、ドキュメント自体もとても探しにくい印象です。

同じドメイン内のページなのにナビゲーションでは到達方法が分からないページや、ヘルプと書かれたページとは別のURLに専用らしきサイトがあるなど、かなり迷いました。

画像の設定方法

• Insert from URL
• Upload fileds – Upload to Store
• Upload fileds – Upload to ACF server
• Library

大別すると3つですが、Upload filedsが2種類あるので計4つとも言えます。

Insert from URL

• 画像がアップロードされているURLを記載し、カスタムフィールドにテキストしてそのURLを保存する
• 画像をアップロードしているわけはない模様

*Inserting from URL is always prioritized.
*In case you want to select file from file library, remember to clear “Insert from URL” before selecting new file in FIle Library

操作画面に上記のような注意書きがあり、Insert from URLの入力はもっとも優先度が高いため、他の方法を選ぶ際には入力欄に入れたURLを削除して空にする必要がある、とのこと。

Upload fileds – Upload to Store

• ローカルからファイルを選んで、ストアのサーバー(=Shopifyのサーバー)にアップロードする
• アップロード先は公開テーマのassetsディレクトリ
• アップロードした画像は、先頭にafc.-という文字列がつく模様
  (例:hoge.jpgはafc.-hoge.jpgになる)

アップロードした画像は、管理画面のテーマのカスタマイズからコード編集に進み、assetsディレクトリの中をみることで、画像名や画像自体を確認できる。

画像名さえ分かれば{{ 'afc.-hoge.jpg' | asset_img_url }}でも出力できるはず。

この状態はテーマ変更時に問題になりそうだが、そもそも出力用の記述もやり直しなわけで手順的なコストはそこまで問題にならないのかも。

Upload fileds – Upload to ACF server

• ローカルからファイルを選んで、Advanced Custom Fieldsのサーバーにアップロードする
• CDNのURLはhttps://cdn.arenacommerce.com/ストア名/hoge.jpg
• ５０個までアップロード可能な模様(プラン次第かも)

File will be uploaded to ACF server. Only 50 files are allowed on ACF server.

操作画面に表示される上記の説明の通り。

Library

• Upload filedsでアップロードした画像の一覧が表示される
• アップロード先がストアでもAdvanced Custom Fieldsでも関係なくまとめて表示され、削除も可能
• 画像をクリックすることでURLが確認でき、それを見ればストアかAdvanced Custom Fieldsのサーバーかが判断できる

すでにアップロード済みの画像を選んで設定できる。

結び

チュートリアルやドキュメントを見ずに開始すると、かなりの確率で操作方法を迷い続けるかかもしれません。

慣れ次第という結論にはなりますが、管理画面内のワードでGoogle検索してもほぼ情報なしということもあるため(全て動画内で説明されているかもしれませんが)、全体や細部を把握しようとすると大変そうです。

もちろん多機能なことは確かなので、画像のアップロードを含めてカスタムフィールドの操作を一つのプラグインで賄う場合には重宝すると思います。