Change text colors across different areas of your Hostinger AI Builder manual mode online store, including the product list section and single product pages.
Product list section
Click on the product list section, select Edit section, and change the text color in the Style tab:
Changing the text color in the style settings will affect the product title, price, and pagination buttons. If there’s a sale price, the original price will always be a shade lighter.
Ribbon color
Click on the product list section, select Edit section, and change the ribbon color in the Ribbons tab:
NOTE
- You can add a ribbon in the product management area
“Add to Bag” button color
Click on the product list section, select Edit section, and change the button color in the Add to bag button tab:
Change the product title color individually
Copy the below code, replace the HEX code with the preferred one, and paste it into the Custom code field in your website’s integrations settings:
<style>
/*Product list: Product title*/
.product-list-item__title {
color: #FF0000 !important;
}
</style>
Change the pagination color individually
Copy the below code, replace the HEX codes with the preferred ones, and paste it into the Custom code field in your website’s integrations settings:
<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>
Single product section and/or product page
Click on the product section, select Edit section, and change the color in the Style tab:
-
Text color
-
Arrows color on product images
-
Arrows color in the product gallery
-
Section background color (or set image background)
Changing the text color in the style settings will affect the product title, subtitle, price, product options, and description. If there’s a sale price, the original price will always be a shade lighter.
Product description color
In the product management area, find the description field and change the color using text editing tools:
“Add to Bag” button color
Click on the product list section, select Edit section, and change the button color in the Button tab:
Change the product title color individually
Copy the below code, replace the HEX code with the preferred one, and paste it into the Custom code field in your website’s integrations settings:
<style>
/*Single product: Product title*/
.block-product__title {
color: #FF0000 !important;
}
</style>
Change the product subtitle color individually
Copy the below code, replace the HEX code with the preferred one, and paste it into the Custom code field in your website’s integrations settings:
<style>
/*Single product: Product title*/
.block-product__subtitle {
color: #FF0000 !important;
}
</style>