With Online Store and Advanced Store plans, you can change your store's design at the Store manager → Design. There, you can customize the following:

  • Product image size

  • Image aspect ratio

  • Product card details and layout

  • Category name position

  • Product page layout

  • Product image gallery thumbnails

  • Product page sidebar

  • Storefront navigation and colors

For more advanced design solutions, you (or your web designer/developer) can create custom themes using CSS.

Table of contents

Change the font color for the whole store at once

1. Go to the Store Manager → Design, scroll down to find the Create theme button, and click on it:

Or, if you already have a theme that's activated, click on Edit theme:

2. Click Add New CSS Theme (or edit the existing theme) and paste the below code; replace #ff0000 with your preferred hex code.

.ecwid div, .ecwid span, .ecwid a, .ecwid p { color: #ff0000 !important; }

3. Make sure the theme is active, save the changes, and check the font color online.

Font size

Replace the 30 with your preferred font size.

.ecwid div, .ecwid span, .ecwid a, .ecwid p { font-size: 30px; }

Font family

Replace the NAME_OF_FONT with your preferred font name.

.ecwid div, .ecwid span, .ecwid a, .ecwid p { font-family: NAME_OF_FONT !important; }

Product title color

Replace #ff0000 with your preferred hex code.

html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__products–large-items .grid-product__title-inner { color: #ff0000; }

Additional resources

Did this answer your question?