在 Shopify 支持中心，我们最常见的主题定制请求之一是更改 “添加到购物车 “按钮的外观。最常见的是按钮颜色、大小、字体颜色以及边框颜色和厚度。本教程将指导你如何编辑 “添加到购物车 “按钮和 “购买 “按钮，方法是在你的 theme.scss.liquid 文件底部添加一些 CSS，然后你就可以对其进行编辑了。
附加说明：
在以下教程中，第一段代码用于更改按钮的外观。以 /* Hover */ 开头的第二段代码在悬停时更改按钮，即当光标悬停在按钮上时。
background-color 用于更改按钮的背景颜色。
border 用于更改边框。第一部分（2px）指边框的厚度，第二部分（solid）是边框样式，第三部分（绿色）是边框的颜色。请访问此页面了解有关 CSS 边框属性的更多信息。
color 用于更改按钮标签/文本的颜色。
你也可以使用十六进制颜色，使按钮与你的品牌相匹配。你可以输入在此在线十六进制颜色选择器中找到的颜色的十六进制代码，而不用写出你希望按钮颜色的名称。例如，如果你想要一种特定的紫色，你就可以输入颜色： #7300ed; 而不是 color: purple；
Debut主题
1. 进入在线商店 > 主题 > 操作 > 编辑代码，打开 theme.scss.liquid。
2. 要更改 “添加到购物车 “按钮，请将以下代码粘贴到文件底部：
.product-form__cart-submit {
background-color: red；
border： 2px solid green；
color: white；
}
/* Hover */
.product-form__cart-submit:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
要更改 “立即购买 “按钮，请粘贴下面的代码：
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded {
background-color: green !important；
border： 2px solid red !important；
color: white !important；
}
/* Hover */
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
3. 根据你的喜好编辑背景色、边框和颜色的值。
4. 单击保存。
Express主题
1. 进入在线商店 > 主题 > 操作 > 编辑代码，打开 theme.scss.liquid。
2. 要更改 “添加到购物车 “按钮，请将以下代码粘贴到文件底部：
.product-form__add-to-cart {
background-color: red；
border： 2px solid green；
color: white；
}
/* Hover*/
.product-form__add-to-cart:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
要更改 “立即购买 “按钮，请粘贴以下代码：
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded {
background-color: green !important；
border： 2px solid red !important；
color: white !important；
}
/* Hover*/
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
3. 根据你的喜好编辑背景色、边框和颜色的值。
4. 点击保存。
Simple主题：
1. 进入在线商店 > 主题 > 操作 > 编辑代码，打开 theme.scss.liquid。
2. 要更改 “添加到购物车 “按钮，请将以下代码粘贴到文件底部：
.product-single__cart-submit {
background-color: red；
border： 2px solid green；
color: white；
}
/* Hover*/
.product-single__cart-submit:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
复制
要更改 “立即购买 “按钮，请粘贴下面的代码：
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded {
background-color: green !important；
border： 2px solid red !important；
color: white !important；
}
/* Hover */
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
3. 根据你的喜好编辑背景色、边框和颜色的值。
4. 点击保存。
Boundless, Supply, Brooklyn主题
1. 进入 “网上商店”>”主题”>”操作”>”编辑代码”，打开 theme.scss.liquid。
2. 要更改 “添加到购物车 “按钮，请将以下代码粘贴到文件底部：
.btn.btn–add-to-cart {
background-color: red；
border： 2px solid green；
color: white；
}
/* Hover */
.btn.btn–add-to-cart:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
要更改 “立即购买 “按钮，请粘贴以下代码
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded {
background-color: green !important；
border： 2px solid red !important；
color: white !important；
}
/* Hover */
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
3. 根据你的喜好编辑背景色、边框和颜色的值。
4. 单击保存。
Minimal主题
1. 进入在线商店 > 主题 > 操作 > 编辑代码，打开 theme.scss.liquid。
2. 要更改 “添加到购物车 “按钮，请将以下代码粘贴到文件底部：
#AddToCart {
background-color: red；
border： 2px solid green；
color: white；
}
/* Hover */
#AddToCart:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
要更改 “立即购买 “按钮，请粘贴下面的代码：
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded {
background-color: green !important；
border： 2px solid red !important；
color: white !important；
}
/* Hover */
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded:hover {
background-color: blue !important；
border： 2px solid orange !important；
color: green !important；
}
3. 根据你的喜好编辑背景色、边框和颜色的值。
4. 单击保存。
Narrative主题
1. 进入在线商店 > 主题 > 操作 > 编辑代码，打开 theme.scss.liquid。
2. 要更改 “添加到购物车 “按钮，请将以下代码粘贴到文件底部：
.product__add-to-cart-button {
background-color: red；
color: white；
}
.product__add-to-cart-button::after {
outline: 2px solid green；
}
/* Hover */
.btn–secondary:not(.disabled):hover {
color: black；
background: white；
}
.btn–secondary:not(.disabled):hover::after {
outline: 4px solid blue；
}
要更改 “立即购买 “按钮，请粘贴以下代码：
.shopify-payment-button__button.shopify-payment-button__buttonon-unbranded {
background-color: green；
color: white；
}
.shopify-payment-button__button.shopify-payment-button__button-unbranded::after {
outline: 2px solid red；
}
/* Hover */
.shopify-payment-button__button.shopify-payment-button__button-unbranded:hover {
background-color: black；
color: red；
}
.shopify-payment-button__button.shopify-payment-button__button-unbranded:not(.disabled):hover::after {
outline: 4px solid blue；
}
3. 根据你的喜好编辑 background-color、border 和 color 的值。
4. 单击保存。
原创文章，作者：图帕先生，感谢支持原创，如若转载，请注明出处：https://www.yestupa.com/18566.html
微信咖啡 
支付宝咖啡 
