How to add a search bar here in mobile view

Store Design
,

Topic summary

A user seeks to add a search bar to their Shopify theme’s mobile view header. Another community member initially requests the Liquid code (provided as reversed text), which the original poster supplies for both header.liquid and theme.liquid files.

Proposed Solution:
PageFly-Richard provides custom code to be inserted at the bottom of theme.liquid, though specific code details are obscured in the conversation.

Ongoing Issues:

  • The search bar displays briefly (approximately 2 seconds) in the mobile header before disappearing when switching from desktop to mobile view
  • A delay/lag occurs during the transition
  • The search bar appears “stuck” in the header initially, only resolving after a page refresh
  • When navigating from main menu categories to subcategories, the search bar layout becomes invisible or improperly displayed

Current Status:
The discussion remains unresolved. The user continues reporting display and timing issues despite the provided solution. PageFly-Richard offers to fix the problem quickly if given direct access to the store. No final resolution has been reached regarding the persistent visibility and transition problems.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

niceeee_0-1681709032780.png
niceeee_0-1681709032780.png580×783 45.5 KB

2

@niceeee

This is code customization work not done only using CSS Please provided liquid code.

Thanks!

3

//HEADER LIQUID

{%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} {{ 'component-mega-menu.css' | asset_url | stylesheet_tag }} {%- endif -%} {%- if section.settings.enable_country_selector or section.settings.enable_language_selector -%} {{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }} {%- endif -%}

{%- if settings.cart_type == “drawer” -%}
{{ ‘component-cart-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart.css’ | asset_url | stylesheet_tag }}
{{ ‘component-totals.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘component-discounts.css’ | asset_url | stylesheet_tag }}
{{ ‘component-loading-overlay.css’ | asset_url | stylesheet_tag }}
{%- endif -%}

{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-search.css’ | asset_url | stylesheet_tag }}
{{ ‘component-menu-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-notification.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-items.css’ | asset_url | stylesheet_tag }}

header-drawer { justify-self: start; margin-left: -1.2rem; } {%- if section.settings.sticky_header_type == 'reduce-logo-size' -%} .scrolled-past-header .header__heading-logo-wrapper { width: 75%; } {%- endif -%} {%- if section.settings.menu_type_desktop != "drawer" -%} @media screen and (min-width: 990px) { header-drawer { display: none; } } {%- endif -%} .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } }

{%- style -%}
.header {
padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
}

.section-header {
position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}

@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if settings.cart_type == “drawer” -%}

{%- endif -%}
{%- if section.settings.enable_country_selector or section.settings.enable_language_selector -%}

{%- endif -%}

{%- liquid
for block in section.blocks
if block.type == ‘@app’
assign has_app_block = true
endif
endfor
-%}

<{% if section.settings.sticky_header_type != ‘none’ %}sticky-header data-sticky-type=“{{ section.settings.sticky_header_type }}”{% else %}div{% endif %} class=“header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper–border-bottom{% endif %}”>

{%- if section.settings.menu != blank -%}
{% render 'icon-hamburger' %} {% render 'icon-close' %}
    {%- for link in section.settings.menu.links -%}
  • {%- if link.links != blank -%}
    {{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}
    {% render 'icon-arrow' %} {{ link.title | escape }}
      {%- for childlink in link.links -%}
    • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
      {{ childlink.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}
      {% render 'icon-arrow' %} {{ childlink.title | escape }}
      {%- endif -%}
      • {%- endfor -%}
    {%- else -%} {{ link.title | escape }} {%- endif -%}
    • {%- endfor -%}
{%- if shop.customer_accounts_enabled -%} {% render 'icon-account' %} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%} {%- if section.settings.enable_country_selector or section.settings.enable_language_selector -%}
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} {%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}
{%- endform -%} {% endif %}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

{%- form ‘localization’, id: ‘HeaderLanguageMobileForm’, class: ‘localization-form’ -%}

{{ 'localization.language_label' | t }}

{%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}
{%- endform -%} {%- endif -%}
{%- endif -%}
{%- endif -%}

{%- if section.settings.logo_position == ‘top-center’ or section.settings.menu == blank -%}

{%- if settings.predictive_search_enabled -%} {%- else -%} {%- endif -%}
{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}


{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- else -%} {%- endif -%}
{%- endif -%}

{%- if section.settings.logo_position != ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %} {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} {{ settings.logo | image_url: width: 600 | image_tag: class: 'header__heading-logo motion-reduce', widths: widths, height: logo_height, width: settings.logo_width, alt: logo_alt, sizes: sizes, preload: true }}
{%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%} {%- endif -%}

{%- if section.settings.menu != blank -%}
{%- if section.settings.menu_type_desktop == ‘dropdown’ -%}

    {%- for link in section.settings.menu.links -%}
  • {%- if link.links != blank -%}
    {{ link.title | escape }} {% render 'icon-caret' %}
    {%- else -%} {{ link.title | escape }} {%- endif -%}
    • {%- endfor -%}
{%- elsif section.settings.menu_type_desktop != 'drawer' -%} {%- endif -%} {%- endif -%}

{%- if section.settings.logo_position == ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if settings.logo != blank -%}
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %} {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} {{ settings.logo | image_url: width: 600 | image_tag: class: 'header__heading-logo', widths: widths, height: logo_height, width: settings.logo_width, alt: logo_alt, sizes: sizes, preload: true }}
{%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%} {%- endif -%}
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{%- render 'country-localization', localPosition: 'HeaderCountry' -%}
{%- endform -%} {% endif %}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

{%- form ‘localization’, id: ‘HeaderLanguageForm’, class: ‘localization-form’ -%}

{{ 'localization.language_label' | t }}

{%- render 'language-localization', localPosition: 'HeaderLanguage' -%}
{%- endform -%} {%- endif -%}
Search


Search





{%- if shop.customer_accounts_enabled -%}

{% render ‘icon-account’ %}

{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}


{%- endif -%}

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘@app’ -%}
{% render block %}
{%- endcase -%}
{%- endfor -%}

{%- 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 -%}

{%- if settings.cart_type == “notification” -%}
{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%}
{%- endif -%}

{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.header = document.querySelector(‘.section-header’);
this.headerIsAlwaysSticky = this.getAttribute(‘data-sticky-type’) === ‘always’ || this.getAttribute(‘data-sticky-type’) === ‘reduce-logo-size’;
this.headerBounds = {};

this.setHeaderHeight();

window.matchMedia(‘(max-width: 990px)’).addEventListener(‘change’, this.setHeaderHeight.bind(this));

if (this.headerIsAlwaysSticky) {
this.header.classList.add(‘shopify-section-header-sticky’);
};

this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector(‘predictive-search’);

this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;

this.addEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.addEventListener(‘scroll’, this.onScrollHandler, false);

this.createObserver();
}

setHeaderHeight() {
document.documentElement.style.setProperty(‘–header-height’, ${this.header.offsetHeight}px);
}

disconnectedCallback() {
this.removeEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.removeEventListener(‘scroll’, this.onScrollHandler);
}

createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});

observer.observe(this.header);
}

onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add(‘scrolled-past-header’);
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add(‘scrolled-past-header’);
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);

this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);

requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
this.header.classList.remove(‘scrolled-past-header’);
requestAnimationFrame(this.reset.bind(this));
}

this.currentScrollTop = scrollTop;
}

hide() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);
this.closeMenuDisclosure();
this.closeSearchModal();
}

reveal() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add(‘shopify-section-header-sticky’, ‘animate’);
this.header.classList.remove(‘shopify-section-header-hidden’);
}

reset() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);
}

closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll(‘header-menu’);
this.disclosures.forEach(disclosure => disclosure.close());
}

closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector(‘details-modal’);
this.searchModal.close(false);
}
}

customElements.define(‘sticky-header’, StickyHeader);
{% endjavascript %}

{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “section-header”,
“max_blocks”: 3,
“settings”: [
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“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”
},
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.options__1.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.header.settings.logo_position.options__4.label”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.label”,
“info”: “t:sections.header.settings.logo_help.content”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “select”,
“id”: “menu_type_desktop”,
“options”: [
{
“value”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.options__1.label”
},
{
“value”: “mega”,
“label”: “t:sections.header.settings.menu_type_desktop.options__2.label”
},
{
“value”: “drawer”,
“label”: “t:sections.header.settings.menu_type_desktop.options__3.label”
}
],
“default”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.label”,
“info”: “t:sections.header.settings.menu_type_desktop.info”
},
{
“type”: “select”,
“id”: “sticky_header_type”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.header.settings.sticky_header_type.options__1.label”
},
{
“value”: “on-scroll-up”,
“label”: “t:sections.header.settings.sticky_header_type.options__2.label”
},
{
“value”: “always”,
“label”: “t:sections.header.settings.sticky_header_type.options__3.label”
},
{
“value”: “reduce-logo-size”,
“label”: “t:sections.header.settings.sticky_header_type.options__4.label”
}
],
“default”: “on-scroll-up”,
“label”: “t:sections.header.settings.sticky_header_type.label”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.header__3.content”,
“info”: “t:sections.header.settings.header__4.info”
},
{
“type”: “checkbox”,
“id”: “enable_country_selector”,
“default”: false,
“label”: “t:sections.header.settings.enable_country_selector.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.header__5.content”,
“info”: “t:sections.header.settings.header__6.info”
},
{
“type”: “checkbox”,
“id”: “enable_language_selector”,
“default”: false,
“label”: “t:sections.header.settings.enable_language_selector.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.mobile_layout.content”
},
{
“type”: “select”,
“id”: “mobile_logo_position”,
“options”: [
{
“value”: “center”,
“label”: “t:sections.header.settings.mobile_logo_position.options__1.label”
},
{
“value”: “left”,
“label”: “t:sections.header.settings.mobile_logo_position.options__2.label”
}
],
“default”: “center”,
“label”: “t:sections.header.settings.mobile_logo_position.label”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.header.settings.margin_bottom.label”,
“default”: 0
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 20
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 20
}
],
“blocks”: [
{
“type”: “@app”
}
]
}
{% endschema %}

4

//THEME LIQUID

{%- if settings.favicon != blank -%}

{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}

{%- endunless -%} {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%} {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}

{% if page_description %}

{% endif %}

{% render ‘meta-tags’ %}

{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: ‘weight’, ‘bold’
assign body_font_italic = settings.type_body_font | font_modify: ‘style’, ‘italic’
assign body_font_bold_italic = body_font_bold | font_modify: ‘style’, ‘italic’
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: ‘swap’ }}
{{ body_font_bold | font_face: font_display: ‘swap’ }}
{{ body_font_italic | font_face: font_display: ‘swap’ }}
{{ body_font_bold_italic | font_face: font_display: ‘swap’ }}
{{ settings.type_header_font | font_face: font_display: ‘swap’ }}

:root {
–font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
–font-body-style: {{ settings.type_body_font.style }};
–font-body-weight: {{ settings.type_body_font.weight }};
–font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

–font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
–font-heading-style: {{ settings.type_header_font.style }};
–font-heading-weight: {{ settings.type_header_font.weight }};

–font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
–font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

–color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
–color-shadow: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
–color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
–color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
–color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
–color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
–color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
–color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
–payment-terms-background-color: {{ settings.colors_background_1 }};

–gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
–gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
–gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
–gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

–media-padding: {{ settings.media_padding }}px;
–media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
–media-border-width: {{ settings.media_border_thickness }}px;
–media-radius: {{ settings.media_radius }}px;
–media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
–media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
–media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
–media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
–media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

–page-width: {{ settings.page_width | divided_by: 10 }}rem;
–page-width-margin: {% if settings.page_width == ‘1600’ %}2{% else %}0{% endif %}rem;

–product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
–product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
–product-card-text-alignment: {{ settings.card_text_alignment }};
–product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
–product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
–product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
–product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

–collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
–collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
–collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
–collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
–collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
–collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
–collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

–blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
–blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
–blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
–blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
–blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
–blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
–blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

–badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

–popup-border-width: {{ settings.popup_border_thickness }}px;
–popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
–popup-corner-radius: {{ settings.popup_corner_radius }}px;
–popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
–popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
–popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
–popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

–drawer-border-width: {{ settings.drawer_border_thickness }}px;
–drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
–drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
–drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
–drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
–drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

–spacing-sections-desktop: {{ settings.spacing_sections }}px;
–spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

–grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
–grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
–grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
–grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

–text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
–text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
–text-boxes-radius: {{ settings.text_boxes_radius }}px;
–text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
–text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
–text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
–text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
–text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

–buttons-radius: {{ settings.buttons_radius }}px;
–buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
–buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
–buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
–buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
–buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
–buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
–buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
–buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
–buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

–inputs-radius: {{ settings.inputs_radius }}px;
–inputs-border-width: {{ settings.inputs_border_thickness }}px;
–inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
–inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
–inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
–inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
–inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
–inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
–inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

–variant-pills-radius: {{ settings.variant_pills_radius }}px;
–variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
–variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
–variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
–variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
–variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
–variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: calc(var(–font-body-scale) * 62.5%);
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(–font-body-scale));
font-family: var(–font-body-family);
font-style: var(–font-body-style);
font-weight: var(–font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}

{{ ‘base.css’ | asset_url | stylesheet_tag }}

{%- unless settings.type_body_font.system? -%}

{%- endunless -%} {%- unless settings.type_header_font.system? -%} {%- endunless -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%} {{ "accessibility.skip_to_text" | t }}

{%- if settings.cart_type == ‘drawer’ -%}
{%- render ‘cart-drawer’ -%}
{%- endif -%}

{% sections ‘header-group’ %}

{{ content_for_layout }}

{% sections ‘footer-group’ %}

  • {{ 'accessibility.refresh_page' | t }}
  • {{ 'accessibility.link_messages.new_window' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

.mobile-facets__header .mobile-facets__count { display: none !important; } .product__description.rte.quick-add-hidden>h1 { display: none; } #MegaMenu-Content-3 > ul.mega-menu__list{ gap:10px !important; } #MegaMenu-Content-3 > ul.mega-menu__list >li > a{ color:#000 !important; font-weight: bold !important; } #MegaMenu-Content-4 > ul.mega-menu__list{ gap:10px !important; } #MegaMenu-Content-4 > ul.mega-menu__list >li > a{ color:#000 !important; font-weight: bold !important; } .slider-mobile-gutter .media > img {object-fit: contain !important; object-position: top center !important;} @media screen and (max-width: 749px) { .banner--mobile-bottom .slideshow__text.banner__box {display: none !important;} } @media screen and (max-width: 500px){ .slideshow__media.banner__media.media {height: 230px !important;} } @media screen and (min-width: 768px) { div.image-with-text { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; max-width: 100%; } }
5

Hi @Niceeee,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at bottom of the file → Save

PageFlyRichard_0-1681980554543.png
PageFlyRichard_0-1681980554543.png786×1636 63.9 KB

Hope my solution works perfectly for you!

Best regards,

Richard | PageFly

1 Like
6

hello I think there is something wrong, from desktop view to mobile view this is the result

niceeee_0-1682125062704.png
niceeee_0-1682125062704.png972×886 206 KB

something like a delay happened.

also when I use mobile view, it will display in the header first and disapper for like 2 seconds.

7

Good day sir, when I try to make desktop view into mobile view, the search bar is stuck in header

like this one

niceeee_0-1682131836762.png
niceeee_0-1682131836762.png848×762 161 KB

but when I refresh it the only problem is that it still display for like 2 seconds and disappear

niceeee_2-1682131956083.png
niceeee_2-1682131956083.png492×453 82.8 KB

after that

niceeee_3-1682131983036.png
niceeee_3-1682131983036.png799×860 40.1 KB

8

Hello, is there a way that the user will not see the search bar in the header of the mobile view when opening the mobile view?
as you can see when I open the mobile view this search bar is still there and disappear for like 2 seconds

niceeee_0-1682298050482.png
niceeee_0-1682298050482.png1177×672 162 KB

then it will become like this which is the outcome that I wanted

niceeee_1-1682298090440.png
niceeee_1-1682298090440.png956×912 230 KB

I just want to hide the search bar in the first picture.

9

Hello sir, I want to add search bar here sir

niceeee_0-1682322952381.png
niceeee_0-1682322952381.png1022×885 56.5 KB

how can I add a search bar?

10

Hi @niceeee ,

If I have access I will fix it easily and quickly. Thanks

11

The above code works well for the search bar in the mobile main menu. However, when moving from the main category of the main menu to the subcategory, the layout of the search bar is displayed. Is there a way to make the search bar layout invisible in the subcategory?

photo_6192899300015585548_y.jpg
photo_6192899300015585548_y.jpg824×1280 12.5 KB