Change store layout

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: https://gist.github.com/riq363/13730a82dbee20bb464daf0713ca1997

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

<div> 
  <script type='text/javascript' src='https://app.ecwid.com/script.js?1003'></script>
  <script type='text/javascript'> xProductBrowser("defaultCategoryId=20671017"); </script> 
</div>

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>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.CONFIG_NAME = VALUE; 
  Ecwid.refreshConfig();
</script>

Hide sign in link example

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.show_signin_link = false; // hides the sign in link
  Ecwid.refreshConfig();
</script>

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.