Shella Shopify Theme
  • User Manual
  • Shopify help
  • Get Started
    • How to create a new Template
    • How to add and edit a Page
    • How to build Metaobjects
    • How to find a handle
    • Filters logic
    • Pre-Order
  • Product variants
  • Header
    • Theme Blocks
  • Footer
    • Theme Blocks
  • Metafields
    • How to create custom filters
  • Theme Sections
    • Builder
      • Promo box (Banner)
      • Slick Slider
      • Revolution Slider
      • Instagram
      • Product column
      • Custom HTML
      • Space for vertical menu
    • Spacer
    • Article carousel
    • Brand carousel
    • Product carousel
    • Review carousel
    • Contact form
    • FAQs
    • Gallery
    • Information line
    • Search form
    • Subscription form
    • Brands
    • Collections
    • Lookbook
    • One product
    • Collection page heading
      • Theme Blocks
    • Collection banner builder
      • Theme Blocks
    • Ticker
  • Products
    • Product page
      • Theme blocks
    • Related product carousel
    • Usage information sidebar
  • Collections
    • Product grid
      • Current filters
      • Collections
      • Filters
      • Filter settings
      • Tags
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
  • Collections list
  • Page categories
    • Policy page
    • Lookbook
      • Page
    • Gallery
      • Page
    • FAQs
      • Page
    • Contact
      • Page
    • Brands
      • Page
    • Password
      • Social media
    • Search
      • Current filters
      • Filters
      • Filter settings
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
    • Quick view
  • Blogs
    • Theme Blocks
  • Blog posts
    • Theme Blocks
  • Theme settings
    • Quick Start
    • License
    • Logo and Favicon
    • Layout
    • Colors
    • Typography
    • Collection and Search page
    • Product -> General
    • Product -> Variants
    • Product -> Collection Page
    • Product Page and Quick View
    • Search
    • Currency
    • Cart
    • Wishlist and Compare
    • Payments
    • Social Media
    • News Subscription
    • Blog and Article Pages
    • Account
    • Reviews
    • Services
    • Apps and Language
    • Button, Input and Promo Box
    • Notifications
    • Pre-loader
    • Animations
    • Developer
    • Custom CSS
  • Theme features
  • Back to Help Center
Powered by GitBook
On this page
  • Product grid
  • Filtering
  • Sort By
  • Information
  • Grid
  • Current filters over the products grid
  • Filters section

Was this helpful?

  1. Collections

Product grid

In this section, you can configure the content that should be displayed on the collection page, manage the sidebar and decide what it should display: various filters, promo boxes, pages, subscription.

PreviousCollectionsNextCurrent filters

Last updated 2 months ago

Was this helpful?

Collections -> Product grid

IMPORTANT! This section required saving changes by pressing the “Save” button to view customizations on a collection page.

The Sidebar positioning and the visibility settings can be viewed in the Theme settings -> Collection and Search page. How to configure these settings you can read .

In this section, you can manage your content for the sidebar by adding the content blocks. There are 9 content blocks available for the sidebar. Three of them can be added only once: “Current filters”, “Parameters”, and “Filters”. The other six can be added several times: “Filter settings”, “Tag”, “Products”, “Custom HTML”, “Promo Box (Banner)”, and “Subscription”.

Product grid

In this section, you can decide the “Content width” that should be used on collection pages and can be set as s “Boxed” or “Fullwidth”:

The “Products per page” scale from 4 to 24, enables one to set the number of products that will be displayed on a collection page:

Filtering

Here you can decide which filter option to use: “Filters” or “Tags”. By default, the theme shows filters configured in Shopify Admin -> Apps -> Search & Discovery app. If you want to show filters by tags (“Tags” block) configured in the theme editor - untick the “Enable default filtering” option.

Please note, that only one option can be used in the Sidebar: “Filters” or “Tags”, the other method will be disabled.

If you enable the option “Show selected filters counter & button "Reset”, the filter counter and the button “Reset” will be shown for each filter block:

In order to show the number of products available for each product variant in the Sidebar, enable the option “Show the count of products on the filter”:

The option “Hide disabled filters”, enables one to hide out-of-stock product variants or to show them as unavailable:

Once you enable the option “Make availability filter as rounded checkbox”, the “Availability” filters design will be changed from the list to a rounded checkbox:

In the “Price filter type” dropdown, you can apply settings for the price filter visibility whether to show it as “Slider & Inputs”, “Slider”, or “Inputs”.

Please note, that if the option “Enable legacy method of the currency conversion” is enabled in Theme settings -> Currency, the only option “Slider” can be applied for the price filter.

Sort By

This subsection enables you to show the “Sort” option “Only on desktop” or “Desktop and mobile”. Customers will be able to sort products in the collection by featured, best-selling, price ascending, price descending, etc. You may choose the “Hide” option if you do not want to show the “Sort” on your store.

Information

Here you can decide if to display the number of the results “Only on desktop” or “Desktop and mobile”. Or set the option “Hide” to disable showing information on the collection page.

Grid

In this subsection, you can decide on the visibility of the grid buttons on desktop and mobile by enabling or disabling the “Show grid buttons” option.

The grid view button options will be shown on the collection page: 1 product per row, 2 products per row, 3 products per row, 4 products per row, 6 products per row, and a list. You can decide whether all of them, some, or one should be displayed, simply by enabling the “Show button 1-6 items per row” or “Show button “List”:

Product 'List' design

The theme includes two list designs:

VIEW DEMO

Enable tooltip

If you enable this option, the tooltips will be displayed for the grid buttons on the collection page.

Default products per row (Extra large)

Here you can choose how many products should be displayed on the extra large screen by choosing the proper option from the dropdown list.

Default products per row (Large)

Here you can choose how many products should be displayed on the desktop by choosing the proper option from the dropdown list.

Default products per row (Medium)

Here you can choose how many products should be displayed on the laptop by choosing the proper option from the dropdown list.

Default products per row (Small)

Here you can choose how many products should be displayed on the tablet by choosing the proper option from the dropdown list.

Default view grid (Extra small)

Here you can choose how many products should be displayed on the mobile by choosing the proper option from the dropdown list.

Current filters over the products grid

In case you need to show selected filters on desktop, mobile, or both, you may choose one of the options from the dropdown list: “Only mobile”, “Only desktop”, or “Desktop and mobile”. Or disable the option by choosing “Hide”.

Filters section

In this subsection, decide if to display the filter titles in uppercase by enabling the “Uppercase filters section title” option. In order to separate each filter block with the border, tick the “Show filters section border” option.

This is how a collection page may look like when one enables both of these options:

In this subsection, one can configure the general settings regarding the “Filters” block that will be applied for the filters. How to configure the “Filters” block, you can read .

here
List products V1
List products V2
VIEW DEMO
here