Clean Ecwid Horizontal Categories for your Website

Clean Ecwid Horizontal Categories For Your Ecwid Store on Any Site

What Are Ecwid Horizontal Categories?

Ecwid Horizontal categories allow you to display your categories without images or titles. A simple piece of code will create a horizontal menu in your Ecwid store with sub-menus all in text format. It is a clean, mobile responsive way to display your Eciwd categories.

How to Setup Ecwid Horizontal Categories

To display horizontal categories on your website, follow the steps below:

  1. In your Ecwid backend 
  2. Go to Design > Scroll down to CSS Theme
  3. Copy the CSS Code below
  4. Paste it to your theme
  5. Save and activate your theme
  6. Refresh your website and browser cookies if necessary

If you are unsure of these steps, feel free to refer to my Ecwid CSS guide that explains everything you need to know about Ecwid CSS and how to fully design and customize your Ecwid store.

Ecwid Horizontal Category Code

Here is the new Ecwid CCS code to display horizontal categories on your website:

.horizontal-desktop

.horizontal-menu {
position: fixed;
top: 0;
left: 0;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 5px;
margin-top: 5px;
width: 560px;
}

.ecwid-productBrowser {
margin-top: 38px !important;
}

.ecwid-productBrowser-head {
margin-bottom: 30px !important;
}

Use this code to display the categories at the top of your store on mobile and desktop:

#main { display: flex; flex-direction: column; } #custom-html { order: 1 } #ProductBrowser-1 { order: 2 }

Need More Customization Codes?

If you are having trouble finding Ecwid CSS codes and you would like to further customize your store,  get the Ecwid CSS eBook below. It contains over 110 Ecwid CSS codes to customize your Ecwid store.

ECWID CSS CODES

Save time searching for codes in the Ecwid forums and support site! Everything you need is all in one place in this eBook. Learn how to Change, Add, Remove and Edit Items to design your ideal Ecwid eCommerce store in seconds. 

Want to learn even more about Ecwid? Check out my Ecwid eCommerce Power Course that contains 60 concise and up to date tutorial videos demonstrating how to build your Ecwid store like a pro and generate sales starting day one!

Setup Your Store in One Day

Latest Blog Articles

Ecwid
Daniella.io

WordPress vs Wix for Ecwid eCommerce Users

Both Wix and WordPress are popular site builders, and Ecwid users can use either of these options to create their business-oriented sites. However, despite being in the same niche, there is still a world of difference between WordPress and Wix. But what are these differences? More importantly, which site builder is the better option for you as an Ecwid user? Take the personalized quiz and find out!

Read More »

Subscribe to my YouTube channel to get notified of new content.

By #1 Trusted Ecwid eCommerce Expert Daniella.io

My Mission is to Help You Start & Grow Your Online Business. I remember when I started selling online – I had so many questions! Where do I start? What platform is the best for my needs? How do I setup shipping and make sure I get paid? 

With a background in teaching and over 10 years eCommerce experience, it is now my mission to share these answers with you, and more! 

Every week I release Ecwid tutorial videos with insider tips, techniques, short-cuts and hard-won lessons my clients and I have experienced when it comes to building an online store with Ecwid.