Design configs

You can change the storefront design with the configuration settings described below.

Control 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. Behavioral configs do not require it.

Code example:

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  
  // Add design config
  window.ec.storefront.CONFIG_NAME = VALUE;
  
  // Apply design configs
  Ecwid.refreshConfig && Ecwid.refreshConfig();
</script>

General store design settings

Config name	Type	Description
show_signin_link	boolean	Visibility of the sign in link for customers: set true to show the element or false to hide it.
show_breadcrumbs	boolean	Visibility of the breadcrumbs: set true to show the element or false to hide it.
breadcrumbs_have_home_item	boolean	Visibility of the home page link in breadcrumbs: set true to show the element or false to hide it.
breadcrumbs_home_url	string	Set the URL to the home link in breadcrumbs. Empty by default.
breadcrumbs_separator	string	Defines breadcrumbs separator. Available values: any string. For example: / getsStore / SubCategory / SubSubCategory -> getsStore -> SubCategory -> SubSubCategory
product_list_show_sort_viewas_options	boolean	Visibility of the 'View as' and 'Sort by' options for category pages: set true to show the element or false to hide it.
show_footer_menu	boolean	Visibility of the footer menu: set true to show the element or false to hide it.
show_sku	boolean	Visibility 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_categories	boolean	Visibility of the category grid on the home page: set true to show the element or false to hide it.

Category and search pages

Config name	Type	Description
enable_catalog_on_one_page	boolean	Defines 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_list	boolean	Defines if all categories have the same number of cards in a row: set true to enable or false to disable it.
product_list_title_behavior	string	Defines display mode of product title: "SHOW", "HIDE", "SHOW_ON_HOVER".
product_list_sku_behavior	string	Defines display mode of product SKU: "SHOW", "HIDE", "SHOW_ON_HOVER".
product_list_price_behavior	string	Defines display mode of product price: "SHOW", "HIDE", "SHOW_ON_HOVER".
product_list_subtitles_behavior	string	Defines display mode of product subtitle: "SHOW", "HIDE", "SHOW_ON_HOVER".
product_list_buybutton_behavior	string	Defines 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_frame	boolean	Visibility of the border for product cards: set true to show the element or false to hide it.
product_list_product_info_layout	string	Defines alignment for SKU, price, and name in product cards. Available values: "CENTER", "LEFT", "JUSTIFY", "RIGHT".
product_list_category_title_behavior	string	Defines 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_images	boolean	Visibility of the product images on category pages: set true to show the element or false to hide it.
product_filters_visible_on_catalog_pages	boolean	Visibility of the product filters section on category pages.
product_filters_position_on_catalog_pages	string	Defines alignment for product filters on category pages. Available values: "left" (default), "right".
product_filters_position_search_page	string	Defines alignment for product filters on search pages. available values: "left" (default), "right".
product_filters_opened_by_default_on_catalog_pages	boolean	Defines if the product filters section is opened by default on category pages.
enable_catalog_seamless_product_list_view	boolean	Defines category view setting. Available values: true - matches with the "Expand categories" value, false - matches with the "Collapse categories".

Product pages

Config name	Type	Description
product_details_layout	string	Defines 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_breadcrumbs	boolean	Visibility of the breadcrumbs on product pages: set true to show the element or false to hide it.
product_details_show_product_name	boolean	Visibility of the product name: set true to show the element or false to hide it.
product_details_show_product_sku	boolean	Visibility of the product SKU: set true to show the element or false to hide it.
product_details_show_product_price	boolean	Visibility of the product price: set true to show the element or false to hide it.
product_details_show_sale_price	boolean	Visibility of the product sale price: set true to show the element or false to hide it.
product_details_show_price_per_unit	boolean	Visibility of the product price per unit: set true to show the element or false to hide it.
product_details_show_tax	boolean	Visibility of the product taxes: set true to show the element or false to hide it.
product_details_show_product_options	boolean	Visibility of the product options block: set true to show the element or false to hide it.
product_details_hide_price_modifiers	boolean	Visibility of the price modifiers for product options: set true to show the element or false to hide it.
product_details_show_buy_button	boolean	Visibility of the buy button on product pages: set true to show the element or false to hide it.
product_details_show_qty	boolean	Visibility of the "quantity" field on product pages: set true to show the element or false to hide it.
product_details_show_attributes	boolean	Visibility of the product attributes: set true to show the element or false to hide it.
product_details_show_weight	boolean	Visibility of the product weight: set true to show the element or false to hide it.
product_details_show_number_of_items_in_stock	boolean	Visibility of the items in stock on product pages: set true to show the element or false to hide it.
product_details_show_in_stock_label	boolean	Visibility of the 'In stock' label on product pages: set true to show the element or false to hide it.
product_details_show_wholesale_prices	boolean	Visibility of the wholesale prices: set true to show the element or false to hide it.
product_details_show_product_description	boolean	Visibility of the product description: set true to show the element or false to hide it.
product_details_show_save_for_later	boolean	Visibility of the 'Save for Later' block on product pages: set true to show the element or false to hide it.
product_details_show_share_buttons	boolean	Visibility of the share buttons block: set true to show the element or false to hide it.
product_details_show_facebook_share_button	boolean	Visibility of the Facebook share button: set true to show the element or false to hide it.
product_details_show_pinterest_share_button	boolean	Visibility of the Pinterest share button: set true to show the element or false to hide it.
product_details_show_twitter_share_button	boolean	Visibility of the Twitter share button: set true to show the element or false to hide it.
product_details_show_vk_share_button	boolean	Visibility of the VKontakte share button: set true to show the element or false to hide it.
product_details_image_carousel	boolean	Visibility of the gallery images: set true to show the element or false to hide it.
product_details_additional_images_has_shadow	boolean	Visibility of the shadow for gallery images: set true to show the element or false to hide it.
product_details_show_subtitle	boolean	Visibility of product subtitles: set true to show the element or false to hide it.
product_details_show_navigation_arrows	boolean	Visibility of image navigation arrows on product pages: set true to show the element or false to hide it.
product_details_show_product_photo_zoom	boolean	Defines availability of image hover zoom on product pages: set true to enable or false to disable.
product_details_show_product_name_always_first_on_mobile	boolean	Defines if the product name is always on top on mobile: set true to enable or false to disable.
product_details_cut_product_description_in_sidebar	boolean	Defines 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_sidebar	boolean	Defines 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_sidebar	boolean	Defines 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_layout	boolean	Defines 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_click	boolean	Visibility of gallery images on fullscreen image preview: set true to show the element or false to hide it.
product_details_thumbnails_aspect_ratio	boolean	Defines image aspect ratio for gallery thumbnails. Available values: "AUTO", "PORTRAIT_0667", "PORTRAIT_075", "SQUARE_1", "LANDSCAPE_1333", "LANDSCAPE_15".
product_details_show_breadcrumbs_position	boolean	Defines the position of breadcrumbs on product pages. Available values: PRODUCT_DETAILS_SIDEBAR, NAVIGATION_CONTAINER.
product_details_show_image_alt_text_as_visible_description	boolean	Defines if image alt text shows under gallery images at the storefront. Available values: true, false (default).

Checkout pages

Config name	Type	Description
shopping_cart_show_qty_inputs	boolean	Visibility of the "quantity" field on the checkout pages: set true to show the element or false to hide it.
shopping_cart_show_sku	boolean	Visibility of the item SKU on checkout pages: set true to show the element or false to hide it.
shopping_cart_show_weight	boolean	Visibility of the item weight on checkout pages: set true to show the element or false to hide it.
checkout_show_state_input	boolean	Visibility of the state field in checkout address forms: set true to show the element or false to hide it.
checkout_show_address_line_2	boolean	Visibility 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_desktop	boolean	Defines 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_mobile	boolean	Defines 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_form	boolean	Defines 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 settings:

Name	Type	Description
color-background	string (HEX and RGBA color)	Background color for storefront and small buttons ("Clear bag", "Apply", etc.).
color-foreground	string (HEX and RGBA color)	Color of all texts.
color-link	string (HEX and RGBA color)	Color for all links (breadcrumbs, "Sign In", "Favourites", etc.).
color-button	string (HEX and RGBA color)	Color for main buttons ("Add to bag", "Checkout", etc.) and small buttons on mouse hover ("Clear bag", "Apply", etc.).
color-price	string (HEX and RGBA color)	Color for product prices.
gallery.use_exact_colors	boolean	If true, background color for gallery images will match color-foreground setting. Default value is false.

Storefront labels

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

Use an integrated free tool for searching and changing text labels without coding – Storefront Label Editor. Once you find a label with the app, you can apply text changes within the app or with your JavaScript/HTML code. The code aproach is recommended 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>