Shopify页面设计之支付图标

2020年5月15日 15:00:30    来源:喜运达

昨天在群上看到有小伙伴在问如何在页尾追加支付信任图标,刚好在前阵子做过相关的优化,这里拿出来和大家分享一下。

先检查一下Theme中的Footer Section是否自带Show payment icons选项,如果有则直接勾起,不用再往下看了。

还是看看吧~接下来小学徒讲解如何根据自(ye)己(wu)的(yuan)需求显示特定的支付图标。

效果像这样的,方便业务运营们自己设置~

先了解一下可供选择的支付选项:

american_express,apple_pay,bitcoin,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,google_pay,jcb,klarna,klarna-pay-later,litecoin,maestro,master,paypal,shopify_pay,sofort,visa

进入Edit code模式

打开Sections目录下的footer.liquid文件。

在选定位置加入以下代码

class="payment-wrapper">

class="payment-list">

{% assign enabled_payment_types = section.settings.payment_way | remove: ' ' | split: ',' %}

{% for type in enabled_payment_types %}

class="payment-icon">

{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}

{% endfor %}

找到 {% schema %},在其上方追加以下样式代码

<style type="text/css">

.payment-wrapper{display: inline-block;float: right;}

.payment-list{display:flex; flex-wrap:wrap;justify-content:center;}

.payment-list .payment-icon > svg{width:55px;}

</style>

接下来在footer.liquid页尾的

{% schema %}

{

"settings": [

    {

        "type":"...",

        "*****":"..."

    },

    ...

    {

        "type":"...",

        "*****":"..."

    }

]

}

{% endschema %}

在[ ]中追加以下代码

{

"type": "text",

"id": "payment_way",

"label": "Payment way",

"default": "american_express,apple_pay,paypal,visa,master,shopify_pay",

"info":"The values that you can use are listed below: american_express,apple_pay,bitcoin,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,google_pay,jcb,klarna,klarna-pay-later,litecoin,maestro,master,paypal,shopify_pay,sofort,visa"

},

保存,完毕。

后台显示效果下

选择相应的支付方式并于英文逗号隔开填入文本框中保存即可。

来源:喜运达

加入卖家交流群
快速对接各种平台优质资源

标签:A+物流计划青岛的仓库泰国海运几天到东莞市沙田货运出口越南物流公司哪个便宜安隆国际物流有限公司玫琳凯上海出口海运国际期货开户美原油什么快递马来西亚

公众号

关注公众号

快速获取
最新行业资讯动态

加入社群

加入卖家交流群

快速对接
各种平台优质资源

产品服务

  • 喜运达专线物流
  • 喜运达海外仓
  • 喜运达拉丁美洲空运小包