The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 12-01-2016, 07:33 PM
MNM.ca's Avatar
MNM.ca is offline
 
Join Date: Jun 2015
Posts: 118
Default

Hide part of main navigation menu for an embedded category


I embed my store on a number of different websites but on one website I embed a category under a new URL.

Problem is the main menu looks like this:

Code:
Category: Store > Surfboards
I need to hide the "Store >" part of the menu because it does not apply to the embedded category.

Naturally I would ask you to supply some css code to hide that part of the menu but adding that to the Ecwid store design css would hide it on all my embedded store sites.

I only need to hide it on the store that is embedded using a single category.

Does that make any sense?
  #2  
Old 12-02-2016, 08:58 AM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by MNM.ca View Post
I embed my store on a number of different websites but on one website I embed a category under a new URL.

Problem is the main menu looks like this:

Code:
Category: Store > Surfboards
I need to hide the "Store >" part of the menu because it does not apply to the embedded category.

Naturally I would ask you to supply some css code to hide that part of the menu but adding that to the Ecwid store design css would hide it on all my embedded store sites.

I only need to hide it on the store that is embedded using a single category.

Does that make any sense?

Hello,

Ecwid Customer Care team here. Thanks for the question!

Sure thing, it's possible to hide only the "Store >" part of the breadcrumbs and target these changes to a certain category only too (the one you embedded separately).

In order to achieve that you'll need a code which looks like this:

Code:
.ecwid-productBrowser-CategoryPage-1111111 div.ecwid-productBrowser-categoryPath-storeLink,
.ecwid-productBrowser-CategoryPage-1111111 .ecwid-productBrowser-categoryPath-separator-first {
    display: none !important
}
In this code you will only need to replace the 1111111 with the ID of the category to which you need to target these changes. How to get ID of your product or category.
__________________
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
  #3  
Old 12-05-2016, 07:39 PM
MNM.ca's Avatar
MNM.ca MNM.ca is offline
 
Join Date: Jun 2015
Posts: 118
Default

see next post

Works very well but only hides it on the category view, once a product is clicked it still displays the menu in product view.

I tried to do the css for this myself but was not successful.

Can you help?

Code:
.ecwid-productBrowser-ProductPage-1111111 div.ecwid-productBrowser-categoryPath-storeLink,
.ecwid-productBrowser-ProductPage-1111111 .ecwid-productBrowser-categoryPath-separator-first {
    display: none !important
}
So I tried to put in product page and it does not work. What am I missing to hide the STORE > from the product view page?

Last edited by river; 12-06-2016 at 07:17 AM.
  #4  
Old 12-06-2016, 07:34 AM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by MNM.ca View Post
see next post

Works very well but only hides it on the category view, once a product is clicked it still displays the menu in product view.

I tried to do the css for this myself but was not successful.

Can you help?

Code:
.ecwid-productBrowser-ProductPage-1111111 div.ecwid-productBrowser-categoryPath-storeLink,
.ecwid-productBrowser-ProductPage-1111111 .ecwid-productBrowser-categoryPath-separator-first {
    display: none !important
}
So I tried to put in product page and it does not work. What am I missing to hide the STORE > from the product view page?
Hello,

Thanks for the follow-up. I see what the issue is now, thanks for pointing to it.

The code I provided hides the part of the breadcrumbs navigation menu you need to hide only on Category page with the certain ID.

It does not do anything about Product Details pages indeed, sorry about it. The code you tried next must have product IDs instead of category IDs, meaning:

Code:
.ecwid-productBrowser-ProductPage-PRODUCTID div.ecwid-productBrowser-categoryPath-storeLink,
.ecwid-productBrowser-ProductPage-PRODUCTID .ecwid-productBrowser-categoryPath-separator-first {
    display: none !important
}
This means that you'd need to enter each product ID separately and make a set of duplicated CSS codes like this one, but for each product.

There's an easier solution to this, though. First off you can leave the previous code be - it does the hob alright hiding what you need to hide on the particular category page.

In order to hide the same thing on the Product Details pages of this particular category, one other thing needs to be done.

You can add any code to the code of the website you're building directly and, of course, it's also possible to add any CSS to certain pages of your website. That's exactly the way to go here.

So, instead of adding anything else to the Ecwid custom CSS theme in Ecwid Control Panel -> Settings -> Design, you can add this code to the page of your website where you have Ecwid with this separate category installed:

Code:
<style>
.ecwid-productBrowser-ProductPage div.ecwid-productBrowser-categoryPath-storeLink,
.ecwid-productBrowser-ProductPage .ecwid-productBrowser-categoryPath-separator-first {
    display: none !important
}
</style>
Note the <style> tags there. These are to tell that we're adding CSS within and HTML tag.

This code basically hides that part of the menu on all product pages, but considering that you add it to the page of your website where your store with that default category is located, it will do the trick just fine.

Normally any HTML can be added to a website just the same way as Ecwid widgets with HTML codes. The exact method of doing this differs based on the platform you're using for your website, of course.

If you might face issues installing it, please send me the link to that category exactly and mention what platform the website is built on. Thus I'll be able to tell how to install it exactly.

Also, you can in fact do the same for all the other pages like cart page, checkout pages etc. as they also have their own selectors

Or you can even just use this code:

Code:
<style>
div.ecwid-productBrowser-categoryPath-storeLink,
.ecwid-productBrowser-categoryPath-separator-first {
    display: none !important
}
</style>
This one would hide the "Store >" part of the breadcrumbs on every Ecwid page. But just the same thing here - considering that you add it to one page of your website only where the specific category is to be displayed, it won't affect any other instances of Ecwid you have installed elsewhere.

Hope this helps.
__________________
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
  #5  
Old 12-06-2016, 01:06 PM
MNM.ca's Avatar
MNM.ca MNM.ca is offline
 
Join Date: Jun 2015
Posts: 118
Default

Quote:
Or you can even just use this code:

Code:
<style>
div.ecwid-productBrowser-categoryPath-storeLink,
.ecwid-productBrowser-categoryPath-separator-first {
    display: none !important
}
</style>
This one would hide the "Store >" part of the breadcrumbs on every Ecwid page. But just the same thing here - considering that you add it to one page of your website only where the specific category is to be displayed, it won't affect any other instances of Ecwid you have installed elsewhere.

Hope this helps.
This is absolutely perfect and works insanely well. I did not want to hide the menu part in all my embedded stores, just in the place where I embedded this category, so the code is spot on.

The problem with embedding a single category is it adds the full menu path and if I have a main store for Christmas and Easter, and other holidays, I might just want to embed the Christmas category on a sales page. Your code allows me to do that perfectly. Great Great solution.

Only problem that remains is search, I have not come to a solution with that and would need help with the last bit of code. I removed the search and am trying to add a custom category search box....

https://www.ecwid.com/forums/showthread.php?t=38466

They don't seem to have a solution for me here yet.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:28 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.