如何在Shopify Liquid中创建带跳转链接的矩形按钮？

问题修复要点： #

• 显示问题解决：你的HTML代码里类名拼写错误（sqaure → square），导致CSS样式无法绑定到元素，修正后矩形就能正常显示。
• 跳转功能实现：用<a>标签替代<div>，<a>是HTML原生跳转元素，通过href属性指定目标网址即可实现点击跳转。

完整可运行代码（Shopify Liquid/HTML+CSS） #

CSS 样式（可放在主题theme.liquid或单独CSS文件中）

.square-btn {
    display: flex;
    justify-content: center;
    align-items: center; /* 让文字垂直水平居中，更符合按钮交互逻辑 */
    height: 200px;
    width: 400px;
    background-color: #8F0000;
    color: #fff; /* 可选：设置文字为白色，提升深色背景下的可读性 */
    text-decoration: none; /* 去掉链接默认下划线 */
    cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
}

.square-btn:hover {
    opacity: 0.9; /* 可选：鼠标悬停添加半透明效果，增强交互反馈 */
}

HTML/Liquid 代码（可放在需要显示按钮的模板位置）

<!-- 写法1：直接指定固定跳转网址 -->
<a href="https://你的目标网址.com" class="square-btn">
    点击跳转
</a>

<!-- 写法2：使用Shopify Liquid变量跳转（比如跳转到集合页、产品页） -->
<a href="{{ collections.featured.url }}" class="square-btn">
    查看精选商品
</a>

补充说明 #

• 类名改为square-btn是为了语义更清晰，你也可以继续用square，只要保证CSS和HTML的类名完全一致即可。
• 可根据需求调整CSS中的宽高、颜色、边距等属性，适配店铺的视觉风格。

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