All Collections
Online store (Business plan)
Design
Business plan: How to change text color in the online store
Business plan: How to change text color in the online store

Learn how to change the text color in the online store

Updated over a week ago

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>

Did this answer your question?