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 · Accepted solution]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@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;
   }
 }
</style>

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

[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.

[createdbylove]

Hi I have messaged you with url and password.

[createdbylove]

It doesnt let me message you

[niraj_patel · Accepted solution]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@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;
   }
 }
</style>

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

[createdbylove]

I've tried it doesn't work 

[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 I have messaged you

[sahilsharma9515]

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

<style>
input#Search-In-Modal-1 {
    background-color: red; // CHANGE THE COLOR ACCORDING TO YOUR NEEDS.
}
svg.modal__toggle-open.icon.icon-search {
    color: black;
}

svg.icon.icon-cart-empty {
    color: black;
}

svg.icon.icon-hamburger {
    color: black;
}
</style>

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 </body> tag

Result:

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

Best Regards

Sahil

[createdbylove]

It didn't work 😞

[sahilsharma9515]

Hi @createdbylove Can you add this code.

<style>
input#Search-In-Modal-1 {
    background-color: red !important; // CHANGE THE COLOR ACCORDING TO YOUR NEEDS.
}
svg.modal__toggle-open.icon.icon-search {
    color: black !important;
}

svg.icon.icon-cart-empty {
    color: black !important;
}

svg.icon.icon-hamburger {
    color: black !important;
}
</style>

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

[Sangeetanahar]

Hello @createdbylove 

i can help you ..please provide me Website URL and Password.

Thanks

[createdbylove]

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

[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]

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
...
<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset color-{{ section.settings.icon_color_scheme }}" id="cart-icon-bubble">
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{%- endif -%}
</a>
....
"settings": {
    ...
    {
       "type": "color_scheme",
       "id": "icon_color_scheme",
       "label": "t:sections.header.settings.icon_color_scheme.label",
       "default": "scheme-1"
      },
}
- header-search.liquid
....
<details-modal class="header__search">
<details>
<summary
class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle color-{{ section.settings.icon_color_scheme }}"
aria-haspopup="dialog"
aria-label="{{ 'general.search.search' | t }}"
>
<span>
<svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false">
<use href="#icon-search">
</svg>
<svg class="modal__toggle-close icon icon-close" aria-hidden="true" focusable="false">
<use href="#icon-close">
</svg>
</span>
</summary>
<div
class="search-modal modal__content gradient color-{{ section.settings.icon_color_scheme }}"
role="dialog"
aria-modal="true"
aria-label="{{ 'general.search.search' | t }}"
>
.....
- header-drawer.liquid
<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">
<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary
class="header__icon header__icon--menu header__icon--summary link focus-inset color-{{ section.settings.icon_color_scheme }}"
aria-label="{{ 'sections.header.menu' | t }}"
>
<span>
{% render 'icon-hamburger' %}
{% render 'icon-close' %}
</span>
</summary>
...

[createdbylove]

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

[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 · Accepted solution]

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