shopify商品列表如何显示折扣信息,LOGO高光，button抖动

1 如何显示折扣信息,找到snippet文件下的product-card-grid.liquid文件 在12行写入以下代码

{% if product.compare_at_price_max > product.price %}
   	<span style="position:absolute;top:0;right:0;background:#FF0000;display:block;padding:2px 5px;z-index:999;color:#FFFFFF;font-size:12px;"><em>-
   {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
    </em></span>
{% endif %}

2高光滑动效果代码如下,直接复制代码黏贴到asset文件下的 theme.scss.liquid文件下 放在最后即可：可以用在网站LOGO等等

.site-header__logo-image {
   position: relative;
   float: left;
   overflow: hidden;
   transition-duration: 5s;
 }

 .site-header__logo-image:before {
   content: "";
   position: absolute;
   width: 1000px;
   height: 20px; 
   background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent);
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-animation: searchLights 1s ease-in 1s infinite;
   -o-animation: searchLights 1s ease-in 1s infinite;
   animation: searchLights 1s ease-in 1s infinite; 
 }

 @keyframes searchLights {
   0% {
     left: -200px;
     top: -300px;
   }
   100% {
     left: -160px;
     top: 800px;
   }
 }

3 购买按钮抖动效果代码如下:直接复制代码黏贴到asset文件下的 theme.scss.liquid文件下 放在最后即可

.shopify-payment-button{animation:move 5s 0s infinite;-webkit-animation:move 3s 0s infinite;transform-origin:bottom;-webkit-transform-origin:bottom;}

@keyframes move
{
0%, 65%{ 
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}
70% {  
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
75% {  
  -webkit-transform:rotate(-1deg);
  transform:rotate(-1deg);
}
80% {  
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
85% {  
  -webkit-transform:rotate(-1deg);
  transform:rotate(-1deg);
}
90% {  
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
95% {  
  -webkit-transform:rotate(-1deg);
  transform:rotate(-1deg);
}
100% {  
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}
}

@-webkit-keyframes move
{
0%, 65%{ 
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}
70% {  
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
75% {  
  -webkit-transform:rotate(-1deg);
  transform:rotate(-1deg);
}
80% {  
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
85% {  
  -webkit-transform:rotate(-1deg);
  transform:rotate(-1deg);
}
90% {  
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
95% {  
  -webkit-transform:rotate(-1deg);
  transform:rotate(-1deg);
}
100% {  
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}
}