HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Combined listings app
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • General and layout
  • Filtering and Sorting
  • How to customize filters
  • Mobile Layout
  • Add an Image card to your Product grid
  • Image settings
  • Content settings
  1. Collections & Products
  2. Collection page

Product grid

How to customize your product listing section of the collection template

PreviousCollection bannerNextCollections list page

Last updated 1 month 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.

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.

General and layout

Set the number of Products per page (8-36 products) and the Number of columns on desktop (1-6 products);

Filtering and Sorting

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

This section allows you to Enable filtering for the collection.

You can also Enable sorting on the collection. The collection can be sorted by:

  • Featured

  • Best selling

  • Alphabetically, A-Z

  • Alphabetically, Z-A

  • Price, low to high

  • Price, high to low

  • Date, old to new

  • Date, new to old

Change the default sorting of the collection in Shopify admin > Collections.

There are 2 types of Desktop filter layouts: Vertical and Drawer (Default mobile layout)

If you want the filter groups to open/expand automatically when accessing the collection page, you can insert the group filter name into the Expand filter groups field, and each group filter is separated by a comma. Exam: Price, Color, Size

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 Apps > Search & Discovery.

  1. Select 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 listing > Select Enable filtering checkbox

  4. Save

Mobile Layout

You can adjust the Number of columns on mobile to 1 column or 2 columns.

Add an Image card to your Product grid

An image card between your product grid is perfect for calling out promos or collections visually.

Image settings

  • Image position: Defines which spot the image card appears in (e.g. 1 shows it before the first product).

Make sure the number is less than or equal to the total number of products displayed per page.

Change the Products per page in Product grid section settings.

  • Image: Add your promotional banner or styled image.

  • Image ratio: Choose how your image scales (e.g. Adapt to image or Fixed aspect ratio).

  • Image overlay opacity: Add a dark overlay (0–100%) for better text readability.

Content settings

  • Content position: Choose where the text/button appears.

  • Content alignment: Align content left, center, or right.

  • Content spacing: Adjust internal padding around content.

  • Card link: Where users are taken when they click the image.

  • Subheading: Optional small text above the heading.

  • Heading: Main attention-grabbing text.

  • Text: Add a short description.

  • Button label: Custom CTA (e.g. “Shop Now”).

  • Button link: Where the CTA button redirects.

Customizing the filters in your store requires the app.

Learn how to .

Learn about .

Make sure you install the app for your store

Shopify Search & Discovery
customize filters with the app
Filters considerations
Shopify Search & Discovery
You can customize filters with the Search & Discovery app.