I am sure you have seen this problem before

in other words, some time ago we found out the carousel which could be implemented by default in every Nosto account was faulty in its code - whereas "faulty" means that, due to some JS errors, the carousel won't load properly therefore would stack vertically, as per the image above.

The problem

The issues present in the carousel's script were:

use of arrow functions, not supported by any version of IE
the absence of a listener to start loading the carousel only when the DOM was ready or, at least, interactive

These two problems, mixed together, would make the carousel failing its loading in most of the cases.

The solution

We have fixed this issue in mid September, which means that all those carousels which have been generated by our "Template gallery" after this date are working just fine, but there are still bunch of malfunctioning babes out there.
The faulty code was this one:

<script type="text/javascript">
    function nostoBestSellerSiema() {
      var nostoBestSellers = _targetWindow.document.querySelector('#$divId .nosto-list'),
          productSize = $products.size(),
          perPage = $!props.display.productsPerRow,
          nostoSiemaPrev = _targetWindow.document.querySelector('#$divId .nosto-prev'),
          nostoSiemaNext = _targetWindow.document.querySelector('#$divId .nosto-next');

      const nostoSiema = new Siema({
        selector: nostoBestSellers,
        perPage: {
          0: 2,
          $secondbreakpoint: 3,
          $firstbreakpoint: perPage
        },
        loop: true
      });

      nostoSiemaPrev.addEventListener('click', () => nostoSiema.prev());
      nostoSiemaNext.addEventListener('click', () => nostoSiema.next());

      setInterval(() => nostoSiema.next(), 1500);
    }

    nostoBestSellerSiema();
</script>

and the new, well working script looks like this:

<script type="text/javascript">
    function nostoBestSellerSiema() {
      var nostoBestSellers = _targetWindow.document.querySelector('#$divId .nosto-list'),
          productSize = $products.size(),
          perPage = $!props.display.productsPerRow,
          nostoSiemaPrev = _targetWindow.document.querySelector('#$divId .nosto-prev'),
          nostoSiemaNext = _targetWindow.document.querySelector('#$divId .nosto-next');

      var nostoSiema = new Siema({
        selector: nostoBestSellers,
        perPage: {
          0: 2,
          $secondbreakpoint: 3,
          $firstbreakpoint: perPage
        },
        loop: true
      });

      nostoSiemaPrev.addEventListener('click', function() {
        nostoSiema.prev();
      });
      nostoSiemaNext.addEventListener('click', function() {
        nostoSiema.next();
      });

      setInterval(function() {
          nostoSiema.next();
        },
        1500
      );
    }
    _targetWindow.document.onreadystatechange = function () {
      if (_targetWindow.document.readyState === "interactive") {
        nostoBestSellerSiema();
      }
    };

</script>

Dos and don'ts

Everything you have to do is to copy the working code and paste it on top of the faulty one (deleting that, of course).

N.B.

the carousel's library, which looks like this:

<script type="text/javascript" src="https://d1cocw0250tpxv.cloudfront.net/siema/siema-nosto.min.js"></script>

should not be touched!

Everything you don't have to do is to hesitate to contact our Support in case after this you will still be experiencing some problems.

Also don't be afraid to put your hands on the code: most likely you are going to do it just fine and, in case you will make something explode or produce black smoke, we will fix it for you!