MINIMOG theme
Try Minimog freeResourcesOther solutions
  • What is Minimog theme?
  • Changelog
  • Refund policy
  • Support policy
  • Terms of Service
  • Getting started
    • Install Minimog theme
      • Install Minimog in 1-click fast way
      • Install Minimog manually
    • Add Custom code/ CSS correctly
    • Integrate Shopify Review apps
    • Mega menu
    • Theme license
      • Activate license
      • Extend/ Renew Theme Support
      • Transfer license
    • Update Minimog theme
    • FoxHome
  • Build for success series
    • Home page for Fashion stores like SKIMS 🔥
  • Page's global sections
    • Announcement bar
    • Age verifier pop-up
    • Header
    • Footer
    • Mobile sticky bar
    • Scaling logo
  • Theme sections
    • Before/ After image slider
    • Blog posts
    • Brand list
    • Cascading collection
    • Cascading product
    • Collapsible tabs
    • Collection image showcase
    • Collection showcase
    • Collage tab
    • Collection list
    • Collection tab
    • Countdown timer
    • Custom content
    • Favorite product slider
    • Featured collection
    • Featured product
    • Featured promotion
    • Featured products slider
    • Gallery images 🔥
    • Google Maps
    • Hotspot image
    • Instagram
    • Image with slider
    • Image cards
    • Image with text overlay
    • Image with text
    • Lookbook
    • Multiple image with text 🔥
    • Newsletter
    • Press
    • Product bundles
    • Product tabs
    • Product list banner
    • Promotion banner
    • Promotion countdown timer 🔥
    • Recently viewed products
    • Rich text
    • Scrolling promotion
    • Slideshow
    • Testimonials
    • Video
    • Video hero
  • Theme settings
    • General settings
    • Layout settings
    • Additional pages
    • Advanced
    • Animations
    • Article card
    • Badges
    • Cart settings
    • Checkout
    • Colors & Color schemes
    • Currency format
    • Drawer & pop-up
    • GDPR settings
    • Intergrated apps
    • Integration
    • Product card
    • Product inventory
    • Product options design
    • Product options swatches
    • Social sharing
    • Search
    • Section
    • Store contact
    • Typography
  • Collections & Products
    • Product page
      • Custom product templates
      • Product template
      • Page sections
        • Breadcrumb
        • Product information
        • Product information tabs
        • Product recommedations
      • Product description
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product listing
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart & Checkout
    • Password
    • Customize password page
  • FAQS
    • Generic
      • Add a Cookie Banner
      • Add a gift wrap option to my cart
      • Add/ Remove Social icons on footer
      • Customize search results
      • Hide sections on mobile/ desktop view
      • JavaScript events for developers
      • Set up an Age Verifier Pop-up
      • Show Payment icons on the Footer
      • Sticky header when scrolling
    • Collection page
      • Add custom badges to my product card
      • Change the default product order in collection
      • Move the collection description to under the product listing
      • Set up Filters for the collection pages
    • Product page
      • Add recipient fields to my gift card product
      • Remove the tax-included information in product page
      • Set up Local Pickup option
    • Shopify functions
      • Does Minimog support Section groups?
      • Migrate data in the Section groups supported version
    • Foxify freebie code - All you need to know
  • TROUBLESHOOTING
    • Can't upload my Minimog theme to Shopify
    • Contact form submissions not found
    • Currency format display
    • FoxKit features are duplicated
    • FoxKit stops working
    • Missing images when installing demos
    • Translation missing issue
    • Translation apps incompatibility
    • Why is my activated Show Account Icon option not showing?
    • I can't install FoxKit on March 2023
Powered by GitBook
On this page
  • General and Layout
  • Sorting and filtering
  • How to create a filter
  • How to create a visual filter
  • Pagination
  • Filter settings
  1. Collections & Products
  2. Collection page
  3. Collection sections

Product listing

PreviousCollection bannerNext404 page

Last updated 10 months ago

Showing a list of products based on a category in 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.

General and Layout

  • Control the listing's container type and layout.

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

  • Enable or disable the columns switcher.

Sorting and filtering

Enable/ disable filtering and sorting by options.

You can choose to display filters by storefront filters or by custom tags.

How to create a filter

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. Add block "Filter by tags"

  5. Change the filter title and its tags list (separated by a comma). Choose a suitable design for the filter display.

  6. Merchants can decide to display the filter option expand or collapse by default.

7. Save.

Steps

  1. In your Shopify Admin > Navigation

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

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

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

6. On the left-sidebar, locate Product listing > Filter type > Select Storefront filters

7. Save

You can change the filter position, title, and height.

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 define 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, 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.

Themes will often prioritize displaying a swatch's image over its color.

For swatch displays, if you select 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.

Filter settings

This setting is for storefront filters only.

You can enable changing product card variants on filtering and showing results count on filter items.

To make your tags work well, check out .

Click Add and install app for your store

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

Customizing store filters requires the app.

Learn how to .

Click Add and install the app for your store

✨
this Shopify guideline for tags
Shopify Search & Discovery
metafields
metaobjects
requirements
metaobjects
metafields
metaobjects
Shopify Search & Discovery
Shopify Search & Discovery
customize filters with the app
Shopify Search & Discovery
✨
Explore FoxEcom Affiliate Program now