More From This Category

Add a small "More from this category" product gallery to show customers other similar items that they might like.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
• The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Paste the below where required, changing the limit & template paramaters where necessary.

[%thumb_list type:'products' filter_category:'[@content_id@]' filter_exsku1:'[@sku@]' limit:'4'%]
    [%param *header%]
        <h4>More from this category</h4>
        <div class="row">
    [%/param%]
    [%param *body%]
        <div class="col-sm-6">
            <div class="thumbnail">
                <div class="row">
                    <div class="col-sm-12 col-md-5">
                        <a href="[@URL@]" title="[@model@]">
                            <img src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%ntheme_asset%]img/default_product.gif[%/ntheme_asset%][%/param%][%/asset_url%]" class="product-image img-responsive" alt="[@model@]" rel="itmimg[@SKU@]">
                        </a>
                        [%if [@inpromo@]%]
                            <div class="savings-container"><span class="label label-danger">On Sale</span></div>
                        [%/if%]
                    </div>
                    <div class="col-sm-12 col-md-7">
                        <h5 class="nSmallThumbTitle">
                            <a href="[@url@]">[@model@]</a>
                        </h5>
                        <p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                            [%if [@inpromo@]%]
                                <strong>Now [%if [@has_child@]%]from&nbps;[%/if%]</strong>
                                <span itemprop="price">[%format type:'currency'%][@promo_price@][%/format%]</span>
                            [%else%]
                                [%if [@has_child@]%]From [%/if%]
                                <span itemprop="price">[%format type:'currency'%][@store_price@][%/format%]</span>
                            [%/if%]
                            <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
                        </p>
                        <form class="form-inline buying-options">
                            <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
                            <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
                            <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
                            <input type="hidden" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="1" class="input-tiny">
                            [%if [@extra@] or [@has_child@] or [@editable_bundle@]%]
                            <a href="[@URL@]" title="Buying Options" class="btn btn-primary btn-block btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">See Options</a>
                            [%elseif [@store_quantity@] > 0 AND [@preorder@] %]
                            <button type="button" title="Pre-Order Now!" class="addtocart btn btn-warning btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Pre-Order</button>
                            [%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
                            <button type="button" title="Add to Cart" class="addtocart btn-primary btn btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Add to Cart</button>
                            [%elseif [@store_quantity@] < 1 AND [@config:allow_nostock_checkout@] %]
                            <button type="button" title="Add to Cart" class="addtocart btn-primary btn btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Backorder</button>
                            [%else%]
                            <a class="notify_popup btn btn-default btn-block btn-loads" href="[@url@]" title="Notify Me When Back In Stock" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Out Of Stock</a>
                            [%/if%]
                        </form>
                    </div>
                </div>
            </div>
        </div>
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/thumb_list%]

To maintain consistent heights for your thumbnails, add this CSS:

.nSmallThumbTitle {
    height:46px;
    overflow:hidden;
}