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

Config nameTypeDescription
show_signin_linkbooleanVisibility of the sign in link for customers: set true to show the element or false to hide it.
show_breadcrumbsbooleanVisibility of the breadcrumbs: set true to show the element or false to hide it.
breadcrumbs_have_home_itembooleanVisibility of the home page link in breadcrumbs: set true to show the element or false to hide it.
breadcrumbs_home_urlstringSet the URL to the home link in breadcrumbs. Empty by default
breadcrumbs_separatorstringDefines breadcrumbs separator. Available values: any string.

For example:
/ getsStore / SubCategory / SubSubCategory
-> getsStore -> SubCategory -> SubSubCategory
product_list_show_sort_viewas_optionsbooleanVisibility of the 'View as' and 'Sort by' options for category pages: set true to show the element or false to hide it.
show_footer_menubooleanVisibility of the footer menu: set true to show the element or false to hide it.
show_skubooleanVisibility of the product SKUs in category and product pages (less priority than the product_list_sku_behavior config): set true to show the element or false to hide it.
show_root_categoriesbooleanVisibility of the category grid on the home page: set true to show the element or false to hide it.
product_filters_position_search_pagebooleanPosition of the filters on the search page. Available values: LEFT (default), RIGHT.

Category and search pages

Config nameTypeDescription
enable_catalog_on_one_pagebooleanDefines if the one-page catalog is enabled: set true to enable or false to disable it.

One-page catalog shows all categories on the home page.
enable_simple_category_listbooleanDefines if all categories have the same number of cards in a row: set true to enable or false to disable it.
product_list_title_behaviorstringDefines display mode of product title: "SHOW", "HIDE", "SHOW_ON_HOVER".
product_list_sku_behaviorstringDefines display mode of product SKU*: "SHOW", "HIDE", "SHOW_ON_HOVER".
product_list_price_behaviorstringDefines display mode of product price: "SHOW", "HIDE", "SHOW_ON_HOVER".
product_list_subtitles_behaviorstringDefines display mode of product subtitle: "SHOW", "HIDE", "SHOW_ON_HOVER".
product_list_buybutton_behaviorstringDefines display mode of the 'Buy now' button: "SHOW", "HIDE", "SHOW_ON_HOVER".
The 'Buy now' button must first be enabled in the Ecwid admin > Settings > General > Cart > Show "Buy now" buttons.
product_list_show_framebooleanVisibility of the border for product cards: set true to show the element or false to hide it.
product_list_product_info_layoutstringDefines alignment for SKU, price, and name in product cards. Available values: "CENTER", "LEFT", "JUSTIFY", "RIGHT".
product_list_category_title_behaviorstringDefines how category names are displayed on category pages. Available values: "SHOW_ON_IMAGE" (default), "SHOW_BELOW_IMAGE", "HIDE", "SHOW_ON_HOVER".
product_list_show_product_imagesbooleanVisibility of the product images on category pages: set true to show the element or false to hide it.
product_filters_position_category_pagestringDefines alignment for product filters on category pages. Available values: "LEFT" (default), "RIGHT".
product_filters_position_search_pagestringDefines alignment for product filters on search pages. available values: "LEFT" (default), "RIGHT".
product_filters_opened_by_default_on_category_pagebooleanDefines if product filters are opened by default. Available values: true, false(default).

Product pages

Config nameTypeDescription
product_details_layoutstringDefines layout for product pages. Available values: "TWO_COLUMNS_SIDEBAR_ON_THE_LEFT", "TWO_COLUMNS_SIDEBAR_ON_THE_RIGHT", "THREE_COLUMNS_SIDEBAR_ON_THE_RIGHT", "THREE_COLUMNS_SIDEBAR_ON_THE_LEFT".
product_details_show_breadcrumbsbooleanVisibility of the breadcrumbs on product pages: set true to show the element or false to hide it.
product_details_show_product_namebooleanVisibility of the product name: set true to show the element or false to hide it.
product_details_show_product_skubooleanVisibility of the product SKU: set true to show the element or false to hide it.
product_details_show_product_pricebooleanVisibility of the product price: set true to show the element or false to hide it.
product_details_show_sale_pricebooleanVisibility of the product sale price: set true to show the element or false to hide it.
product_details_show_price_per_unitbooleanVisibility of the product price per unit: set true to show the element or false to hide it.
product_details_show_taxbooleanVisibility of the product taxes: set true to show the element or false to hide it.
product_details_show_product_optionsbooleanVisibility of the product options block: set true to show the element or false to hide it.
product_details_hide_price_modifiersbooleanVisibility of the price modifiers for product options: set true to show the element or false to hide it.
product_details_show_buy_buttonbooleanVisibility of the buy button on product pages: set true to show the element or false to hide it.
product_details_show_qtybooleanVisibility of the "quantity" field on product pages: set true to show the element or false to hide it.
product_details_show_attributesbooleanVisibility of the product attributes: set true to show the element or false to hide it.
product_details_show_weightbooleanVisibility of the product weight: set true to show the element or false to hide it.
product_details_show_number_of_items_in_stockbooleanVisibility of the items in stock on product pages: set true to show the element or false to hide it.
product_details_show_in_stock_labelbooleanVisibility of the 'In stock' label on product pages: set true to show the element or false to hide it.
product_details_show_wholesale_pricesbooleanVisibility of the wholesale prices: set true to show the element or false to hide it.
product_details_show_product_descriptionbooleanVisibility of the product description: set true to show the element or false to hide it.
product_details_show_save_for_laterbooleanVisibility of the 'Save for Later' block on product pages: set true to show the element or false to hide it.
product_details_show_share_buttonsbooleanVisibility of the share buttons block: set true to show the element or false to hide it.
product_details_show_facebook_share_buttonbooleanVisibility of the Facebook share button: set true to show the element or false to hide it.
product_details_show_pinterest_share_buttonbooleanVisibility of the Pinterest share button: set true to show the element or false to hide it.
product_details_show_twitter_share_buttonbooleanVisibility of the Twitter share button: set true to show the element or false to hide it.
product_details_show_vk_share_buttonbooleanVisibility of the VKontakte share button: set true to show the element or false to hide it.
product_details_image_carouselbooleanVisibility of the gallery images: set true to show the element or false to hide it.
product_details_additional_images_has_shadowbooleanVisibility of the shadow for gallery images: set true to show the element or false to hide it.
product_details_show_subtitlebooleanVisibility of product subtitles: set true to show the element or false to hide it.
product_details_show_navigation_arrowsbooleanVisibility of image navigation arrows on product pages: set true to show the element or false to hide it.
product_details_show_product_photo_zoombooleanDefines availability of image hover zoom on product pages: set true to enable or false to disable.
product_details_show_product_name_always_first_on_mobilebooleanDefines if the product name is always on top on mobile: set true to enable or false to disable.
product_details_cut_product_description_in_sidebarbooleanDefines if the product description shows in the sidebar and displays only one paragraph with the "Show more"expand button: set true to enable or false to disable.
product_details_two_columns_with_right_sidebar_show_product_description_on_sidebarbooleanDefines if the product description shows in the sidebar for two columns and right sidebar config: set true to enable or false to disable.
product_details_two_columns_with_left_sidebar_show_product_description_on_sidebarbooleanDefines if the product description shows in the sidebar for two columns and left sidebar config: set true to enable or false to disable.
product_details_gallery_layoutbooleanDefines layout for image gallery on product pages. Available values: IMAGE_SINGLE_THUMBNAILS_HORIZONTAL, IMAGE_SINGLE_THUMBNAILS_VERTICAL,IMAGE_FEED.
product_details_additional_images_preview_on_clickbooleanVisibility of gallery images on fullscreen image preview: set true to show the element or false to hide it.
product_details_thumbnails_aspect_ratiobooleanDefines image aspect ratio for gallery thumbnails. Available values: "AUTO", "PORTRAIT_0667", "PORTRAIT_075", "SQUARE_1", "LANDSCAPE_1333", "LANDSCAPE_15".
product_details_show_breadcrumbs_positionbooleanDefines the position of breadcrumbs on product pages. Available values: PRODUCT_DETAILS_SIDEBAR, NAVIGATION_CONTAINER.

Checkout pages

Config nameTypeDescription
shopping_cart_show_qty_inputsbooleanVisibility of the "quantity" field on the checkout pages: set true to show the element or false to hide it.
shopping_cart_show_skubooleanVisibility of the item SKU on checkout pages: set true to show the element or false to hide it.
shopping_cart_show_weightbooleanVisibility of the item weight on checkout pages: set true to show the element or false to hide it.
checkout_show_state_inputbooleanVisibility of the state field in checkout address forms: set true to show the element or false to hide it.
checkout_show_address_line_2booleanVisibility of the address_line_2 field in checkout address forms: set true to show the element or false to hide it.
shopping_cart_products_collapsed_on_desktopbooleanDefines if the list of products is auto-collapsed on desktop cart pages if the cart has more than 4 products: set true to enable (default) or false to disable.
shopping_cart_products_collapsed_on_mobilebooleanDefines if the list of products is auto-collapsed on mobile cart pages: set true to enable (default) or false to disable.
checkout_expand_billing_address_formbooleanDefines if the billing address form is auto-expanded on the checkout: set true to enable or false to disable (default).

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 color settings:

NameTypeDescription
color-backgroundstring (HEX and RGBA color)Background color for storefront and small buttons ("Clear bag", "Apply", etc.).
color-foregroundstring (HEX and RGBA color)Color of all texts.
color-linkstring (HEX and RGBA color)Color for all links (breadcrumbs, "Sign In", "Favourites", etc.).
color-buttonstring (HEX and RGBA color)Color for main buttons ("Add to bag", "Checkout", etc.) and small buttons on mouse hover ("Clear bag", "Apply", etc.).
color-pricestring (HEX and RGBA color)Color for product prices.

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>