Megamog
Try Megamog freeResourcesOther solutions
  • What is Megamog theme?
  • Changelog
  • Refund policy
  • Support policy
  • Terms of Service
  • Getting started
    • Install Megamog theme
      • Install Megamog in 1-click fast way
      • Install Megamog manually
    • Add Custom code/ CSS correctly
    • Integrate Shopify Review apps
    • Mega menu
    • Purchase code & activation
    • Update Megamog theme
    • FoxHome
  • Build for success series
    • Product page for Beauty store like Kylie Jenner 🔥
    • Landing page for Fashion store like Bremont
  • Page's global sections
    • Announcement bar
    • Age verifier pop-up
    • Header
    • Footer
    • Mobile sticky bar
  • Theme sections
    • Before/ After image slider
    • Blog posts
    • Brand list
    • Collapsible content
    • Collection spotlight
    • Collection list
    • Collection links
    • Countdown timer
    • Custom content
    • Favorite product slider
    • Featured collection
    • Featured product
    • Featured promotion
    • Featured products slider
    • Google Maps
    • Image banner
    • Image with text
    • Instagram
    • Lookbook
    • Newsletter
    • Press
    • Product tabs
    • Recently viewed products
    • Scrolling promotion
    • Slideshow
    • Testimonials
    • Video
    • Video hero
    • Banner grid
    • Multiple columns
    • Store locator
  • Theme settings
    • General settings
    • Layout settings
    • Additional pages
    • Advanced
    • Animation
    • Article card
    • Badges
    • Cart settings
    • Checkout
    • Colors & Color schemes
    • Corner radius
    • Currency format
    • GDPR settings
    • Intergrated apps
    • Integration
    • Pop-up & drawer
    • Product card
    • Product options design
    • Product options swatches
    • Social sharing
    • Search settings
    • Store contact
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Page sections
        • Breadcrumb
        • Product information
        • Product information tabs
        • Product recommedations
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product listing
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart & Checkout
    • Password
  • FAQS
    • Add a gift wrap option to my cart
    • Add custom badges to my product card
    • Add recipient fields to my gift card product
    • Add/ Remove Social icons in footer
    • Change the default product order in collection
    • Customize search results
    • Move the collection description to under the product listing
    • Remove the tax-included information in product page
    • Set up local pickup
    • Show Payment icons on the Footer
  • TROUBLESHOOTING
    • Contact form submissions not found
    • Translation apps incompatibility
Powered by GitBook
On this page
  • Layout
  • Sorting and filtering
  • Pagination
  • Storefront filters settings
  • How to create a visual filter
  1. Collections & Products
  2. Collection page
  3. Collection sections

Product listing

PreviousCollection bannerNext404 page

Last updated 3 months ago

Showing a list of products based on a category in a grid or list view.

Steps

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

  2. Select Collections, then Default collection.

  3. On the left-sidebar, add Product listing.

  4. Make necessary changes > Save.

Layout

  • Control the listing's container type and layout.

  • Show the number of products per row and per page.

  • Enable/disable box layout.

  • Show layout the columns switcher.

Sorting and filtering

Enable/disable filtering and sorting by options.

  • Enable sorting

  • Enable filtering: Enable Storefront filters for your store.

Considerations for adding filters:

  • Collections that contain more than 5,000 products don't display filters.

  • A filter can display a maximum of 100 filter values on your store.

  • In the Shopify Search & Discovery app, a filter displays a maximum of 1,000 filter values.

  • Translations aren't supported for the Vendor and Tags filter values. The product tag filter only displays to customers shopping in your store's default language. Vendor filter values are always based on your store's default language.

  • The price filter doesn't display for currencies other than your shop's default currency.

You can also change the filter's position, title, and height.

Pagination

Enable pagination in 3 ways.

Storefront filters settings

This setting is for storefront filters only. You can enable changing product card variants on filtering and showing results count on filter items.

How to create a visual filter

Filter values can include visual elements such as colors, patterns, or other 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, 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 assign the metafield to products/ variants, you can set up the filter for your online store:

  1. Click Add filter or choose an existing filter.

  2. Click the Source field > 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.

  • Select an image field for the Image.

Themes often display a swatch's image before its color.

For swatch displays, if you activate both Swatch pattern and Swatch color, the color is only displayed when there isn't an available pattern image for the filter value.

  1. Click Save.

See .

Customize the filters in your store with the app.

.

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.

Tip

✨
how to change the default sort order of a collection here
Shopify Search & Discovery
Learn more
metafields
metaobjects
requirements
metaobjects
metafields
metaobjects
Shopify Search & Discovery