Shopify商品悬停显示Add to Cart按钮实现方案咨询

这个需求不需要复杂编码，用CSS就能轻松搞定，属于简单解决方案，步骤如下：

• 第一步：确定商品卡片和Add to Cart按钮的CSS类名（不同主题类名可能不同，比如商品卡片常见类名是product-card，按钮是add-to-cart，你可以通过浏览器开发者工具查看）
• 第二步：在Shopify后台进入「在线商店」→「主题」→「操作」→「编辑代码」，找到主题的全局CSS文件（一般是base.css或theme.css）
• 第三步：添加以下CSS代码（记得替换成你实际的类名）：

/* 默认隐藏Add to Cart按钮 */
.product-card .add-to-cart {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; /* 可选：添加过渡动画让显示更平滑 */
}

/* 鼠标悬停商品卡片时显示按钮 */
.product-card:hover .add-to-cart {
  opacity: 1;
  visibility: visible;
}

如果你的主题有特殊布局，可能需要微调选择器，但核心逻辑就是利用CSS的:hover伪类控制元素的显示隐藏，完全不需要复杂的Liquid或JavaScript开发。

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