How To Move The Search Bar to left little bit with currency selector and card button

Store Design
, , ,

Topic summary

A user seeks to reposition the search bar slightly to the left alongside the currency selector and cart button on their Shopify store header.

Multiple CSS Solutions Provided:

Three community members offered similar approaches using custom CSS:

  • PageFly-Oliver suggested adding code to theme.liquid using media queries and CSS order properties to adjust desktop header icon positioning
  • sahilsharma9515 recommended inserting CSS into theme.css/base.css/style.css targeting .header__icons--localization with adjustable right margin (starting at 10px)
  • kanchandigisoft also provided a solution following similar steps

Implementation Steps:

  1. Navigate to Online Store → Theme → Edit Code
  2. Locate the appropriate CSS file (theme.css, base.css, or style.css)
  3. Add the provided CSS code at the bottom of the file
  4. Adjust pixel values as needed for desired positioning

Status: The discussion remains open with no confirmation from the original poster about which solution worked or if the issue was resolved.

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

https://060ef5-5.myshopify.com/

Screenshot 2024-04-11 122140 (1).png
Screenshot 2024-04-11 122140 (1).png999×280 63.7 KB

2

Hi @Jackson-pollock ,

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 the bottom of the file → Save

<style>
@media(min-width:767px){
.header__icons .desktop-localization-wrapper{
order: 2 !important;
}
.header__icons .EzfyHeaderSearch.EzfyHeaderSearch--desktop{
order: 0 !important;
}
}

</style>
3

Hi @Jackson-pollock Thanks for the URL, Please add the code in your theme.css/base.css/style.css file which is available in your theme.

.header__icons.header__icons--localization.header-localization {
    margin-right: 10px !important; // change the 10px according to you as you want it.
}

If you are not sure where is your theme.css/base.css/index.css/style.css file 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.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

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

Best Regards

Sahil

1 Like
4

Hi @Jackson-pollock ,

You can try this code by following these steps.

https://prnt.sc/eiMfzy_8tBz1