Learn how to change text color in the following areas of your online store:

  • Product list section

    • Ribbon color

    • “Add to bag” button color

    • Change the product title color individually

    • Change the pagination color individually

  • Single product section and/or product page

    • Product description color

    • “Add to bag” button color

    • Change the product title color individually

    • Change the product subtitle color individually

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: To add a ribbon, open the product editor in the store 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 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 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>

Did this answer your question?