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

**URL:** <https://community.shopify.com/t/pdf/64615>\
**Category:** 技術的なQ＆A\
**Created:** [September 9, 2021, 11:18am UTC](https://community.shopify.com/t/pdf/64615 "2021-09-09T11:18:05Z")\
**Posts on this page:** 7\
**Page:** 1

## AI-generated summary

メタフィールド（OS2.0のカスタム項目）の「ファイル」タイプに登録した画像/PDFを商品詳細ページに表示・リンクする方法が議論。Liquid（Shopifyのテンプレート言語）の file_url フィルターでアップロードファイルのCDN URLを取得し、リンク表示できる点が共有。

実装例: product.metafields.my_fields._key | file_url を link_to で<a>リンク化。ShopifyのCDNではdownload属性が効かないため、代替として target="_blank" を使う注意点も提示。

Dawnテーマではテーマカスタマイザーから「商品情報」→「ブロックを追加」→「カスタムLiquid」を追加し、提示コードを貼り付ければ実装可能。メタフィールドのネームスペース/キーを自サイトの設定に合わせ、PDF未登録時は非表示になる条件分岐付き。

出力はシンプルなダウンロード用<a>タグで、必要に応じてHTMLを追記可能。質問者は手順を理解し、目的のPDFリンク表示は解決した模様。

その後、関連コミュニティ投稿への見解を求める追加質問があり、現時点では未回答で議論は継続中。

<div class="post-metadata">

**Author:** ![YUKI55](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@YUKI55](https://community.shopify.com/u/YUKI55)\
**Post date:** [September 9, 2021, 11:18am UTC](https://community.shopify.com/t/pdf/64615/1 "2021-09-09T11:18:05Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![mrtc](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mrtc/32/109726_2.png) [@mrtc](https://community.shopify.com/u/mrtc)\
**Post date:** [September 10, 2021, 1:45am UTC](https://community.shopify.com/t/pdf/64615/2 "2021-09-10T01:45:36Z")

</div>

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

{% assign file = product.metafields.my\_fields.\_key | file\_url %}  
{{ ‘DOWNLOAD’ | link\_to: file, target: ‘\_blank’ }}

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

[DOWNLOAD](https://cdn.shopify.com/s/files/...../abcd.pdf?v=123)

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

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

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

---

<div class="post-metadata">

**Author:** ![YUKI55](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@YUKI55](https://community.shopify.com/u/YUKI55)\
**Post date:** [September 16, 2021, 10:53am UTC](https://community.shopify.com/t/pdf/64615/3 "2021-09-16T10:53:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mrtc](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mrtc/32/109726_2.png) [@mrtc](https://community.shopify.com/u/mrtc)\
**Post date:** [September 17, 2021, 12:08am UTC](https://community.shopify.com/t/pdf/64615/4 "2021-09-17T00:08:21Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![YUKI55](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@YUKI55](https://community.shopify.com/u/YUKI55)\
**Post date:** [September 22, 2021, 8:27am UTC](https://community.shopify.com/t/pdf/64615/5 "2021-09-22T08:27:04Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![mrtc](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mrtc/32/109726_2.png) [@mrtc](https://community.shopify.com/u/mrtc)\
**Post date:** [September 22, 2021, 9:08am UTC](https://community.shopify.com/t/pdf/64615/6 "2021-09-22T09:08:23Z")

</div>

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

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

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

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

```

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

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

```markup
ダウンロード

```

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

---

<div class="post-metadata">

**Author:** ![YUKI55](https://avatars.discourse-cdn.com/v4/letter/y/b77776/32.png) [@YUKI55](https://community.shopify.com/u/YUKI55)\
**Post date:** [September 22, 2021, 9:11am UTC](https://community.shopify.com/t/pdf/64615/7 "2021-09-22T09:11:26Z")

</div>

理解できました！

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

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

[https://community.shopify.com/post/1318020](https://community.shopify.com/post/1318020)