获取shopify的媒体文件

{{ 'swiper-bundle.css' | asset_url | stylesheet_tag }}
<script src="{{ 'swiper-bundle.js' |asset_url}}" defer></script>
   <style>
        * {
            margin: 0;
            padding: 0;
        }
     h3{
       margin:0;
     }

        .e4s-container {
            width: 1600px;
            padding: 0 200px;
            margin: 141px auto 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
     .buySellsPicture{
       display:block;
     }
    .swiper.mySwiperBestsells.swiper-initialized.swiper-horizontal.swiper-grid.swiper-grid-column.swiper-backface-hidden {
    display: none;
}

        .e4s-container .buysellTitle {
            text-align: center;
        }

       .e4s-container ul {
            height: auto;
            list-style: none;
        }

      .e4s-container  ul li {
            display: inline-block;
            position: relative;
            width: calc(25% - 30px);
            height: 288px;
            background-color: #F5F5F5;
            border-radius: 4px;
            margin-right: 30px;
            box-sizing: border-box;
            margin-bottom: 40px;
           list-style: none;
        }

       .e4s-container ul li:nth-child(4n) {
            margin-right: 0px;
        }

        .e4s-container ul li>span {
            position: absolute;
            top: 13px;
            left: 0;
            height: 30px;
            width: 118px;
            border-radius: 0 15px 15px 0;
            background-color: #F9575C;
            color: #ffffff;
            font-weight: 700;
            font-size: 18px;
           padding-left:28px;
        }

       .e4s-container ul li .product-image {
            margin-top: 50px;
        }

       .e4s-container ul li img {
            width: 278px;
            height: 139px;
            object-fit: cover;
        }

      .e4s-container  ul li ins {
            text-decoration: none;
            color: #F9575C;
            font-weight: 700;
            font-size: 13px;
        }

      .e4s-container  ul li .name {
            line-height: 20px;
            text-align: center;
        margin-top:20px;
       
        }

      .e4s-container  ul li .product-price {
            text-align: center;
            align-items: center;
    justify-content: center;
        }

       .e4s-container ul li del {
            color: #999999;
            font-size: 12px;
            font-weight: 300;
            margin: 5px;
        }

      .e4s-container  .viewmore button {
            width: 305px;
            height: 65px;
            background: #ffffff;
            border-radius: 6px 6px 6px 6px;
            opacity: 1;
            border: 2px solid #000000;
            font-size: 19px;
            color: #000;
        margin-top:19px;
        }
              .beforeHover{
              display:block;
}
   .afterHover{
       display:none;
   }
      button{
           text-transform: unset;
     }
   .li:hover  .beforeHover{
      display:none;
   }
   .li:hover   .afterHover{
       display:block;
   }
     .buySellsPicture{
       margin-top:70px;
     }
               
 @media (max-width:800px) {
            .e4s-container {
                position: relative;
              padding:0;
              margin:0;
                width: 375px;
                height: 100%;
                flex-direction: column;
                display: flex;
                justify-content: center;
                align-items: center;
            }
 .buySellsPicture{
       display:none;
     }
     .swiper.mySwiperBestsells.swiper-initialized.swiper-horizontal.swiper-grid.swiper-grid-column.swiper-backface-hidden {
    display: block;
}
            .e4s-container .buysellTitle {
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #000000;
              margin:35px auto  25px;
            }

              .e4s-container .viewmore button {
                width: 111px;
                height: 24px;
                background: #ffffff;
                border-radius: 3px;
                border: 1px solid #000000;
                font-size: 8px;
                color: #000;
            }

            .e4s-container  .swiper {
                width: 375px;
                height: 480px;
                padding: 0 10px;
            }

            .swiper.mySwiperBestsells.swiper-initialized.swiper-horizontal.swiper-grid.swiper-grid-column.swiper-ios.swiper-backface-hidden {
                padding: 0 10px;
                box-sizing: border-box;
            }

            .e4s-container .swiper-slide {
                width: 173px;
                height: 215px;
                text-align: center;
                font-size: 18px;
                background: #f5f5f5;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
            }

            .e4s-container .swiper-slide>span {
                position: absolute;
                top: 15px;
                left: 0;
                width: 87px;
                height: 23px;
                background: #F9575C;
                border-radius: 0 11px 11px 0;
                text-align: center;
                color: #fff;
                font-weight: 700;
                font-size: 10px;
                line-height: 23px;
            }

            .e4s-container .swiper-slide .product-image {
                width: 173px;
                height: 84px;
                margin: 38px 0 20px;
            }

            .e4s-container .swiper-slide .product-image img {
                width: 173px;
                height: 84px;
                object-fit: cover;
            }

            .e4s-container .swiper-slide .name {
                font-size: 12px;
                font-weight: 700;
                color: #000000;
            }

            .e4s-container .swiper-slide .product-price {
                font-size: 13px;
                font-weight: 700;
                margin-bottom: 35px;
            }

            .e4s-container .swiper-slide ins {
                text-decoration: none;
                margin-right: 5px;
                color: #F9575C;
            }

            .e4s-container .swiper-slide del {
                color: #999;
                font-weight: 400;
            }
  
   .beforeHover{
              display:block;
}
   .afterHover{
       display:none;
   }
   .swiper-slide:hover  .beforeHover{
      display:none;
   }
   .swiper-slide:hover   .afterHover{
       display:block;
   }
    
           
        }
    </style>
     <div class="buySells e4s-container">
        <div class="buysellTitle">
            <h3>{{section.settings.bestsellstitle}}</h3>
        </div>
        <div class="buySellsPicture">
          {% assign collection = section.settings.collection %}
            <ul>
                   {% for product in collection.products limit: 8 %}
                <li class="li">
                    <span>TOP{{ forloop.index }}</span>
                    <div class="product-image"><img src="{{  product.media.first | image_url }}" alt="" class="beforeHover">
                      {% assign secondImage = product.media.last %}
                     {% assign media_size = product.media.size %}
                        {% assign media_size_minus_2 = media_size | minus: 2 %}
                       <img src="{{ product.media[media_size_minus_2] | image_url }}" alt="" class="afterHover"></div>
                    <div class="name">{{product.title}}</div>
                    <div class="product-price">
                        <span><ins>{{ product.price|money}}</ins><del>{{ product.compare_at_price|money }}</del></span>
                    </div>
                </li>
              {% endfor %}
            </ul>
        </div>
       <div class="swiper mySwiperBestsells">
            <div class="swiper-wrapper">
               {% for product in collection.products limit: 8 %}
                <div class="swiper-slide">
                   <span class="topspan">TOP{{ forloop.index }}</span>
                    <div class="product-image"><img src="{{  product.media.first | image_url }}" alt="" class="beforeHover">
                        {% assign media_size_minus_2 = media_size | minus: 2 %}
                 {% assign media_size_minus_2 = media_size | minus: 2 %}
                      <img src="{{ product.media[media_size_minus_2] | image_url }}" alt="" class="afterHover">

                    </div>
                    <div class="name">{{product.title}}</div>
                    <div class="product-price">
                        <span><ins>{{ product.price|money}}</ins><del>{{ product.compare_at_price|money }}</del></span>
                    </div>
                </div>
              {% endfor %}
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="viewmore">
            <button onclick="{{ section.settings.button_link}}">{{ section.settings.bestbuttontitle}}</button>
        </div>
    </div>
    <script>
    var swiper = new Swiper(".mySwiperBestsells", {
        slidesPerView: 2,
        grabCursor: true,
        grid: {
            rows: 2,
        },
        spaceBetween: 10,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
</script>
{% schema %}
  {
    "name": "bestsells",
    "settings": [
  {
  "type": "text",
  "id": "bestsellstitle",
  "label": "bestsellstitles",
  "default": "Best Selling Glasses"
},
        {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
        {
  "type": "text",
  "id": "bestbuttontitle",
  "label": "bestbuttontitle",
  "default": "viewmore"
},{
  "type": "url",
  "id": "button_link",
  "label": "Button link"
}
    ],
     "presets": [
    {
      "name": "bestsells"    
    }
     ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}