How to change your product title

Last updated

In order to change font or color of the product titles, you should add the following CSS styles to your custom CSS theme. For instructions on how to create CSS themes, refer to this article: CSS FAQ

Everywhere

div.ecwid-productBrowser-productNameLink a,
div.ecwid-productBrowser-productNameLink a:visited,
div.ecwid-productBrowser-productNameLink a:hover,
div.ecwid-productBrowser-productNameLink a:active { 
/* feel free to change the code below*/ 
  font: normal 12px tahoma, geneva, verdana, sans-serif !important; color: #anycolor !important; 
}

(do not forget the !important rule)

Grid mode


.ecwid-productBrowser-productsGrid-v2 div.ecwid-productBrowser-productNameLink a, 
.ecwid-productBrowser-productsGrid-v2 div.ecwid-productBrowser-productNameLink a:active, 
.ecwid-productBrowser-productsGrid-v2 div.ecwid-productBrowser-productNameLink a:visited {  
/* feel free to change the code below*/ 
  font: normal 12px tahoma, geneva, verdana, sans-serif; 
  color: #anycolor;
}

List mode

div.ecwid-productBrowser-productsList-details div.ecwid-productBrowser-productNameLink a, 
div.ecwid-productBrowser-productsList-details div.ecwid-productBrowser-productNameLink a:active, 
div.ecwid-productBrowser-productsList-details div.ecwid-productBrowser-productNameLink a:visited { 
/* feel free to change the code below*/ 
  font: normal 12px tahoma, geneva, verdana, sans-serif; 
  color: #anycolor;
}

Table mode

td.ecwid-productBrowser-productsTable-cell div.ecwid-productBrowser-productNameLink a,td.ecwid-productBrowser-productsTable-cell div.ecwid-productBrowser-productNameLink a:active, 
td.ecwid-productBrowser-productsTable-cell div.ecwid-productBrowser-productNameLink a:visited { 
/* feel free to change the code below*/ 
  font: normal 12px tahoma, geneva, verdana, sans-serif; 
  color: #anycolor;
}

On the product page only

div.ecwid-productBrowser-ProductPage div.ecwid-productBrowser-head {
/* feel free to change the code below*/ 
  font: normal 12px tahoma, geneva, verdana, sans-serif;  
  color: #anycolor; 
}

You can find CSS color code on following site: html-color-codes.info

Was this article helpful?
1 out of 1 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7