【Shopify】清仓产品样式调整

功能展示：

详情页调整

列表页调整

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

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

  
  {%- if section.settings.show_vendor and product.vendor != blank -%}
    

      {%- assign vendor_handle = product.vendor | handle -%}
      {%- assign collection_for_vendor = collections[vendor_handle] -%}

      {%- unless collection_for_vendor.empty? -%}
        {{ product.vendor }}
      {%- else -%}
        {{- product.vendor -}}
      {%- endunless -%}
    
  {%- endif -%}

  

    {%- if template.name == 'product' -%}
      {{- product.title -}}
    {%- else -%}
      {{ product.title }}
    {%- endif -%}
  

  {%- if section.settings.show_sku and product.selected_or_first_available_variant.sku != blank -%}
    
{{ 'product.form.sku' | t }}: {{ product.selected_or_first_available_variant.sku }}
  {%- endif -%}

  {%- if product.template_suffix != 'coming-soon' -%}
    

      
      {%- if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
        {%- if product.vendor == 'cl' -%}
            {{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
            {{ product.selected_or_first_available_variant.compare_at_price | money_without_trailing_zeros }}
            {{ product.compare_at_price | minus:product.price | times:100 | divided_by: product.compare_at_price }}% OFF
      {%- else -%}  
            {{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
        {%- endif -%}
      {%- else -%}
        {{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
      {%- endif -%}
    
  {%- endif -%}
    {%- if product.vendor == 'cl' -%}
  
    

      

        
        Clearance And Other Discounts Cannot Be Used Together And Clearance Items Are Not Allowed To Be Returned Or Exchanged.
      
    
    {%- endif -%}

  {%- if show_description and section.settings.description_below_add_to_cart == false -%}
    

      

        {{ product.description }}
      

      {%- if section.settings.show_share_buttons -%}
        

          {{ 'product.form.share' | t }}

          {%- 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:' -%}

          

            {%- include 'icon' with 'facebook' -%}
            {%- include 'icon' with 'twitter' -%}
            {%- include 'icon' with 'pinterest' -%}
          
        
      {%- endif -%}
    
  {%- endif -%}

  

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

  

    {%- 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 -%}

    
      {%- if use_horizontal -%}
        {%- assign max_width = 125 -%}
      {%- else -%}
        {%- assign max_width = product.featured_image.width -%}
      {%- endif -%}

      

        {%- 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.' -%}

          
        {%- 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.' -%}

        
        

        
      
    

    {%- if show_labels -%}
      {%- capture product_labels -%}
        {%- for tag in product.tags -%}
          {%- if tag contains '__label' -%}
            {{ tag | split: '__label:' | last }}
            {%- break -%}
          {%- endif -%}
        {%- endfor -%}

        {%- if product.available -%}
          {%- if product.compare_at_price > product.price -%}
            
              -{{ product.compare_at_price | minus:product.price | times:100 | divided_by: product.compare_at_price }}%
              
            
          {%- endif -%}
        {%- else -%}
          {{ 'product.labels.sold_out' | t }}
        {%- endif -%}
      {%- endcapture -%}

      {%- if product_labels != blank -%}
        

          
{{ product_labels }}
            {%- if product.vendor == 'cl' -%}
                
                    
                
            {%- endif -%}
        
      {%- endif -%}
    {%- endif -%}

    {%- if show_product_info -%}
      

        {%- if show_vendor -%}
          
{{ product.vendor }}
        {%- endif -%}

        

          
            {% 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 %}
          
        
        
        

          
            {% 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 %}
          
        
        
            

            
        

        {%- 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 -%}

                  

                    {%- 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] -%}

                    
                    
                  
                {%- endfor -%}
              {%- endif -%}
            {%- endfor -%}
          {%- endcapture -%}

          {%- if color_swatch != blank -%}
            {%- capture color_swatch_list -%}
              

                {{- color_swatch -}}
              
            {%- 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' -%}
          

            
            {%- if product.compare_at_price > product.price -%}
              {%- if product.vendor == 'cl' -%}
                {{ product.price | money_without_trailing_zeros }}
                {{ product.compare_at_price | money_without_trailing_zeros }}
              {%- else -%}  
                {{ product.price | money_without_trailing_zeros }}
              {%- endif -%}
              
            {%- elsif product.price_varies -%}
              {%- capture formatted_min_price -%}{{ product.price_min | money_without_trailing_zeros }}{%- endcapture -%}
              {%- capture formatted_max_price -%}{{ product.price_max | money_without_trailing_zeros }}{%- endcapture -%}
              {{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}
            {%- else -%}
              {{ product.price | money_without_trailing_zeros }}
            {%- endif -%}
          
        {%- endif -%}

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

  {%- if use_horizontal -%}
    {{ 'collection.product.view_product' | t }}
  {%- endif -%}

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;
}

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