The Collection template in the Be Yours theme controls how collection pages are displayed. It includes the collection banner, optional sub-collection navigation, product grid, filtering and sorting tools, recently viewed products, and optional promotional content.
This guide explains the main sections available on the default Collection template and how to configure them in the Shopify Theme Editor.
STEPS:
1. Opening the Collection Template
To edit the Collection template:
- From your Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the template selector at the top of the Theme Editor.
- Select Collections.
- Choose the collection template you want to edit, such as Default collection.
- Edit the sections on the left sidebar.
- Click Save.
The default Collection template in Be Yours includes these main sections:
| Section | Purpose |
|---|---|
| Collection banner | Displays the collection title, description, and collection image. |
| Sub-collections | Displays child collection links from a navigation menu. Disabled by default. |
| Product grid | Displays products, filtering, sorting, viewing, pagination, and product card settings. |
| Recently viewed products | Displays products recently viewed by the customer. |
| Multicolumn | Displays promotional or supporting content below the product grid. |
You can also add more sections to the Collection template, depending on your merchandising needs.
2. Collection Banner Section
The Collection banner section displays the main collection title area.
It can show:
- Collection title
- Collection description
- Collection image
- Image overlay
- Desktop and mobile banner height
- Text alignment
The content is pulled from the collection in Shopify admin.
To edit collection content:
- From your Shopify admin, go to Products > Collections.
- Open the collection.
- Add or edit the collection Title.
- Add or edit the collection Description.
- Add or edit the collection Image.
- Click Save.
Then configure the banner in the Theme Editor:
- Go to Online Store > Themes > Customize.
- Open the collection template.
- Select the Collection banner section.
- Configure the banner settings.
- Click Save.
Section settings:
| Setting | Description |
|---|---|
| Heading size | Controls the collection title size. |
| Show description | Displays the collection description. |
| Show image | Displays the collection image. |
| Apply overlay on image | Adds an overlay to improve text readability. |
| Image focal point | Controls the most important area of the image. |
| Image ratio | Controls the desktop banner height or adapts to the image. |
| Text alignment | Aligns the banner text on desktop. |
| Mobile text alignment | Aligns the banner text on mobile. |
| Mobile image ratio | Controls the banner height on mobile. |
| Show text below image | Displays the text below the banner image on mobile. |
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
Recommended setup:
| Store type | Recommended settings |
|---|---|
| Fashion or lifestyle store | Show image enabled, overlay enabled, 500px–650px height |
| Minimal catalog | Show image disabled or shorter image height |
| SEO-focused collection page | Show description enabled |
| Mobile-first layout | Use mobile image ratio 250px–400px and test cropping |
3. Sub-Collections Section
The Sub-collections section displays child collection links based on a Shopify navigation menu.
In the default Collection template, this section is included but disabled by default. You can enable it when you want to show subcategories or related collection groups.
This section is useful for:
- Parent collections with subcategories.
- Category landing pages.
- Collection navigation.
- Visual collection tiles above the product grid.
How the section works
The section uses a selected menu and checks the active collection link. When the current collection matches a menu item, the section displays that menu item's child collection links.
Only links that point to collections are displayed as sub-collection cards.
Create a sub-collections menu
- From your Shopify admin, go to Online Store > Navigation.
- Create or open a menu.
- Add collection links.
- Nest child collection links under the parent collection link.
- Click Save.
Example menu structure:
Shop
- Clothing
- Tops
- Bottoms
- Dresses
- Accessories
- Bags
- Hats
- Jewelry
If the customer is viewing the Clothing collection, the section can display Tops, Bottoms, and Dresses.
Enable the Sub-collections section
- Go to Online Store > Themes > Customize.
- Open the collection template.
- Find the Sub-collections section.
- Enable the section if it is hidden.
- Select the menu that contains your collection hierarchy.
- Configure the layout settings.
- Click Save.
Section settings:
| Setting | Description |
|---|---|
| Menu | Selects the navigation menu used to find sub-collection links. |
| Collections per row | Controls how many collection cards display per row on desktop. |
| Mobile columns | Controls whether mobile displays 1 or 2 columns. |
| Horizontal on mobile | Displays sub-collections as a horizontal scroll row on mobile. |
| Grid image | Choose whether cards use product images or collection images. |
| Image ratio | Controls collection card image ratio. |
| Image focal point | Controls the image position inside the card. |
| Apply overlay on image | Adds overlay for better text readability. |
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
Recommended setup:
| Goal | Recommended setting |
|---|---|
| Show visual category tiles | Use collection image |
| Show products as category preview | Use product image |
| Mobile-friendly category navigation | Enable horizontal on mobile |
| Large category list | Use 4 or 5 collections per row |
4. Product Grid Section
The Product grid section is the main section of the Collection template. It displays the products inside the collection and controls the product grid layout, filtering, sorting, pagination, and product card features.
Main features:
| Feature | Description |
|---|---|
| Products per row | Controls how many products display per row on desktop. |
| Rows per page | Controls how many product rows appear before pagination or load more. |
| Mobile columns | Controls 1 or 2 product columns on mobile. |
| Pagination | Choose infinite loading, load more button, or paginated navigation. |
| Filtering | Displays storefront filters from Shopify Search & Discovery. |
| Sorting | Displays Shopify sorting options. |
| Viewing | Lets customers switch product grid layouts. |
| Product card settings | Controls card image ratio, vendor, rating, quick buy, quick view, swatches, and countdown. |
Layout settings:
| Setting | Description |
|---|---|
| Products per row | Choose 2, 3, or 4 products per row on desktop. |
| Rows per page | Choose how many rows are shown per page or per load. |
| Mobile columns | Choose 1 or 2 columns on mobile. |
| Pagination | Choose Infinite scroll, Load more button, or Paginated. |
| Padding top | Adds spacing above the product grid. |
| Padding bottom | Adds spacing below the product grid. |
Pagination options:
| Option | Description |
|---|---|
| Infinite scroll | Loads more products automatically as customers scroll. |
| Load more button | Customers click a button to load more products. |
| Paginated | Displays standard pagination links. |
Recommended setup:
| Store type | Recommended setup |
|---|---|
| Large catalog | 4 products per row, 3–5 rows per page, paginated or load more |
| Visual/lifestyle catalog | 3 products per row, larger image ratio |
| Mobile-first store | 2 columns on mobile |
| SEO-focused collection | Paginated navigation |
5. Filtering, Sorting, and Viewing
The Product grid section controls whether filtering, sorting, and viewing tools appear on the collection page.
Settings:
| Setting | Description |
|---|---|
| Enable sticky filter | Keeps filter controls visible when customers scroll. |
| Enable sorting | Displays Shopify product sorting options. |
| Enable viewing | Lets customers switch product grid layout. |
| Enable filtering | Displays collection filters. |
| Filter type | Controls the filter layout: Horizontal, Vertical, or Drawer. |
| Enable filtering color swatches | Displays color filter values as swatches. |
| Add label | Adds text labels next to color swatches. |
| Maximum items to show | Controls how many filter values show before the section hides extra values. |
Filter type options:
| Filter type | Best used for |
|---|---|
| Horizontal | Simple stores with a small number of filters. |
| Vertical | Stores with many filters or category navigation. |
| Drawer | Clean layouts or mobile-first stores. |
Important:
Filters are managed in Shopify through the Search & Discovery app. The theme can only display filters that Shopify provides to the storefront.
To manage filters:
- From your Shopify admin, open Search & Discovery.
- Go to Filters.
- Add or remove filter sources.
- Click Save.
- Return to the collection template and make sure Enable filtering is turned on.
Common filters:
| Filter | Source |
|---|---|
| Availability | Shopify product availability |
| Price | Shopify product price |
| Vendor | Product vendor |
| Product type | Product type |
| Color | Product option, product metafield, or category metafield |
| Size | Product option, product metafield, or category metafield |
| Custom product information | Product metafields |
6. Optional Collection Metafield for Filter Limit
Be Yours can use a collection metafield to override the number of visible filter values for a specific collection.
Metafield:
theme.filter_max_items
This is useful when one collection needs to show more filter values than other collections.
To create the collection metafield:
-
From your Shopify admin, go to Settings > Metafields and metaobjects.
-
Select Collections.
-
Click Add definition.
-
Enter the metafield name.
Example:
Filter max items -
Shopify will automatically recommend a Namespace and key.
-
If you need to edit it manually, click the suggested Namespace and key value.
-
Set the namespace and key to:
theme.filter_max_items -
Select Integer as the content type.
-
Click Save.
Then add a value to a collection:
-
From Shopify admin, go to Products > Collections.
-
Open the collection.
-
Scroll down to the Metafields area.
-
Enter the number of filter values to show.
Example:
12 -
Click Save.
If this metafield is empty, the Product grid section uses the default Maximum items to show setting.
7. Product Card Settings
The Product grid section includes product card settings that control how each product appears on the collection page.
Settings:
| Setting | Description |
|---|---|
| Image ratio | Controls the product card image ratio. |
| Image focal point | Controls the image position inside the card. |
| Enable image fill | Makes product images fill the card image area. |
| Show second image on hover | Shows the second product image when customers hover. |
| Show vendor | Displays the product vendor. |
| Show product rating | Displays product review rating when rating metafields are available. |
| Show quick buy | Displays quick add-to-cart on product cards. |
| Enable quick view | Displays a quick view button or modal. |
| Enable color swatches | Displays swatches on product cards. |
| Enable countdown | Displays product countdown content if configured. |
Image ratio options:
| Option | Description |
|---|---|
| Adapt | Uses the original image ratio. |
| Square | Crops images to a square. |
| Portrait | Uses portrait format. |
| Landscape | Uses landscape format. |
| Wide | Uses wide format. |
Recommended setup:
| Goal | Recommended setting |
|---|---|
| Clean product grid | Adapt image ratio, image fill disabled |
| Fashion collection | Portrait image ratio, second image on hover enabled |
| Faster shopping | Quick buy enabled |
| Rich product preview | Quick view enabled |
| Color variants | Color swatches enabled |
| Trust/reviews | Product rating enabled |
Important:
Some product card features also depend on global theme settings or product data. For example, quick view may require the global quick view setting to be enabled, and ratings require review metafields or a compatible review app.
8. Sidebar Blocks in Product Grid
The Product grid section supports additional sidebar blocks.
Available blocks:
| Block | Purpose |
|---|---|
| Menu | Displays a quick links menu in the sidebar. |
| Text | Displays custom heading and rich text. |
| Image | Displays an image with optional link. |
These blocks are especially useful with the Vertical filter layout.
Menu block
Settings:
| Setting | Description |
|---|---|
| Heading | Adds a heading above the menu. |
| Menu | Selects the menu to display. |
Recommended use:
- Category links
- Collection navigation
- Brand navigation
- Help links
Text block
Settings:
| Setting | Description |
|---|---|
| Heading | Adds a heading for the text block. |
| Text | Adds rich text content. |
Recommended use:
- Collection note
- Promotion message
- Shipping message
- Brand story snippet
Image block
Settings:
| Setting | Description |
|---|---|
| Image | Selects the image to display. |
| Image width | Controls the image width. |
| Link | Adds an optional image link. |
Recommended use:
- Campaign banner
- Sale image
- Collection visual
- Trust badge
9. Adding More Sections to Collection Pages
Besides the default Collection template sections, you can add more sections to collection pages.
Recommended sections for collection templates:
| Section | Best used for |
|---|---|
| Rich text | Add collection intro, SEO content, or promotional text. |
| Image banner | Add campaign banners above or below the product grid. |
| Featured collection | Highlight another collection. |
| Tabbed collections | Display multiple related collections in tabs. |
| Scrolling promotion | Add a marquee-style promotional message. |
| Countdown timer | Promote a limited-time collection sale. |
| FAQ | Answer common questions for the category. |
| Comparison table | Compare products or product groups. |
| Bundle products | Promote a bundle or complete-the-look set. |
| Shop the look | Display shoppable lifestyle content. |
| Logo list | Show press, stockist, or brand logos. |
Recommended placement:
| Placement | Recommended sections |
|---|---|
| Above Product grid | Rich text, Image banner, Sub-collections |
| Below Product grid | Recently viewed products, Multicolumn, FAQ, Featured collection |
| Campaign collection | Countdown timer, Scrolling promotion, Image banner |
| Educational collection | Rich text, FAQ, Comparison table |
10. Recommended Collection Template Setup
For most stores, we recommend this setup:
| Order | Section | Recommended status |
|---|---|---|
| 1 | Collection banner | Enabled |
| 2 | Sub-collections | Optional |
| 3 | Product grid | Enabled |
| 4 | Recently viewed products | Enabled |
| 5 | Multicolumn | Optional |
Recommended Product grid settings:
| Setting | Recommended value |
|---|---|
| Products per row | 3 or 4 |
| Rows per page | 3 to 5 |
| Mobile columns | 2 |
| Pagination | Paginated or Load more |
| Enable sticky filter | Enabled |
| Enable sorting | Enabled |
| Enable viewing | Optional |
| Enable filtering | Enabled |
| Filter type | Vertical for large catalogs, Horizontal for simple catalogs |
| Image ratio | Portrait or Adapt |
| Show second image on hover | Enabled |
| Show vendor | Optional |
| Show product rating | Enabled if review data exists |
| Show quick buy | Enabled |
| Enable quick view | Enabled |
| Enable color swatches | Enabled |
| Enable countdown | Optional |
11. Notes and Limitations
Please note the following behavior:
- The Collection banner uses the collection title, description, and image from Shopify admin.
- The Sub-collections section depends on a Shopify navigation menu with nested collection links.
- The Product grid section is required for displaying collection products.
- Filters must be set up in Shopify Search & Discovery before the theme can display them.
- Shopify does not display filters on collections with more than 5,000 products.
- Product card color swatches and filter color swatches are controlled separately.
- Quick view may require the global quick view setting to be enabled.
- Product ratings require rating metafields or a compatible review app.
- Countdown display depends on product countdown data.
- Added promotional sections should not push the product grid too far down the page unless the collection page is designed as a landing page.
Troubleshooting
If the Collection template does not display correctly, please check the following:
- Make sure you are editing the correct collection template.
- Make sure the collection is assigned to that template in Shopify admin.
- Make sure the collection has products.
- If the collection image does not appear, make sure Show image is enabled and the collection has an image.
- If the collection description does not appear, make sure Show description is enabled and the collection has a description.
- If sub-collections do not appear, check that the Sub-collections section is enabled and a menu is selected.
- If sub-collections still do not appear, make sure the selected menu has nested collection links and the current collection matches a parent menu item.
- If filters do not appear, check Search & Discovery > Filters and make sure Enable filtering is enabled in the Product grid section.
- If color swatches do not appear in filters, check the filter source, color swatch trigger, and swatch configuration.
- If sorting or viewing controls are missing, make sure they are enabled in the Product grid section.
- If quick buy or quick view does not appear, check the Product grid product card settings and global quick view settings.
- If Recently viewed products do not show products, view some product pages first and then return to a collection page.
- If the layout looks crowded, reduce promotional sections above the Product grid.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Setting up filtering on the collection page