BigCommerce Parts Warehouse主题移动端产品图无法点击CSS修复咨询

开发者阿泽

2026-10-4

问题解答

1. 提到的CSS规则是否为问题原因？

该规则不是移动端图片无法点击的直接原因，属于BigCommerce Parts Warehouse v2.3.0主题的默认布局逻辑：

主题默认在移动端隐藏image-link.mobile类的链接元素，复用image-link.desktop类的链接渲染产品图片
即使解除该隐藏规则，image-link.mobile类链接本身的href属性为#0，也无法跳转到正确的产品落地页
实际导致移动端图片无法点击的原因是主题默认在移动端给image-link.desktop元素添加了pointer-events: none属性或点击事件拦截，导致链接失效。

2. 问题是否可修复？

完全可修复，不需要修改原有HTML代码，仅需要在BigCommerce后台添加自定义CSS和JS即可生效。

3. 从其他元素获取跳转链接的实现方案

纯CSS无法修改元素链接属性或绑定点击事件，需要配合少量JS获取同卡片内产品标题的跳转地址同步给图片链接，完整实现代码如下：

自定义CSS（解除图片链接点击限制）

/* 可根据主题实际移动端断点调整max-width数值 */
@media only screen and (max-width: 767px) {
  #body .image-link.desktop {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

自定义JS（同步正确产品链接）

document.addEventListener('DOMContentLoaded', function() {
  // 仅移动端生效
  if (window.innerWidth < 768) {
    // 遍历所有产品卡片
    document.querySelectorAll('.card').forEach(card => {
      // 从产品标题获取正确跳转链接
      const productUrl = card.querySelector('.card-title a')?.href;
      if (productUrl) {
        // 同步给图片链接
        const imgLink = card.querySelector('.image-link.desktop');
        imgLink && imgLink.setAttribute('href', productUrl);
      }
    });
  }
});