If you're using standard Editor 2.0 templates or custom templates, in addition to enabling the new Site Search on the Site Search Settings page, you must also verify and/or customize the header, footer, and CSS information that will be automatically populated into three new Store Editor variables: Search-page-header, Search-page-footer, and Search-page-css (see Step 2 for more information about where the information populated into these variables is retrieved from). These variables are located on the Variables page in Store Editor.

Search-page-header: This variable is used to customize what appears at the top of your site search results page, in the header area. HTML and JavaScript may be entered into this variable.

Search-page-footer: This variable is used to customize what appears at the bottom of your site search results page, in the footer area. HTML and JavaScript may be entered into this variable.

Search-page-css: This variable is used to customize the CSS used to apply styles (fonts, colors, borders, page element positioning, etc.) to different elements of your search results page.

Step 1. Enable the new Site Search

1. In Store Manager, click the "Site Search Settings" link.
2. On the Site Search Settings page, click the "Enable new site search" checkbox.
3. Click the "Save" button on the confirmation pop-up. Note: This saves your changes, but does not publish the new Site Search to your live site.
4. Customize your search result settings, visual display settings, and search filter settings.
5. Do not publish your changes at this time.

Step 2. Verify your search results page header, footer, and CSS

When you enable the new Site Search for your store, the Search-page-header, Search-page-footer, and Search-page-css variables should be pre-populated with the checkout header, footer, and checkout CSS used for your store. If you have defined a custom header and footer using the Checkout Wrapper options in Checkout & Registration Manager, this information will be used. If you have not provided Checkout Wrapper information, this content is pulled from the head section of your published checkout settings. This information is retrieved only at the time of enabling the new Site Search for your store.

If you wish to customize the header, footer, and CSS used on your search results page, you may do so in the Variables section of Store Editor.

To customize the search results page header:

1. In Store Editor, click the "Variables" link in the Editor navigation bar.
2. On the Variables page, locate the Search-page-header variable.
3. Modify the contents of this variable.
4. Click the "Update" button.

To customize the search results page footer:

1. In Store Editor, click the “Variables” link in the Editor navigation bar.
2. On the Variables page, locate the Search-page-footer variable.
3. Modify the contents of this variable.
4. Click the "Update" button.

To customize the search results page CSS:

If you are comfortable with using and modifying CSS, you may use the Search-page-css variable to customize the CSS used to apply styles (fonts, colors, borders, page element positioning, etc.) to different elements of your search results page.

To customize the width of your search results page, add the following CSS to your Search-page-css variable and update the width information (indicated in the example below by 785px) to the width you wish to use:

<style> .ys_wrapper { width:785px; } </style>

Step 3. Preview and publish your changes

Once you've enabled the new Site Search feature on the Site Search Settings page, defined Site Search settings, and verified and/or customized the header, footer, and CSS for your search results page, previewing your changes in Store Editor is strongly recommended. You will need to perform a full Store Editor publish to enable the new Site Search on your live site.

If you're using Site Search on your checkout pages and you've enabled the new Site Search, you will also need to publish your Order Settings to update your these pages. Learn more.

If you are not comfortable with updating these variables and configuring the new Site Search, you may wish to contact one of our Yahoo! Merchant Solutions developer partners who can set up the new Site Search for your store.

Information for merchants using Customer Registration and/or Floating Cart

If you are using custom templates and have Customer Registration and/or Floating Cart enabled, as of February 22, 2012, these features will no longer be automatically enabled on your search results page. Instead, you will need to add a div code to your Search-page-header variable. Learn how. You may also need to add or modify CSS used in your Search-page-css variable to adjust the style and positioning of these links.

All-caps in category drop-down

A known issue exists in which the text in the category drop-down appears in all-caps on your store pages, but shows as title case on your preview page. To correct this issue, you may add the following CSS to your store's css-edits file:

#searcharea label {
text-transform: none;
}

To add this CSS to your css-edits file:

1. Copy the CSS above.
2. In Store Editor, open the Advanced Editor, and click on the "Contents" link in the Advanced Editor toolbar.
3. On the Contents page, click the "css-edits" link.
4. Click the "Edit" link in the Editor toolbar.
5. Paste the CSS styles into the "Css-text" field.
6. Click the "Update" button.

Once you've previewed your updates in Store Editor and are ready to publish the updated CSS and any unpublished Site Search settings to your live site, perform a full Store Editor publish.