Skip to main content

​
简介

在 checkout 按钮上添加锁形图标是一种简单而有效的方式，可以通过表明支付信息是安全的来增强客户信心。这个人们熟悉的符号能让客户对数据保护感到放心，使他们在 checkout 过程中更加安心。在本教程中，我将指导你如何使用 CSS 为 checkout 按钮添加锁形图标，从而增强安全感并改善整体用户体验。 这些步骤非常适合对 CSS 有基本了解的店主或开发者。通过添加这个小而有影响力的视觉提示，你可以让 Upcart checkout 按钮与网站设计保持一致，帮助建立信任并鼓励客户完成购买。 让我们开始吧！

​
开始：选择一个锁形图标

首先，你需要选择一个要添加到商店的锁形图标。我们在下方提供了一些可供使用的图标，但你也可以使用自己的图标。要使用自己的图标，请在 Settings > Files 下将其上传到 Shopify 商店的 Files 区域，并复制其 URL。 Upcart 中没有针对 checkout 按钮的图标字段。你需要将一个 HTML 图片标签粘贴到 Checkout button text 字段中（该字段会渲染 HTML）— 取用下方的任一代码片段，并将其 src 替换为你自己的 URL。

​
以下是我们提供的可选锁形图标：

要添加的 HTML： 深色按钮上 Checkout 文字旁的白色实心挂锁图标
要添加的 HTML： 深色按钮上 Checkout 文字旁的白色轮廓挂锁图标
要添加的 HTML： 深色按钮上 Checkout 旁带锁孔的白色轮廓挂锁
要添加的 HTML： 浅蓝色按钮上 Checkout 文字旁的黑色实心挂锁图标
要添加的 HTML： 浅蓝色按钮上 Checkout 旁带锁孔的黑色挂锁

​
放置锁形图标：

选好锁形图标后，前往 Manage All Carts > Edit > Settings > Edit copy，找到 Checkout button text 字段。你可以将其粘贴在”Checkout”一词之前或之后。此外，你还可以在这里将”Checkout”改为其他文字，例如”Secure Checkout”或类似内容。 在 Upcart 中编辑 checkout 按钮文案以放置锁形图标

​
访问自定义 CSS 设置

要开始自定义 Upcart 的 CSS，请按以下步骤操作：
  1. 在后台中打开 Upcart 应用。
  2. 前往 Cart Editor。
  3. 打开 Settings 并选择 Custom CSS 标签页。Settings 是一行标签页而不是一个长页面 — 如果你没有看到 Custom CSS，它位于 More settings 之后。

​
应用自定义 CSS 以显示锁形图标：

进入 Custom CSS 区域后，复制并粘贴以下代码来显示和放置锁形图标。请注意，padding 数值越大，图标就越小。
  1. 找到 CSS 输入区域。
  2. 将以下代码复制并粘贴到 CSS 输入区域：
  3. 调整 .upcart-custom-lock-icon 下的 height 以改变图标大小。若想要更大的锁形图标，建议使用 16px 或 20px

​
结语

按照这些步骤操作后，你已成功为 checkout 按钮添加了锁形图标，让客户在购买过程中感到更安全、更有信心。这个小小的改动可以显著改善你商店给人的印象，帮助建立信任并提升整体购物体验。

​
仍需帮助？

如果你在定制方面需要任何协助，我们建议就在购物车抽屉中添加 HTML、CSS 甚至 JavaScript 的问题咨询 Shopify 专家。 查看 Shopify 专家