Solved

Disable all search functionality

MagiMoBoxes
Tourist
19 0 1

Hi - Can anyone simply explain how I can disable all search functionality from our site? We don't want a search bar at all. Thank you!

Accepted Solution (1)
askdevelopernet
Shopify Partner
12 2 0

This is an accepted solution.

@MagiMoBoxes Looks you have updated the .css file. Can you please add another CSS below it. As it seems it's hidden but still clickable when you hover on blank space and following CSS should help fix it. If you are satisfied then please mark this as solution. Thanks 

.header__icon--search{

display:none;

}

AskDeveloper.Net

View solution in original post

Replies 11 (11)

askdevelopernet
Shopify Partner
12 2 0

Hi@MagiMoBoxes  One of the easiest option is to use CSS to hide all the search bar/options from your website. 
Find class name of search bar and use following code in your liquid theme
.class-name-of-search-bar{

display:none;

}

AskDeveloper.Net
MagiMoBoxes
Tourist
19 0 1

HI! I wish I could pretend that your response doesn't sound like a foreign language. I've done pretty well editing code to make changes but I'm not sure I have an exact enough idea of how to do this to not delete the wrong thing. 

askdevelopernet
Shopify Partner
12 2 0

@MagiMoBoxes Please PM your shopify URL and i can share exact code with you that you can add in your CSS file. 

AskDeveloper.Net
MagiMoBoxes
Tourist
19 0 1

www.magimoboxes.com

currently password protected: MagiMo

 

THANK YOU!!!!

askdevelopernet
Shopify Partner
12 2 0

@MagiMoBoxes Please copy and paste following CSS code in your .css file.

.header__search svg.modal__toggle-open.icon.icon-search {
display: none;
}

askdevelopernet_0-1708469844879.png

 




AskDeveloper.Net
MagiMoBoxes
Tourist
19 0 1

This is probably an obvious question but which css file should i put it into and is there a specific place?

askdevelopernet
Shopify Partner
12 2 0

@MagiMoBoxes  In Shopify, the CSS files are typically located within your theme files. Here's how you can find them:

  1. Shopify Admin Dashboard: Log in to your Shopify admin dashboard.

  2. Navigate to Themes: Go to "Online Store" > "Themes".

  3. Edit Theme: Find the theme you want to edit and click on the "Actions" button. Then select "Edit code".

  4. Locate CSS Files: Look for the "Assets" folder within the theme editor. Usually, CSS files are named something like theme.css or styles.css. However, Shopify themes may organize CSS into multiple files or use a CSS preprocessor like SCSS or LESS, so look for files with those extensions as well (*.scss, *.less).

  5. Edit CSS: Once you locate the CSS file, you can edit it directly within the Shopify theme editor and past the code at end of file. 

AskDeveloper.Net
MagiMoBoxes
Tourist
19 0 1

Hi, 

Yes! Sorry - ive been in the code files quite a bit but there are a lot of different .css files. Is there a certain one i should put this code in? base.css?

askdevelopernet
Shopify Partner
12 2 0

This is an accepted solution.

@MagiMoBoxes Looks you have updated the .css file. Can you please add another CSS below it. As it seems it's hidden but still clickable when you hover on blank space and following CSS should help fix it. If you are satisfied then please mark this as solution. Thanks 

.header__icon--search{

display:none;

}

AskDeveloper.Net
MagiMoBoxes
Tourist
19 0 1

THANK YOU SO MUCH FOR YOUR HELP!!!

askdevelopernet
Shopify Partner
12 2 0

@MagiMoBoxes I'm delighted that I could assist you. Would you kindly consider sharing your valuable feedback for my web development business on Google? Here's the link: https://g.page/r/CTUdGj5WoAWXEB0/review

AskDeveloper.Net