这期视频通过视频和文章来详细说明如何通过代码手动替换payment icon，可以解决shopify payment icon失效问题。
特别注意：payment icon不显示通常有2个原因
1.很多新手刚做shopify，发现底下只有paypal的支付图标没有信用卡支付图标，是因为你需要开通信用卡收款通道才能显示信用卡图标。论信用卡收款对转化率有什么影响？
2.代码故障，模板问题导致的代码故障，可以用下面的方式修复图标不显示问题。
1.首先进入shopify模板的代码编辑页面
2.在代码页面搜索footer，找到footer_content文件夹，找到“原代码”修改成“修改后的代码”
原代码
{%- when 'payments' -%}
{%- assign arr = bk_stts.svg | remove: ' ' | split: "," -%}
<div class="t4s-payment-footer-svg t4s-pr t4s-hidden-mobile-{{ bk_stts.hidden_mobile }}" style="--height:{{ bk_stts.height }}px;--mgb:{{ bk_stts.mgb }}px;--mgb-mb:{{ mgb.mgb_mb }}px;">
{%- for img in arr -%}
{%- if img contains 'cust4__' -%}
{%- assign getIMG = img | remove_first: "cust4__" -%}
{%- assign image = images[getIMG] -%}
{%- if image == blank %}{% continue %}{% endif -%}
<img class="lazyloadt4s" src="https://cdn.shopify.com/s/assets/payment_icons/generic-dfdcaf09b6731ca14dd7441354c0ad8bc934184eb15ae1fda6a6b9e307675485.svg" data-src="{{ image | image_url: width: 100 }}" alt="{{ image.alt | escape }}" />
{%- else -%}
<img class="lazyloadt4s" src="https://cdn.shopify.com/s/assets/payment_icons/generic-dfdcaf09b6731ca14dd7441354c0ad8bc934184eb15ae1fda6a6b9e307675485.svg" data-src="{{ img | payment_type_img_url }}" alt="{{ img | replace: '_', ' ' }}" />
{%- endif -%}
{%- endfor -%}
</div>修改后的代码
{%- when 'payments' -%}
{%- unless shop.enabled_payment_types == empty -%}
<span class="visuallyhidden">Supported payment methods</span>
<ul class="payment-list"> <!-- 关键修改 -->
{% assign enabled_payment_types = 'shopify_pay,paypal,visa,master,american_express,diners_club,discover,jcb,unionpay,maestro,apple_pay,google_pay,metapay,klarna' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
</div>3.加入下面的css code在footer_liquid文件的最顶部
<style>
.payment-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0;
margin: 1.2rem 0;
list-style: none;
}
.t4s-footer-content .icon {
width: 1.8em; /* 尺寸缩小 */
height: auto;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12)); /* 新增阴影 */
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.96;
}
/* 悬停动效 */
.t4s-footer-content .icon:hover {
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.16));
transform: translateY(-1px);
opacity: 1;
}
/* 移动端适配 */
@media (max-width: 640px) {
.payment-list {
gap: 0.6rem;
}
.t4s-footer-content .icon {
width: clamp(1.6em, 8vw, 2.8em);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
}
</style>4.产品页面底部的icon失效 请加入custom liquid板块加入下面代码
<ul class="payment-list"> <!-- 关键修改 -->
{% assign enabled_payment_types = 'shopify_pay,paypal,visa,master,american_express,diners_club,discover,jcb,unionpay,maestro,apple_pay,google_pay,metapay' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
{%- endfor -%}