功能展示：

详情页调整

列表页调整

此次针对清仓产品进行了一些样式调整，如上图所示，代码更改如下，请按步骤进行更改：

1.全选复制目标代码1，替换掉product-meta.liquid全部原有文档内容。
目标代码1：

<div class="ProductMeta">
  
  {%- if section.settings.show_vendor and product.vendor != blank -%}
    <h2 class="ProductMeta__Vendor Heading u-h6">
      {%- assign vendor_handle = product.vendor | handle -%}
      {%- assign collection_for_vendor = collections[vendor_handle] -%}

      {%- unless collection_for_vendor.empty? -%}
        <a href="{{ collection_for_vendor.url }}">{{ product.vendor }}</a>
      {%- else -%}
        {{- product.vendor -}}
      {%- endunless -%}
    </h2>
  {%- endif -%}

  <h1 class="ProductMeta__Title Heading u-h2">
    {%- if template.name == 'product' -%}
      {{- product.title -}}
    {%- else -%}
      <a href="{{ product.url }}">{{ product.title }}</a>
    {%- endif -%}
  </h1>

  {%- if section.settings.show_sku and product.selected_or_first_available_variant.sku != blank -%}
    <p class="ProductMeta__Sku Heading Text--subdued u-h6">{{ 'product.form.sku' | t }}: <span class="ProductMeta__SkuNumber">{{ product.selected_or_first_available_variant.sku }}</span></p>
  {%- endif -%}

  {%- if product.template_suffix != 'coming-soon' -%}
    <div class="ProductMeta__PriceList Heading">
      
      {%- if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
        {%- if product.vendor == 'cl' -%}
            <span class="ProductMeta__Price Price Price--highlight Text--subdued u-h4" data-money-convertible>{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}</span>
            <span class="ProductMeta__Price Price Price--compareAt Text--subdued u-h4" data-money-convertible>{{ product.selected_or_first_available_variant.compare_at_price | money_without_trailing_zeros }}</span>
            <span class="ProductMeta__Price Price Price--highlight Text--subdued u-h4" style="margin-left:30px;">{{ product.compare_at_price | minus:product.price | times:100 | divided_by: product.compare_at_price }}% OFF</span>
      {%- else -%}  
            <span class="ProductMeta__Price Price Price--highlight Text--subdued u-h4" data-money-convertible>{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}</span>
        {%- endif -%}
      {%- else -%}
        <span class="ProductMeta__Price Price Text--subdued u-h4" data-money-convertible>{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}</span>
      {%- endif -%}
    </div>
  {%- endif -%}
    {%- if product.vendor == 'cl' -%}
  
    <div class="Product_Low_Price">
      <div>
        <i class="iconfont">&#xe76a;</i>
        <span style="font-size: 12px;text-transform: capitalize;">Clearance And Other Discounts Cannot Be Used Together And Clearance Items Are Not Allowed To Be Returned Or Exchanged.</span>
      </div>
    </div>
    {%- endif -%}

  {%- if show_description and section.settings.description_below_add_to_cart == false -%}
    <div class="ProductMeta__Description">
      <div class="Rte">
        {{ product.description }}
      </div>

      {%- if section.settings.show_share_buttons -%}
        <div class="ProductMeta__ShareButtons hidden-pocket">
          <span class="ProductMeta__ShareTitle Heading Text--subdued u-h7">{{ 'product.form.share' | t }}</span>

          {%- assign share_url = shop.url | append: product.url -%}
          {%- assign twitter_text = product.title -%}
          {%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
          {%- assign pinterest_image = product.featured_image | img_url: 'large' | prepend: 'https:' -%}

          <div class="ProductMeta__ShareList Text--subdued">
            <a class="ProductMeta__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="Facebook">{%- include 'icon' with 'facebook' -%}</a>
            <a class="ProductMeta__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener" aria-label="Twitter">{%- include 'icon' with 'twitter' -%}</a>
            <a class="ProductMeta__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener" aria-label="Pinterest">{%- include 'icon' with 'pinterest' -%}</a>
          </div>
        </div>
      {%- endif -%}
    </div>
  {%- endif -%}
</div>
  <script>
console.log({{ product | json }})
</script>

2.全选复制目标代码2 ，替换掉product-item.liquid 全部原有文档内容。
目标代码2：

<div class="ProductItem {% if use_horizontal %}ProductItem--horizontal{% endif %}">
  <div class="ProductItem__Wrapper">
    {%- comment -%}
    We are using LazySizes to efficiently choose the most appropriate image in the set. However, because internally LazySizes uses srcset, we need to make
    sure that the image sizes we offer is not larger than the max size uploaded by the merchants.
    {%- endcomment -%}

    {%- if settings.product_image_size == 'natural' or use_horizontal -%}
      {%- assign use_natural_size = true -%}
    {%- else -%}
      {%- assign use_natural_size = false -%}
    {%- endif -%}

    {%- if settings.product_show_secondary_image and product.images[1] != blank and use_horizontal != true -%}
      {%- assign has_alternate_image = true -%}
    {%- else -%}
      {%- assign has_alternate_image = false -%}
    {%- endif -%}

    <a href="{{ product.url | within: collection }}" class="ProductItem__ImageWrapper {% if has_alternate_image %}ProductItem__ImageWrapper--withAlternateImage{% endif %}">
      {%- if use_horizontal -%}
        {%- assign max_width = 125 -%}
      {%- else -%}
        {%- assign max_width = product.featured_image.width -%}
      {%- endif -%}

      <div class="AspectRatio AspectRatio--{% if use_natural_size %}withFallback{% else %}{{ settings.product_image_size }}{% endif %}" style="max-width: {{ max_width }}px; {% if use_natural_size %}padding-bottom: {{ 100.0 | divided_by: product.featured_image.aspect_ratio }}%;{% endif %} --aspect-ratio: {{ product.featured_image.aspect_ratio }}">
        {%- comment -%}
        IMPLEMENTATION NOTE: The alternate image (not visible by default) should be the first in the DOM, as the spinner (Image__Loader element) is
        displayed based on the immediately previously shown image.
        {%- endcomment -%}

        {%- if has_alternate_image -%}
          {%- include 'image-size', sizes: '200,300,400,600,800,900,1000,1200', image: product.images[1] -%}
          {%- assign image_url = product.images[1] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

          <img class="ProductItem__Image ProductItem__Image--alternate Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ product.images[1].alt | escape }}" data-image-id="{{ product.images[1].id }}">
        {%- endif -%}

        {%- include 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: product.featured_image -%}
        {%- assign image_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        <img class="ProductItem__Image Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ product.featured_image.alt | escape }}" data-image-id="{{ product.featured_image.id }}">
        <span class="Image__Loader"></span>

        <noscript>
          <img class="ProductItem__Image ProductItem__Image--alternate" src="{{ product.images[1] | img_url: '600x' }}" alt="{{ product.images[1].alt | escape }}">
          <img class="ProductItem__Image" src="{{ product.featured_image | img_url: '600x' }}" alt="{{ product.featured_image.alt | escape }}">
        </noscript>
      </div>
    </a>

    {%- if show_labels -%}
      {%- capture product_labels -%}
        {%- for tag in product.tags -%}
          {%- if tag contains '__label' -%}
            <span class="ProductItem__Label Heading Text--subdued">{{ tag | split: '__label:' | last }}</span>
            {%- break -%}
          {%- endif -%}
        {%- endfor -%}

        {%- if product.available -%}
          {%- if product.compare_at_price > product.price -%}
            <span class="ProductItem__Label Heading Text--subdued">
              -{{ product.compare_at_price | minus:product.price | times:100 | divided_by: product.compare_at_price }}%
              <!--{{ 'product.labels.on_sale' | t }}-->
            </span>
          {%- endif -%}
        {%- else -%}
          <span class="ProductItem__Label Heading Text--subdued">{{ 'product.labels.sold_out' | t }}</span>
        {%- endif -%}
      {%- endcapture -%}

      {%- if product_labels != blank -%}
        <div class="ProductItem__LabelList">
          <div style="display:inline-block;">{{ product_labels }}</div>
            {%- if product.vendor == 'cl' -%}
                <span style="display:inline-block;width:35px;height:25px;color:#FFD92A;background-color:#fff;text-align:center;position: relative;top: 2px;margin-left:5px;">
                    <i class="iconfont" style="font-size:15px;">&#xe76a;</i>
                </span>
            {%- endif -%}
        </div>
      {%- endif -%}
    {%- endif -%}

    {%- if show_product_info -%}
      <div class="ProductItem__Info {% unless use_horizontal %}ProductItem__Info--{{ settings.product_info_alignment }}{% endunless %}">
        {%- if show_vendor -%}
          <p class="ProductItem__Vendor Heading">{{ product.vendor }}</p>
        {%- endif -%}

        <h2 class="ProductItem__Title Heading _Pc_Display">
          <a href="{{ product.url | within: collection }}" title="{{ product.title }}">
            {% assign titleStr = product.title | remove: "short-sleeved" | remove: "Short-sleeved" | remove: "long-sleeved"| remove: "Long-sleeved" | remove: "Long Sleeve" | remove: "Short Sleeve" | remove: "Short-Sleeve" | remove: "long-sleeve"| remove: "short-sleeve"| remove: "long sleeve"| remove: "short sleeve"| remove: "Long-Sleeve" | remove: "Short sleeve" | remove: "&" %}
            {% assign title = titleStr | split: " " %}
            {% assign title_len = title.size | minus: 4 %}
            {% for word in title limit:4 offset:title_len %}
                {{ word }}
            {% endfor %}
          </a>
        </h2>
        
        <h2 class="ProductItem__Title Heading _Msite_Display">
          <a href="{{ product.url | within: collection }}" title="{{ product.title }}">
            {% assign titleStr = product.title | remove: "short-sleeved" | remove: "Short-sleeved" | remove: "long-sleeved"| remove: "Long-sleeved" | remove: "Long Sleeve" | remove: "Short Sleeve" | remove: "Short-Sleeve" | remove: "long-sleeve"| remove: "short-sleeve"| remove: "long sleeve"| remove: "short sleeve"| remove: "Long-Sleeve" | remove: "Short sleeve" | remove: "&" %}
            {% assign title = titleStr | split: " " %}
            {% assign title_len = title.size | minus: 2 %}
            {% for word in title limit:2 offset:title_len %}
                {{ word }}
            {% endfor %}
          </a>
        </h2>
        <a href="{{ product.url | within: collection }}" title="{{ product.title }}">
            <div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}">
            </div>
        </a>

        {%- if show_color_swatch -%}
          {%- assign color_swatch_list = '' -%}

          {%- capture color_swatch -%}
            {%- assign color_label = 'color,colour,couleur,colore,farbe,靸�,鑹�,f盲rg,farve' | split: ',' -%}
            {%- capture color_name -%}{{ section.id }}-{{ product.id }}-{% increment color_name %}{%- endcapture -%}

            {%- for option in product.options_with_values -%}
              {%- assign downcased_option = option.name | downcase -%}

              {%- if color_label contains downcased_option -%}
                {%- assign variant_option = 'option' | append: forloop.index -%}

                {%- for value in option.values -%}
                  {%- assign downcased_value = value | downcase -%}
                  {%- capture color_id -%}{{ section.id }}-{{ product.id }}-{% increment color_index %}{%- endcapture -%}

                  {%- for variant in product.variants -%}
                    {%- if variant[variant_option] == value -%}
                      {%- assign variant_for_value = variant -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}

                  <div class="ProductItem__ColorSwatchItem">
                    {%- if variant_for_value.image -%}
                      {%- include 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: variant_for_value.image -%}
                      {%- assign variant_image_url = variant_for_value.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                    {%- endif -%}

                    {%- assign color_swatch_name = value | handle | append: '.png' -%}
                    {%- assign color_swatch_image = images[color_swatch_name] -%}

                    <input class="ColorSwatch__Radio" type="radio" name="{{ color_name }}" id="{{ color_id }}" value="{{ value | escape }}" {% if option.selected_value == value %}checked="checked"{% endif %} data-variant-url="{{ variant_for_value.url }}{% if variant_for_value.image %}#Image{{ variant_for_value.image.id }}{% endif %}" {% if variant_for_value.image %}data-image-id="{{ variant_for_value.image.id }}" data-image-url="{{ variant_image_url }}" data-image-widths="[{{ supported_sizes }}]" data-image-aspect-ratio="{{ variant_for_value.image.aspect_ratio }}"{% endif %} aria-hidden="true">
                    <label class="ColorSwatch ColorSwatch--small" for="{{ color_id }}" style="background-color: {{ value | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}" title="{{ value | escape }}" data-tooltip="{{ value | escape }}"></label>
                  </div>
                {%- endfor -%}
              {%- endif -%}
            {%- endfor -%}
          {%- endcapture -%}

          {%- if color_swatch != blank -%}
            {%- capture color_swatch_list -%}
              <div class="ProductItem__ColorSwatchList">
                {{- color_swatch -}}
              </div>
            {%- endcapture -%}
          {%- endif -%}
        {%- endif -%}

        {%- if show_price_on_hover == nil -%}
          {%- assign show_price_on_hover = settings.product_show_price_on_hover -%}
        {%- endif -%}

        {%- if show_price_on_hover and color_swatch_list != blank -%}
          {{- color_swatch_list -}}
        {%- endif -%}

        {%- if product.template_suffix != 'coming-soon' -%}
          <div class="ProductItem__PriceList {% if show_price_on_hover %}ProductItem__PriceList--showOnHover{% endif %} Heading">
            
            {%- if product.compare_at_price > product.price -%}
              {%- if product.vendor == 'cl' -%}
                <span class="ProductItem__Price Price Price--highlight Text--subdued" data-money-convertible>{{ product.price | money_without_trailing_zeros }}</span>
                <span class="ProductItem__Price Price Price--compareAt Text--subdued" data-money-convertible>{{ product.compare_at_price | money_without_trailing_zeros }}</span>
              {%- else -%}  
                <span class="ProductItem__Price Price Price--highlight Text--subdued" data-money-convertible>{{ product.price | money_without_trailing_zeros }}</span>
              {%- endif -%}
              
            {%- elsif product.price_varies -%}
              {%- capture formatted_min_price -%}<span data-money-convertible>{{ product.price_min | money_without_trailing_zeros }}</span>{%- endcapture -%}
              {%- capture formatted_max_price -%}<span data-money-convertible>{{ product.price_max | money_without_trailing_zeros }}</span>{%- endcapture -%}
              <span class="ProductItem__Price Price Text--subdued">{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}</span>
            {%- else -%}
              <span class="ProductItem__Priceproduct.vendor Price Text--subdued" data-money-convertible>{{ product.price | money_without_trailing_zeros }}</span>
            {%- endif -%}
          </div>
        {%- endif -%}

        {%- if show_price_on_hover == false and color_swatch_list != blank -%}
          {{- color_swatch_list -}}
        {%- endif -%}
      </div>
    {%- endif -%}
  </div>

  {%- if use_horizontal -%}
    <a href="{{ associated_product.url }}" class="ProductItem__ViewButton Button Button--secondary hidden-pocket">{{ 'collection.product.view_product' | t }}</a>
  {%- endif -%}
</div>

3.更改样式：请将以下代码复制粘贴至 theme.scss.liquid 最底部，可将上次Early Bird添加的样式删除。

/* --------- Low Price-------*/

/* --------- Low Price-------*/
@font-face {
  font-family: 'iconfont';  /* project id 384296 */
  src: url('//at.alicdn.com/t/font_384296_449212l721.eot');
  src: url('//at.alicdn.com/t/font_384296_449212l721.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_384296_449212l721.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_384296_449212l721.woff') format('woff'),
  url('//at.alicdn.com/t/font_384296_449212l721.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_384296_449212l721.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
.Product_Low_Price{
  margin-top:10px;
  letter-spacing: 1.5px;
  color:#222;
  font-size:15px;
}
.Product_Low_Price i{
   color:#FFD92A;
  display:inline-block;
  font-size: 12px;
}
.Product_Low_Price ._red{
  color:#e64545;
  margin-top:20px;
  display:inline-block;
}
.ProductItem__Label{
    display:inline-block;
}
.ProductMeta__Price.Price--highlight{
    margin-left:0;
  font-size:18px;
}
.ProductMeta__Price.Price--compareAt{
  margin-left: 0;
  font-size:15px;
}

操作中遇到困难请联系技术部同事。
有任何意见建议请联系技术部同事。
😊