Learn how to change text color in the following areas of your online store:
Product list section
Click on the product list section, select Edit section, and change the text color in the Style tab:
NOTES:
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:
“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 separately
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 separately
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
NOTES:
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 store management area, open the product in question. 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 Add to bag button tab:
Change the product title color separately
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 separately
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>
