メタフィールドで商品詳細ページに画像やPDFを挿入する方法について

[YUKI55]

OS2.0からメタフィールドが実装できると思います。メタフィールド設定画面で「ファイル」があるのですが、実際にそのファイル（商品説明の画像やPDF）を商品詳細ページに挿入する方法をご存知の方はいらっしゃいますか？

こちらでやってみたのですが、テキスト（動的）しか追加挿入できないようで困っています。

[mrtc]

こういうことでしょうか？

{% assign file = product.metafields.my_fields._key | file_url %}
{{ 'DOWNLOAD' | link_to: file, target: '_blank' }}

↓「abcd.pdf」をメタフィールドにアップロードした際の出力結果

<a href="//cdn.shopify.com/s/files/...../abcd.pdf?v=123" target="_blank" rel="nofollow">DOWNLOAD</a>

メタフィールドが「ファイル」の場合、file_urlを付けることでアップロードしたファイルのURLが出力できます。
https://shopify.dev/api/liquid/filters/url-filters#file_url

これを商品詳細ページに挿入すれば良いかと思います。

ちなみにShopifyはファイルURLがCDNになるのでブラウザによってdownload属性が効きません。
その代わりとして「target="_blank"」を入れてあります。

[YUKI55]

ありがとうございます。Liquidなど少々難しいので、もし可能でしたら再度教えていただけないでしょうか

[mrtc]

何がわからなくて、最終的にどうしたいのか、具体的に教えていただけますか？

スキルによって実装は難しいので、外部パートナーに依頼することをお勧めします。

[YUKI55]

メタフィールドで商品詳細ページにPDFを表示させたいです。（おそらくメタフィールドのファイルを洗濯するかと）

Dawnでやってみましたが、PDFが商品詳細ページに表示されなかったので、手順などがわかればご教示いただきたいです。

⇨Liquidを触る必要はありますか？

[mrtc · Accepted solution]

---

⇨Liquidを触る必要はありますか？

---

基本的にメタフィールドを登録しただけでは出力されません。
テーマによってはテーマのコード編集が必要ですが、Dawnの場合はカスタマイザーで設定可能です。

1. テーマ→カスタマイズより商品ページの編集画面を開く
2. 商品情報→ブロックを追加にて「カスタムLiquid」を選択
3. 以下のコードをコピペ（ネームスペースとキーは設定したものに編集して下さい）

{% assign field = product.metafields.my_fields.pdf %}
{% assign file = field | file_url %}
{% if field != blank %}
	{{ 'ダウンロード' | link_to: file, target: '_blank' }}
{% endif %}

以前のコードに分岐を付けて、メタフィールドにPDFの登録がない場合は出力されないようにしています。

後は好きな位置にドラッグして保存すれば以下のHTMLで出力されます。

<a href="//cdn.shopify.com/s/files/...../xxxx.pdf?v=123" target="_blank" rel="nofollow">ダウンロード</a>

単純に<a>タグのみの出力なのでご自由にhtmlタグを追記してください。

[YUKI55]

理解できました！

ご丁寧なご回答まことにありがとうございました！

もう１点、以下について知見をお持ちでしょうか？

https://community.shopify.com/c/%E7%B7%8F%E5%90%88%E7%9A%84%E3%81%AA%E3%83%87%E3%82%A3%E3%82%B9%E3%8...