How can I center align a search bar in the header of my website?

Store Design

Topic summary

A user seeks help customizing the Dawn theme header to match a specific layout: logo left-aligned, centered search bar (wide), and cart/sign-in right-aligned, similar to theluxurycloset.com.

Solution provided includes two approaches:

Code-based customization:

  • Edit header.liquid file in theme code editor
  • Implement flexbox layout with three sections (logo, search, cart/actions)
  • Add custom CSS to base.css or theme.css for styling and width control
  • Code snippets provided show HTML structure using display: flex and justify-content: space-between

Alternative option:

  • Use Shopify’s built-in customizer
  • Install apps like “Search & Discovery”
  • Consider hiring a Shopify developer/partner for exact replication

The discussion remains open with an offer to provide live code walkthrough or sample files if needed.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi there

Please would you assist me design my header? I want Logo left align, search bar in the middle (long), and cart/sign in to be right align. The theme is Dawn. This the URL of my site https://signatureluxuryclothes.com/

I would so much appreciate it so much if you help me out. I want mine to look exactly like the image below and the site is https://theluxurycloset.com/

1 Like
2

@MrsMarkus

you mean like this https://theluxurycloset.com/?

3

Yes, sir. Exactly!

6

Hi MrsMarkus,
Absolutely! You can definitely achieve that layout in the Dawn theme with a bit of customization. Since you’re aiming for a header similar to TheLuxuryCloset—with the logo on the left, search bar centered and wide, and cart/sign-in on the right—here’s a general approach:

Step 1: Edit Your Header Layout

  1. Go to Online Store > Themes > Edit code.
  2. Open header.liquid (or header.liquid in sections folder).
  3. Inside the main header <div>, you’ll want to structure your layout using flexbox. Example:
{{ 'logo' | asset_url | img_tag }}
{% section 'search-bar' %}
{% render 'header-icons' %}
### Step 2: Adjust CSS

In your base.css or theme.css file, you might want to fine-tune it:

.custom-header-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
}

.header__search input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}

.custom-header-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
}

.header__search input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}

Optional: Use Shopify’s Customizer

If you’re not comfortable editing code, you can install a free Shopify app like “Search & Discovery” to manage search behavior and consider using a Shopify developer or Shopify Partner to help replicate the exact design of TheLuxuryCloset.

Your site is already looking beautiful—this layout upgrade will make it even more polished!

Let me know if you want me to walk you through the code live or share a sample file.