Hostinger AI 建站工具手动模式：在线商店文字颜色修改教程

在你的 Hostinger AI Builder 手动模式在线商店的不同区域更改文本颜色，包括产品列表区块和单个产品页面。你也可以在相同区域自定义文本样式。

产品列表区块

点击**产品列表区块**，选择 Edit section（编辑区块），然后在 **Style（样式）**标签页中更改文本颜色：

在样式设置中更改文本颜色会影响产品标题、价格和分页按钮。如果有促销价，原价的颜色始终会浅一些。

角标颜色

点击产品列表区块，选择 Edit section（编辑区块），然后在 **Ribbons（角标）**标签页中更改角标颜色：

注意

• 你可以在**产品管理区域**中添加角标

“加入购物袋”按钮颜色

点击产品列表区块，选择 Edit section（编辑区块），然后在 **Add to bag button（加入购物袋按钮）**标签页中更改按钮颜色：

单独更改产品标题颜色

复制以下代码，将**HEX 色值替换为你想要的颜色，然后将其粘贴到网站集成设置中的自定义代码**字段中：

<style>
/*Product list: Product title*/
.product-list-item__title {
color: #FF0000 !important;
}
</style>

单独更改分页颜色

复制以下代码，将各个**HEX 色值分别替换为你想要的颜色，然后将其粘贴到网站集成设置中的自定义代码**字段中：

<style>
/*Product list: Pagination color*/
.pagination__button{
color: #FF0000 !important;
}
/*Product list: Current page number color*/
.pagination__trigger--current{
color: #00FF00 !important;
}
/*Product list: Pagination hover color*/
.pagination__button:hover, .pagination__button:active{
color: #0000FF !important;
}
</style>

单个产品区块和/或产品页面

点击**产品区块**，选择 Edit section（编辑区块），然后在 **Style（样式）**标签页中更改颜色：

• 文本颜色
• 产品图片上的箭头颜色
• 产品图库中的箭头颜色
• 区块背景颜色（或设置图片背景）

在样式设置中更改文本颜色会影响产品标题、副标题、价格、产品选项和描述。如果有促销价，原价的颜色始终会浅一些。

产品描述颜色

在**产品管理区域**中，找到描述字段，并使用文本编辑工具更改颜色：

“加入购物袋”按钮颜色

点击产品列表区块，选择 Edit section（编辑区块），然后在 **Button（按钮）**标签页中更改按钮颜色：

单独更改产品标题颜色

复制以下代码，将**HEX 色值替换为你想要的颜色，然后将其粘贴到网站集成设置中的自定义代码**字段中：

<style>
/*Single product: Product title*/
.block-product__title {
color: #FF0000 !important;
}
</style>

单独更改产品副标题颜色

复制以下代码，将**HEX 色值替换为你想要的颜色，然后将其粘贴到网站集成设置中的自定义代码**字段中：

<style>
/*Single product: Product title*/
.block-product__subtitle {
color: #FF0000 !important;
}
</style>

你的在线商店现在会在产品列表和产品页面中显示你自定义的文本颜色了。