Shopware 6：修改「加入心愿单图标」的填充颜色

• CSS直接修改默认/选中状态填充色
  先通过浏览器开发者工具（右键图标→检查）拿到心愿单图标的类名（比如.wishlist-svg），然后写以下CSS：

  /* 默认未选中状态的填充色 */
  .wishlist-svg path {
    fill: #e0e0e0; /* 替换成你想要的默认浅灰色 */
    transition: all 0.3s ease; /* 让动画过渡更自然 */
  }
  
  /* 点击选中后的填充色 */
  .wishlist-svg.active path {
    fill: #ff6b6b; /* 替换成你想要的高亮红色 */
  }
  

• 添加点击放大动画
  给选中状态加上缩放效果，同样写在CSS里：

  .wishlist-svg.active path {
    transform: scale(1.2); /* 放大1.2倍，可按需调整数值 */
  }
  

  如果需要点击切换选中状态，加一段简单的JS：

  // 给所有心愿单图标绑定点击事件
  document.querySelectorAll('.wishlist-svg').forEach(icon => {
    icon.addEventListener('click', () => {
      icon.classList.toggle('active');
      // 要是需要同步后端心愿单状态，这里可以加AJAX请求接口
    });
  });
  

• 找不到Twig文件的替代操作

  • 用主题自带的自定义CSS面板：多数电商平台的主题设置里都有“自定义CSS”输入框，直接把上面的CSS代码粘进去就行，不用找模板文件。
  • 修改主题全局样式/脚本：如果是自建系统，去主题的assets/css或assets/js文件夹里找全局文件，把CSS/JS代码加进去，改完记得清缓存生效。
  • 精准匹配选择器：要是图标有唯一ID或者更特殊的类名，优先用精准选择器，避免影响页面上其他SVG图标。

内容的提问来源于stack exchange，提问作者Datastorm1989