Design configuration settings

Change store design with the configuration settings. Access page layouts for product, category, and checkout pages, and font settings and labels for texts across the storefront.

How to apply design configuration with HTML code

Design config requires an additional Ecwid.refreshConfig && Ecwid.refreshConfig(); line to apply the changes.

Code example:

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.CONFIG_NAME = VALUE; 
  Ecwid.refreshConfig && Ecwid.refreshConfig();
</script>

General store design settings

Category and search pages

Product pages

Checkout pages

Fonts and colors

Ecwid has an additional chameleon config allowing you to change store colors, font parameters, and label texts. It can also be used to automatically set storefront font and color settings matching the ones you use on your website where Ecwid store is integrated.

Set storefront fonts and colors 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 && Ecwid.refreshConfig();
</script>

Set storefront fonts and colors manually:

<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.colors = {
		'color-background':'#D3D3D3',
		'color-foreground':'#4EA3F0',
		'color-link':'#FF0606',
		'color-button':'#4EA3F0',
		'color-price':'#FF0606'
	}
	window.ec.config.chameleon.font = {
		'font-family':'arial,sans-serif'
	}
	Ecwid.refreshConfig && Ecwid.refreshConfig();
</script>

The chameleon.colors config allows you to set the following settings:

Storefront labels

Most storefront texts have an internal "label" assigned to them. You can use this label to change the wording in your store.

We have a free tool for searching and changing text labels without coding called Storefront Label Editor. However, once you find a label with the app, you can apply text changes with JavaScript code. Use it if you want to have a store on several websites and change wordings on these websites independently.

Code example:

<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>