Filter slide
IMPORTANT NOTE
- Please ensure the following:
- If a store has over 5,000 products, filters will not display or function correctly when using the “Search and Discovery” app.
- Collections with more than 5,000 products cannot display filters. To enable filtering, consider dividing large collections into smaller ones that can display filters.
To read more information about filters, follow this link Shopify help center documentation: topic “Considerations for adding filters”: https://help.shopify.com/en/manual/online-store/search-and-discovery/filters)
This filter depends on the collection page setup:
| Setting | Description |
Collection |
Select a collection containing the products you want to filter by specific options.
|
| Setting | Description |
| Image | Choose an image for your filter slide. Click on “Select Image” to access your media library or upload a new image. Also, you can connect a dynamic source by clicking the source button. Once an image is chosen, you can use the “Change” button to remove, replace, or delete it. |
| Image overlay opacity | The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes. |
| Heading | This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading, such as making its font bold or light, italic, or adding a hyperlink. Click the dynamic source button to insert a dynamic source as the title of the section. |
| Heading size | The heading size setting offers three options to control the size of the section headings:
|
| Description | This field is for adding a description to the section. In the top menu of the field, you can find options to customize the text such as making it bold, italic, or adding a hyperlink. Additionally, you can use the style of headings from H1 to H6 to the body text and create bullet or numbered lists for your description. Furthermore, you can click the dynamic source button to insert a dynamic source for the featured collection description. |
| First button label | Add a label to a first button. If you remove the label, the button will disappear. |
| First button link | Input the URL you want the button to direct to, or select a page from the dropdown list of options that appears when you click on the field. Also, you can click the source button to add a dynamic source as a URL. |
| Use outline button style | You can change style from solid button to outline by checking the box for first button link. |
| Second button label | Add a label to a second t button. If you remove the label, the button will disappear. |
| Second button link | Input the URL you want the button to direct to, or select a page from the dropdown list of options that appears when you click on the field. Also, you can click the source button to add a dynamic source as a URL. |
| Use outline button style | You can change style from solid button to outline by checking the box for second button link. |
IMPORTANT NOTE: If a store has over 5000 products, the filter will not be displayed or function properly when using the “Search and Discovery” app. Please ensure that:
- The filter is configured and added to relevant collections.
- Large collections (with over 5000 products) are optimized, as the filter may not work in such cases due to Shopify limitations.
To read more information, follow this link Shopify help center documentation: topic “Considerations for adding filters”: https://help.shopify.com/en/manual/online-store/search-and-discovery/filters
Filter settings
| Setting | Description |
| Color scheme | Color scheme allows you to customize colors on filter panel. When you apply a color scheme, it automatically updates all associated colors. |
| Filter title | Enter filter title for better understanding what the purpose of filter. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. Click the dynamic source button to insert a dynamic source as the title of the section. |
| Filter: | Check instruction after this table. But in short, you can type here the name of the filter that should be displayed in this filters panel. Navigate to the collection page with filters, choose filters for banner, copy the name of filters and put them in order you would like to see in next fields. |
| Filter 1 | Enter a first filter that should be displayed in banner. |
| Filter 2 | Enter a second filter that should be displayed in banner. |
| Filter 3 | Enter a third filter that should be displayed in banner. |
| Filter 4 | Enter a fourth filter that should be displayed in banner. |
| Submit button | Type a label of filter button, it can be “Search” for example. |
Our example of filters that can be added to banner
In the first example, we see Categories. Filter category is a product metafield.
Instruction “Creating metafield”
Navigate to “Settings”
Click on “Custom Data”
Click on “Products”
Our filter is in “Assigned to all products” tab. To create a new one, click on add definition.
As you can see, we filled some data in this metafield.
After creating a metafield navigate to product detail page of a special product and scroll to the end of the page until you see your created metafields, displayed on this product detail page same as on other's product pages.
In the field of “Filter category” type a single line text (category for this product) and it will appear in the list of categories.
When you add categories to all products, navigate to Search&Discovery app (Click on this tab)
After this you will see Filters tab (click on this tab) and after click on "Add filter" button in the top right corner.
You will see a list of filter which can be added. As you can see, filter category are added to our filter lists. To add metafield to filter list in our collection page with products, we need to click on the name, and we will see its page.
When we add metafield to a product page, we can enter a different name in filter label field.
This filter includes categories from all product detail pages.
After doing these actions, we will see categories on all collections page and separate collections created in admin panel.
To see "Categories" in banner filter, we need to add the same name that was entered in filter label before, or you can open Collection page to check the correct name to put it in banner.
When we click on "Categories" accordion, we will see different categories in the list below the name.
The same we can do with product options, At first we create different options on product detail page.
Then in filters, we can add our filters brand and item material to collections pages by clicking on them.
We need to click on Select all and Save to add all brands or item materials.
To add these filter options to banner, we need to type the same name.
