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

 

 

 

Ecwid Payment Gateways (Paypal)

HOW DO YOU SETUP ECWID PAYMENT GATEWAYS LIKE PAYPAL OR SQUARE? Video Transcript: So now we are going to setup payment ...
Read More

Integrate your Ecwid Store to Any Website

HOW CAN I INTEGRATE MY ECWID STORE TO ANY WEBSITE? Video Transcript: Hi this is Daniella from Daniella.io and today I'm ...
Read More

Ecwid to WordPress Integration

I WOULD LIKE TO KNOW HOW TO INTEGRATE MY ECWID STORE TO WORDPRESS. Video Transcript: Hi this is Daniella from ...
Read More

Ecwid to Weebly Integration

I WOULD LIKE TO KNOW HOW TO INTEGRATE MY ECWID STORE TO Weebly. https://youtu.be/7193RdnEwKs Video Transcript Hi this is Daniella from ...
Read More

Ecwid to Wix Integration

I would like to know how to integrate my Ecwid store to Wix? https://youtu.be/ttOwppM_b6E Video Transcript Hi this is Daniella ...
Read More

Clean Ecwid Horizontal Categories for your Website

I would like to display horizontal categories in ecwid - how can I do it? https://youtu.be/FvB6q6fTb_s Video Transcript Ok so I ...
Read More

Top 5 Ecommerce Analytics Tools

https://youtu.be/W7RaAPh0Kyg Video Transcript: Hi, this is Daniella from Daniella.io. The first thing you should do after your website is ready ...
Read More

Top 5 A/B Testing Tools

https://youtu.be/KEmNiHOJdzQ Video Transcript Hi, this is Daniella from Daniella.io, providing entrepreneurs with their online independance. A/B testing your website is ...
Read More
Dabuttonfactory tutorial

Create Buttons for Your Website – DaButtonFactory

"How can I quickly create Call to Action button for my website?" https://youtu.be/aTRpfFzBCLY Video dialogue: Hi, this is Daniella from ...
Read More