View Single Post
  #3  
Old 10-10-2019, 03:24 PM
Elsa Z.'s Avatar
Elsa Z. Elsa Z. is offline
Ecwid Team
 
Join Date: Dec 2018
Posts: 28
Default

Hi there,

This is Elsa from Ecwid team. I'm sorry that we missed your ticket in the Forum thread. I'll be glad to assist you now!


If you want to edit the category thumbnails and show 5 categories per row, then please follow the steps:

1. Switch the size of the thumbnails to medium in your design settings.
2. Go to the Ecwid Control Panel > Design> click on Edit theme > Add the CSS code > click on Activate and Save.

HTML Code:
@mixin grid-category-settings($count-per-row-list, $max-count-per-row: false) {
    $i: 1;

    @each $count-per-row in $count-per-row-list {

        &:nth-child(n+#{$i}) {

            width: 100% / $count-per-row;

            @if ($max-count-per-row) {

                $scale: $max-count-per-row / $count-per-row;

                $w: min(100%, 100% / $scale * 1.2);

                .grid-category__spacer {

                    $d: 16px * ($scale - 1) / $scale;

                    width: calc(#{$w} - #{$d});

                }

                .grid-category__image-spacer {

                    $d: 16px * ($scale - 1) / $scale;

                    width: calc(#{$w} - #{$d});

                }

            }

        }

        $i: $i + $count-per-row;

    }

}

.ec-size .ec-store .ec-grid .grid__categories {

    &[data-cols="1"] {

        .grid-category {

            @include grid-category-settings(2, 2);

        }

    }

    @for $i from 2 through 10 {

        &[data-cols="#{$i}"] .grid-category {

            @include grid-category-settings($i, $i);

        }

    }

    &.grid__categories--large-items {

        &[data-cols="1"] {

            justify-content: center;

            .grid-category {

                max-width: 480px;

                @include grid-category-settings(1, 1);

            }

        }

    }

}

.ec-size .ec-store .ec-grid .grid__categories {

    justify-content: left;

}

.ec-size .ec-store .ec-grid .grid__categories[data-cols="4"] .grid-category:nth-child(n+1) {

    width: 20%;

}

As it's done 5 categories will be shown per row. See the screenshot in my test store: https://ecwid.d.pr/TTixN9

If you have any questions, please let me know.