To edit the collection page, you will need to open up any collection from inside the theme editor or select the collection page from the dropdown at the top.
The following reflects the latest version of Symmetry. If you don’t see any of the options below, it’s likely you are on an older version of Symmetry and will need to update. We can’t add new features into older versions of themes.
NOTE: The following guide still stands, the only difference is that in Symmetry you don’t need to add a comma after each tag you can just go to a new line to add the next tag. They are not case sensitive anymore,
Step 1 – Add tags to your products
Due to limitations with Shopify, it’s not possible to directly filter on variants options for a product. Instead, we need to create tags for each product that we want to filter on.
Go to your product in the Shopify Admin area, and at the bottom of the right-hand panel, add the tags that represent the variations the product is available in.
For example, the Sizes and Colors of a particular product may be:
Repeat this for all products which you’d like to be filterable.
Step 2 – Add your tag groups
Go to the Theme Customizer, and change to Collection pages.
On the left-hand side, you should see an option to add a tag group. You then need to enter the label/name of your tag group, and then the tags themselves.
- Name/label: This is the label that shows next to your filter on your collection page.
- Tags to include: This should be in the same case as the tags added to your products, and separated by commas.
This is what your tag group may look like for the Size and Color example:
The filters that then show on the collection page will be built from these options. If none of the products within the collection have a particular tag then that option will not be shown. For example, if none of the t-shirts with a collection come in Red (i.e. have the ‘Red’ tag associated with them), the Red option will not show.
If the products within a collection have none of the tags for a particular tag group, then the entire filter will not show. For example, if you also sold hats, none of which have customizable colours or sizes, when you create a hat collection, none of the filters in this example would show.
Things to note
- Your customers won’t be able to select more than one option from a particular tag group. For example, users couldn’t select Red AND Blue, they could only select one or the other. However, they could select Red AND Large, because these are in two different tag groups. This is due to limitations with the standard Shopify platform – but if you do want this you may be able to find an app on the app store which can help. You could possibly create a tag called ‘Red and Blue’ which you add to a product and a tag group, although this isn’t perhaps the best user experience.
- Avoid having two tag groups with the same name which could show at the same time.
To add an image you will go to that collection and upload an image to it. We recommend going with an image that is a 3×1 aspect ratio. Portrait photos will be cropped. Once you have added the image you like you can enable it in the theme editor and it will display at the top.
You will be able to have from 16 up to 50 products on the page between 2 to 5 rows
You will have the same amount of products but 1 to 2 rows which can be switched by the customer for preference. It is not possible to show more due to the space needed to display all the information.
Filter and sort collections without loading a new page
is a great feature. It means that if you start to filter down the products and even if a product is not showing because it might be on page two if you select a filter and that product should show, it will load it seamlessly instead of needing a page refresh.
You can disable the product vendor from being displayed. Please note that if you wish for it to not display on the actual product page also, you may need to go to the theme editor for the product page and disable this here also.
To enable full-width payout scroll down to the bottom and select theme settings > enable full-width layout at the top