Changing format of product boxes on homepage (coffee skin)

[JamesV]

Hi,

I was wondering if anyone knew where I could find the code to change the format of the product preview boxes on the front page?

By which I mean the boxes shown in the shot below, I want to change it from being 3 boxes wide to 2 boxes wide in this instance.

Thanks,

James

[Wayne]

Hi James,

You can change this in the "XMPie\uStore\App\CustomerApp\Images\[Coffee Skin]\app\html-templates\group-products.html" file

You can add a filter to limit the number of Random products by using limitTo: 2 and change the columns

for example change this -

<a class="col-lg-4 col-md-4 text-center product-box"

                   href="{{product.Url}}"

                   role="button"

                   ng-repeat="product in data.randomProducts">

to this -

<a class="col-lg-6 col-md-6 text-center product-box"

                   href="{{product.Url}}"

                   role="button"

                   ng-repeat="product in data.randomProducts | limitTo: 2 | orderBy:'Name'"">

Regards,

Wayne

[JamesV]

Hi Wayne, that's great thank you, so how would I now make those boxes fill the available space, i.e. 2 boxes taking up the same space the previous 3 did?

[Wayne]

Hi James,

As the page uses a bootstrap grid changing the columns should give you two columns across the page

<a class="col-lg-6 col-md-6 text-center product-box"

                   href="{{product.Url}}"

                   role="button"

                   ng-repeat="product in data.randomProducts | limitTo: 2 | orderBy:'Name'"">

Regards,

Wayne