FROM CACHE - jp_header
解決済

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

YUKI55
遊覧客
14 0 3

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

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

1 件の受理された解決策
mrtc
Shopify Partner
47 20 27

成功


⇨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タグを追記してください。

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。

元の投稿で解決策を見る

6件の返信6

mrtc
Shopify Partner
47 20 27

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

{% 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"」を入れてあります。

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。
YUKI55
遊覧客
14 0 3

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

mrtc
Shopify Partner
47 20 27

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

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

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。
YUKI55
遊覧客
14 0 3

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

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

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

mrtc
Shopify Partner
47 20 27

成功


⇨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タグを追記してください。

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。
YUKI55
遊覧客
14 0 3

理解できました!

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

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

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...