How To: Change the Style of Elements in the Storefront¶

To change the style (font, color) of some design elements (links, text, etc.):

1. In the Administration panel, go to Website → Themes.

2. In the currently used theme click the Theme editor button near the layout you want to edit.

   

To change the font of elements:

1. In the Theme editor panel on the left find the Customize section and select Fonts in the drop-down menu.

2. Choose the element you want to change and define the font, style and size with the help of appropriate controls.

3. Click the Save button.

   

   Note

   If you have problems with displaying diacritic symbols when using some fonts, refer to this article.

To change the color of some elements:

1. In the Theme editor panel on the left find the Customize section and choose Colors in the drop-down menu.

2. Find the element you want to change and change its color by clicking on the color field. In the opened window choose one of the given colors or define the color in hexadecimal value in the special field. Click the Choose button.

3. Click the Save button.

   

To change the background color of some style elements:

1. In the Theme editor panel on the left find the Customize section and choose Backgrounds in the drop-down menu.

2. Choose the element and change the background color by clicking on the color field. In the opened window choose one of the given colors or define the color in hexadecimal value in the special field. Click the Choose button.

   Note

   You can also choose patterns for the background. Choose one of the given patterns in the drop-down menu or click the gear icon to the right to upload your own image for the background. In the opened section click Browse and choose an image from your local computer. Use the given controls to set up your background.

   Important

   You cannot upload your own patterns for the default style. Create a new one first. To do it, click the Save button near the style name and type the new style name in the pop up window. It will be saved as the new style.

3. Click the Save button.