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

Solved

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

createdbylove
Excursionist
67 0 9

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

1000003170.jpg

1000003167.jpg

1000003169.jpg

1000003168.jpg

  

Accepted Solutions (2)
niraj_patel
Shopify Partner
2378 514 506

This is an 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>

niraj_patel_0-1722508529409.pngniraj_patel_1-1722508554656.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

namphan
Shopify Partner
1510 190 211

This is an 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:

Screenshot.png

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 20 (20)

niraj_patel
Shopify Partner
2378 514 506

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.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
createdbylove
Excursionist
67 0 9

Hi I have messaged you with url and password.

createdbylove
Excursionist
67 0 9

It doesnt let me message you

niraj_patel
Shopify Partner
2378 514 506

This is an 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>

niraj_patel_0-1722508529409.pngniraj_patel_1-1722508554656.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
createdbylove
Excursionist
67 0 9

I've tried it doesn't work 

sahilsharma9515
Shopify Partner
1257 163 241

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


createdbylove
Excursionist
67 0 9

Hi I have messaged you

sahilsharma9515
Shopify Partner
1257 163 241

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:

sahilsharma9515_0-1722508219867.png

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

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


createdbylove
Excursionist
67 0 9

It didn't work 😞

sahilsharma9515
Shopify Partner
1257 163 241

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


createdbylove
Excursionist
67 0 9

I've sent you a message

Sangeetanahar
Trailblazer
552 36 66

Hello @createdbylove 

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

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -sangeetarahuldhiman@gmail.com - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here
createdbylove
Excursionist
67 0 9

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

Acme
Shopify Partner
69 8 13

Hi, @createdbylove 
1. Please navigate online store -> theme -> customize -> edit code.
2. add color schema for icon to header.liquid.

Acme_0-1722508524984.png

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

Acme_1-1722508638747.png

/snippets/header-search.liquid.

Acme_2-1722508690650.png

/snippets/header-drawer.liquid

Acme_3-1722508759003.png

and then you can set theme what you want.

createdbylove
Excursionist
67 0 9

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

Acme
Shopify Partner
69 8 13

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
Excursionist
67 0 9

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

namphan
Shopify Partner
1510 190 211

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);
}

 

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
1510 190 211

This is an 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:

Screenshot.png

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
createdbylove
Excursionist
67 0 9

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

1000003396.jpg

1000003397.jpg

1000003398.jpg