Change listing styles

Notice

This tutorial assumes that you already created custom css to add additional css styles

If you did not — go ahead, it will take 5 minutes.

1. Columns count
2. Product listing styles
3. Squama mixin
4. Remove squama styles

Columns count

Products listing columns count is controlled by less variables:

Open _argento_custom.less file and add the following content:

@product-grid-items-per-row-layout-2-screen-l: 5;
@product-grid-items-per-row-layout-3-screen-l: 4;

Product listing styles

Squama mixin

Squama listing mixin is used on Argento Essence theme. It provides following variables:

Let’s make items shorter, and increase hover effect:

Open _argento_custom.less file and add the following content:

@argento-listing-squama__height: 300px;
@argento-listing-squama__hover__enlargement: 15px;

Remove squama styles

All Argento listing mixins can be modified or cancelled with appropriate variables or reset mixin:

// remove squama styles completely
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-products,
    .block.widget {
        .products-grid .product-items:not(.slick-slider) .product-item {
            .argento-listing-squama-reset();
        }
    }
}