Fonts, colors and labels

Change default colors and fonts

Change any color and main font for user's storefront

Apply colors and fonts to storefront automatically from a website

Set storefront colors and font automatically

<script>
window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.font = 'auto';
window.ec.config.chameleon.colors = 'auto';

Ecwid.refreshConfig();
</script>

Ecwid can automatically detect the main colors and fonts of a surrounding website and match the storefront automatically. To apply the colors and font automatically for a store, use the code above.

📘

If the "Color adaptation" is set up to "Enabled" in the "Storefront navigation & colors" section of the "Design" tab of the Admin Panel, then the auto value won't work.

Set storefront colors

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.colors = 'auto';

Ecwid.refreshConfig();

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.colors = {
  'color-background':'#D3D3D3',
  'color-foreground':'#4EA3F0',
  'color-link':'#FF0606',
  'color-button':'#4EA3F0',
  'color-price':'#FF0606'
}

Ecwid.refreshConfig();

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon = {
  colors: {
    'color-button':'#4EA3F0',
    'color-price':'#FF0606'
  },
  font: {
    'font-family': 'arial,sans-serif'
  }
}

Ecwid.refreshConfig();

Using the global Ecwid config object window.ec.config you can control the colors in user's storefront. To pre-define colors for a storefront, add JavaScript code on the right in the same frame, where Ecwid integration code is added.

auto value allows Ecwid to detect the website colors around Ecwid storefront to adapt its colors automatically.

📘

If the "Color adaptation" is set up to "Enabled" in the "Storefront navigation & colors" section of the "Design" tab of the Admin Panel, then the auto value won't work.

Use the fields below to set colors manually.

Fields:

Set storefront font

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.font = 'auto';

Ecwid.refreshConfig();

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.font = {
  'font-family': 'arial,sans-serif'
}

Ecwid.refreshConfig();

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon = {
  colors: 'auto',
  font: {
      'font-family': 'arial,sans-serif'
    }
  }

Ecwid.refreshConfig();

Using the global Ecwid config object window.ec.config you can control the fonts of all texts displayed in user's storefront. To pre-define a font for a storefront, add JavaScript code on the right in the same fram, where Ecwid integration code is added.

auto value allows Ecwid to detect the website's main font to adapt its font automatically. You can also set a specific font-family for a storefront manually.

Change storefront labels

<script type="text/javascript">
  ecwidMessages = {
    "BreadCrumbs.your_bag" : "Your shopping cart",
    "Minicart.shopping_bag" : "Shopping Cart",
    "ShoppingCartView.shopping_bag" : "Your Shopping Cart",
    "EmptyShoppingCartPanel.empty" : "Your Shopping Cart is empty"
  };
</script>

<script type="text/javascript">
  ecwidMessages = { 
    "LABEL_NAME":"LABEL_VALUE", 
    "LABEL_NAME-2":"LABEL_VALUE-2", 
    "OTHER_LABEL_NAME":"OTHER_LABEL_VALUE" 
  }; 
</script>

Every text in Ecwid (that is not added by a merchant) is a label. You can change these labels yourself to translate your storefront or to make the wording more fitting a merchant's individual Ecwid setup. This translation includes adding of a special JavaScript code with the updated labels before the Ecwid integration code.

LABEL_NAME is the internal name of the text label. LABEL_VALUE is the text that is shown in the storefront.

For example: to replace the "Shopping Bag" text with "Shopping Cart" in the bag widget and "your bag" page, add the following code before this line: <script type='text/javascript' src='http://app.ecwid.com/script.js?store_id'></script> on your web page. See the example above.

Important notes

• each line must be ended with comma except the last line
• do not leave empty lines in the Javascript code
• the special chars should be escaped. For example if the value of a label has double quote(") it should be escaped with the slash(")
• some buttons are actually images, so you cannot translate them using JavaScript. Use CSS code to replace the images
• keep HTML tags in the label values, they're necessary for correct Ecwid work
• mind the spaces after the label values. Some labels have it. So make sure that they won't be loaded during the translation.
• UTF-8 charset is strongly recommended

If you're not familiar with JavaScript, but want to translate a store or change its labels, you can use Storefront Label Editor or the Ecwid Translate Tool. It will make the translation much easier.