Enable and Configure the New Search Page - Vanilla Success
<main> <article class="userContent"> <p>We have introduced a new Search service for <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) communities. To get the most from the new Search service, use the new Search page so that you can take advantage of these great features:</p><ul><li>Member Search</li><li>Search Term Highlighting</li><li>Search Sorting</li><li>Places Search</li></ul><h2 data-id="new-search-service-availability">New Search service availability</h2><p>The new Search service is available by default with the Foundation theme.</p><p>✔️ <strong>TIP</strong>: If you are using a legacy theme or a custom theme and want to use the new Search service, you can enable the <em>New Search Page</em> lab on the <strong>Vanilla Labs </strong>page (accessible via <strong>Dashboard > Settings > Addons > Labs</strong>).</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/C3QBPQM5YVR8/vanillalabs-newsearchpage.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/C3QBPQM5YVR8/vanillalabs-newsearchpage.png" alt="VanillaLabs-NewSearchPage.png" height="212" width="1034" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: The <strong>Vanilla Labs</strong> page was released with <a href="https://success.vanillaforums.com/kb/articles/385-release-2021-008#labs" rel="nofollow noreferrer ugc">2021.008</a>.</p><h2 data-id="new-search-page-first-look">New Search page - first look</h2><p>The new Search page is customizable, but the default design is well-suited for immediate use in your community. Refer to <strong>Customize the Search page</strong>, below, for information on how to customize the page for your unique brand.</p><p>In the image below, note the one-click filtering buttons that display above the results. Their <em>content-type icons</em> display to the left of the search-results listings.</p><ul><li>You can click a content-type icon to filter the list to just that set of results.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/I2BMBAV8ZEIR/newsearchpage.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/I2BMBAV8ZEIR/newsearchpage.png" alt="NewSearchPage.png" height="631" width="1223" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="customize-the-search-page">Customize the Search page</h2><p>✔️ <strong>TIP</strong>: Be sure to test these changes on your staging site before committing them on your production site.</p><p>The new Search page is easily customizable using Theme Editor.</p><p>📝 <strong>NOTE</strong>: Theme Editor works best for Foundation <em>themes</em>, but can be used to customize Foundation-based <em>pages</em> (such as the new Search page) and <em>components</em> that are enabled in your theme. When you use Theme Editor on a non-Foundation theme, the settings you apply impact <em>only your Foundation-based pages and components</em>.</p><p>To customize the Search page:</p><p>1. Navigate to <strong>Dashboard > Appearance</strong>.</p><p>2. Locate your existing theme and make a copy of it. This launches Theme Editor.</p><p>3. Configure the Search page to match your existing theme by:</p><ul><li>Inserting your theme's header and footer code</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/WH5NW33XNV0K/header-footer.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/WH5NW33XNV0K/header-footer.png" alt="Header_Footer.png" height="497" width="1018" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>Customizing your title bar links</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/HQUJJ5G76ES6/screen-shot-2021-04-09-at-8-08-19-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/HQUJJ5G76ES6/screen-shot-2021-04-09-at-8-08-19-pm.png" alt="Screen Shot 2021-04-09 at 8.08.19 PM.png" height="1586" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>Configuring the page settings and properties (colors, fonts, link, & button styles)</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/LHXN2K641LY3/screen-shot-2021-04-09-at-8-10-11-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/LHXN2K641LY3/screen-shot-2021-04-09-at-8-10-11-pm.png" alt="Screen Shot 2021-04-09 at 8.10.11 PM.png" height="1580" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>4. After you've customized the Search page, give the copy a unique name and save it.</p><p>5. Navigate to your Custom Themes, find the customized page, and click <strong>Apply</strong> to make it live!</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/4WKYN3XT55DL/screen-shot-2021-04-09-at-8-19-17-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4WKYN3XT55DL/screen-shot-2021-04-09-at-8-19-17-pm.png" alt="Screen Shot 2021-04-09 at 8.19.17 PM.png" height="840" width="2022" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p> </article> </main>