Purpose:

  • The Refine Search control enhances the search facility by enabling the search filtration through multiple options such as: Categories, Brands, Attributes, Variants, Price Range, Availability - which displays 'Exclude Out of Stock' option, Customized/default Product tags, or Product Groups.


Prerequisite:

  • To enable 'Refine Search' functionality, you need to drag 'Product Showcase' control in the same page where the ‘Refine Search’ Control is configured and configure 'Product Showcase' with required products & select 'Refine Search' option from the 'Purpose' drop-down under the Settings tab.

    Please refer: Product Showcase

    • Note: The menu options related to the products configured in the 'Product showcase' will only be displayed in the 'Refine Search' control in the storefront. However, all the configured menu options will be displayed in the 'Refine Search' control in the Control Panel.

  • Customizable Title for 'Product Tags' section (or Menu): You can now customize the title of 'Product Tags' section (or Menu) under which the product tags defined to the products of mapped product showcase will be displayed in the 'Refine Search' control. You can also define multiple 'Product Tags' sections and also define which product tags to be displayed under which 'Product Tags' section.

    • Note: Earlier all the product tags related to the products of the mapped 'Product Showcase' are displayed under a single 'Product Tags' section of the 'Refine Search' occupying huge space when more tags are there.

  • After configuration of the 'Refine Search Control' and relative 'Product Showcase', when a menu option (i.e. Categories, Brands, Attributes, Variants, Price Range, Availability - which displays 'Exclude Out of Stock' option, Customized/default Product tags, or Product Groups) is selected from the 'Refine Search' control, the respective products will be displayed in the mapped 'Product Showcase' in the storefront.

How do I configure the 'Refine Search' Drag & Drop control?

(or)

How can I place the 'Refine Search' control on any desired page and configure it?

(or)

How can I provide enhanced search facility to end-user through the menus such as Categories, Brands, Attributes, Variants, Price Range, Availability - which displays 'Exclude Out of Stock' option, Customized/default Product tags, or Product Groups etc...?


To configure the 'Refine Search' control, do the following:

  • Log in to the 'Anywhere Commerce Control Panel' by using your User Name (Email Address) and Password.


 Refine Search

  • You will be navigated to the 'Dashboard' page.


 Refine Search

  • Click the  Refine Search icon. The Dashboard & Setup section will be displayed as shown in the figure.


 Refine Search

  • Click Design Home Page. You will be navigated to the Drag & Drop Controls page.


 Refine Search

  • Select a page from the Design Your Site drop-down (which is located on the top) in which you want to add the Refine Search control.
    • Note: If the required page is not available in the drop-down, you can create it now.
      Please refer: Create Custom Pages
  • Click Product Catalogue tab and drag and drop the Product Showcase control into a pane as per your requirement. Now configure 'Product Showcase' with 'Refine Search' option through the 'Purpose' drop-down.
    Please Refer: Product Showcase

  • Click Page/Site Navigation tab and drag and drop the Refine Search control into a pane as per your requirement.
  • Click Edit which is on the top right corner of Refine Search control. This will open the Refine Search dialog box as shown in the figure.


 Refine Search

  • By default, Display Control option is selected as ON. If you don't want to display this control in the storefront, select Off from the Display Control option.
    • Note: If 'Display Control' option is selected as Off, but the control is properly configured in a page, then the control will be displayed in the respective page of CP (Control Panel) but not displayed in SF (Storefront)
  • To give a title to this Refine Search control, enter the name in the Title text box.
  • Select the suitable heading tag from H1 to H6 from the respective drop-down.
    • Note: Heading Tags are attached to the title for better SEO rankings. The importance decrease from <H1> to <H6>. Please make sure your heading structure is SEO-friendly while allotting these tags.
  • To give a specific look and feel to your container like color, graphical appearance, etc…select Container 1, Container 2 or Container_nopadding from the Theme Container drop-down.
    • Note: Container 1 or Container 2 gives the different color look and graphical appearance of the container; whereas, Container_nopadding gives a plain container without any specified classes.
  • To specify the number of columns in which the menu items of 'Refine Search' control should be displayed, enter the respective value in the No. of Columns text box.
  • Scroll with Page: This option allows the 'Refine Search Control' to scroll along with the page in which it is configured so that, the control is always visible even when the page is being scrolled up or down.
    • Note: If this option is not selected as 'Yes', then the 'Refine Search Control' will not be visible when the respective page is scrolled down.
    • By default this option is selected as No. If you want to activate this feature, select Yes radio button.
  • Show category hierarchy: This option allows you to display category hierarchy in 'Refine Search Control'.
    • If you want to activate this feature, select Yes radio button. After proper configuration, the category hierarchy will be displayed as shown in the figure.


 Refine Search

  • If you don't want to activate this feature and want to display categories normally with checkboxes, then select No radio button. After proper configuration, the categories will be displayed as shown in the figure.


 Refine Search

  • This option is available for the brand page, category page, and custom pages.
  • In brand page, categories are shown in a tree structure by default. However, you can change these settings.
  • View Template: This option is helpful in choosing different views of Refine search.
  • To use the Accordion view of refine the search, select a respective template from the View Template drop-down.
  • Example: Refine Search_Accordion template.
    • Note: By default, this template will be available in the View Template drop-down. If not, you need to create this template accordingly. Please contact your point of contact at Capillary for further help.
    • The 'Accordion View' of Refine search would be looking like the following figure.


 Refine Search

  • To use the Tab view of refine the search, select a respective template from the View Template drop-down.
    • Example: Refine Search_Tab template.
      • Note: You need to create this template accordingly. Please contact your point of contact at Capillary for further help.
      • The 'Tab View' of Refine search would be looking like the following figure.


 Refine Search

  • Note: The Tab view or Accordion view of the 'Refine Search' will only work when the 'Showcase Type' of the mapped 'Product Showcase' is selected as 'Razor'.
  • There are two ways to configure 'Refine Search' control.

    1. Normal (i.e. Basic): Here, there is no option to display only selective 'Attributes' or 'Variants'. So, a complete list of 'Attributes' or 'Variants' will be displayed irrespective of their applicability to the current page.
    2. Advanced: Here, you can show only selective 'Attributes' or 'Variants' as per applicability and your choice. You can also define the number of columns that should be displayed in the selected options (i.e. in Categories, Brands, Attributes, Variants, Price Range, Availability - which displays 'Exclude Out of Stock' option, Customized /default Product tags, or Product Groups menus).

    • Note: You can perform either a Normal or Advanced configuration


1. Normal (or Basic) 'Refine Search' Configuration:

  • By default the Normal radio button will be selected.


 Refine Search

  • Here you can define the menu items (i.e. Categories, Brands, Attributes, Variants, Price Range, Availability - which displays 'Exclude Out of Stock' option, Product tags, or Product Groups) to be displayed in 'Refine Search Control' and the order of appearance of those menu items.
  • To select a menu item, select a unique order of display of that menu item (i.e. in 'Refine Search') from the respective Order drop-down.
    • Note: If you don't want to display a specific menu (i.e. Categories, Brands, Attributes, Variants, Price Range, Availability - which displays 'Exclude Out of Stock' option, Product tags, or Product Groups), select none for that option.
      For Example, if you don't want to display the Brands option in the 'Refine Search' control, select the 'Order' of 'Brand' as none.


Adding Category Menu:

  • To display the 'Category' menu, select the order or sequence of the display from the respective Order drop-down. To display the submenu of 'Category' menu in a specific number of columns, enter the suitable value in the respective No. of Column(s) text box.


Adding Brand Menu:

  • To display the 'Brands' menu, select the order or sequence of the display from the respective Order drop-down. To display the submenu of 'Brands' menu in a specific number of columns, enter the suitable value in the respective No. of Column(s) text box.


Adding Attributes Menu:

  • To display the 'Attributes' menu, select the order or sequence of display from the respective Order drop-down.


Adding Variants Menu:

  • To display the 'Variants' menu, select the order or sequence of the display from the respective Order drop-down.


Adding Price Menu:

  • To display the 'Price Range Scale', select the order or sequence of display from the respective Order drop-down.


Adding Availability Menu:

 Refine Search

  • To display Exclude out of Stock option through 'Availability' menu, select the order or sequence of the display from the respective Order drop-down.
    • Note: Availability option will be displayed when Show out of Stock Products option is selected through Settings > Application Settings > Store Settings module.


Adding Product Tags Menu:

  • To display the 'Product Tags' menu, select the order or sequence of the display from the respective Order drop-down. To display the submenu of 'Product Tags' menu in a specific number of columns, enter the suitable value in the respective No. of Column(s) text box.


Adding Product Groups Menu:

  • To display the 'Product Groups' menu, select the order or sequence of the display from the respective Order drop-down. To display the submenu of 'Product Groups' menu in a specific number of columns, enter the suitable value in the respective No. of Column(s) text box.
  • Note:
    • The order or sequence should be unique. If you select a previously existing order no for a menu, then the previous order will be changed as none.
    • If you don't want to display a menu, select the order as none for that menu.


or


2. Advanced 'Refine Search' configuration: You have additional advanced configuration options such as Customized Titles for 'Product Tag' Menus

  • To perform the 'Advanced Refine Search' configuration, click Advanced radio button. You will be displayed the following figure.


 Refine Search

Adding Category Menu:

  • To display 'Category' menu in the 'Refine Search', click Add Category. The 'Category' option will be added as shown in the figure.


 Refine Search

  • To display the submenu of 'Category' menu in a specific number of columns, select the suitable value from the respective drop-down as shown in the figure.
  • To delete the Category menu (if required), click respective ' Refine Search' icon.


Adding Brand Menu:

  • To display 'Brands' menu in the 'Refine Search', click Add Brand. The 'Brand' option will be added as shown in the figure.


 Refine Search

  • To display the submenu of 'Brands' menu in a specific number of columns, select the suitable value from the respective drop-down.
  • To delete the Brands menu (if required), click respective ' Refine Search' icon.
  • To change the order or sequence of display of 'Brands' menu (if required), click the suitable option in ' Refine Search' icon.


Adding Attributes Menu:

  • To display 'Attributes' menu in 'Refine Search', click Add Attribute. You will be displayed Attributes/Variants Tree dialog box.


 Refine Search

  • Expand the tree, select the required 'Attributes' and click Submit. The dialog box will be closed and the selected Attributes will be added as shown in the figure.
    • Note: Each selected Attribute will be displayed in a separate column along with its Attribute Values.


 Refine Search

  • To display the submenu of Attributes menu in a specific number of columns, select the suitable value from the respective submenu drop-down.
  • To delete the submenu of specific Attributes (if required), click respective ' Refine Search' icon.
  • To change the order or sequence of display of sub menu of 'Attributes' (if required), click the suitable option in ' Refine Search' icon.


Adding Variants Menu:

  • To display the 'Variants' menu in the 'Refine Search', click Add Variant. You will be displayed Attributes/Variants Tree dialog box.


 Refine Search

  • Select the required 'Variants' and click Submit. The dialog box will be closed and the selected Variants will be added as shown in the figure.
    • Note: Each selected Variant will be displayed in a separate column along with its Variant Values.


 Refine Search

  • To display the submenu of Variants menu in a specific number of columns, select the suitable value from the respective submenu drop-down.
  • To delete the submenu of specific Variants (if required), click respective ' Refine Search' icon.
  • To change the order sequence of display of sub menu of 'Variants' (if required), click the suitable option in ' Refine Search' icon.


Adding Price Menu:

  • To display a 'Price' range scale in the 'Refine Search', click Price. The 'Price' menu will be added as shown in the figure.


 Refine Search

  • To delete the Price menu (if required), click respective ' Refine Search' icon.
  • To change the order sequence of display of 'Price' menu (if required), click the suitable option in ' Refine Search' icon.


Adding Availability Menu:

 Refine Search

  • To display the 'Availability' menu - which displays 'Exclude Out of Stock' option, in the 'Refine Search', click Availability. The 'Availability' menu will be added as shown in the figure.
    • Note: Availability option will be displayed when Show out of Stock Products options is selected through Settings > Application Settings > Store Settings module.


 Refine Search

  • To delete the Availability menu (if required), click respective ' Refine Search' icon.
  • To change the order or sequence of display of 'Availability' menu (if required), click the suitable option in ' Refine Search' icon.


Adding Product Tags Menu:

  • To display the 'Product Tags' menu in the 'Refine Search', click Product Tag. The 'Product Tags' option will be added as shown in the figure.


 Refine Search

  • You will find Edit link. You will be displayed Attributes / Variants Tree dialog box.


 Refine Search

  • Here you can edit the title of 'product Tags' section (or Menu), define the Product Tags to be displayed under 'product Tags' section (or Menu), and also define number of columns in which this 'Product Tags' section (or Menu) should be displayed. You can also display multiple 'Product Tags' sections (or Menus)
    • 1. To edit the title if 'product Tags' section (or Menu), enter new title beside the “SectionName”: as shown in above the figure.
      • Note: It should be in between Double Quotes.
    • 2. To define the Product Tags to be displayed under 'Product Tags' section (or Menu), enter the respective names of Product Tags beside “TagIDs”: separated by commas as shown in above figure.
      • Note: The tags should be in between Double Quotes.
    • 3. To define a number of columns in which this 'Product Tags' section (or Menu) should be displayed, enter the value beside “NoOfColumns”: as showing in the above figure.
    • 4. To display multiple 'Product Tags' sections (or Menus), you need to click Product Tag button those many times and do the configuration for each section (Menu)
      • Note: The value should not be in between Double Quotes.
  • Click Submit. The dialog box will be closed.
  • Similarly, add as many as Product Tags menus by click 'Product tag' and following the above-discussed procedure.
  • To delete the Product Tags menu (if required), click respective ' Refine Search' icon.
  • After the configuration of (if no other configurations required), click Update. The Refine Search dialog box will be closed.
  • The customized title for 'Product Tags' Menu, and other configurations of 'Product Tags' Menu will be displayed as shown in the figure.


 Refine Search

Adding Product Groups Menu:

  • To display the 'Product Groups' menu in the 'Refine Search', click Groups. The 'Groups' menu will be added as shown in the figure.


 Refine Search

  • To display the submenu of 'Groups' menu in a specific number of columns, select the suitable value from the respective drop-down as shown in the figure.
  • To delete the Groups menu (if required), click respective ' Refine Search' icon.
  • To change the order or sequence of display of 'Groups' menu (if required), click the suitable option in ' Refine Search' icon.
  • To save the configuration, click Update. The Refine Search dialog box will be closed and you will be navigated to 'Drag & Drop Controls' page displaying the 'Refine Search' and 'Product Showcase' controls as per your configuration.


 Refine Search

  • To preview the Refine Search, click Preview. The preview page will be displayed as shown in the figure.


 Refine Search

  • Note: Out of configured menus of 'Refine Search' (i.e. Categories, Brands, Attributes, Variants, Price Range, Availability - which displays 'Exclude Out of Stock' option, Product tags, or Product Groups) only those menu options will be displayed in storefront which are related to the products configured in the respective connected 'Products of Showcase'.
  • To upload the Refine Search to your Web store, click Publish as shown in the figure.
  • To view the exact look of your just uploaded Refine Search, click View Live Store as shown in the figure.
  • The uploaded Refine Search control will be displayed in your Web store as shown in above the figure.


This is how you can publish your 'Refine Search' on any page of your Web store by using the 'Refine Search' control.