Hi,
Can anyone help me to place the search bar always in exteded mode (box)?
this is how it is now…
https://96a4paqxyty5osbl-60317925589.shopifypreview.com
and its something like this what I would like
Thank you.
@LitCommerce I,ve seen your help in the forum, can you help us please?
@suyash1 can you help me?
@Laura_54 - this will need a lot of code editing, this is not single line or 2 code.. needs liquid and css code changes and will not be like this on mobile
1 Like
@suyash1
I wouldn’t care about the mobile, on PC it would be enough, could you help me?
@Laura_54 I can, only thing is that , I can work on it tomorrow morning, so if it is not very urgent for you then you can email me the details and I will work on it, you have my email below.
Hi @Laura_54 ,
Please send me the preview link, I will help you check it
Hi @Laura_54 ,
Do you want this?
Please send me the code of header.liquid file, I will change it for you
Can the box be transparent?
Hi @Laura_54 ,
Yes, please send me the code of header.liquid file, I will change it for you
Hello @LitCommerce
Here the header.liquid
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
{%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- if request.page_type == 'index' -%}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
{%- endif -%}
{% if template == 'index' and section.settings.transparent_header %}
{% style %}
.template-index .site-header-transparent .header__icon, .template-index .site-header-transparent .header__menu-item span, .template-index .site-header-transparent .header__menu-item svg, .template-index .site-header-transparent .header__active-menu-item {
color: {{ section.settings.content_color }};
}
.site-header-transparent {
background: transparent;
position: absolute;
border: none;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.site-header-transition {
margin-top: var(--header-height);
}
{% endstyle %}
{% endif %}
{% schema %}
{
"name": "t:sections.header.name",
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.header.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.header.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.header.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.header.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.header.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.header.settings.color_scheme.label"
},
{
"type": "header",
"content": "Transparent Header"
},
{
"type": "checkbox",
"id": "transparent_header",
"label": "Enable transparent header",
"default": false
},
{
"type": "color",
"id": "content_color",
"label": "Change icon & text color"
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "t:sections.header.settings.logo.label"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "t:sections.header.settings.logo_width.unit",
"label": "t:sections.header.settings.logo_width.label"
},
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "middle-left",
"label": "t:sections.header.settings.logo_position.options__1.label"
},
{
"value": "top-left",
"label": "t:sections.header.settings.logo_position.options__2.label"
},
{
"value": "top-center",
"label": "t:sections.header.settings.logo_position.options__3.label"
}
],
"default": "middle-left",
"label": "t:sections.header.settings.logo_position.label"
},
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "checkbox",
"id": "enable_sticky_header",
"default": true,
"label": "t:sections.header.settings.enable_sticky_header.label",
"info": "t:sections.header.settings.enable_sticky_header.info"
}
]
}
{% endschema %}
Hi @LitCommerce
Here the header.liquid
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
{%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- if request.page_type == 'index' -%}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
{%- endif -%}
{% if template == 'index' and section.settings.transparent_header %}
{% style %}
.template-index .site-header-transparent .header__icon, .template-index .site-header-transparent .header__menu-item span, .template-index .site-header-transparent .header__menu-item svg, .template-index .site-header-transparent .header__active-menu-item {
color: {{ section.settings.content_color }};
}
.site-header-transparent {
background: transparent;
position: absolute;
border: none;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.site-header-transition {
margin-top: var(--header-height);
}
{% endstyle %}
{% endif %}
{% schema %}
{
"name": "t:sections.header.name",
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.header.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.header.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.header.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.header.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.header.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.header.settings.color_scheme.label"
},
{
"type": "header",
"content": "Transparent Header"
},
{
"type": "checkbox",
"id": "transparent_header",
"label": "Enable transparent header",
"default": false
},
{
"type": "color",
"id": "content_color",
"label": "Change icon & text color"
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "t:sections.header.settings.logo.label"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "t:sections.header.settings.logo_width.unit",
"label": "t:sections.header.settings.logo_width.label"
},
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "middle-left",
"label": "t:sections.header.settings.logo_position.options__1.label"
},
{
"value": "top-left",
"label": "t:sections.header.settings.logo_position.options__2.label"
},
{
"value": "top-center",
"label": "t:sections.header.settings.logo_position.options__3.label"
}
],
"default": "middle-left",
"label": "t:sections.header.settings.logo_position.label"
},
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "checkbox",
"id": "enable_sticky_header",
"default": true,
"label": "t:sections.header.settings.enable_sticky_header.label",
"info": "t:sections.header.settings.enable_sticky_header.info"
}
]
}
{% endschema %}
Hello @LitCommerce
It does not let me to insert it here, maybe because it’s too long.
See the file attached.
Thanks!
Hi @Laura_54 ,
Please change all code:
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
{%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- if request.page_type == 'index' -%}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
{%- endif -%}
{% if template == 'index' and section.settings.transparent_header %}
{% style %}
.template-index .site-header-transparent .header__icon, .template-index .site-header-transparent .header__menu-item span, .template-index .site-header-transparent .header__menu-item svg, .template-index .site-header-transparent .header__active-menu-item {
color: {{ section.settings.content_color }};
}
.site-header-transparent {
background: transparent;
position: absolute;
border: none;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.site-header-transition {
margin-top: var(--header-height);
}
{% endstyle %}
{% endif %}
{% schema %}
{
"name": "t:sections.header.name",
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.header.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.header.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.header.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.header.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.header.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.header.settings.color_scheme.label"
},
{
"type": "header",
"content": "Transparent Header"
},
{
"type": "checkbox",
"id": "transparent_header",
"label": "Enable transparent header",
"default": false
},
{
"type": "color",
"id": "content_color",
"label": "Change icon & text color"
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "t:sections.header.settings.logo.label"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "t:sections.header.settings.logo_width.unit",
"label": "t:sections.header.settings.logo_width.label"
},
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "middle-left",
"label": "t:sections.header.settings.logo_position.options__1.label"
},
{
"value": "top-left",
"label": "t:sections.header.settings.logo_position.options__2.label"
},
{
"value": "top-center",
"label": "t:sections.header.settings.logo_position.options__3.label"
}
],
"default": "middle-left",
"label": "t:sections.header.settings.logo_position.label"
},
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "checkbox",
"id": "enable_sticky_header",
"default": true,
"label": "t:sections.header.settings.enable_sticky_header.label",
"info": "t:sections.header.settings.enable_sticky_header.info"
}
]
}
{% endschema %}
1 Like
Thanks!!. It worked!
1 Like
I have realized that when I go to another page that is not the home page, since the search box is white, it is not visible. Could it be that the search box on the main page was white but on all the others black? Thank you
the homepage it is ok
here, i can not see it, cause its white
Hi @Laura_54 ,
Please change all code:
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
{%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- if request.page_type == 'index' -%}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
{%- endif -%}
{% if template == 'index' and section.settings.transparent_header %}
{% style %}
.template-index .site-header-transparent .header__icon, .template-index .site-header-transparent .header__menu-item span, .template-index .site-header-transparent .header__menu-item svg, .template-index .site-header-transparent .header__active-menu-item {
color: {{ section.settings.content_color }};
}
.site-header-transparent {
background: transparent;
position: absolute;
border: none;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.site-header-transition {
margin-top: var(--header-height);
}
{% endstyle %}
{% endif %}
{% schema %}
{
"name": "t:sections.header.name",
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.header.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.header.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.header.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.header.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.header.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.header.settings.color_scheme.label"
},
{
"type": "header",
"content": "Transparent Header"
},
{
"type": "checkbox",
"id": "transparent_header",
"label": "Enable transparent header",
"default": false
},
{
"type": "color",
"id": "content_color",
"label": "Change icon & text color"
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "t:sections.header.settings.logo.label"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "t:sections.header.settings.logo_width.unit",
"label": "t:sections.header.settings.logo_width.label"
},
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "middle-left",
"label": "t:sections.header.settings.logo_position.options__1.label"
},
{
"value": "top-left",
"label": "t:sections.header.settings.logo_position.options__2.label"
},
{
"value": "top-center",
"label": "t:sections.header.settings.logo_position.options__3.label"
}
],
"default": "middle-left",
"label": "t:sections.header.settings.logo_position.label"
},
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "checkbox",
"id": "enable_sticky_header",
"default": true,
"label": "t:sections.header.settings.enable_sticky_header.label",
"info": "t:sections.header.settings.enable_sticky_header.info"
}
]
}
{% endschema %}
Thanks, thanks, thanks!
1 Like
One last thing, it is possible to leave it in the phone as it was?
Thanks.
Now its like this on the phone
and I want it like this
if its not possible, can we delete the word inside the box?