dawn 商品ページ 商品情報の折りたたみ可能な行に画像を挿入したい

[kazuki2]

表題の通り、商品ページ→商品情報の

折り畳みブロックの中に画像を表示させたいです。

（洗濯表示タグ画像を複数枚貼りたいと考えています。）

メタフィールドのファイル（画像）で定義を設定しても

カスタマイズの画面ではテキスト設定のものしか表示されないため

設定できません。

どう表示させればいいか教えて頂ければ幸いです。

よろしくお願いいたします。

[Qcoltd]

ご質問いただいている、折り畳みブロックに画像を表示する件ですが、

ご質問いただいている通りカスタマイズの画面では

メタフィールドのファイルを選択することができないようです。

メタフィールドのファイルを折り畳みブロックに表示する方法は色々あるかと思いますが、

パッと思いついたのが下記の方法となります。

表示するメタフィールドはファイル形式でファイルのリストで設定してください。

1.修正ファイル検索

管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。

ファイル検索にて「main-product.liquid」を検索し表示してください。

2.出力部分の調整設定

1.「main-product.liquid」で『<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">』を検索

2.下記コードを

<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
  {{ block.settings.content }}
  {{ block.settings.page.content }}
</div>

下記サンプルコードに変更

画像は1行に5個並ぶ設定となっていますが、並びの数や間隔ついてはstyle内を編集してください。

下記サンプルコードの『洗濯表示』は折りたたみ可能な行の見出しで設定した名称に、『product.metafields.namespace.key.value』のnamespace.keyはメタフィールドで設定したネームスペースとキーに変更してください。

<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
  {% if block.settings.heading == '洗濯表示' %}
    <style>
      .accordion__image__box {
        list-style: none;
        margin: 0;
        padding: 0 !important;
        display: flex;
        flex-wrap: wrap;
      }
      .accordion__image {
        padding: 5px;
        width: 20%;
        display: inline-flex;
      }
      .accordion__image img {
        border:none !important;
        margin-bottom: 0 !important;
      }
    </style>
    <ul class="accordion__image__box">
      {% for file in product.metafields.namespace.key.value %}
        {% assign file_name = file | split: '/' | last %}
        <li class="accordion__image"><img src="{{ file_name | file_url }}"></li>
      {% endfor %}
    </ul>
  {% else %}
    {{ block.settings.content }}
  {% endif %}
  {{ block.settings.page.content }}
</div>

サイトでの画像表示イメージとなります。

ご参考まで。

(キュー小坂)