BigCommerce Marketing Banners Adding Extra Commas

Slightly annoying little bug I found using BigCommerce's Stencil Framework. When you have multiple Marketing banners set to the same location in your theme, the standard way to display them all is just {{{banners.bottom}}} (the newest version of Cornerstone uses {{{limit banners.bottom 1}}} to display one of the banners). The dumb bug is that this outputs all the different Banner HTML as a comma seperated list.

The Issue

if you have three banners set to show in the bottom location of a specific page (in my case, the home page), {{{banners.bottom}}} outputs as:

<<BANNER CONTENT>>
,
<<BANNER CONTENT>>
,
<<BANNER CONTENT>>

The Fix

Instead of just outputting the banners with {{{banners.bottom}}} we're going to iterate through them and output them on their own. Check it out:

{{#each banners.bottom}}
    <div class="banner--bottom">
        {{{this}}}
    </div>
{{/each}}

which would output as:

<div class="banner--bottom">
    <<BANNER CONTENT>>
</div>
<div class="banner--bottom">
    <<BANNER CONTENT>>
</div>
<div class="banner--bottom">
    <<BANNER CONTENT>>
</div>

Ta-Daaa! Clean, comma-free banners. Let me know if this helped you at all.