Customizing fonts in your Ecwid store

Last updated

You can change the size, color of the fonts and the font family in your Ecwid store using CSS codes. CSS stands for “Cascading Style Sheets”. CSS codes are used to set the design for website pages. Learn more about CSS in Wikipedia.

If your Ecwid store is added to another website, the store inherits the font from the website. Ecwid automatically detects what fonts and colors are used on the website and applies the same style to the store. Thus, the store looks like it’s a seamless part of the website.

If your website or brand has its own unique style and fonts that you also want to reflect in your store design, you can manually set another font family, color and size for your Ecwid store using CSS codes.

See below what CSS codes you can use to change the fonts on the store pages.

If your Ecwid store is added to a Wix website, set the fonts in the Ecwid app settings.

 

In this article:

 

 

Changing all fonts in your Ecwid store

 

If you would like to use a specific font throughout all your store pages, you can do it with the help of CSS.

 

Here is the code for changing the font of all the texts at once. Feel free to replace  "black" and "verdana, arial, sans-serif" in the example with any color and font family you like.

 

/*Change font color and family for all texts*/
.ecwid div, .ecwid span, .ecwid a, .ecwid p {
font-family: verdana, arial, sans-serif !important;
color: black !important;
}

 

Changing fonts on the category page

 

A category page is a page where you see all the products belonging to the category. Here are CSS codes to change the font of prices and titles on category pages.

 


/*Product titles on category page*/
.ec-size .ec-store .grid-product__title-inner {
color: grey;
}

/*Product price color on category page*/
.ec-size .ec-store .grid-product__price-amount {
color: grey;
}

/*Product price size on category page*/
.ec-size .ec-store .grid__products .grid-product__wrap div.grid-product__price .grid-product__price-amount {
    font-size: 20px;
}

 

Replace "grey" with any other color and "20px" with the font size you wish.

 

When the code is ready, paste it to your store CSS theme.

 

Changing fonts on the product page

 

Here are the codes for changing fonts in your product page.

 


/*Product description on the product page*/
.ec-size .ec-store .product-details__product-description {
    font-size: 20px;
}

/*Product title on the product page*/
.ec-size .ec-store .product-details__product-title {
color: grey;
}

/*Product price on the product page*/
.ec-size .ec-store .details-product-price__value {
    color: red;
    font-size: 20px;
}

/*Product SKU on the product page*/
.ec-size .ec-store .product-details__product-sku {
color: grey;

}

/*Quantity label on the product page*/
.ec-size .ec-store .details-product-purchase__qty-label {
    color: grey;
}

 

Replace "grey" with any other color and "20px" with the font size you wish.

 

When the code is ready, paste it to your store CSS theme.

 

Here is how the product page looks when all these codes are added:

Ecwid Product details page

 

To change the buttons color refer to this instruction: Changing buttons in your Ecwid store

When you add or edit a product description, you can also change the design of the description using inbuilt formatting tools in the description field:

Editing product description

To edit the product description: 

  1. Go to your Ecwid Control panel → Catalog → Products.
  2. Click on a product to open it.
  3. In the description field, change the font family, color, size using the tools in the panel.

Related articles

 

Adding CSS codes to your store
Professional services from Ecwid
Themes for sitebuilders

Back to top
Has the article answered your question?

Awesome! Thanks for your feedback!

Please send us that question. We will be happy to help by email.

Send a message