Changing the width of the search bar - Empire Theme

Store Design

Topic summary

A user seeks to reduce the width of the search bar in the Empire theme for their Shopify store, but hasn’t been able to locate the correct code.

Solutions Proposed:

Multiple developers provided CSS code snippets to be added to the theme.liquid file above the </head> tag:

  • ThePrimeWeb suggested adjusting width percentage (e.g., changing 50% to desired size) with a reference screenshot
  • PageFly-Richard offered specific CSS targeting the search popup elements
  • Raj-webdesigner provided detailed CSS for the fullscreen search layer and searchbox components

Current Issue:

The user successfully implemented Richard’s solution, which reduced the search bar width on desktop. However, it also affected the mobile version, which they want to keep unchanged.

Status: The discussion remains open as the user needs a desktop-only solution that doesn’t modify the mobile search bar appearance.

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

Hi,I would like to change the search bar to be smaller in width, I have tried to find the code for it but it doesn’t seem to be there. We have the empire theme

Website:https://vauxcentre.co.uk/

2

Hey @Charlotte93 ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Change the 50% to any size you like

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710872823370.jpeg
ThePrimeWeb_0-1710872823370.jpeg1253×933 87.9 KB

3

Hi @Charlotte93

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1710898284166.png
PageFlyRichard_0-1710898284166.png2880×1038 320 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

1 Like
4 
.ui-menu.glFilter-search-popup .gl-fullscreen-layer .gl-d-close-btn{
    width: 30px;
    height: 30px;
    flex: unset;
    padding: unset;
}
.ui-menu.glFilter-search-popup .gl-fullscreen-layer .gl-d-searchbox-input{
    font-size: 18px;
}
.ui-menu.glFilter-search-popup .gl-fullscreen-layer .gl-d-searchbox-icon{
    width: 50px;
    height: 50px;
}
.ui-menu.glFilter-search-popup .gl-fullscreen-layer .gl-fullscreen-header {
    width: 50%;
    margin: 0 auto;
}

Add This Css In Your base.css file and see Magic

5

Hi Richard,

Thank you for this! It changed it on the web, however it changed on the mobile as well when I am happy with how it looks on the mobile. Is there anyway of just changing it on the web and not the mobile too?

Thank you!