Versions 1.0.0-1.7.3
Filter products using product tags added in the admin. Per Shopify "Tags are searchable keywords associated with your product. Tags can help customers find your product through your online store search, and you can also use them to create automated collections".
Recommended reading
In this section...
Overview
For a complete tag tutorial, check out Product Filters, but below is a summary:
Product tags are used to filter products within the Advanced Filter and the Collection Pages. Filter tags are added to the product admin and follow a simple structure: Group_Title
| Group | Title | Product Tag |
|---|---|---|
| Color | Red | Color_Red |
| Size | XL | Size_XL |
| Gender | Male | Gender_Male |
NOTE: Tags are case sensitive!
In the Collection Content Blocks, first select a collection. This example will use the collection 'Shirts'. In the 'Filter 1-3' inputs, add the 'Group' text preceding the '_' from the product tag. Unsure of the available tags? Choose 'Shirts', click 'Search', and take a look at what is available in the left column. The 'Group' will be the bolded text above the list or dropdown & the 'Title' is the list or dropdown item. Click the filters to see the relationship with one another.
| 'Shirts' Product Tag | 'Filter 1-3' Input Text to Use |
|---|---|
| Color_Red | Color |
| Color_White | Color |
| Color_Blue | Color |
| Size_Small | Size |
| Size_Medium | Size |
| Size_Large | Size |
| Gender_Male | Gender |
| Gender_Female | Gender |
Using the tags above as an example, if a user selects the collection 'Shirts' from the first dropdown, additional dropdowns will be created for 'Color', 'Size' & 'Gender':
| Collection ˅ | Color ˅ | Size ˅ | Gender ˅ |
|---|---|---|---|
| Shirts | Red | S | Male |
| White | M | Female | |
| Blue | L |
Each tag is dependent on the previous
- Select Shirts: The tags in 'Shirts' that match one of the tags in the 'Filter 1-3' inputs will be available in the remaining dropdowns. After you hit 'Search', you will go to /collections/shirts
- Select Shirts + Red: 'Size' & 'Gender' tags in 'Shirts' filtered with the 'Color_Red' tag will be available in the remaining dropdowns. After you hit 'Search', you will go to /collections/shirts/color_red
- Select Shirts + Red + XL: 'Gender' tags in 'Shirts' that include the 'Color_Red' AND 'Size_XL' tags will be available in the last dropdown. After you hit 'Search', you will go to /collections/shirts/color_red+size_xl
- Select Shirts + Red + XL + Male: Products in 'Shirts' that include the 'Color_Red' AND 'Size_XL' AND 'Gender_Male' tags will be available for the search. After you hit 'Search', you will go to /collections/shirts/color_red+size_xl+gender_male
Each dropdown can be used individually, but the first collection dropdown must be selected. Users will never land on an empty collection page.
Text
Heading
Title of the section or feature
Subheading
Secondary title of the section or feature
Options
Horizontal form
By default, the dropdowns will layout side by side. Uncheck this setting to have them stack one of top of the other
First dropdown text
Choose the initial text to display in the first dropdown. By default it will be 'Select'
Remaining dropdown text
Choose the initial text to display in the remaining dropdowns. By default it will be 'Select'
Button
Customize the text for the button. By default it will be 'Search'
Background
Show image
Include a background image
Image
The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to 'Full width' below
- The height will depend on your 'Height' settings below
Image position
Set the focus of the image to ensure consistency regardless of the height setting, content height or screen width
White text
When an image is chosen, you can uncheck this setting if you want the overlaid text to be the default color
Full width
The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:
| Setting | Desktop Width | Minimum Image Width |
|---|---|---|
| Full width checked | 100% | 1900px |
| Full width unchecked | 1200px | 1200px |
Height
The overall height of the section in relation to the height of the screen. 5% is the minimum, and it steps up by 5 to a maximum of 100%
Overlay
A color may be applied to background images to help the text clarity
Opacity
When an 'Overlay' color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 5 to a maximum of 100%
Background color
If an image is not used as a background, you can choose between None, Primary & Secondary. The Primary & Secondary colors are set in the Theme Settings Color section
Collection Content Blocks
Collection
Select the collection
Title
Customize the title for the collection. By default, the drop down listing will use the collection title
Filter 1-3
Add the text preceding the '_' from the product tag. For more information on using product tags as filters, click here