Search and Collection pages
Last updated
Last updated
The Filter feature allows you to display and apply different product filters on the search results or collection page. It should be used when you have a lot of products in your store. It will help customers can find what they are looking for much faster and easier.
With these themes, you can easily enable/disable the Filter feature on Collection and Search page by using below option:
To enable/disable Filter feature with Shopify theme OS 2.0, when clicking on the Enable/disable filter feature option, a popup will display allowing click to redirect to the theme editor to disable the Search result widget on Collection or Search page.
Please see the below gif:
To customize for Collection and Search page, please go to Theme Customize -> Select Collection/Search pages on the dropdown box.
Here are the most general settings for Collection and Search page. You can change the default sorting, default view and number of product per page.
Default sorting: With the collection template of Shopify, you can change the default sorting in the collection in Shopify. But when you use Flash Search widget, you can change it here.
Default view: You can change the number of item per row on your collection and search pages to 2 3 4 or 6 items or a list view.
Product per page: It is the number of product per page.
To customize layout for Collection and Search page, go to theme customize -> Collection/Search pages -> Layout.
Layout type: Here you can choose a layout type for Collection and Search page.
Result for Horizontal style 2 layout:
Layout width: You can change the width of layout to 1200px, 1600px or full width.
Result:
By default, product labels are enabled on your Collection and Search page. If you want to disable them, please go to Theme customize -> Collection/Search pages -> Product label.
Display label: You can enable/disable product labels by turn on/of the below options.
Label shape: You can choose the shape for labels is rounded or rectangle.
Also, you can change position from top-left to top-right and change font size, font weight for product labels.
Here you can change the effect when hovering over product image. Go to Theme customize -> Collection/Search pages -> Product image.
Display image: You can choose to show one or two images when hover over product image.
Two images hover effect: If you choose two images, you can set the hover effect is zoom or show opacity.
Background overlay: Select background overlay as a percentage.
The options here allow you enable or disable the header on Collection page. Also, you can change style for it. Go to Theme customize -> Collection/Search pages -> Collection page header.
Display page header: If you enable, the collection name will show on all collections page as a header.
Result on live collection page:
Options: Here you can enable or disable the header and search box on the Search result page.
Look and feel: There are some options help you design for page header and search box.
Translations: You can change header and placeholder text in the search form. {count} will show the number of product result. {searchTerm} will show the searched term.
Result on live page:
In this Toolbar section, you can enable/disable Filter, product layout views, sort by and total products. Also, you can change style and change texts.
Options: There are some options allow you enable/disable the elements on toolbar.
Look & Feel: Under this tab you can change style for all elements on the toolbar like text color, icon color...
+ Filter and Total product:
+ Sort by:
Grid/List view:
Translations: All text on Toolbar can be changed here. You can change to your language. The default language is English.
The options here will applied to all product items on Grid and List layouts.
Border: You can add a border to arrow product image or product item.
Result for border around product image on live collection page:
Product buttons: They are the buttons on product item.
Button design: We have several designs for buttons that you can choose here. You can choose different designs for buttons on mobile and desktop.
Result for button design 3 center on desktop:
Result for button design 5 on mobile:
If you choose design 7 for buttons, we have some options to change background and text color for Add to cart button:
If your products have Color and Size variants and you want to show them on product item, you can do that here and customize for variant options.
Go to Theme customize -> Collection/Search pages -> Product item.
Product color:
+ Display product color: If you enable this option, the color options will display below product image.
+ Show type: You can choose to show all colors or only show available colors (this means that it will hide out-of-stock color variants)
+ Swatch layout type: Here you can choose to show the variant options as swatch color or swatch image.
+ Swatch size: You can change the size for swatch options. We have three sizes for you to select.
+ Swatch style: You can change the style of swatch options to rounded or square.
+ Color option name to show Product colors: This option to fill the variant name to. For example, in Shopify, the variant name of your products is "Color", you must fill that "Color" text to this option. Or the variant name is "Colour", you must fill to this option "Colour". That is, it must be the same as the variant name in Shopify, case sensitive. Press "enter" on your keyboard to add more names.
+ Show more options: For example, you have all 10 variant options, you can adjust to show only 5 and when you click on show more colors, it will show all options.
