How to move search icon from left to right, align with account and cart icon for Blockshop Theme?

[JunNa]

Hello everyone,

I would like to move ‘search’ icon on the header from left to right, right next to account and cart icon.

Thank you all!

Here is the sections/header.liquid code:

{%- liquid
comment
Translations
endcomment

assign account_t = ‘layout.header.account_view_link’ | t
assign toggle_drawer_t = ‘layout.header.toggle_drawer’ | t
assign cart_title_t = ‘cart.title’ | t
assign search_t = ‘general.search.search’ | t

comment
Variables
endcomment

assign bg_color = section.settings.background-color
assign bottom_border = section.settings.bottom-border
assign cart_type = settings.cart–type
assign highlight_color = section.settings.highlight-color
assign highlight_item = section.settings.highlight-item | downcase
assign hover_disabled = section.settings.hover-disabled
assign layout = section.settings.layout
assign logo = section.settings.logo
assign logo_height = section.settings.logo-height
assign menu = section.settings.menu
assign mobile_logo_height = section.settings.mobile-logo-height
assign modal_bg = section.settings.modal-background-color
assign modal_item = section.settings.modal-item | downcase
assign modal_white_text = section.settings.modal-white-text
assign overlap_behavior = section.settings.overlap-behavior
assign reduce_height = section.settings.reduce-height
assign scroll_hide = section.settings.hide-on-scroll
assign show_icons = section.settings.icons-enabled
assign show_search = section.settings.search-enabled
assign sticky_enabled = section.settings.sticky-enabled
assign transparent_enabled = section.settings.transparent-enabled
assign transparent_white_text = section.settings.transparent-white-text
assign transparent_logo = section.settings.transparent-logo
assign white_text = section.settings.white-text

assign region_enabled = false
if section.settings.show-region-selector and localization.available_countries.size > 1
assign region_enabled = true
endif

assign locale_enabled = false
if section.settings.show-locale-selector and localization.available_languages.size > 1
assign locale_enabled = true
endif
-%}

:root { {%- if sticky_enabled -%} --header--sticky: 1; #shopify-section-{{ section.id }} { position: sticky; top: 0; z-index: 5; } {%- else -%} --header--sticky: 0; {%- endif -%} .section--announcement-bar ~ #shopify-section-{{ section.id }} { top: calc(var(--announcement--sticky, 0) * var(--announcement--height, 0px)); z-index: 4; } }

{%- capture logo -%}

{%- render 'logo', logo: logo, height: logo_height, mobile_height: mobile_logo_height -%}

{%- if transparent_logo -%}

{%- render 'logo', logo: transparent_logo, height: logo_height, mobile_height: mobile_logo_height -%}

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

{%- capture account_html -%}
{%- if shop.customer_accounts_enabled -%}
{%- if customer -%}

{%- liquid
if show_icons
render ‘icons’, icon: ‘account’
else
echo account_t
endif
-%}

{%- else -%}

{%- liquid
if show_icons
render ‘icons’, icon: ‘account’
else
echo account_t
endif
-%}

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

{%- if shop.customer_accounts_enabled -%}

{{- account_html -}}

{%- endif -%}

{%- capture search_html -%}
{%- if show_search -%}
<button
class=“header–search”
data-drawer-open=“top”
data-drawer-view=“search”
data-item=“nav-text”
aria-label=“{{ search_t }}”
tabindex=“0”

{%- liquid
if show_icons
render ‘icons’, icon: ‘search’
else
echo search_t
endif
-%}

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

{%- if show_search -%}

{{- search_html -}}

{%- endif -%}

{%- render 'y-menu', menu: menu, blocks: section.blocks, highlight_color: highlight_color, highlight_item: highlight_item, modal_item: modal_item -%}

<header-root
class=“header–root”
data-section-id=“{{ section.id }}”
data-section-type=“header”
data-spacing=“none”
data-bottom-border=“{{ bottom_border }}”
{% if white_text %}
data-text-color=“white”
{% endif %}
data-hover-disabled=“{{ hover_disabled }}”
data-transparent-enabled=“{{ transparent_enabled }}”
data-transparent-white-text=“{{ transparent_white_text }}”
data-scroll-hide=“{{ scroll_hide }}”
data-sticky=“{{ sticky_enabled }}”
data-background-color=“{{ bg_color }}”
data-layout=“{{ layout }}”
data-overlap-behavior=“{{ overlap_behavior }}”
data-reduce-height=“{{ reduce_height }}”
data-sticky=“false”
aria-expanded=“false”
aria-hidden=“false”

{%- if request.page_type == 'index' -%}

{{- logo -}}

{%- else -%}

{{- logo -}}

{%- endif -%}

{%- if layout == ‘center-below’ or overlap_behavior == ‘center-below’ -%}

{{ search_html }}

{%- endif -%}

{%- liquid
if layout == ‘drawer’ or overlap_behavior == ‘drawer’
echo search_html
endif
-%}

{%-
render ‘x-menu’,
handle: menu,
blocks: section.blocks,
highlight_color: highlight_color,
highlight_item: highlight_item,
modal_item: modal_item
-%}

{%- if locale_enabled or region_enabled -%}

{%- render 'localization', locale_enabled: locale_enabled, region_enabled: region_enabled, id: 'header' -%}

{%- endif -%}

{{- search_html -}}
{{- account_html -}}

<a
class=“header–cart”
data-type=“{% if show_icons %}icon{% else %}text{% endif %}”
aria-label=“{{ cart_title_t }}”
{%- if cart_type == ‘drawer’ -%}
data-drawer-open=“right”
data-drawer-view=“cart-drawer”
aria-haspopup=“menu”
href=“#”
{%- else -%}
href=“{{ routes.cart_url }}”
{%- endif -%}
data-cart-count=“{{ cart.item_count }}”

{%- liquid
if show_icons
render ‘icons’, icon: ‘bag’
else
echo cart_title_t
endif
-%}

{%- unless modal_item == blank -%}
{%- liquid
assign modal_content = ‘sections.header.empty_page_content’ | t
unless section.settings.modal-content == blank
assign modal_content = pages[section.settings.modal-content].content
endunless
-%}

<modal-root
class=“modal–root”
data-id=“header-modal”
data-background-color=“dark”
data-translucent=“true”
data-transition-item=“viewport”
data-transition-type=“fade-in”
data-transition-trigger=“custom”
aria-hidden=“true”

{{- modal_content -}}

{%- endunless -%}

{% schema %}
{
“name”: “Header”,
“class”: “section–header”,
“tag”: “header”,
“settings”: [
{
“type”: “paragraph”,
“content”: “Add/edit/hide each megamenu in this section’s block settings.”
},
{
“type”: “header”,
“content”: “General layout”
},
{
“id”: “layout”,
“label”: “Layout”,
“type”: “select”,
“options”: [
{ “label”: “Logo left, navigation left”, “value”: “left-left” },
{ “label”: “Logo left, navigation center”, “value”: “left-center” },
{ “label”: “Logo center, navigation left”, “value”: “center-left” },
{ “label”: “Logo center, navigation below”, “value”: “center-below” },
{ “label”: “Drawer”, “value”: “drawer” }
],
“default”: “left-left”
},
{
“id”: “background-color”,
“label”: “Background color”,
“type”: “select”,
“options”: [
{
“label”: “None”,
“value”: “none”
},
{
“label”: “Light”,
“value”: “light”
},
{
“label”: “Dark”,
“value”: “dark”
},
{
“label”: “Accent 1”,
“value”: “accent-1”
},
{
“label”: “Accent 2”,
“value”: “accent-2”
}
],
“default”: “none”
},
{
“id”: “bottom-border”,
“label”: “Bottom border”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “white-text”,
“label”: “Use white text color”,
“type”: “checkbox”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “hover-disabled”,
“label”: “Disable hover animation”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “sticky-enabled”,
“label”: “Enable sticky bar”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “hide-on-scroll”,
“label”: “Hide on scroll”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “reduce-height”,
“label”: “Reduce height”,
“default”: false
},
{
“id”: “overlap-behavior”,
“label”: “Menu overlap behavior”,
“type”: “select”,
“options”: [
{ “label”: “Drawer”, “value”: “drawer” },
{ “label”: “Move below”, “value”: “center-below” }
],
“default”: “drawer”,
“info”: “Occurs when menu doesn’t have enough space in some screen resolutions.”
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”
},
{
“label”: “Custom logo height”,
“id”: “logo-height”,
“type”: “range”,
“min”: 15,
“max”: 100,
“step”: 5,
“unit”: “px”,
“default”: 35,
“info”: “This is referring to the natural height and should be half the height of the image you uploaded to ensure it stays sharp on retina screens.”
},
{
“label”: “Mobile logo height”,
“id”: “mobile-logo-height”,
“type”: “range”,
“min”: 15,
“max”: 100,
“step”: 5,
“unit”: “px”,
“default”: 30
},
{
“type”: “header”,
“content”: “Transparent header”,
“info”: “To show a transparent header, add a compatible section (such as slideshow) as the first section. If the Header section isn’t the last section in the Header group, sections following it in the group will be hidden.”
},
{
“type”: “checkbox”,
“id”: “transparent-enabled”,
“label”: “Enable”,
“default”: false
},
{
“id”: “transparent-white-text”,
“label”: “Use white text color”,
“type”: “checkbox”,
“default”: false
},
{
“type”: “image_picker”,
“id”: “transparent-logo”,
“label”: “Logo image”
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “menu”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “checkbox”,
“id”: “search-enabled”,
“label”: “Show search”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “icons-enabled”,
“label”: “Show icons”,
“default”: true
},
{
“type”: “header”,
“content”: “Highlight link”
},
{
“type”: “text”,
“id”: “highlight-item”,
“label”: “Menu item”,
“info”: “The name of any top-level link”
},
{
“id”: “highlight-color”,
“label”: “Color”,
“type”: “color”,
“default”: “#d02e2e”
},
{
“type”: “header”,
“content”: “Modal link”
},
{
“type”: “text”,
“id”: “modal-item”,
“label”: “Menu item”,
“info”: “The name of any top-level link”
},
{
“type”: “page”,
“id”: “modal-content”,
“label”: “Modal content”
},
{
“id”: “modal-background-color”,
“label”: “Modal background color”,
“type”: “select”,
“options”: [
{ “label”: “None”, “value”: “none” },
{ “label”: “Light”, “value”: “light” },
{ “label”: “Dark”, “value”: “dark” },
{ “label”: “Accent 1”, “value”: “accent-1” },
{ “label”: “Accent 2”, “value”: “accent-2” }
],
“default”: “none”
},
{
“id”: “modal-white-text”,
“label”: “Use white text color”,
“type”: “checkbox”,
“default”: false
},
{
“type”: “header”,
“content”: “Country/region Selector”,
“info”: “To add a country/region, go to your payment settings.”
},
{
“type”: “checkbox”,
“id”: “show-region-selector”,
“label”: “Show country/region selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Language Selector”,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show-locale-selector”,
“label”: “Show language selector”,
“default”: true
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Image grid item”,
“settings”: [
{
“type”: “text”,
“id”: “menu-item”,
“label”: “Menu item”,
“info”: “The name of any top-level link”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“id”: “image-display-type”,
“label”: “Image aspect ratio”,
“type”: “select”,
“options”: [
{ “label”: “Original aspect ratio”, “value”: “original” },
{ “label”: “Adjustable aspect ratio”, “value”: “aspect-ratio” }
],
“default”: “aspect-ratio”
},
{
“id”: “aspect-ratio”,
“label”: “Adjustable aspect ratio”,
“type”: “range”,
“min”: 24,
“max”: 200,
“step”: 2,
“default”: 100,
“info”: “Use the previous setting to enable this.”
},
{
“type”: “text”,
“id”: “description”,
“label”: “Description”,
“default”: “Description”
},
{
“type”: “url”,
“id”: “link-url”,
“label”: “Link”,
“info”: “Entire block will become a link.”
},
{
“type”: “header”,
“content”: “Mobile”
},
{
“type”: “image_picker”,
“id”: “mobile-image”,
“label”: “Mobile image”
},
{
“id”: “mobile-image-display-type”,
“label”: “Mobile image aspect ratio”,
“type”: “select”,
“options”: [
{
“label”: “Original aspect ratio”,
“value”: “original”
},
{
“label”: “Adjustable aspect ratio”,
“value”: “aspect-ratio”
},
{
“label”: “X-Small”,
“value”: “x-small”
},
{
“label”: “Small”,
“value”: “small”
},
{
“label”: “Medium”,
“value”: “medium”
},
{
“label”: “Large”,
“value”: “large”
},
{
“label”: “X-Large”,
“value”: “x-large”
},
{
“label”: “Fit screen”,
“value”: “fit-screen”
}
],
“default”: “original”
},
{
“id”: “mobile-aspect-ratio”,
“label”: “Mobile adjustable aspect ratio”,
“type”: “range”,
“min”: 32,
“max”: 200,
“step”: 2,
“default”: 134,
“info”: “Use the previous setting to enable this.”
}
]
},
{
“type”: “blog”,
“name”: “Blog”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “menu-item”,
“label”: “Menu item”,
“info”: “The name of any top-level link”
},
{
“id”: “blog”,
“label”: “Choose blog”,
“type”: “blog”
},
{
“id”: “tag-select”,
“label”: “Filter by tag”,
“type”: “text”,
“default”: “pinned”,
“info”: “Tag articles with ‘pinned’ or change this to match an existing tag”
},
{
“id”: “image-size”,
“label”: “Article image size”,
“type”: “select”,
“options”: [
{ “label”: “Natural”, “value”: “natural” },
{ “label”: “Square (1:1)”, “value”: “square” },
{ “label”: “Landscape (4:3)”, “value”: “landscape” },
{ “label”: “Portrait (2:3)”, “value”: “portrait” }
],
“default”: “natural”
},
{
“id”: “show-cta”,
“label”: “Show call-to-action”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “show-date”,
“label”: “Show date”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “show-excerpt”,
“label”: “Show excerpt”,
“type”: “checkbox”,
“default”: true
}
]
},
{
“type”: “full-width-promo”,
“name”: “Full width promotion”,
“settings”: [
{
“type”: “text”,
“id”: “menu-item”,
“label”: “Menu item”,
“info”: “The name of any top-level link”
},
{
“type”: “header”,
“content”: “Text layout”
},
{
“id”: “white-text”,
“label”: “Use white text color”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “overlap”,
“label”: “Overlap text”,
“type”: “checkbox”,
“default”: false,
“info”: “Not applicable for overlaid text”
},
{
“id”: “heading-type”,
“label”: “Heading type”,
“type”: “select”,
“options”: [
{ “label”: “Banner”, “value”: “banner-heading” },
{ “label”: “Featured”, “value”: “featured-heading” },
{ “label”: “Large”, “value”: “section-heading” },
{ “label”: “Medium”, “value”: “block-heading” }
],
“default”: “featured-heading”
},
{
“id”: “text-position”,
“label”: “Text placement with image”,
“type”: “select”,
“options”: [
{ “label”: “Top”, “value”: “top” },
{ “label”: “Bottom”, “value”: “bottom” },
{ “label”: “Left”, “value”: “left” },
{ “label”: “Right”, “value”: “right” },
{ “label”: “Overlay”, “value”: “overlay” }
],
“default”: “overlay”
},
{
“label”: “Horizontal text position”,
“id”: “text-horizontal-alignment”,
“type”: “select”,
“options”: [
{ “label”: “Left”, “value”: “left” },
{ “label”: “Center”, “value”: “center” },
{ “label”: “Right”, “value”: “right” }
],
“default”: “center”,
“info”: “Only applies to the overlay text placement.”
},
{
“label”: “Vertical text position”,
“id”: “text-vertical-alignment”,
“type”: “select”,
“options”: [
{ “label”: “Bottom”, “value”: “bottom” },
{ “label”: “Center”, “value”: “center” },
{ “label”: “Top”, “value”: “top” }
],
“default”: “center”,
“info”: “Only applies to the overlay text placement.”
},
{
“id”: “text-width”,
“label”: “Text width”,
“type”: “select”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “medium”
},
{
“id”: “text-style”,
“label”: “Text visibility enhancement”,
“type”: “select”,
“options”: [
{
“label”: “None”,
“value”: “none”
},
{
“label”: “Text shadow”,
“value”: “text-shadow”
},
{
“label”: “Gradient behind text”,
“value”: “eclipse-shadow”
}
],
“default”: “none”
},
{
“id”: “text-background-color”,
“label”: “Text background color”,
“type”: “select”,
“options”: [
{
“label”: “Transparent”,
“value”: “transparent”
},
{
“label”: “Light”,
“value”: “light”
},
{
“label”: “Dark”,
“value”: “dark”
},
{
“label”: “Accent 1”,
“value”: “accent-1”
},
{
“label”: “Accent 2”,
“value”: “accent-2”
}
],
“default”: “transparent”
},
{
“type”: “header”,
“content”: “Image layout”
},
{
“id”: “image-display-type”,
“label”: “Image aspect ratio”,
“type”: “select”,
“options”: [
{
“label”: “Original aspect ratio”,
“value”: “original”
},
{
“label”: “Adjustable aspect ratio”,
“value”: “aspect-ratio”
},
{
“label”: “X-Small”,
“value”: “x-small”
},
{
“label”: “Small”,
“value”: “small”
},
{
“label”: “Medium”,
“value”: “medium”
},
{
“label”: “Large”,
“value”: “large”
},
{
“label”: “X-Large”,
“value”: “x-large”
},
{
“label”: “Fit screen”,
“value”: “fit-screen”
}
],
“default”: “medium”
},
{
“id”: “aspect-ratio”,
“label”: “Adjustable aspect ratio”,
“type”: “range”,
“min”: 24,
“max”: 200,
“step”: 2,
“default”: 56,
“info”: “Use the previous setting to enable this.”
},
{
“id”: “overlay-style”,
“label”: “Image overlay”,
“type”: “select”,
“options”: [
{
“label”: “None”,
“value”: “none”
},
{
“label”: “Darken entire image”,
“value”: “darken”
},
{
“label”: “Dark gradient from top”,
“value”: “darken-top”
},
{
“label”: “Dark gradient from bottom”,
“value”: “darken-bottom”
}
],
“default”: “darken-bottom”,
“info”: “Can enhance text visibility”
},
{
“type”: “header”,
“content”: “Content”
},
{
“id”: “image”,
“label”: “Image”,
“type”: “image_picker”
},
{
“id”: “overline”,
“label”: “Overline”,
“type”: “text”,
“default”: “Overline text”
},
{
“id”: “title”,
“label”: “Heading”,
“type”: “text”,
“default”: “Image with text”,
“info”: “Emphasize featured or banner headings by wrapping text with square brackets, ie. This is [emphasized].”
},
{
“id”: “description”,
“label”: “Description”,
“type”: “richtext”,
“default”: “

Combine imagery with text to create stand-out campaign sections, eye-catching promotions, information blocks and more.

”
},
{
“id”: “link-url”,
“label”: “Link”,
“type”: “url”,
“info”: “Entire block will become a link when no link text or description.”
},
{
“id”: “link-text”,
“label”: “Optional link”,
“type”: “text”
},
{
“type”: “header”,
“content”: “Mobile”
},
{
“id”: “mobile-image”,
“label”: “Mobile image (optional)”,
“type”: “image_picker”
},
{
“id”: “mobile-overlay”,
“label”: “Overlay text on small devices”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “mobile-hide-description”,
“label”: “Hide description in mobile”,
“type”: “checkbox”,
“default”: false
},
{
“id”: “mobile-image-display-type”,
“label”: “Mobile image aspect ratio”,
“type”: “select”,
“options”: [
{
“label”: “Original aspect ratio”,
“value”: “original”
},
{
“label”: “Adjustable aspect ratio”,
“value”: “aspect-ratio”
},
{
“label”: “X-Small”,
“value”: “x-small”
},
{
“label”: “Small”,
“value”: “small”
},
{
“label”: “Medium”,
“value”: “medium”
},
{
“label”: “Large”,
“value”: “large”
},
{
“label”: “X-Large”,
“value”: “x-large”
},
{
“label”: “Fit screen”,
“value”: “fit-screen”
}
],
“default”: “original”
},
{
“id”: “mobile-aspect-ratio”,
“label”: “Mobile adjustable aspect ratio”,
“type”: “range”,
“min”: 32,
“max”: 200,
“step”: 2,
“default”: 134,
“info”: “Use the previous setting to enable this.”
},
{
“label”: “Vertical text position”,
“id”: “mobile-text-alignment”,
“type”: “select”,
“options”: [
{ “label”: “Center”, “value”: “center” },
{ “label”: “Bottom”, “value”: “bottom” }
],
“default”: “center”,
“info”: “Applies when text overlays image.”
}
]
},
{
“type”: “product-list”,
“name”: “Product list”,
“settings”: [
{
“type”: “text”,
“id”: “menu-item”,
“label”: “Menu item”,
“info”: “The name of any top-level link”
},
{
“type”: “product_list”,
“id”: “product-list”,
“label”: “Products”,
“limit”: 4
}
]
}
],
“enabled_on”: {
“groups”: [“header”]
}
}
{% endschema %}

[Made4uo-Ribe]

Hi @JunNa

Please, share your store URL. Thanks!

[JunNa]

Hi!
please see the url below.

https://bibiclothingusa.myshopify.com/

PW: bibi2025

Thank you!

[Made4uo-Ribe]

Thanks for the info, try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.header--search-container {
    grid-area: secondary-nav;
    justify-self: end;
    width: 100%;
    display: flex;
}

.header--root[data-layout=center-below] .header--search-container {
    display: flex !important;
    justify-content: flex-end;
}

nav.header--secondary-nav {
    margin-right: 32px;
}

• And Save.

• result:

• 
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[JunNa]

Thank you so much!

It works like your result!

[nmardania]

Hi, I have the same issue and tried the above but no luck. Can anyone help? Thanks.

[Moeed]

Hey @nmardania

Happy to help you out, share your store URL and Password if enabled.

Best,
Moeed