Change store layout

Ecwid integration code provides a number of modifications to the store layout. See the details below.

Add new element for each product in product grid

The latest version of product grid requires specific approach to adding new elements. Check out the example:

How to enable latest version of product listing in your test store

Set default product or category page

Open "Surfboards" category of Ecwid Demo store by default

  <script type='text/javascript' src=''></script>
  <script type='text/javascript'> xProductBrowser("defaultCategoryId=20671017"); </script> 

By default, the storefront widget opens with a list of root category. But you can configure it to show a different category or a particular product when user opens it for the first time.

You can do it by adding either option to the Product Browser integration code:

"defaultCategoryId=%categoryId%" or "defaultProductId=%productId%"

Show or hide storefront elements

Apply new storefront configuration template

<script> = || Object(); = || Object(); = VALUE; 

Hide sign in link example

<script> = || Object(); = || Object(); = false; // hides the sign in link

Using additional configuration code you are able to hide some storefront elements without any CSS rules. These settings will override user preferences set in the Ecwid Control Panel.

Place the codes anywhere on a page where Ecwid integration code is added to apply them.

Config nameTypeDescription
show_signin_linkbooleanHide the sign in link for customers in a store. Possible values: true to show the sign in link, and false to hide it
show_breadcrumbsbooleanHide the storefront breadcrumbs for customers in a store. Possible values: true to show the breadcrumbs, and false to hide them
breadcrumbs_have_home_itembooleanHide the home link in breadcrumbs that leads to the main instant site page. Possible values: true to show the home link, and false to hide it
breadcrumbs_home_urlstringSet the URL to the home link in breadcrumbs. Empty by default
product_list_show_sort_viewas_optionsbooleanHide the options to 'View as' and 'Sort by' products for customers in a store. Possible values: true to show the 'View as' and 'Sort by' options, and false to hide them
show_footer_menubooleanHide or show footer menu with the Bag / Sign in / Favs links is shown in the new storefront
show_skubooleanHide or show the product SKU in the catalog (product list and product details page). Has less priority than 'product_list_sku_behavior'
show_root_categoriesbooleanHide or show the category grid on the storefront page. Possible values: true to show category grid, and false to hide it
enable_page_transitionsbooleanDefines the configuration of the page smooth transitions option. Possible values: true to enable this option, false to disable it.
product_filters_position_search_pagebooleanDefines the position of the filters on the search page. Possible values: LEFT, RIGHT. Default: LEFT.