Alligning products in stadard Wrap eCom

I dont know yet if we would implement this as the default design for the product lists. But here is a simple way to change it in the template.

First locate the list template file in the Dwsimple folder: eCom -> ProductList -> Includes -> ProductListRender.cshtml And the replace the existing code block with this, or replace the lines marked with blue.

<div class="listproductright">
<a href="@GroupLink" title="@Name">
                       <figure style="" class="productfigure">
   <img alt="" src="/Admin/Public/Getimage.ashx?width=300&height=200&compression=85&Crop=7&image=@Image" class="img-responsive img-center">
        </figure>
    </a>
</div>
<div class="extracolumn">
<h2 class="product-title"><a href="@GroupLink">@WrapMethods.Truncate(product.GetString(@Name, 20)</a></h2>
<div style="shortproductdescription">
                       <p>@WrapMethods.Truncate(product.GetString("Ecom:Product.ShortDescription"), 30)</p>
                   </div>
                   <div style="display: none !important" class="longproductdescription">
                       <p class="pull-left" style="text-align: left !important">@WrapMethods.Truncate(product.GetString("Ecom:Product.ShortDescription"), 180)</p>
                   </div>
   </div>

The key is to get the image to crop equaly andmake the text to fit with a shorter length.

Developer forum

Alligning products in stadard Wrap eCom

Replies