はじめまして、Takaseと申します。
画像下にキャプションを追加する方法ですが、コードを追加することで実現可能です。
※テーマはDawn・バージョンはv11.0.0での実現方法になります。その他テーマで実現させたい場合は記載する方法を応用する必要がある可能性が高いです。
具体的な方法としては、
コードを編集 > セクション > 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の中に格納する
