Hiding Panels on Your WebStore Pages

Question:

How do I prevent certain panels from displaying on my WebStore pages?

Answer:

You can hide or show panels usingCSS. In CSS, each page type has an ID wrapper around it. For example, the Home page has the ID #page-home, the Department page has the ID #page-department, and the Category page has the ID #page-category. In addition, each panel within the page has an ID wrapper associated with it. For example, to hide the New Products panel on the Home page, use the following style:

#page-home #panel-newproduct {
display: none;
visibility: hidden;
}

To hide the Specials panel on both the Department and Category pages, use the following style:

#page-department #specialoffers , #page-category #specialoffers {
display: none;
visibility: hidden;
}

To display the CSS ID wrappers associated with the various panels on your WebStore pages, you can use the Web Developer tools in Google Chrome. Once the toolbar is installed, to view an element’s properties, right-click it on the page, then Inspect Element. When you click an element in Elements tab of Developer Tools, its CSS properties are displayed, including its ID wrapper.

Following are the ID wrappers for the various panels on the Home page (#page-home):

Store Navigation: #panel-navigation
Product Search: #panel-search
New Products: #panel-newproduct
Shopping Cart: #panel-shoppingcart
Account Holders: #panel-account
Pre Order: #panel-promotion
Specials: #panel-specials