第一个：获取media的数据内容获取第一张图片

<img src="{{  product.media.first | image_url }}" alt="" class="beforeHover">

第二个：获取media的最后一个内容：

<img src="{{  product.media.last | image_url }}" alt="" class="beforeHover">

第三个：获取中间的内容：

  {% assign media_size = product.media.size %}
                        {% assign media_size_minus_2 = media_size | size: 2 %}
                      <img src="{{ product.media[media_size_minus_2] | image_url }}" alt="" class="afterHover"></div>
//或者
                 {% assign media_size_minus_2 = media_size | minus: 2 %}
                      <img src="{{ product.media[media_size_minus_2] | image_url }}" alt="" class="afterHover">

获取多属性的内容

  {%- for option in product.options_by_name['Color'].values limit:8 -%}

             <a href="/en_nl/le-grand-bambino/213BA007-3100-495.html">
                <div class="product__swatches__attributes__value">
         <div style="background:{{option}}">
         </div>
         <span>
        {{option}}
        </span>
      </div>
     </a>
  {%- assign length = product.options_by_name['Color'].values | size -%}
  {%- endfor -%}  
   {%- if length > 8 -%}
  <div class="product__swatches__quantity u-hidden-mobile"> + {{ length | minus: 8 }} </div>
  {%- endif-%}