How do I remove the root category and the search box from the top of my ecwid store?

  • 1
  • Question
  • Updated 3 years ago
  • Answered

Many customers find it an eye sore.

Photo of Josh

Josh

  • 4 Posts
  • 1 Reply Like

Posted 3 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Josh,

The "root category" display is part of a function called breadcrumbs. See Ecwid's tutorial: How to remove breadcrumbs. You can also modify the breadcrumbs if you don't want to obliterate it all, (often convenient if your users are coming to your page through multiple sub-category levels).

Similarly the searchbox can be removed according to: How do I remove the search box at the top of product page? topic in Ecwid's forums
(Edited)
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Josh, 

I know you struggled with the code on the forum page Gop linked above but I wanted to see if you have tried this code snippet yet. 

I also wanted to share these steps in order to hide the “Store” link that follows “Category”.

1. Log into your My Yola and click on “Online Store” in the top grey menu bar.
2. Once your Yola Online Store Control Panel has loaded, click on “System Settings”.
3. Click on “Design”. You won’t be able to edit the CSS Theme named “Standard”, but you can edit those you create yourself. Create a new custom theme by copying the default theme. To do this, select the “Standard” theme and click on “Duplicate”.
4. Name your new theme, e.g. “My Theme”.
5. Copy this CSS code: div.ecwid-productBrowser-categoryPath-storeLink, span.ecwid-productBrowser-categoryPath-separator-first { display:none !important; }   
6. Paste the code into the overrides box of your theme (the big box below “Theme Name”).
7. Don’t forget to save your changes.
8. Open your website in the Yola Sitebuilder, refresh the work view by clicking on the round arrow icon in the top right-hand corner, and check the result in Preview.

Now the “Store” link that takes you to the main page of your Online Store won’t display any longer.

Let us know how that goes for you!
(Edited)
Photo of andreakahn1

andreakahn1

  • 42 Posts
  • 3 Reply Likes
Hello. I am wondering the same thing, but also wish to remove the words: category: store (then it repeats the name of my Category which shows above).

Would this bit of code do that whole trick?

I'm wondering if perhaps there is one main area where this kind of information can be clearly organized, tips to help formulate one's site. This kind of thing is unknowable offhand to the average user, and the choices are either to submit a plea for help from an associate or here. This is so time consuming. Would be great to be able to go through a list of such code tips to make adjustments. 

Thank you!
Andrea
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Andrea

Did I understood you correctly that you basically wish to remove the whole breadcrumb menu, starting with "Category > Store > ..."? Please confirm, and I'll find the code for you.
Photo of Josh

Josh

  • 4 Posts
  • 1 Reply Like
I have removed everything, but it still says "Category:" in black writing.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
How to remove the category title
Use this CSS code: 
 
div.ecwid-productBrowser-subcategories-categoryName { display:none; }
 
Photo of Josh

Josh

  • 4 Posts
  • 1 Reply Like

This is the code before I added your code:

div.ecwid-productBrowser-categoryPath-storeLink, 
span.ecwid-productBrowser-categoryPath-separator-first { 
display:none !important; 
    }
div.ecwid-productBrowser-auth { 
display: none;
}


This is the code after I added your code:

div.ecwid-productBrowser-categoryPath-storeLink, 
span.ecwid-productBrowser-categoryPath-separator-first { 
display:none !important; 
    }
div.ecwid-productBrowser-auth { 
display: none;
}
div.ecwid-productBrowser-subcategories-categoryName {
display:none;
}

There is no difference. Everything is removed apart from the black writing saying "category:".

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Josh,

Try this:

span.ecwid-productBrowser-categoryPath-categoryLabel {
display:none;
}
(Edited)
Photo of andreakahn1

andreakahn1

  • 42 Posts
  • 3 Reply Likes
Also, I'd like to remove the "sign in" text as well since it doesn't work for my site.
Thanks again!
Andrea
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
In order to remove the "Sign in" link from your Online Store, please add the following code to your CSS Theme in the Control Panel:
div.ecwid-productBrowser-auth {  
display: none;
}
Photo of andreakahn1

andreakahn1

  • 42 Posts
  • 3 Reply Likes
Hi Stefan + GOP. Thank you for your replies.
Yes, I want all "breadcrumb" features out of my site. I tried the above code from Stefan (for the "sign in"  but it didn't remove anything. 

I will now try the GOP suggestion to remove all.
Will get back shortly to let you know if it works.

Really, I just want my site to look aesthetically cohesive with my design. Maybe "breadcrumbs" could be a more apparent choice/option for each user? It's hard to fumble around for all these small clues when like me, one is not familiar with coding.

Also, I'm realizing that only ONE catergory PER page can be shown to site viewers.
I wish to have a second category, so my choices appear to be: it can become a subcategory (I don't want this) or I will have to have a link on the first page which brings the viewer to the second category (?)

It's hard to ascertain this bit of info up front...I just struggled with it for awhile then realized I could not display more than one category per page (?) 

I'm an artist, rebuilding my existing site. Without comfort or familiarity with coding or "where things are" it is really hard as a user to fumble around. Very frustrating and time consuming. I wish there was a more instructive page that simplifies what codes may be added for various options. A simple directory page of item/code would be great. 

Before contacting the forum I looked at all related tutorials for sitebuilder and did not get my answer. I am not as familiar with the store directions but GOP was helpful with that. I think more focused and concise info would really be a help for all (and would free you up too!)

Thank you very much for your assist, I will get back with the results.
Andrea
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. That's good.

#1: div.ecwid-productBrowser-subcategories-categoryName { display:none; }

#2: http://help.ecwid.com/customer/portal/articles/1085587-how-to-remove-breadcrumbs

#3: div.ecwid-productBrowser-search-SearchPanel {
}
  display: none; 
#4: div.ecwid-productBrowser-auth {
 display: none;
}
table.ecwid-Checkout-blockTitle button, div.ecwid-Checkout-PasswordBlock {
  display:none;
}
div.ecwid-Checkout-blockTitle button.gwt-Button{
 display: none;
}

#5: You can select specific categories to display on specific store pages. This requires a different approach and requires that you edit the embedding code of the Online Store widget. This isn't the same as the Store CSS referred to in the above solutions. I'll include a reference to get your head around it and you're welcome to get back to me if you need more clarification. You need  both your Store ID and your wanted Category ID's:How to get ID of your product or category)

The overview for the workaround is: Default category for product browser
(Edited)
Photo of andreakahn1

andreakahn1

  • 42 Posts
  • 3 Reply Likes
THANK YOU SO MUCH!!!!
I really appreciate you offering all this information, item by item, so clearly.
Andrea
Photo of andreakahn1

andreakahn1

  • 42 Posts
  • 3 Reply Likes
One thing: Everything but #4 worked for me, still seeing the "sort by" box.
Any suggestions?
Thanks.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Thanks Gop for helping with all the code snippets.

I just wanted to take a moment to address the feedback you provided about making these updates more intuitive andreakahn1. We would also like to see more of these options become integrated without requiring code and will happily pass that on to Ecwid, our Online Store provider. In the meantime I have discussed your feedback with our documentation team and we are investigating the best way to bundle all of the information and share it for more advanced users.
Photo of Josh

Josh

  • 4 Posts
  • 1 Reply Like
Thank you very much. That was very helpful and informative. The problem is solved.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Andrea,

Think we're out of sequence :)

You mention : Everything but #4 worked for me, still seeing the "sort by" box.

In fact:
#4 refers to the Sign-in facility. 
#3 is the "search-box" facility. 

May I ask you to confirm which of these isn't working?

Gop.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Andrea,

aah! Think I've found it. Apologies for making a mistake with my inefficient Copy & Paste

Try this for removing the search box: Item #3
 div.ecwid-productBrowser-search-SearchPanel { display: none; 
}
(Edited)
Photo of andreakahn1

andreakahn1

  • 42 Posts
  • 3 Reply Likes
Hi Gop,

Thanks again for your help! It's much appreciated.
Everything is gone now except for the "sort by" drop down, which I do need to remove, as if it is used by a customer it will mess up the order of products which I need to keep intact.

I looked up on the ecwid knowlege base what to do, and it said to put in: 

div.ecwid-results-topPanel-sortByPanel { 
   display:none !important;​}

I did, but nothing happened.
Maybe this code is not correct?

Many thanks!
Andrea
Photo of andreakahn1

andreakahn1

  • 42 Posts
  • 3 Reply Likes
Hi Gop,

Well...tried it again several times and somehow the last time it worked!
Thanks again.
Maybe it just took a few tries?

Cheers,
Andrea
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Andrea,

Great you're using the Ecwid KB for coding solutions. It's a brilliant resource. Another resource are the Ecwid forums which are fully searchable, very accurate and comprehensive.

You may also like to explore FireBug, a free download for FireFox, which allows you to mouse over an element on your site and it displays the associated code. You can then delete this code by a single keystroke to visualise the effect without jeopardising the site. Once you've identified the correct code to delete then you can go into the sitebuilder and apply the correct modification.

There are also very cool enhancements such as displaying your cart in the header (or anywhere) of each page very much like the big e-com sites such as amazon or ebay.
(Edited)
Photo of andreakahn1

andreakahn1

  • 42 Posts
  • 3 Reply Likes
Hi GOP...thanks for the reference on how to apply more than 1 category to my store. I admit I haven't yet tackled it because I am convinced the side of my brain that understands this type of information is way more limited than the ART side of my brain! However, I'm going to give it a go soon. Thanks again. Andrea
Photo of Joie Golomb

Joie Golomb

  • 1 Post
  • 0 Reply Likes
Thank you all for your help in removing a lot of these elements. However, I am still unable to remove the search bar from my site. Any ideas. I've literally tried the code over the over again and nothing!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Have you tried:
div.ecwid-productBrowser-search-SearchPanel { display: none; 
}