For your collection pages, Split lets you change the filtering options and style your product thumbnails.
To tweak the layout of your collection pages:
- Navigate to a collection page in the theme editor.
- Click the Sections tab.
- Click Collection page.
- If you want to display the filtering menu, then check Show filtering options. The same for the Shopify default sorting option.
- If you wish to Show the collection image, you can also tick the option and an image will appear at the top, near the title modifying the layout a bit (only if the collection has an image).
- Choose the Layout (we've already covered this topic in the Homepage sections).
- Select the number of products per page that you want to display (between 6 and 48).
- The promotional block settings are the same as in the Featured Collection section on the homepage, with the difference that if your collection is paginated, it will only show up on the first page!
To tweak the product item's design, click Theme Settings > Product grid
- From the Media aspect ratio choose the aspect ratio for which you want your products be resized. If you are using the asymmetrical layout, you can even have natural images with different aspect ratios, as they will look very well (you can see this in our Art demo). Otherwise, you may want to crop items for a clean layout.
- Then you have the Desktop animation style, which changes the way thumbnails react to mouse overs. This is not available on mobile devices, because there you don't have a mouse, so first tap goes directly to the product page.
- If you want to also show the second product image while hovering, then check Show second product image on hover. Again, this is a feature that only works on desktops where a mouse is present.
- Show color variants media if your products have color variants. You can read more about color swatches in the Product page article.
- Last setting is the Sale price color, which allows you to tweak the color of the bigger price of sale items in the collection grid.
Adding unique product badges (icons)
Unique product badges is a feature that we've introduced in version 2.0.0 and allows you to leverage metafields in order to add unique bits of information for products in the collections grid, as you can see below:
To make this feature work on your store, you'll have to follow these steps:
- Go the Settings > Metafields, and open the Products metafields editor
- Here you'll have to add two new metafield definitions that will be used by the theme for these icons
- The first one will be unique_feature.icon and should be the File type
- The second one will be unique_feature.title and should be the Single line text type
- After your metafields are created, they will appear in the Product Editor.
- For products that you want to show such custom badges you'll have to write your details in the product editor as follows:
- Add a 48 x 48px .png image if you want to display an alongside the text in the "icon" field
- Write a really short statement in the "title" field