Skip to content

Featured products on home

Show a "featured products" category using the product browser widget.

In Ecwid, create a "featured products" category. If this needs to be hidden from the navigation, move the "featured products" category under another category that is disabled, this will hide it. Now add the featured products to the "featured products" category. Products can be in more than one category.

Set shop page and load Ecwid

On the home page, above any other Ecwid widgets you may have, add this code:

<script>
var ecwid_ProductBrowserURL = "http://www.my.shop.page/";
</script>
<script type='text/javascript' src='https://app.ecwid.com/script.js?1111111'></script>
  • http://www.my.shop.page/ is the url of your shop page
  • 1111111 is the store id.

This tells Ecwid the url of your shop page so that the product links go to that page instead of loading in the home page. Change the url to your shop page (probably a test url while in development, but remember to update it when you go live). Note this code needs to be before any other Ecwid code that may be on the home page.

On the home page, where you want the featured products to show, add this code:

<div>
<style>
/* hide the stuff at the top of the product browser that we don't want */
.ecwid-productBrowser-auth-mini,
.ecwid-productBrowser-auth-mini-horizontal,
.ecwid-productBrowser-head,
.ecwid-productBrowser-categoryPath,
.ecwid-results-topPanel{ display:none!important;}
</style>
<script type='text/javascript'>
xProductBrowser("categoriesPerRow=5","views=grid(5,5) list(10) table(20)",
  "categoryView=grid","searchView=list","style=","responsive=yes",
  "defaultCategoryId=2222222");
</script>
</div> 
  • 2222222 is the category id.

This adds the product browser widget and tells it to display category 2222222. Change that number to the correct category id for your featured products category (how to get category id). The code hides all the stuff at the top of the product browser that you don't want. The "views=grid(5,5) should show 5 products in a row if there is space.

Issues

Setting the ecwid_ProductBrowserURL should cuase Ecwid to show all products on that page, but sometimes it doesn't seem to work, and products get shown on the same page as your featured products were listed. When this happens, the product name, and other things at the top of the Product Browser widget are hidden.

To fix this, we can add some special script.

Sample script that checks what is being displayed in the product browser, and hides/shows the applicable content.

<script>
/* function to show the product name, breadcrumbs etc. when not showing the featured products category */
Ecwid.OnPageLoaded.add(function(page){
    var pb_auth = document.getElementsByClassName("ecwid-productBrowser-auth-mini")[0];
    var pb_auth_h = document.getElementsByClassName("ecwid-productBrowser-auth-mini-horizontal")[0];
    var pb_head = document.getElementsByClassName("ecwid-productBrowser-head")[0];
    var pb_cat_path = document.getElementsByClassName("ecwid-productBrowser-categoryPath")[0];
    var pb_top_panel = document.getElementsByClassName("ecwid-results-topPanel")[0];
    var show_or_hide = 'display:block!important'; // default is to show the breadcrumbs, name etc.
    if(page.type == 'CATEGORY' && page.categoryId == 2222222){
        // 2222222 is the special featured products category, so hide the breadcrumbs, name etc.
        show_or_hide = 'display:none!important';
    }
    if(typeof(pb_auth) != 'undefined') pb_auth.setAttribute('style', show_or_hide);
    if(typeof(pb_auth_h) != 'undefined') pb_auth_h.setAttribute('style', show_or_hide);
    if(typeof(pb_head) != 'undefined') pb_head.setAttribute('style', show_or_hide);
    if(typeof(pb_cat_path) != 'undefined') pb_cat_path.setAttribute('style', show_or_hide);
    if(typeof(pb_top_panel) != 'undefined') pb_top_panel.setAttribute('style', show_or_hide);
});
</script>

If there are some elements you want to keep hidden, or always show, remove the appropriate lines from the CSS and code as required.