如何在 OpenCart 3.X 页脚中插入支付 Logo？

2026-10-24支付老李

结论

在 OpenCart 3.X 中，可以先将支付 Logo 上传到当前主题的图片目录，然后编辑页脚模板 footer.twig，通过 <img> 标签显示图片，并在主题样式表中设置尺寸和排列方式。完成修改后，需要刷新主题缓存。如果使用了 OCMOD 或第三方主题，也要清除相应的缓存。

操作步骤

1. 上传支付 Logo

可以为支付 Logo 单独创建一个目录，例如：

catalog/view/theme/your_theme/image/payment/

然后将图片上传到该目录：

visa.svg
mastercard.svg
paypal.svg

请将 your_theme 替换为商店当前使用的主题目录名，例如 default。

图片可以使用 SVG、PNG 或 WebP 格式。最好保持相近的尺寸比例，以免各个 Logo 显示时高低不一。

2. 修改页脚模板

打开当前主题的页脚模板：

catalog/view/theme/your_theme/template/common/footer.twig

在 </footer> 结束标签之前添加：

<div class="payment-logos" aria-label="Supported payment methods">
  <img
    src="catalog/view/theme/your_theme/image/payment/visa.svg"
    alt="Visa"
    loading="lazy"
  >
  <img
    src="catalog/view/theme/your_theme/image/payment/mastercard.svg"
    alt="Mastercard"
    loading="lazy"
  >
  <img
    src="catalog/view/theme/your_theme/image/payment/paypal.svg"
    alt="PayPal"
    loading="lazy"
  >
</div>

OpenCart 的默认页面通常带有 <base> 标签，所以上面的相对路径一般能够正确指向商店根目录。如果当前主题删除了 <base> 标签，或者商店安装在子目录中，建议改用控制器生成的完整 URL。

3. 添加显示样式

打开主题样式表，文件通常位于：

catalog/view/theme/your_theme/stylesheet/stylesheet.css

添加以下样式：

.payment-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.payment-logos img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 80px;
  object-fit: contain;
}

默认情况下，Logo 会居中显示。如果需要左对齐，将：

justify-content: center;

改为：

justify-content: flex-start;

使用完整图片 URL

如果相对路径在当前环境中无法正常加载，可以打开：

catalog/controller/common/footer.php

加入：

if (!empty($this->request->server['HTTPS'])) {
    $server = $this->config->get('config_ssl');
} else {
    $server = $this->config->get('config_url');
}

$data['payment_logo_url'] = $server . 'catalog/view/theme/your_theme/image/payment/';

然后在 footer.twig 中这样引用图片：

<div class="payment-logos" aria-label="Supported payment methods">
  <img src="{{ payment_logo_url }}visa.svg" alt="Visa" loading="lazy">
  <img src="{{ payment_logo_url }}mastercard.svg" alt="Mastercard" loading="lazy">
  <img src="{{ payment_logo_url }}paypal.svg" alt="PayPal" loading="lazy">
</div>

对于启用了 HTTPS、安装在子目录中或采用多商店配置的站点，这种写法通常更合适。

修改后刷新缓存

保存文件后，按以下顺序检查缓存：

进入 OpenCart 后台的“扩展功能 → 扩展安装”，刷新修改缓存。
在后台首页打开开发者设置，刷新 Theme Cache。
清除浏览器缓存，或使用无痕窗口重新访问页面。
如果使用 Journal、Fastor 等第三方主题，还需要清除主题自身的缓存。

常见问题

Logo 显示为破图

通常是图片路径或文件名有误。Linux 服务器区分文件名大小写，例如：

Visa.svg

和：

visa.svg

会被当作两个不同的文件。

修改 `footer.twig` 后没有变化

先确认修改的是商店当前使用的主题，而不是 default 主题中的同名文件。确认后刷新 Theme Cache 和 OCMOD 缓存。部分第三方主题有自己的页脚构建器，直接修改标准的 footer.twig 可能不会生效。

HTTPS 页面出现混合内容警告

不要在代码中写死以 http:// 开头的图片地址。可以优先使用相对路径，也可以根据 config_ssl 生成完整地址。

后续升级会覆盖修改

直接编辑主题文件后，改动可能在主题升级时被覆盖。正式站点应先备份相关文件，也可以将改动制作成 OCMOD 扩展。页面上只应显示商店实际支持的支付方式，以免顾客误以为可以使用尚未开通的付款渠道。