The collection page is the one that showcase all your products, and help your customers to navigate between your products. That's why Kagami comes with a beautiful and highly customizable collection page.

How can I filter products within a collection?

By default, Kagami comes with native support for filtering and sorting. Those filters are available:

  • Filter by tag
  • Filter by vendor (brand)
  • Filter by product's type

You can turn on and off each one of those filters individually, to suit your specific needs. To do that, follow those steps:

  1. In your Theme Settings, open the "Collection page" section.
  2. In the "General" sub-section, you can find several checkboxes that you can check/uncheck.
  3. Save!

Pro-tip: you may want to filter by more criterias. Unfortunately, out-of-the box Shopify does not offer any way to filter by criterias such as color, size... To do that, you will need to use a third-party app like Power Tools Filter Menu. Be sure to check with the app developer if you are unsure about how to integrates it into your shop!

    How can I add a custom label?

    In addition to built-in labels like "Sold out" and "On sale", Kagami offers you the opportunity to add a custom label per product. This label will be displayed in addition of any default labels that could appear.

    To add a custom label for a product, you need to add a specific tag for the given product. The tag must follow this format: __label:My custom label

    Pay attention: there are 2 underscores at the beginning! For instance, if you want to display the label "Best Price", simply add the tag __label:Best Price to your product!

    This custom label will also be displayed in product details page.

    How can I add a description for the collection?

    Kagami comes with a built-in support for collection's description. You have nothing to do: just write your own description, and it will be displayed into the page.

    If you are unsure about how to specify a description, please read this Shopify documentation.

    Why image is displayed for video, instead of the video itself?

    In the collection page, you may have a lot of products (up to 50). If you add one video per product, they will be ALL loaded once the page loads, which results in a lot of requests, and considerably slow down your page.

    As a consequence, on the collection page, we instead use the image associated with the video. Then, the video is only really loaded when user clicks on the image.

    What is the Masonry mode? What is the grid mode?

    Kagami comes with two different ways of displaying products in your collection page:

    • Masonry: this is a unique feature of Kagami. You upload pictures for your products, and Kagami will automatically resize, re-order... images to create a unique, random grid of images.
    • Grid: this is a more traditional layout, where each product is displayed in grid.

    Each layout have its own usages, and here are some strenghtes/weaknesses of each method:

    • Masonry: it is beautiful. Masonry is actually a perfect layout for people that have high quality images, and want to favor those images rather than price or title. Masonry will look even cooler if you have images of varying sizes (some squares, some rectangular...). If all your images have the same aspect ratio, the grid layout may suit better. On the other hand, Masonry gives you less control over which products are bigger/smaller, because an algorithm automatically calculates the size of each images to fit blank spaces.
    • Grid: while Masonry looks superb, we actually put as much attention to the grid layout, so that it looks equally beautiful. Grid is perfect if all your images have the same size. Also, it allows you to give you more control over how many products appear per row. If your collections display a lot of products, grid will also be faster to load.

    You can switch between those two layouts by following those steps:

    1. In your Theme Settings, open the "Collection page" section.
    2. Scroll until the "Layout" sub-section. There, you can choose between Masonry or Grid layout.
    3. Save!

    How can I control the space between tiles/grid elements?

    Kagami gives you a lot of control over the appearance of the collection page. Whether you choose Masonry of grid mode, we offer you settings that allow you to control the spacing between elements. To do that, follow those steps:

    1. In your "Theme Settings", open the "Collection page" section.
    2. If you have selected the Masonry mode, scroll until the "Masonry" sub-section, and change the value of the "Space between tiles" setting. If you have selected the Grid mode, scroll until the "Grid" sub-section, and change the value of the "Space between grid items" setting.

    How can I use Masonry for collections, but grid for some others?

    While Masonry looks awesome, sometimes, it is not the best way to display some categories of products. For instance, in our [tea preset Tokyo](https://kagami-tokyo.myshopify.com/), we are taking advantage of Masonry mode for teaware, but for tea, grid suits better (as images are similar).

    In the homepage, you can already select the layout on a per-module basis, but what about collection?

    For that extent, we offer an alternative collection template, so you can force the Masonry layout OR the grid layout, on a per-collection basis. To do that, follow those steps:

    1. Open the collection in your Shopify admin.
    2. In the bottom right corner, you will find a section called "Template". If set to "collection", it will simply use the default setting specified in theme settings. But if you set "collection.grid" or "collection.masonry", you will force the given layout, no matter what the default is.
    3. Save!

    MASONRY / Why my product images do not perfectly line up at the bottom?

    If you have chosen the Masonry mode, you will realize that, in some cases, images do not perfectly line up at the bottom of the page.

    While this is not a terrible problem, there are several techniques that you can use to minimize this issue. To do that, follow those steps:

    1. In your Theme Settings, open the "Collection page" main section.
    2. Scroll until the sub-section called "Masonry".
    3. There is a setting called "Crop factor". By default, this setting is set to "No crop". What this setting does is that it allows the Masonry algorithms to crop images (this means reducing the visible image's area) in order to increase the probability of align images at the bottom.

    Please note that this setting is not magical: it trades image against perfect alignment. If you absolutely want your product's images to be displayed completely, then "No crop" is the best setting, otherwise, you may decide to play a bit with this setting.

    MASONRY / How can I prevent automatic stretching of images?

    Masonry mode automatically creates tiles to cover the empty space. However, in some cases, it may create tiles that are larger than the native size of your images. This can happen if you have very low resolution product images.

    For instance, if your image is 300x300, but that the created tile must be 400x400 to fill the empty space, Kagami theme will automatically resize your image to be 400x400 in order to fill the tile's space.

    However, this can lead sometimes to blurry images. Kagami comes with two solutions:

    • The easiest one is to make sure that your images are large enough. When using the Masonry mode, we highly recommend you to upload product's images whose size is at least 1000 pixels wide.
    • If you cannot upload high resolution image but still want to use Masonry, there is an option in the "Collection page" > "Masonry" section called "Enlarge image to fit tile". This is enabled by default. By disabling the option, you'll force the theme to NOT resize images, even if the tile is larger than the image. Instead, the image will be centered and blank space will be used to fill the empty space of the tile.

    MASONRY / What should I do to have awesome results?

    While Masonry mode may look awesome, it requires a bit more work, especially on the choice of your images. Here are some advices we can give you for best results:

    • Be sure that your product's images are big enough. Ideally, your images should be at least 600x600 (but bigger is better).
    • If you have images of varying sizes, it will create more interesting effects (for instance, products with squared, rectangular... images).
    • Do not have crazy aspect ratio: it's better if your images do not have crazy aspect ratio. For instance, an image of 150x2000 is MUCH taller than wide. For such aspect ratio, Masonry may look strange.
    • Limit the number of products per page: in the collection settings, you have an option that allows you to control how many products to display per page. We recommend you to stick with the default value of 25 products per page. Masonry is an effect that requires more computer power than traditional grid, and having too much products on a single page can hurt performance in weaker devices like phones or tablets.

    GRID / How can I control how many products to display?

    If you are using the grid mode, you can control how many products to display per page. It works by specifying a number of rows, and a number of products per row. To change those values, follow those steps:

    1. In your Theme Settings, open the "Collection page" main section.
    2. Sroll until the sub-section called "Grid".
    3. Customize the "Items per row" and "Number of rows".
    4. Save!

    GRID / How can I control how many products to display on mobile?

    If you are using the grid mode, you can control how many products to display per row on mobile. Note that contrary to desktop, this setting will apply in the collection page, but also on products module in the home page.

    1. In your Theme Settings, open the "Collection page" main section.
    2. Sroll until the sub-section called "Grid".
    3. Customize the "Items per row (mobile)".
    4. Save!