Clean Ecwid Horizontal Categories for your Website

 

I would like to display horizontal categories in ecwid – how can I do it?

 

Video Transcript

 

Ok so I am going to do a quick video on how to add horizontal categories to your Ecwid store. This is a question that I had from one of my clients at one point and it might be useful for you if you want to change the way your categories are displayed in Wix.

So we are going to go back into our Wix account and head over to our store page that has Ecwid installed on it. So what you are going to do is click on Settings > Design and you are going to scroll down, all the way down to advanced settings. This is where you can add your HTML.

The HTML that we added here is from Ecwid’s support site, it is the code for the horizontal categories. Scroll down in your control panel and grab your store ID. Copy and paste it right here and Ecwid automatically edits the code for us. We are just going to copy this and then paste it to our advanced settings area in Wix.

If you click next to it, the categories will appear at the bottom of the page. Now that was the issue that my client was having, they were kind of frustrated with it being at the bottom of the page, it doesn’t seem logical, they wanted to get rid of the category pictures and the text for the categories and just wanted to display this kind of menu at the top of the page.

So what we are going to do is go grab the code that I prepared for my client and then go to your Ecwid backend (for this part of the code) and go to Settings > Design > Create CSS theme and just edit the theme you currently have.

If you need to create a new theme just click on New Theme. Name it, paste the code I have given you and Activate it. Now what this does, it is going to hide the subcategories and subcategories. Hit Save, and then Publish and you will see that the categories are now shown at the top of the page with a drop down and that they are nicely padded like they should be. So that is it, it is as easy as that, the code is prepared for you, all you have to do is copy-paste everything and you will have this nice setup.

 

HORIZONTAL CATEGORIES HTML & CSS CODE

 

Get your horizontal category code here

 

Add this code to your Ecwid Backend (CSS Code Template):

.horizontal-desktop .horizontal-menu {
position: fixed;
top: 0;
left: 0;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 5px;
margin-top: 5px;
width: 560px;
}
table.ecwid-productBrowser-subcategories-mainTable {
display: none;
}
div.ecwid-productBrowser-categoryPath {
display: none;
}
.ecwid-productBrowser {
margin-top: 38px !important;
}
.ecwid-productBrowser-head {
margin-bottom: 30px !important;
}

 

Want vertical categories? Get them here!

 

 

 

HAVE A QUESTION?

button

 

 

 

No posts found.