Most Popular Products

Industries

  • Fashion, Bicycles
  • Computers & Electronics
  • Fitness & Supplements
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Gifts
  • Toys & Games
  • Jewellery & Accessories
  • Animal & Pet Care
  • Arts & Crafts
  • Events & Party Supplies
  • Food & Beverages

Wireframe

Most Popular Products

Coding Instructions

Just paste this code where most popular products is to be loaded, adjusting limit as necessary.

[%list type:'product' template:'' sort:'popular' limit:'4'%]
     [%param *header%]
          <h3>Popular Products</h3>
          <div class="row">
     [%/param%]
     [%param *footer%]
          </div>
     [%/param%]
[%/list%]

You can swap out the sort value with 'top_sellers', 'trending' or 'new_arrivals' top better suit your needs.

Create a new product list template

Create a new template under /assets/themes/THEME-NAME/templates/list/product called "template.html", and copy the same code from the following template: /assets/themes/THEME-NAME/templates/thumb/product/template.html.

Note: The [%list%] is a new function that replaces many other Neto B@SE functions such as [%thumb_list%], [%content_menu%] and many other functions. While the [%thumb_list%] function takes it's body template from the thumbs directory, the [%list%] function takes it's body template from the list directory, which isn't in a theme directoy by default. If you want the exact templates from your thumbs directory then you could copy /assets/themes/THEME-NAME/templates/thumb/product/*.html into /assets/themes/THEME-NAME/templates/list/product.

This will use the default product list template: list/product/template.html:

<article class="wrapper-thumbnail col-xs-8 col-sm-6 col-md-4 col-lg-3" role="article" aria-label="Product Thumbnail">
    <div class="thumbnail" itemscope itemtype="http://schema.org/Product">
        <meta itemprop="brand" content="[@brand@]"/>
        <a href="[%url type:'item' id:'[@sku@]' /%]" class="thumbnail-image">
            <img src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%]" class="product-image" alt="[@model@]" rel="itmimg[@SKU@]">
        </a>
        <div class="caption">
            <h3 itemprop="name"><a href="[%url type:'item' id:'[@sku@]' /%]">[%format type:'text' truemaxlength:'50' rmhtml:'1'%][@model@][%/FORMAT%]</a></h3>
            <p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer" aria-label="[@model@] price">
                [%if [@inpromo@]%]
                    Now [%if [@has_child@]%]from [%/if%]
                    <meta itemprop="priceValidUntil" content="[%format type:'date' format:'#Y-#M-#d'%][@promo_end@][%END format%]"/>
                    <span itemprop="price" content="[@promo_price@]">[%format type:'currency'%][@promo_price@][%/format%]</span>
                [%else%]
                    [%if [@has_child@]%]From [%/if%]
                    <span itemprop="price" content="[@store_price@]">[%format type:'currency'%][@store_price@][%/format%]</span>
                [%/if%]
                <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
            </p>
            [%tracking_code type:'Thumbnails' /%]
            <!-- Purchase Logic -->
            <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="[%if [@min_qty@] > 0%][@min_qty@][%else%]1[%/if%]" class="input-tiny">
                [%if [@extra@] or [@has_child@] or [@editable_bundle@]%]
                    <a href="[%url type:'item' id:'[@sku@]' /%]" title="View [@model@] 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 [@model@] 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 [@model@] 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 [@model@] 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 type:'item' id:'[@sku@]' /%]" title="Notify Me When [@model@] Is Back In Stock" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Out Of Stock</a>
                [%/if%]
            </form>
            <!-- /Purchase Logic -->
        </div>
        <div class="savings-container">
            [%if [@inpromo@]%]
                <span class="label label-danger">On Sale</span>
            [%/if%]
            [%if [@save@] > 0 AND ![@has_child@] %]
                <span class="label label-warning">
                [%format type:'percent'%][@save@][%/format%] OFF</span>
            [%/if%]
            [%if [@save@] > 0%]
                <span class="label label-default">RRP [%format type:'currency'%][@retail@][%/format%]</span>
            [%/if%]
        </div>
    </div>
</article>

Was this article useful?

Be notified when this page is updated. Optional.