Custom designs can be created in Yusp, the following way:



Please, see the below example:


The important part is, to have the click event script, the gr_item class, and the gr-item-id attribute in place, as these are used to generate click events, so CTR data will be visible on the Yusp Dashboard.


<meta content='text/html; charset=UTF-8'>
<script type="text/javascript">
    var items = document.getElementsByClassName("item_gr");
    for (var j = 0; j < items.length; j++) {
        items[j].addEventListener("click", function(event) {
            _gravity.push({
                type: "event",
                eventType: "REC_CLICK",
                itemId: this.getAttribute("gr-item-id")
            });
            return true;
        });
    }
</script>
<div class="box special">
    <div class="box-content">
        <div class="box-heading">
            <h2 class="fronth2">Recommended for you</h2>
        </div>
        <br>
        <div class="box-product" style="">
            <#list items as item>
                <#if item.Title??>
                    <div class="item_gr" gr-item-id="${item.itemId}">
                        <div class="image">
                            <a class="gr-track-click" href="${(item.URL)!'missing'}">
                                <div style="height: 168px">
                                    <img src="${(item.Image)!'missing'}" alt="${(item.Title)!'missing'}" style="max-width: 168px; max-height: 168px;" />
                                </div>
                            </a>
                        </div>
                        <div class="name">
                            <h3><a class="gr-track-click" href="${(item.URL)!'missing'}">${(item.Title)!'missing'}</a></h3>
                        </div>
                        <div class="price"><span class="price-new">${(item.Price)!'missing'}</span>
                        </div>
                        <a class="gr-track-click button details" href="${(item.URL)!'missing'}">More</a>
                    </div>
                </#if>
            </#list>
        </div>
    </div>
</div>