Please note that if you're using older (Editor 2.0) or custom templates, you should confirm the header, footer, and CSS information is populated into three Store Editor variables: Search-page-header, Search-page-footer, and Search-page-css. You can also customize the CSS. These variables are located on the Variables page in Store Editor. See Step 2 for more information.

To learn more about the new Site Search, please see this FAQ.

Step 1. Enable the new Site Search

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Site Search Settings.
   
4. Click the Enable new site search checkbox.
   
5. 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.
6. Customize the settings: search result settings, visual display settings, search filter settings.
7. Do not publish your changes yet.

Step 2. Confirm your search results page header, footer, and CSS have been pre-populated

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. It's a good idea to confirm that the information has been pre-populated in these variables. If you do not wish to customize the header, footer, and CSS used on your search results page, go to Step 3 after confirming that the information has been pre-populated.

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 using these variables:

• Search-page-header: Used to customize what appears at the top of your site search results page, in the header area. Accepts HTML and JavaScript.
• Search-page-footer: Used to customize what appears at the bottom of your site search results page, in the footer area. Accepts HTML and JavaScript.
• Search-page-css: Used to customize the CSS for the different elements of your search results page.

Customize the search results page header and footer

1. Go to Store Editor.
   
2. Go to Variables.
   
3. Make your changes to Search-page-header.
   
4. Make your changes to Search-page-footer.
   
5. Click the Update button.
   

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 confirmed and/or customized the header, footer, and CSS for your search results page, we strongly suggest you preview the changes. You will also need to perform a full publish in Store Editor 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 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 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. 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.

Note: Many existing merchants are using Store Editor 2.0. If you have not used the Design Wizard to migrate to the new templates, then you are using version 2 of Store Editor.