shopify支付Logo修改

本章节为shopify网站底部支付logo修改的说明文档

视频操作流程介绍

1. shopify后台打开[Online Store]-[Themes]-[Edit code]


2. 左菜单栏找到[Assets]并打开[theme.js]或[theme.js.liquid]文件
(若找不到文件,请联系Oceanpayment技术支持)


3. 将以下代码全部复制,粘贴到theme.js或theme.js.liquid文件第一行中,并保存

(function ($, window, undefined) {
  window.jQuery || document.write(
    "<script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js'>"+ "<" + "/script>");
  let _imgList = [
    'https://www.oceanpayment.com/shopify_app/oceanpayment_logo/VISA.png',
    'https://www.oceanpayment.com/shopify_app/oceanpayment_logo/Master.png',
    'https://www.oceanpayment.com/shopify_app/oceanpayment_logo/Maestro.png',
    'https://www.oceanpayment.com/shopify_app/oceanpayment_logo/JCB.png',
    'https://www.oceanpayment.com/shopify_app/oceanpayment_logo/AE.png',
    'https://www.oceanpayment.com/shopify_app/oceanpayment_logo/Diners.png',
    'https://www.oceanpayment.com/shopify_app/oceanpayment_logo/Discover.png',    
    'https://www.oceanpayment.com/shopify_app/oceanpayment_logo/Paypal.png'
  ];
  let _html = "";
  let _li = $('#shopify-section-footer').find('svg').eq(0).parents('ul');
  $.each(_imgList,function (index,item) {
    _html += `<img style="display: inline-block;margin: 0 3px" alt="" src="${item}" width="32"/>`
  });
  console.log(_html);
  _li.html(`<div style="float:right;">${_html}</div>`);
})($, window, undefined);

4. 打开网站首页,查看底部效果图

1)若添加成功,则网站底部会显示以下支付logo

2)若添加失败,检查logo开关是否开启,手动开启方法:

2.1 打开页面编辑:[Themes]- [Customize]

2.2 左侧菜单栏打开:Footer

2.3 勾选Show payment icons,保存成功