The Search Results page is a system page that lets you view the results from a search query using the Search widget. The Search Results page, accessed via the PAGES tab of the Website Editor under the SYSTEM PAGES section, is where you can edit the settings of the Search Results page.
In this article, you will learn how...
To configure the properties of the Search Results content panel:
- Click on the PAGES button in the Website Editor Toolbar.
- Click on the + icon at the left of the Others tab to expand the Others pages menu.
- Click on the Search Results page tab.
The Search Results page is displayed in the Content Area of the Website Builder.
Click the image to enlarge.
- Move the mouse over the Search Results Widget, then click on the down arrow beside the icon.
- Choose the Search Results Settings item from the drop-down menu.
The Search Results Settings popup will be displayed, with the Properties Tab selected.
- Configure the settings for the Search Results Widget.
- Panel Title: lets you specify the title that will appear in the header area for the search results panel.
- Clicking blank product goes to: lets you choose how a blank product will load when the product thumbnail is clicked in a store.
- System default: will use the option set under Admin Products Blank Product Display.
- Product details page: displays the details page for the product.
- Designer with the cheapest decoration process: loads the product in the Designer with the cheapest decoration process set as the process to use.
- Designer with no decoration process: loads the product in the Designer with no decoration process selected.
- Show results for lets you choose what item types will be included in the search results.
-
Automatic Based on Page Status: The item types returned in the search results will be automatically determined based on the status of the Blank Product Page, Decorated Product Page, and Designs Page. The sub-options will be disabled if this checkbox is ticked.
- Designs: will include designs in the search results.
- Pre-decorated products: will include pre-decorated products in the search results.
- Blank products: will include blank products in the search results.
-
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To configure the Design settings for the Search Results content panel:
- Click on the Design tab.
- Select from one of the pre-configured Search Results Layout options:
- Grid: thumbnails maintain their aspect ratio and are displayed in the center of each cell in a uniform grid arrangement.
- Masonry: thumbnails are resized to have the same width while maintaining their aspect ratio and arranged to form equal columns. Images are placed in optimal positions based on available vertical space.
- Stacked: thumbnails maintain their aspect ratio and are displayed in a single column.
- Configure the rest of the design options for the Search Results content panel.
- Thumbnail size: lets you set the dimensions of the thumbnails. You can choose a preset size or choose Custom Size to specify a custom size.
The following fields will be displayed when you select Custom Size:
- Thumbnail Width: lets you specify the width of the thumbnail in pixels.
- Thumbnail Height: lets you specify the width of the thumbnail in pixels.
The maximum allowable thumbnail width and height is 600px. If a value higher than 600 is entered, the value will be automatically reset to 600. This is to prevent blurry thumbnail images caused by upscaling of the product view images since they are generated at a maximum size of 600x600 pixels at the time of upload.
You can configure the container properties of the thumbnails by clicking on the brush icon beside the Thumbnail Size field. The Thumbnail Properties popup will be displayed.
- Border Width: lets you specify the line thickness of the thumbnail's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the thumbnail's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of the thumbnail's border in pixels. Enter a value between 0 and 100.
- Crop Thumbnail: crops the thumbnail to square when the checkbox is ticked. Leaves the image in its original shape when the checkbox is unticked.
- Use Higher Resolution on Retina Displays: when checked, will double the pixel density of the images to increase the clarity of the image for retina displays.
- Image Effects: lets you apply filter and transform effects to the image thumbnails for the normal and hover states.
- Hover Image Effects: lets you apply filter effects, transform effects, and hover animation to the product images for the hover state.
Click here for instructions on how to add image effects.
- Panel Title: lets you configure the font style and the color for the title that will appear in the header area of the Search Results content panel.
- Click on the font name to configure the font style using the Font popup. Click here for instructions.
- Click on the color spot to choose a text color using the Color popup. Click here for instructions.
- Panel Design: lets you configure the appearance of the panel containing the listing.
Click on the brush icon to configure the panel design. The Panel Design popup will be displayed.
- Background Color: lets you specify the background fill color of the Search Results content panel. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
- Border Width: lets you specify the line thickness of the Search Results content panel's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of the Search Results content panel's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of the Search Results content panel's border in pixels. Enter a value between 0 and 100.
- Text Overlay Background: lets you configure the background of any information that is displayed on the thumbnail image or image rollover.
Click on the brush icon to configure the text overlay background. The Text Overlay Background Properties popup will be displayed.
- Background Color: lets you specify the background fill color of the text overlay. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
- Border Width: lets you specify the border line thickness of the text overlay background in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the border color of the text overlay background. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Width: lets you specify the container width of the text overlay background as a percentage of the thumbnail width.
- Align: lets you choose a vertical alignment option for the text overlay in reference to the thumbnail image:
- Left: aligns the text overlay to the left of the thumbnail.
- Center: centers the text overlay horizontally to the thumbnail.
- Right: aligns the text overlay to the right of the thumbnail.
- Horizontal Align: lets you choose a horizontal alignment option for the text overlay in reference to the thumbnail image:
- Top: aligns the text overlay to the top of the thumbnail.
- Middle: centers the text overlay vertically to the thumbnail.
- Bottom: aligns the text overlay to the bottom of the thumbnail.
- Product Name: lets you choose an option for the display and placement of the product's name.
- Don't Show: does not show the product name.
- Show on Image: displays the product name across the middle of the thumbnail.
- Show on Image on Rollover: displays the product name across the middle of the thumbnail when the mouse hovers over the product thumbnail.
- Show Above: displays the product name above the center of the thumbnail.
- Show Above on Rollover: displays the product name above the center of the thumbnail when the mouse hovers over the thumbnail.
- Show Below: displays the product name below the center of the thumbnail.
- Show Below on Rollover: displays the product name below the center of the thumbnail when the mouse hovers over the blank product thumbnail.
Click on the brush icon to configure the appearance of the product name using the Font Settings Popup. (The brush will icon will not be displayed if "Don't Show" is selected.) Click here for instructions on configuring the settings in the Font Settings Popup.
- Product Code: lets you choose an option for the display and placement of the product's code.
The display options and appearance settings are the same as for the Product Name.
- Product Brand: lets you choose an option for the display and placement of the product's brand.
The display options and appearance settings are the same as for the Product Name.
- Product Brand Logo: lets you choose an option for the display and placement of the logo for the product's brand.
The display options and appearance settings are the same as for the Product Name.
- Product Prices: lets you choose an option for the display and placement of the product's price.
Click on the brush icon to configure the settings for the Product Prices element. The Product Prices Settings popup will be displayed. (The brush icon will be hidden if "Don't Show" is selected.)
- Product Price Link: The product price link is the link preceding the price display named according to the decoration process. The link will load the Designer with the corresponding decoration process selected and the prices for that decoration process displayed accordingly. Click on the font name to configure the font style of the product price link using the Font popup. Click here for instructions.
Click on the color spot to edit the product price link color using the Color popup. Click here for instructions.
- Product Price Text: The product price text is the text all the text that indicates the price of the product in the price display. Click on the font name to configure the font style of the product price text using the Font popup. Click here for instructions.
Click on the color spot to edit the product price text color using the Color popup. Click here for instructions.
- Product Price (Pre-Discount): The pre-discount product price is the original retail price of the product. Click on the font name to configure the font style of the pre-discount product price text using the Font popup. Click here for instructions.
Click on the color spot to edit the pre-discount product price text color using the Color popup. Click here for instructions.
- Product Price Amount: The product price amount is the actual price value in the product price display. This setting overwrites the display setting for the product price text. Click on the font name to configure the font style of the product price amount using the Font popup. Click here for instructions.
Click on the color spot to edit the product price amount color using the Color popup. Click here for instructions.
- Product level 'from' label: lets you change the text of the "from" label.
- Product level 'as low as' label: lets you change the text of the "as low as" label.
This setting will only be enabled if allowed by the Fulfillment Center via the Blank Product Display Settings.
- Product Price Link: The product price link is the link preceding the price display named according to the decoration process. The link will load the Designer with the corresponding decoration process selected and the prices for that decoration process displayed accordingly. Click on the font name to configure the font style of the product price link using the Font popup. Click here for instructions.
- Product Colors: lets you choose an option for the display and placement of the product's available color palette.
Click on the brush icon to configure the product color palette settings. The Text Product Colors Palette Settings popup will be displayed.
- Border Width: lets you specify the line thickness of a color's border in pixels. Enter a value between 0 and 20.
- Border Color: lets you specify the color of a color's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Border Radius: lets you specify the roundness of the corners of a color's border in pixels. Enter a value between 0 and 100.
- Width: lets you specify the width of a palette color container in pixels. Enter a value between 5 and 50.
- Height: lets you specify the height of a palette color container in pixels. Enter a value between 5 and 50.
- Margin: lets you specify a uniform margin around a palette color container.
- Padding: lets you specify the spacing between the text and each side of the container border. Click on the brush icon to access the padding settings.
- Product Sizes: lets you choose an option for the display and placement of the product's available sizes.
The display options are the same as for the Product Name.
- Show Pagination: lets you choose if/where the pagination controls for browsing through the product pages are displayed.
- Don't Show: does not show the pagination controls.
- Show Above: displays the Sort control at the top center of the Search Results content panel.
- Show Below: displays the Sort control at the bottom center of the Search Results content panel.
- Show Above and Below: displays the sort control at the top and the bottom center of the Search Results content panel.
Click on the brush icon to configure the style settings for the pagination control. The pagination settings popup will be displayed.
- Page Numbers: lets you edit the font style and the color of the page numbers in the pagination control.
- Previous/Next: lets you edit the font style and the color of the Previous and Next links in the pagination control.
Click on the brush icon to configure the font settings for the Previous/Next link. Click here for instructions on how to configure the settings in the Font popup.
- Show Product Count: lets you choose if/where the product total and the number range of the products visible on the current page is displayed.
- Don't Show: does not show the product count.
- Show Above: displays the product count at the top center of the Search Results content panel.
- Show Below: displays the product count at the bottom center of the Search Results content panel.
- Show Above and Below: displays the product count at the top and the bottom center of the Search Results content panel.
- Show Current Filters: lets you choose whether or not the currently selected search filters will be displayed.
- Don't Show: does not show the current filters.
- Show Above: displays the current filters at the top of the Search Results content panel.
- Thumbnail size: lets you set the dimensions of the thumbnails. You can choose a preset size or choose Custom Size to specify a custom size.
- Click OK, once you have finished configuring the settings.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Comments
0 comments
Please sign in to leave a comment.