Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
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:
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.
Hi I have messaged you with url and password.
It doesnt let me message you
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
I've tried it doesn't work
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
Hi I have messaged you
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:
Result:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
It didn't work 😞
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
I've sent you a message
Hello @createdbylove
i can help you ..please provide me Website URL and Password.
Thanks
Hi tried to message you but won't let me?
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.
Could you please send me the codes to put please I cannot seem the images very well
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>
...
I'm sorry I but I dont know how to put this all in without affecting my page.
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);
}
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:
Hiya, I have applied the codes. It has worked but there is some problems
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024