ソースコードのカスタマイズで商品画像が表示されない。

解決済
art_o_shi
新規メンバー
5 0 0

特定のコレクションの商品を、別ページ(この場合ではカスタムフィールドアプリを利用して商品詳細ページ)に表示させたいのですが、
添付ファイルのように商品名、金額は表示されるのに商品画像が表示されません。

該当のソースコードは以下です。
カスタムフィールドアプリを利用していなくても、例えばTOPページのソースコードをカスタマイズしても同様になります。

collection-list-template.liquidのソースコードをそのまま使用していて、コレクションページ上では画像も表示されています。

----
<div class="grid-uniform">
{%- case section.settings.grid -%}
{%- when '2' -%}
{%- assign grid_item_width = 'medium--one-half large--one-half' -%}
{%- assign image_size = '540x600' -%}
{%- assign width = '540' -%}
{%- assign height = '600' -%}
{%- when '3' -%}
{%- assign grid_item_width = 'small--one-half medium--one-third large--one-third' -%}
{%- assign image_size = '345x550' -%}
{%- assign width = '345' -%}
{%- assign height = '550' -%}
{%- when '4' -%}
{%- assign grid_item_width = 'small--one-half medium--one-quarter large--one-quarter' -%}
{%- assign image_size = '250x' -%}
{%- assign width = '250' -%}
{%- assign height = '225' -%}
{%- when '5' -%}
{%- assign grid_item_width = 'small--one-half medium--one-fifth large--one-fifth' -%}
{%- assign image_size = '195x' -%}
{%- assign width = '195' -%}
{%- assign height = '125' -%}
{%- endcase -%}

{% for product in collection_ref.products %}
{% comment %}
{% if has_sidebar %}
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
{% else %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
{% endif %}
{% endcomment %}
{% include 'product-grid-item' with grid_item_width %}

{% else %}

<div class="grid-item">
<p>{{ 'collections_ref.general.no_matches' | t }}</p>
</div>

{% endfor %}

</div>

スクリーンショット 2020-09-20 192452.png

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1108 257 456

成功

読み込まれている、product-grid-item内で問題が起きていると思うのですが、ブラウザのコンソールには何かエラーは出ていませんでしょうか?

もしくはブラウザでソースを参照してimg タグのURLが正しいかなど確認されるとヒントがあるかもしれません。

Technical Partner Manager, Japan
0 件の「いいね!」
art_o_shi
新規メンバー
5 0 0

ありがとうございます!
ソースコードを見直し、CSSのカスタマイズで表示ができました。

0 件の「いいね!」