Changing Search Bar Background Colour And Menu And Search And Cart Colour

[createdbylove]

Hiya, I was wondering if anybody can help me.

I want to change my search bar background colour to a different colour and put the word search on the bottom (not at the top) and to make the search icon bigger

i also want to change the menu icon and search and cart icons to the colour black

I managed to change the colour for the search background in stuido theme but I am now using sense theme and the codes do not work.

Thank you

[niraj_patel]

Hello @createdbylove
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[sahilsharma9515]

Hi @createdbylove

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[createdbylove]

Hi tried to message you but won’t let me?

[createdbylove]

Hi I have messaged you with url and password.

[createdbylove]

It doesnt let me message you

[createdbylove]

Hi I have messaged you

[sahilsharma9515]

Hi @createdbylove Thanks for the URL and password, please add the below code.

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above tag

Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[niraj_patel]

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { input#Search-In-Modal { background: #fff !important; border-radius: unset !important; color: #000 !important; } #shopify-section-sections--23012212638019__header .field__label{ color: #000 !important; /*change color according to you*/ } .header__icon--menu .icon, .header__icon, .search__button .icon, .modal__close-button .icon{ color: #000 !important; /*change color according to you*/ } .field:hover.field:after, .field:before{ box-shadow: 0 0 0 calc(.1rem + var(--inputs-border-width)) #0000003d; } .search-modal.modal__content.gradient { background: #f0f0f0 !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Acme]

Hi, @createdbylove

1. Please navigate online store → theme → customize → edit code.
2. add color schema for icon to header.liquid.

3. add class for icon(search, cart, hambuger).

/snippets/header-search.liquid.

/snippets/header-drawer.liquid

and then you can set theme what you want.

[createdbylove]

It didn’t work

[sahilsharma9515]

Hi @createdbylove Can you add this code.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[createdbylove]

I’ve sent you a message

[createdbylove]

Could you please send me the codes to put please I cannot seem the images very well

[Acme]

Please focus on color-{{ section.settings.icon_color_scheme }}

• header.liquid
  …
  
  {%- liquid
  if cart == empty
  render ‘icon-cart-empty’
  else
  render ‘icon-cart’
  endif
  -%}
  {{ ‘templates.cart.cart’ | t }}
  {%- if cart != empty -%}

{%- if cart.item_count < 100 -%} {{ cart.item_count }} {%- endif -%} {{ 'sections.header.cart_count' | t: count: cart.item_count }}

{%- endif -%} .... "settings": { ... { "type": "color_scheme", "id": "icon_color_scheme", "label": "t:sections.header.settings.icon_color_scheme.label", "default": "scheme-1" }, } - header-search.liquid ....

..... - header-drawer.liquid

{% render 'icon-hamburger' %} {% render 'icon-close' %}

...

[createdbylove]

I’m sorry I but I dont know how to put this all in without affecting my page.

[createdbylove]

I’ve tried it doesn’t work

[namphan]

Hi @createdbylove ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

header .icon {
    color: rgb(18, 18, 18);
}
.search-modal__form {
    --inputs-radius: 0px;
    --color-foreground: 18, 18, 18;
    color: rgba(var(--color-foreground), 0.75);
}

[namphan]

Hi @createdbylove ,

Please change code:

.search-modal.modal__content {
    --color-background: 255, 255, 255;
    --gradient-background: #ffffff;
}
header .icon {
    color: rgb(18, 18, 18);
}
.search-modal__form {
    --inputs-radius: 0px;
    --color-foreground: 18, 18, 18;
    color: rgba(var(--color-foreground), 0.75);
}

it will show like this:

[createdbylove]

Hiya, I have applied the codes. It has worked but there is some problems