Help With The Search Bar (Dawn Theme)

[PartyFair]

I used some code to add the search field in my header, in place of the search icon. Does anyone know how to center the search field in the header, make it wider, and add a button on the right side inside the search?

[rajweb]

Hey @PartyFair ,

To center, widen, and add a button inside the search field in your Shopify theme header, you can modify the code with some custom CSS and HTML. Here’s how you can achieve each part:

Step 1. Centering the Search Field:

-Locate your theme’s header code: Open the header.liquid file (or equivalent in your theme) where the search field code is added.

-Wrap the search field in a container: If it’s not already inside a container, wrap it with a div to help with alignment.

Step 2. Making the Search Field Wider:

Adjust the width with CSS: Add custom CSS to control the width and center alignment of the search field.

.header-search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Adjust width as needed */
    max-width: 600px; /* Controls maximum width */
    margin: 0 auto; /* Centers the container */
}

.search-field {
    flex-grow: 1; /* Makes the search field flexible */
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px; /* Rounded left corners */
    width: 100%; /* Ensures it takes up full width */
}

.search-button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 0 4px 4px 0; /* Rounded right corners */
}

Step 3. Adding the Button Inside the Search Field:

-Ensure the button is inline with the search field: With the button positioned on the right inside the search bar, make it look integrated with the input field.

If the search field and button aren’t aligning as intended, try adjusting padding, margins, and flex settings to achieve the look you want.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[Moeed]

Hey @PartyFair

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[PartyFair]

Thanks so much for the assistance. For the first step, I looked inside the header.liquid and snippets/header-search.liquid and could not locate class=“header-search-container”

So I’m not sure how to proceed… thanks again.

Maybe I removed it when I added the code previously to change the search icon to the search box? I’m new to this so bear with me.

[PartyFair]

This is a new website so there’s not much to it yet…

https://cp0t1b-bz.myshopify.com/?_ab=0&_fd=0&_sc=1

aumpep

[rajweb]

Hey @PartyFair

No worries—it’s easy to reintroduce the missing structure, even if you’ve previously replaced or altered it. Let’s proceed step by step:

Step 1. Locate the Search Box Code:

Since you changed the search icon to a search box earlier, find where this search box code is located:

1. In header.liquid or snippets/header-search.liquid : Look for an input element, such as:

or

{{ 'search' | t }}

If you can’t find it:

-Check for any other liquid files (like snippets) related to the header or search.

-If you’re stuck, share the section of your code where you added or modified the search box. I’ll guide you further.

Steps 2. Add the Missing Container:

Step 3. Add CSS:

Once the structure is set, you can follow the earlier steps to style and align the search box.

If you still need help, feel free to share the current search code you’ve added or the part of header.liquid where you made changes, and I’ll provide the exact adjustments!

thanks

[PartyFair]

Thanks again for the help, but I couldn’t figure it out… here is the code that I used to add the current search field:

(For reference here are the steps that I used (https://community.shopify.com/c/shopify-design/open-search-bar-instead-of-icon-in-the-header-of-dawn/td-p/2420808)

:root { --inputs-radius: 20px !important; } .mobile-search { display: none; } .desktop-search { display: block; } @media only screen and (min-width: 769px) { predictive-search[open] .predictive-search { position: absolute; min-width: 768px; left: -768px; transform: translateX(50%); } } @media only screen and (max-width: 768px) { .mobile-search { display: block; } .desktop-search { display: none; } }

{% render 'header-search', input_id: 'Search-In-Modal' %}

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

{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}

{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}

{%- endif -%}

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