How to remove category icons from the store

Last updated

1. You can hide category icons in your product browser by applying the following code to your CSS theme. You should add the corresponding code to your active CSS theme in your Ecwid Control Panel > Settings > Design. Scroll down to the [Customize the Look of Your Store] section and click the [Create theme] button. Please remember to activate the theme and save the changes after the codes are added.


.ec-store .grid__categories {
display: none;
}

table.ecwid-productBrowser-subcategories-mainTable {
display: none;
}

After you apply it, Ecwid will not show category icons in the product browser at all. So your customers will be able to open categories via the category widget or direct links only.

2. If you want to remove the category icons on the root store page only, apply this code:


div.ecwid-productBrowser-CategoryPage-0 table.ecwid-productBrowser-subcategories-mainTable {
display: none;
}

div.ecwid-productBrowser-CategoryPage-0 .ec-store .grid__categories {
display: none;
}

You can use this code to customize the welcome page of your store, e.g. hide the category icons on the store front home page and add the description to it. Since the description can contain HTML code, images, video, etc, your welcome store page can look very different.

3. If you want to remove icons, but still show category names, apply this code:


table.ecwid-productBrowser-subcategories-mainTable img {
   display: none; 
}

a.grid-category__image {
  display: none;
}

4. If your categories have no category image, you can hide the gift icon by using the following code:


div.ecwid-noimage, div.ecwid-noimage-small { 
display:none;
} 
Back to top
Was this article helpful? 9 out of 19 found this helpful