Add a block over the top of the product browser

Sometimes you may need to add a heading or other HTML in the space at the the top of the product browser area.

One way to do this is with some javascript like this example.

Add some HTML at the top of the product browser

<script>
Ecwid.OnPageLoaded.add(function(page) {
  title_elem = document.getElementById('ecwid-title-elem');
  if (title_elem === null){ // don't add more than once when user navigates the store pages
    ecwid_prod_browser = document.getElementById('ProductBrowser-1');
    title_elem = document.createElement('div');
    title_elem.id = 'ecwid-title-elem';
    title_elem.style = 'height:30px;margin-bottom:-30px;';
    title_elem.innerHTML = '<h3>My Title</h3>';
    ecwid_prod_browser.insertBefore(title_elem, ecwid_prod_browser.firstChild);
  }
})
</script>
}

The code only adds the block once to avoid duplicating it when the user changes store pages or products.

• Change the innerHTML to whaever you need.
• Adjust the height and margin-bottom if needed. A negative margin-bottom causes the block to overlap the top of the product browser space.