自定义结账页面上的支付卡图标
默认情况下，结账页面将显示已绑定到您商店的支付渠道的卡图标。本文将指导您通过几个简单的步骤手动添加或删除所需的支付卡图标。
ShopBase后台前往 线上店铺（Online store） > 偏好（Preferences）。
在 Additional script > Body部分中，将以下脚本粘贴到框中：
上面的脚本将在现有的American Express和Discover图标之间添加一个PayPal支付图标。
您可以在这些行中添加并替换以下值以自定义支付卡图标及其位置：
'delete', ：在相应位置隐藏图标。
'skip', ：在相应位置保持原图标。
要添加新的支付卡图标，请添加新行并在 ' 和 ', 之间插入您要使用的支付卡图标的链接。
请参考以下支付卡图标的链接列表：
PayPal
Visa
Mastercard
Discover
American Express
Union Pay
JCB
Maestro
添加Power Up脚本以优化您的商店
将倒计时器和可靠信息添加到结账页面
指南
ShopBase后台前往 线上店铺（Online store） > 偏好（Preferences）。
在 Additional script > Body部分中，将以下脚本粘贴到框中：
<script>
var imagesCustom = [
'skip',
'skip',
'skip',
'https://img.btdmp.com/themes/3/assets/paypal.png',
'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="24" viewBox="0 0 32 24" aria-labelledby="icon_discover-con" role="presentation"><title id="icon_discover-con" lang="en">icon_discover-con icon</title><g fill="currentColor"><g><path d="M32.3181818,11.8637647 L32.3181818,2.11764706 C32.3181818,0.948 31.3746314,0 30.2104743,0 L2.10770751,0 C0.943550395,0 0,0.948 0,2.11764706 L0,21.8823529 C0,23.052 0.943550395,24 2.10770751,24 L9.54721245,24 C20.5353943,22.4548235 29.5100128,16.3016471 32.3181818,11.8637647 Z" id="Path" fill="#444444"></path><path d="M32.3181818,21.8823529 L32.3181818,11.8637647 C29.5100128,16.3016471 20.5353943,22.4548235 9.54721245,24 L30.2104743,24 C31.3746314,24 32.3181818,23.052 32.3181818,21.8823529 Z" id="Path" fill="#E6E6E6"></path><path d="M32.3181818,21.8823529 L32.3181818,11.8637647 C29.5100128,16.3016471 20.5353943,22.4548235 9.54721245,24 L30.2104743,24 C31.3746314,24 32.3181818,23.052 32.3181818,21.8823529 Z" id="Path" fill="#FA7000"></path><path d="M16.8820346,9.89152941 C15.6946927,9.89152941 14.7307678,10.8232941 14.7307678,11.9745882 C14.7307678,13.1985882 15.6525385,14.112 16.8820346,14.112 C18.0820227,14.112 19.0276808,13.1851765 19.0276808,11.9978824 C19.0283834,10.8176471 18.0890484,9.89152941 16.8820346,9.89152941 Z" id="Path" fill="#FA7000"></path><path d="M4.6692747,9.96776471 C5.94514032,9.96776471 6.83459289,10.7985882 6.83529545,11.9957647 C6.83529545,12.5936471 6.56199605,13.1710588 6.10251581,13.5529412 C5.7154002,13.8755294 5.27418676,14.0216471 4.66224901,14.0216471 L3.51284585,14.0216471 L3.51284585,9.96776471 L4.6692747,9.96776471 Z M5.58964032,13.0122353 C5.86083202,12.7701176 6.02312549,12.3804706 6.02382806,11.9901176 C6.02382806,11.6011765 5.86083202,11.2249412 5.59034289,10.9814118 C5.32758202,10.7456471 5.02126186,10.6538824 4.51189921,10.6538824 L4.30042589,10.6538824 L4.30042589,13.3348235 L4.51119664,13.3348235 C5.02055929,13.3348235 5.33952569,13.2367059 5.58964032,13.0122353 Z M7.19782115,9.96776471 L7.98188834,9.96776471 L7.98188834,14.0216471 L7.19782115,14.0216471 L7.19782115,9.96776471 Z M9.90763043,11.5214118 C10.8034061,11.8503529 11.0703824,12.1425882 11.0696798,12.7877647 C11.0696798,13.5705882 10.4942757,14.1197647 9.67718775,14.1197647 C9.07789625,14.1197647 8.64300593,13.8811765 8.28048024,13.3475294 L8.78773518,12.8534118 C8.96899802,13.2070588 9.27180534,13.3955294 9.6462747,13.3955294 C9.99826186,13.3955294 10.2582125,13.1527059 10.2582125,12.8230588 C10.2582125,12.6536471 10.1802273,12.5075294 10.0228518,12.4051765 C9.94275889,12.3550588 9.78608597,12.2816471 9.4776581,12.1736471 C8.73925791,11.904 8.486333,11.6195294 8.486333,11.0590588 C8.486333,10.3990588 9.03082411,9.9 9.74463439,9.9 C10.1858478,9.9 10.5912302,10.0510588 10.929166,10.3503529 L10.5195682,10.8896471 C10.3130128,10.6581176 10.1184012,10.5635294 9.88304051,10.5635294 C9.54299704,10.5635294 9.29569269,10.7569412 9.29569269,11.0117647 C9.29569269,11.2305882 9.43409881,11.3470588 9.90763043,11.5214118 Z M11.3169842,11.9957647 C11.3169842,10.8176471 12.2717757,9.876 13.4626304,9.876 C13.8033765,9.876 14.0865119,9.94870588 14.4314733,10.1237647 L14.4314733,11.0541176 C14.1047787,10.7308235 13.8195356,10.5981176 13.4464713,10.5981176 C12.7073686,10.5981176 12.127749,11.2136471 12.127749,11.9901176 C12.127749,12.8117647 12.6891018,13.3877647 13.4815998,13.3877647 C13.8399101,13.3877647 14.1167223,13.2621176 14.4321759,12.9437647 L14.4321759,13.8755294 C14.0752708,14.0449412 13.7851097,14.112 13.4471739,14.112 C12.2485909,14.112 11.3169842,13.188 11.3169842,11.9957647 Z M20.8079911,12.6896471 L21.899081,9.96776471 L22.7505949,9.96776471 L21.0068182,14.124 L20.5845741,14.124 L18.8738182,9.96776471 L19.7323577,9.96776471 L20.8079911,12.6896471 Z M23.1075,14.0216471 L23.1075,9.96776471 L25.3388597,9.96776471 L25.3388597,10.6538824 L23.89508,10.6538824 L23.89508,11.5538824 L25.2840593,11.5538824 L25.2840593,12.2407059 L23.89508,12.2407059 L23.89508,13.3348235 L25.3388597,13.3348235 L25.3388597,14.0216471 L23.1075,14.0216471 Z M28.4540514,11.1635294 C28.4540514,11.784 28.1287619,12.1912941 27.5357935,12.312 L28.805336,14.0209412 L27.8364931,14.0209412 L26.7496186,12.3910588 L26.6470435,12.3910588 L26.6470435,14.0209412 L25.8580583,14.0209412 L25.8580583,9.96705882 L27.0271334,9.96705882 C27.9355553,9.96705882 28.4540514,10.404 28.4540514,11.1635294 Z M26.876081,11.832 C27.3805257,11.832 27.6439891,11.6131765 27.6439891,11.208 C27.6439891,10.8134118 27.3805257,10.6058824 26.8887273,10.6058824 L26.647746,10.6058824 L26.647746,11.832 L26.876081,11.832 Z" id="Combined-Shape" fill="#FFFFFF"></path></g></g></svg>'
];
window.sbsdk.ready(function() {
window.sbsdk.page.onContextUpdate(function(context) {
if (context.type === 'checkout' || context.type === 'process_checkout') {
var count = 0;
var readyCheckInterval = setInterval(function() {
var elementsImage = document.querySelector('.main__content .section__content .payment-icon-list:first-child')
var rootElementsImage = document.querySelectorAll('.main__content .section__content .payment-icon-list:first-child div')
if (typeof elementsImage !== 'undefined' && typeof rootElementsImage !== 'undefined') {
elementsImage = elementsImage.querySelectorAll('.payment-icon')
for (keyImageCustom in imagesCustom){
if (imagesCustom[keyImageCustom] === 'skip') {
continue;
}
if (imagesCustom[keyImageCustom]) {
if (elementsImage[keyImageCustom]) {
if(imagesCustom[keyImageCustom].startsWith('http'))
elementsImage[keyImageCustom].innerHTML = `<img style="margin-top: 6px; width: 32px; height: 24px" src='${imagesCustom[keyImageCustom]}'/>`
else
elementsImage[keyImageCustom].innerHTML = imagesCustom[keyImageCustom]
} else {
if(imagesCustom[keyImageCustom].startsWith('http'))
rootElementsImage[0].insertAdjacentHTML('beforeend', `<span class="payment-icon"><img style="margin-top: 6px; width: 32px; height: 24px" src='${imagesCustom[keyImageCustom]}'/></span>`);
else
rootElementsImage[0].insertAdjacentHTML('beforeend', `<span class="payment-icon">${imagesCustom[keyImageCustom]}</span>`);
}
}
if (imagesCustom[keyImageCustom] === 'delete' && elementsImage[keyImageCustom]) {
elementsImage[keyImageCustom].innerHTML = ''
}
}
clearInterval(readyCheckInterval);
}
if (count > 8) {
clearInterval(readyCheckInterval);
}
count++;
}, 500);
}
});
});
</script>上面的脚本将在现有的American Express和Discover图标之间添加一个PayPal支付图标。
您可以在这些行中添加并替换以下值以自定义支付卡图标及其位置：
'delete', ：在相应位置隐藏图标。
'skip', ：在相应位置保持原图标。
要添加新的支付卡图标，请添加新行并在 ' 和 ', 之间插入您要使用的支付卡图标的链接。
请参考以下支付卡图标的链接列表：
PayPal
Visa
Mastercard
Discover
American Express
Union Pay
JCB
Maestro
关联页面
添加Power Up脚本以优化您的商店
将倒计时器和可靠信息添加到结账页面
更新于： 09/12/2022
谢谢！