ZEST theme
Try Zest freeResourcesOther solutions
  • What is Zest theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Zest theme
    • Set up my store as Zest demo
    • Update Zest theme
    • Theme license & Transfer
  • build for success series
    • Landing page like puravida
  • Page's global sections
    • General settings
    • Announcement bar
    • Banner logo 🔥
    • Header
    • Footer
    • Menu
      • Add a banner to mega menu
      • Add products to mega menu
      • Add collections to mega menu
      • Add custom cards to mega menu
      • Customize a hovering menu
    • Mobile navigation bar
    • Age verifier pop-up
    • Pop-up
  • Theme sections
    • Auto-scrolling promotion
    • Before/ After image slider
    • Blog posts
    • Collage tab
    • Collapsible tab
    • Collection list
    • Collection list slider
    • Collections showcase 🔥
    • Collection tab
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid & HTML
    • Favorite collection 🔥
    • Favorite products
    • Featured product
    • Featured product slider
    • Featured collection
    • Gallery images
    • Handpicked products
    • Highlight text with image 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider
    • Layered images 🔥
    • Logo list
    • Lookbook
    • Map
    • Mixed image cards 🔥
    • Multicolumn
    • Newsletter
    • Products bundle
    • Product tabs
    • Promotion banner 🔥
    • Press
    • Rich text
    • Slideshow
    • Testimonials
    • Video
    • Video hero
  • Theme settings
    • General settings
    • Animations
    • Cart
    • Checkout
    • Color swatches
    • Colors & Color schemes
    • Currency format
    • Cookies banner
    • Layout
    • Product card
    • Product quick view
    • Search
    • Social media
    • Theme style
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Product description
      • Breadcrumbs
      • Product information
      • Recently viewed products
      • Product recommendations
      • Quick order list 🔥
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product grid
    • Collections list page
  • Languages & Countries/Regions
    • Languages
    • Countries/ Regions
  • Other pages
    • 404 page
    • About us
    • Blogs
    • Blog posts
    • Cart & Checkout
    • FAQs page
    • Password
    • Search page
  • FAQs
    • Generic
      • Add custom fonts
      • Add custom CSS
      • Add custom badges to the product card and product page
      • Add gift wrap option to my cart
      • Add product review apps to my theme
      • Change the copyright text at the footer
      • Compare Zest with other Shopify themes
      • Does Zest support RTL languages?
      • JavaScript events for developers 🔥
      • How to migrate your Zest theme to version 7.0.0
      • My store has a low speed score - How can I improve it?
      • Show Payment icons on the Footer 🔥
    • Product page
      • Add a size chart to your product page
      • Add recipient fields to my gift card product
      • Edit product breadcrumbs using metafields
      • Set up quantity rules and volume pricing 🔥
    • Shopify functions
      • Combined listings app 🔥
      • Does Zest support Section groups?
      • Get to know dynamic checkout buttons
Powered by GitBook
On this page
  • How to create a product grid
  • How to edit a product grid
  • General and layout
  • Filtering and Sorting
  • Pagination
  1. Collections & Products
  2. Collection page
  3. Collection sections

Product grid

How to edit your product listing section of the collection template

PreviousCollection bannerNextCollections list page

Last updated 10 months ago

This article guides you on how to customize and show a list of products based on a category in a grid view on your collection page.

How to create a product grid

Steps

  1. In the theme editor (Customize), open the template selector.

  2. Select Collections, then Default collection.

  3. On the left-sidebar, locate Product grid

  4. Make necessary changes > Save.

How to edit a product grid

General and layout

  • Control the listing's container type: Fixed width/ Stretched width/ Full width;

  • Set the number of Products per page (6-50 products) and the number of Products per row (2-6 products);

  • Adjust the column gap: Extra large/ Large/ Medium/ Small/ Extra small/ No gap;

  • Enable or disable product count.

Filtering and Sorting

Allow your customers to filter collections and search results by product availability, price, color, and more.

  • Enable/disable filter and sort by option;

  • Desktop filter layout: Left sidebar/ Right sidebar/ Drawer;

  • Enable/ Disable Group collapsible;

  • Default state of the Filter groups (when Group collapsible is enabled): Collapsed/ Expanded;

  • Open the first group by default (when the Default state is set as Collapsed);

  • Group heading size: Small/ Medium/ Large;

  • Show results count;

  • Filter color type: Inline/ List.

How to create visual filters

Filter values can include visual elements such as colors, patterns, or more creative imagery.

For example, a Fabric color filter can display a small color swatch for each filter value.

Product variant filters will link to more relevant variants on search results and collection pages.

  1. Go to Settings > Custom data > Find the Metaobject definitions field > Click Add definition.

  1. In the Add metaobject definition page, give this metaobject a Name (Color) and 3 Fields:

    • Single line text - For the color name (Name).

    • Color - For the hex code of the actual color (Hexcode).

    • File - For the image of this color (Image).

A metaobject definition for a color swatch should have both a color and an image field.

You don't need to provide a value for both, but this will give you the option of using either field in the future.

  1. Click Save.

Next step, we will create the colors list:

  1. In the Shopify admin sidebar, go to the Content > Metaobjects > In the Metaobjects page, select Color.

  1. Click the Add entry button to add a new color. Give the color entry the Name, Color, and Image.

Note: You can add many color entries and assign these colors to the products.

  1. Click Save.

  1. Go to Settings > Custom data > In the Metafield definitions field, select Products > Click Add definition.

  1. We will define this metafield as Name: "Color filter swatch" and Type: "Metaobject". In the Reference field, select the metaobject you want or you've just created (Color).

If your products/ variants have multiple colors you could filter on, set your metafield definition to allow a List of entries.

This lets you assign multiple metaobject entries to a single item and each one will display as a filter value on your store.

  1. Click Save.

Then, we will connect the products to colors:

  1. In the Shopify admin sidebar, go to the Products > Select the product you want to connect color metafield.

  2. In the Metafields field, click on the "Color filter swatch" metafield that you've just created above > You will be able to select multiple colors from your list of colors that you defined using metaobjects.

  1. Click Save.

After you have assigned your metafield to products or variants in your store, you can set up the filter for your online store:

  1. Click Add filter or click an existing filter.

  2. Click the Source field, and then select a metafield filter with a metaobject reference - "Color filter swatch".

  3. Click Display options.

  4. Set the Label field for filter values by selecting a metafield.

  5. Check Include visual and select a visual style:

    • Choose Swatch for small color swatches or patterns. Set the swatch content by selecting:

      • A color field for the Swatch color.

      • An image field for the Swatch pattern.

  • Choose Image for icons, logos, or other graphics that shouldn't be cropped. Set the content by selecting an image field for the Image.

Tip

Themes will often prioritize displaying a swatch's image over its color. For swatch displays, if you selected fields for both Swatch pattern and Swatch color, then the color is typically only displayed when there isn't an available pattern image for the filter value.

  1. Click Save.

How to customize filters

The app also allows you to customize search results and product recommendations to give you more control over how customers discover your products.

  1. Go to Online store > Navigation

  1. Go to Apps > Search & Discovery > Filters > Edit filters

  1. Add or remove filters to show/hide from the storefront filters > Save the settings.

  2. In the theme editor (Customize), open the template selector > Select Collections > Default collection.

  3. On the left-sidebar, locate Product gird > Select Enable filtering checkbox

  4. Save

Pagination

Enable pagination in 3 ways:

To create visuals with your filter values, set up custom data for your store with and . You also need to meet the .

Now we will start from scratch by defining the :

After that, we are going to create color for the products to link to these that we've just created above:

In the app, go to Filters.

Customizing the filters in your store requires the app.

Learn how to .

Click Add and install the app for your store

metafields
metaobjects
requirements
metaobjects
metafields
metaobjects
Shopify Search & Discovery
Shopify Search & Discovery
customize filters with the app
Shopify Search & Discovery
An example of a collection page in Zest
Collection page: Filtering and sorting example
Collection page: Paging by numbers example
Collection page: Load more button example
Collection page: Infinite scroll example