商品画像のキャプションがずれる

[Anonymous_ec79b31fadfd8bed5de0197feb26e636]

コミュニティの投稿を参考に、テーマのソースコードを書き換えて画像下にキャプションを表示させました。
利用テーマはDawn、バージョン11.0.0です。

バリエーション画像を登録すると、1枚目にバリエーション画像が表示されるせいか、キャプションが本来の画像とは異なるところに表示されます。

例）
表示順「3」指定の画像にキャプション登録、バリエーション画像なし⇒3枚目画像に正しく表示。
表示順「3」指定の画像にキャプション登録、バリエーション画像あり⇒1枚目にバリエーション画像が表示、3枚目に表示順「2」指定の画像＋表示順「3」指定のキャプション表示、4枚目に表示順「3」指定の画像表示。

といった具合です。
こちらの解消方法がわかる方がいらっしゃったらご教授いただけると幸いです。

参考にした方法

画像下にキャプションを追加する方法
コードを編集 > セクション > main-product.liquid 内にある

  {%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }
  {%- endstyle -%}

という箇所のコードに追記して

  {%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }

    .product__media-item.grid__item.slider__slide::after{
        display:block;
        text-align: center;
        margin: 10px auto;
        font-size: 14px;
        color: #000;
    }
    .product__media-item.grid__item.slider__slide.is-active::after{
        display:block;
    }
    {% for media in product.media %}
      .product__media-list li:nth-child({{ forloop.index }}).product__media-item.grid__item.slider__slide::after{
        content: "{{ media.preview_image.alt }}";
      }
    {% endfor %}
  {%- endstyle -%}

というコードにすることで、画像下に画像altのキャプションを表示させることが可能です。

やっていることしては、下記の通りになります。

・疑似要素でキャプションを入れる場所を用意

・liquidのfor文で各画像に対応するaltをcontentの中に格納する