Collection
How to use the Collection section in the Meditative Folks Theme.
Collection
At a glance
The Collection section shows products within a single collection with filtering, optional filter tabs, sorting, and grid controls.
Where to find it
- Theme editor path: Online Store → Customize → select the relevant page → Collection
- Add to a page: This section is fixed on its template page.
Settings
Collection name
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Display collection name | Shows the collection title above the product grid. | Yes | Always |
| Custom title | Optional title override. When set with “Show collection title as label”, the collection title appears above this text. | — | Display collection name is on |
| Show collection title as label above custom title | When enabled with a custom title, the collection title is shown as a label above the custom title. | No | Display collection name is on and Custom title is filled in |
Collection description
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Display collection description | Shows the collection description above the product grid. | No | Always |
| Custom description | Optional description override. When blank, the collection description from Shopify admin is used. | — | Display collection description is on |
| Use global paragraph (body) styles | When enabled, collection descriptions use Typography → paragraph (body). | Yes | Display collection description is on |
| Collection description font size (mobile) | Sets collection description font size (mobile) in pixels for the matching screen size. | 14 | Display collection description is on and Use global paragraph styles is off |
| Collection description font size (tablet) | Sets collection description font size (tablet) in pixels for the matching screen size. | 16 | Display collection description is on and Use global paragraph styles is off |
| Collection description font size (desktop) | Sets collection description font size (desktop) in pixels for the matching screen size. | 18 | Display collection description is on and Use global paragraph styles is off |
| Content alignment | Controls “Content alignment” on the storefront. Open the theme editor to preview live. | center | Display collection name is on or Display collection description is on |
| Use global H2 heading styles for collection name | Uses Typography → H1 for the collection page title. | Yes | Display collection name is on |
| Collection name font size (mobile) | Sets collection name font size (mobile) in pixels for the matching screen size. | 32 | Display collection name is on and Use global heading styles is off |
| Collection name font size (tablet) | Sets collection name font size (tablet) in pixels for the matching screen size. | 40 | Display collection name is on and Use global heading styles is off |
| Collection name font size (desktop) | Sets collection name font size (desktop) in pixels for the matching screen size. | 48 | Display collection name is on and Use global heading styles is off |
Filters
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use filter sheet on tablet | Shows a filter button that opens a sheet on tablet. Mobile always uses the filter sheet. Desktop always uses the sidebar. | No | Always |
Filter tabs
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Enable filter tabs | Shows clickable tabs above the product grid so shoppers can jump between tagged groups. | No | Always |
| Button size | Chooses the button size from Theme settings → Button sizes. | small | Filter tabs are on |
| Active tab variant | Button style for the selected filter tab. | primary | Filter tabs are on |
| Inactive tab variant | Button style for tabs that are not selected. | secondary | Filter tabs are on |
| Rounded full | Display as a fully rounded pill shape. | Yes | Filter tabs are on |
| Rounded | Sets the corner radius of filter tabs in pixels. | 8 | Filter tabs are on and Rounded full is off |
Filter tabs use product tags that start with mf_tabs_. For step-by-step tagging, label rules, and worked examples, see Collection filter tabs.
Products
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Products per page | How many products load before pagination. | 20 | Always |
Blocks
| Block | What it does | Limit |
|---|---|---|
| Column Settings | Product grid columns, gaps per screen size, optional horizontal scroll, and row limits on this page. | 1 |
Column Settings settings
Grid gap, column counts, horizontal scroll, visible items, and row limits follow the same pattern as other product grids (Featured collection, Product recommendations). Row mode All products shows every product on the current paginated page. Horizontal scroll does not replace pagination.
Pagination
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Inactive page button variant | Controls “Inactive page button variant” on the storefront. Open the theme editor to preview live. | secondary | Always |
| Active page button variant | Controls “Active page button variant” on the storefront. Open the theme editor to preview live. | default | Always |
| Button size | Chooses the button size from Theme settings → Button sizes. | medium | Always |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Padding top | Adds empty space (padding top) around the section content. | 32 | Always |
| Padding bottom | Adds empty space (padding bottom) around the section content. | 32 | Always |
Color scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Setting details
Each control from the tables above, explained simply:
Display collection name
Shows the collection title above the product grid. Default: Yes.
Custom title
Optional title override. When set with “Show collection title as label”, the collection title appears above this text. Default: —. This control appears when: show collection name is on.
Show collection title as label above custom title
When enabled with a custom title, the collection title is shown as a label above the custom title. Default: No. This control appears when: show collection name is on and custom title != blank.
Display collection description
Shows the collection description above the product grid. Default: No.
Custom description
Optional description override. When blank, the collection description from Shopify admin is used. Default: —. This control appears when: show collection description is on.
Use global paragraph (body) styles
When enabled, collection descriptions use Typography → paragraph (body). Default: Yes. This control appears when: show collection description is on.
Collection description font size (mobile)
Sets collection description font size (mobile) in pixels for the matching screen size. Default: 14. This control appears when: show collection description is on and use global collection description styles is off.
Collection description font size (tablet)
Sets collection description font size (tablet) in pixels for the matching screen size. Default: 16. This control appears when: show collection description is on and use global collection description styles is off.
Collection description font size (desktop)
Sets collection description font size (desktop) in pixels for the matching screen size. Default: 18. This control appears when: show collection description is on and use global collection description styles is off.
Content alignment
Controls “Content alignment” on the storefront. Open the theme editor to preview live. Default: center. This control appears when: show collection name is on or show collection description is on.
Use global H2 heading styles for collection name
Uses Typography → H1 for the collection page title. Default: Yes. This control appears when: show collection name is on.
Collection name font size (mobile)
Sets collection name font size (mobile) in pixels for the matching screen size. Default: 32. This control appears when: show collection name is on and use global collection name styles is off.
Collection name font size (tablet)
Sets collection name font size (tablet) in pixels for the matching screen size. Default: 40. This control appears when: show collection name is on and use global collection name styles is off.
Collection name font size (desktop)
Sets collection name font size (desktop) in pixels for the matching screen size. Default: 48. This control appears when: show collection name is on and use global collection name styles is off.
Use filter sheet on tablet
Shows a filter button that opens a sheet on tablet. Mobile always uses the filter sheet. Desktop always uses the sidebar. Default: No.
Enable filter tabs
Shows clickable tabs above the product grid so shoppers can jump between tagged groups. Default: No.
Button size
Chooses the button size from Theme settings → Button sizes. Default: small. This control appears when: Filter tabs are on.
Active tab variant
Button style for the selected filter tab. Default: primary. This control appears when: Filter tabs are on.
Inactive tab variant
Button style for tabs that are not selected. Default: secondary. This control appears when: Filter tabs are on.
Rounded full
Display as a fully rounded pill shape. Default: Yes. This control appears when: Filter tabs are on.
Rounded
Sets the corner radius of filter tabs in pixels. Default: 8. This control appears when: Filter tabs are on and Rounded full is off.
Products per page
How many products load before pagination. Default: 20.
Inactive page button variant
Controls “Inactive page button variant” on the storefront. Open the theme editor to preview live. Default: secondary.
Active page button variant
Controls “Active page button variant” on the storefront. Open the theme editor to preview live. Default: default.
Button size
Chooses the button size from Theme settings → Button sizes. Default: medium.
Padding top
Adds empty space (padding top) around the section content. Default: 32.
Padding bottom
Adds empty space (padding bottom) around the section content. Default: 32.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Tips
- Open the theme editor and select this section to preview changes live.
- Use Theme settings for fonts, colors, and buttons that apply store-wide.
- To show filter tabs, turn on Enable filter tabs and tag products with
mf_tabs_— see Collection filter tabs for full instructions and examples.