Changing design of your Ecwid Store

Last updated

We prepared some ready CSS solutions that can help you to change a design of your Ecwid Store. The CSS codes are developed for the new Product List design.

If you are not sure whether you have the new Product list design or not, you can visit our demo store and check it. If your storefront and product pages look different, please contact us and we will help you to enable the new design for your Ecwid store.
 

In this article:

  1. Place the “Buy Now” buttons on the same level
  2. Add the “Sort by” option
  3. Place the icons “Track orders”, “Favorites”, “Shopping bag”, “Sign In” on the top of a storefront page
  4. Disable zoom effect for category and product thumbnails
  5. Disable hover effect for category titles
  6. Center products in categories
  7. The same number of categories per row
  8. Adjust product gallery images to a screen size on mobiles
  9. Open “Show More” section on product pages
  10. “Related Products” on the top of a page
Before you get started, familiarize yourself with how to add the CSS codes to your store theme.

Place the “Buy Now” buttons on the same level

By default, the Buy Now buttons are not aligned on the storefront page. This happens when the product titles are not of equal length. If you want to align the Buy Now buttons (in a grid view), you can use the CSS code below:

Buy Now buttons.png

  

.grid-product__wrap {
  display: flex;
}
.grid-product__price {
    flex: 1 0 auto;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

Add the “Sort by” option

Use the CSS code below to add the Sort By option on your storefront page and category pages to allow your store visitors to sort the products:

Sort By.gif


.ec-size .ec-store .ec-store__category-page--0 .grid__sort {
    display: block;
}

Place the icons “Track orders”, “Favorites”, “Shopping bag”, “Sign In” on the top of a storefront page

The buttons Track orders, Favorites, Shopping bag, Sign In are located at the bottom of the storefront page by default. If you want to move them to the top of the page, you can use the CSS code below:

Icons.png


.ec-size .ec-store__category-page .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__category-page .ec-grid {
order: 2;
}
.ec-size .ec-store__category-page .ec-pager {
order: 3;
}
.ec-size .ec-store__category-page .ec-footer {
order: 1;
}

Disable zoom effect for category and product thumbnails

When you put a mouse cursor on a category or product thumbnail, you see the zoom effect. This feature is enabled for all Ecwid stores by default. If you want to disable it for your online store, you can use the CSS codes below:

For category thumbnails:


.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
    transform: none;
}

For product thumbnails:


.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
    transform: none;
} 

Disable hover effect for category titles

  

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
    transform: none;
} 

Center products in categories

Use the CSS code below to center the products on category pages:


.ec-size .ec-store .grid__products {
    @for $i from 2 through 10 {
        $k: $i - 1;
        @for $j from 1 through $k {
            &[data-cols="#{$i}"][data-items="#{$j}"] {
                justify-content: center;
            }
        }
    }
}

The same number of categories per row

Use the CSS code below to display the same number of categories per row:


@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;
}

Adjust product gallery images to a screen size on mobiles

  

.ec-size:not(.ec-size--xs) .ec-store .details-gallery__thumb .details-gallery__thumb-img {
    width: 100vw;
    background-size: contain;
} 

Open “Show More” section on product pages

By default, the Show More option is enabled for all stores with the new Product List design. It allows to keep a compact view of product pages even with the long product descriptions. However, you can also disable it if you wish with the help of the CSS code below:


.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--xl .ec-store .product-details__product-description::after {
display: none;
}
.ec-size--s.ec-size.ec-size--xl .ec-store .product-details-module__content--collapsed ~ .product-details-module__btn-more {
display: none;
} 

“Related Products” on the top of a page

The Related Products are shown on the bottom of the product pages by default. If you want to move them to the top of the product pages, you can use the CSS code below:

Related Products.png

  

.ec-size .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__content-wrapper .product-details {
order: 2;
}
.ec-size .ec-store__content-wrapper .ec-footer {
order: 3;
}
.ec-store__content-wrapper .related_products {
order: 1;
} 
Back to top
Has the article answered your question?

Awesome! Thanks for your feedback!

Please send us that question. We will be happy to help by email.

Send a message