How to remove or customise the design of the Search bar

General
1

Hi , a newbie question,

  1. how can I remove the search bar from the header?
    2)How can I style the search bar with CSS?

tks!

2

Hi @euka.art, Welcome to Builder.io Forum!

  1. If the header is uneditable in Builder Editor, then you can use custom CSS to hide a search bar under Edit Content JS + CSS on the builder editor data tab. For example,
.selector {  display: none;}
  1. You can freshly create a Search bar in Builder and then apply the CSS using Style Tab. Please refer to this doc: Tour the Builder UI - Builder.io

or please provides me a Builder content entry link where you’re trying to build this so I can suggest the best way!!

3

Hi I’ve added this on the pages .selector { display: none;} but it doesnt work. Maybe because i am using a theme? FYI I am following this tutorial and the file structure running on the local host, as a quick start and has the search and cart as uneditable > GitHub - BuilderIO/nextjs-shopify: The ultimate starter for headless Shopify stores

How do I provide you with this? > Builder content entry link?

4

It looks like the header is coming from the Shopify theme in the builder editor. Builder doesn’t natively support being able to edit your element that is coming from the theme, but you can use some custom CSS to style them to be invisible. To get started, inspect your HTML and locate the “class” or “id” portion of the HTML. .selector { display: none;} that’s just an example, the selector here would be the ID or class of the search bar which you can check in inspect element.

Generally, I found this .search-modal__content-bottom { display: none;} to be a class of search bar from Shopify. In your case, it could be different.

I found your details with us and it looks like you are running on localhost. So providing a content link would no longer be helpful I guess!

We meant with Builder Content Link is Editor URL. For example,

image
image1766×784 62 KB

Let us know if you face any issues while achieving this!!