Search Bar Modification

New Member
3 0 0


I want my search bar on to be more prominent:

1. Height: 33 px, Length: 250 px,

2. Font Size: 12 pt


Anyone know how I can do this? I've tinkered with CSS on wordpress sites but am utterly oblivious to Shopify 

Shopify Partner
12 0 1

Very easy..

1. Open "style.css" from your assets section under theme manager

2. Go to line 325 and look for "#header-search" & paste this in there:

#header-search #top-search-input {
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    float: left;
    font-size: 12px;
    height: 30px;
    padding: 6px 3px;
    width: 250px;

Also, you will need to modify the div that it rests in, so...

3. Go to line 353 and replace the #header-search with the following:

#header-search {
    height: 20px;
    width: 295px;

4. To make the search button look right, go to line 335 and add:


to the #top-search-submit class


Thank should do it!

Also, download the Firebug extension - makes everything 1000 times easier