Canopy Theme: Hide Toolbar on All Pages

[cid_gk]

Hello,

I have the Canopy theme and would like for our Shopify to be an online catalogue eventually when customers click "Shop" in the navigation menu (but for now it leads to our online website off-shopify while we transition), with most of the pages as informational rather than e-comm. How do I hide the Toolbar? How do I hide the cart for now? Hide accounts? I'd like the ability to unhide them later on.

gamekastle.myshopify.com
passcode: gameon

[ZestardTech]

Hello @cid_gk 

To hide the toolbar, cart, and accounts in the Canopy theme in Shopify, you can make use of the theme settings and CSS. Here's a guide on how to achieve this:

1. Access the Shopify Theme Editor: Log in to your Shopify admin and go to "Online Store" > "Themes." Locate the Canopy theme and click on the "Customize" button to access the Theme Editor.

2. Hide the toolbar:

   • In the Theme Editor, navigate to the "Header" or "Navigation" section.
   • Look for options related to the toolbar or menu.
   • If there is an option to disable or hide the toolbar, toggle it off. This will vary depending on the specific version of the Canopy theme you are using. If there is no such option, proceed to the next step.

3. Hide the cart:

   • In the Theme Editor, navigate to the "Cart" or "Cart Drawer" section.
   • Look for options to disable or hide the cart.
   • If there is an option available, toggle it off. If not, proceed to the next step.

4. Hide the accounts:

   • In the Theme Editor, navigate to the "Header" or "Account" section.
   • Look for options related to the accounts or customer login.
   • If there is an option to disable or hide the accounts, toggle it off. If not, proceed to the next step.

5. Customize the CSS:

   • In the Theme Editor, navigate to the "Theme Settings" or "Customize" section.
   • Look for an option to access the theme's CSS or additional CSS.
   • Add the following CSS code to hide the toolbar, cart, and accounts:

.toolbar,
.cart-container,
.customer-login {
  display: none;
}

6.Save and publish changes: Save the modifications to the theme settings and publish the theme to make the changes live on your storefront.

By following these steps, you will be able to hide the toolbar, cart, and accounts in the Canopy theme. This will create an informational online catalog experience for your customers. If you decide to unhide these elements later, you can reverse the changes by enabling the corresponding options or removing the CSS code.

Please note that the specific steps and options may vary depending on your version of the Canopy theme. If you encounter any difficulties or need more specific instructions, consider reaching out to the theme developer or Shopify support for further assistance.

[cid_gk]

Hi there,

Thank you! This code definitely hid the toolbar, accounts, and cart for desktop. However, I'd still like for people to be able to navigate the menu via toolbar on smaller devices (with the cart and account still hidden). Is this possible? 

Example: Currently, if I apply this code, the toolbar/side menu completely disappears for mobile use and can't lead customers/visitors to other pages.

[cid_gk · Accepted solution]

Nevermind! I just figured it out. I went to styles.css and found this bit of code and marked it display: none based off of code others including you had posted. I'll save it for when I want them to show! Mobile view now hides the icons also but still shows the navigation. 

.toolbar-icons .toolbar-search, .toolbar-icons .toolbar-account, .toolbar-icons .toolbar-cart {
  height: 55px;
  line-height: 55px;
  width: 44px;
  display: inline-block;
  text-align: center;

[oscprofessional]

Hello @cid_gk 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

#top-links li {
    display: none;
}

[PageFly-Lucas]

Hi @cid_gk 

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file -> Save

a[href="https://www.gamekastle.com/online/"] {

    display: none !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly