商品詳細ページに、商品ごとに個別にそれぞれ違う画像やテキストを登録して、表示させたい時があると思います。
そんな時に活躍するのが「商品メタフィールド」です。
しかし。あれ？
いつもやってるのに、なんで？画像出ないの。
ただ画像を表示させたいだけなのに。。なんて。
すぐ忘れるし、テンパってるとなおさら出てきません。
以下のようにメタフィールドを作成していました。
単純な画像の出し方は2つ程あって、
それがごっちゃになっていたのでした。
<!-- 画像の書き方 1 urlタイプ -->
<img src="{{ product.metafields.custom.material_img.value }}" alt="素材・画像">
<!-- 画像の書き方 2 file_referenceタイプ -->
{{ product.metafields.custom.material_img.value | image_url: width: 600 | image_tag: loading: "lazy", class: "c_img", alt: "素材・画像" }}上のスクリーンショット画像のメタフィールドだと、<!–画像の書き方 1 urlタイプ –>では表示しれくれません。
<img src=”[object Object]” alt=”素材・お手入れ方法”>
な感じになってしまいます。
登録方法が、file_referenceタイプだからです。
【共有】file_referenceタイプはこう
file_referenceタイプは、画像を登録すると以下のように見えます。
↑画像ファイルを直でUP登録するのです。
出力コードは以下。
<!-- 画像部分 -->
{%- assign material_img_raw = product.metafields.custom.material_img.value -%}
{%- if material_img_raw != blank -%}
<div class="material-care-image">
{{ material_img_raw | image_url: width: 600 | image_tag: loading: "lazy", class: "c_img", alt: "素材・お手入れ方法" }}
</div>
{%- endif -%}このコード、登録がない時は、表示しない設定になっていますね。
すごい、誰が考えたの(`ェ´)ﾋﾟｬｰ
urlタイプは「1行テキスト」で
<!–画像の書き方 1 urlタイプ –>でやりたい時は、メタフィールドを「1行テキスト」が良いでしょう。
https://example.com/care.jpg
みたいに、URLテキストで登録すると良いでしょう。
shopifyのファイルにUP済みの画像のURLをコピペして登録することになると思います。
<!– 期待する出力 –>
<img src=”https://cdn.shopify.com/s/files/1/xxx/xxx/files/care.jpg” alt=”素材・画像”>
ファイルから欲しい画像を探すのが面倒なんですよね。
慣れでしょうか。
星間旅路のメロディ
「宇宙の静けさに包まれながら、漂流する過去の音楽を捜し求め、銀河の奥底でその旋律に耳を傾ける。」
「この電波はどこの星からきたのだろうか。」
なんだろう。この寂しい気持ちになるのは。
どうしたんですか。