Sticky collection
How to use the Sticky collection section in the Meditative Folks Theme.
Sticky collection
At a glance
Collection layout with sticky filters or headers for long product lists.
Where to find it
- Theme editor path: Online Store → Customize → select the relevant page → Sticky collection
- Add to a page: Add via Add section → category Collections.
Settings
Image
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Mobile image | Recommended: 828 x 1242 px (portrait-friendly) | — | Always |
| Tablet image | Recommended: 1536 x 1024 px | — | Always |
| Desktop image | Recommended: 2560 x 1280 px | — | Always |
| Image alt text | Optional alt text. Falls back to the image alt from Shopify media, then the heading. | — | Always |
| Image aspect ratio | Controls the image setting “Image aspect ratio”. Upload clear photos for best results. | 3 / 4 | Always |
| Image fit | Controls the image setting “Image fit”. Upload clear photos for best results. | cover | Always |
| Image position | Controls the image setting “Image position”. Upload clear photos for best results. | center | Always |
| Image link | Optional URL to navigate to when the image is clicked | — | Always |
| Show overlay | Turns “Show overlay” on or off on the storefront. | No | Always |
| Overlay color | Controls “Overlay color” on the storefront. Open the theme editor to preview live. | #000000 | Show overlay is on |
| Overlay opacity | Controls “Overlay opacity” on the storefront. Open the theme editor to preview live. | 0.1 | Show overlay is on |
| Image load priority | Control loading and fetchpriority hints for the image. | automatic | Always |
| Image border radius | Rounds the corners. Higher values look more pill-shaped. | 0 | Always |
| Image column width (tablet) | Controls the image setting “Image column width (tablet)”. Upload clear photos for best results. | 50 | Always |
| Image column width (desktop) | Controls the image setting “Image column width (desktop)”. Upload clear photos for best results. | 50 | Always |
| Sticky top offset | Distance from the top of the viewport when the image is sticky. Increase if a sticky header overlaps the image. | 32 | Always |
Collection
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Collection | Controls “Collection” on the storefront. Open the theme editor to preview live. | — | Always |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Column gap | Controls “Column gap” on the storefront. Open the theme editor to preview live. | 24 | Always |
| 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 |
Country visibility
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show in country | Enter ISO country codes separated by commas, for example: IN, CA. Leave blank to show in all countries. | — | Always |
| Exclude from country | Enter ISO country codes separated by commas to hide this section in those markets. Leave blank to exclude no countries. | — | Always |
Separator
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show separator line | Turns “Show separator line” on or off on the storefront. | No | Always |
| Use global separator color | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Show separator is on |
| Separator color | Controls the divider line: separator color. | #E5E5E5 | Show separator is on and Use global separator color is off |
| Separator thickness | Controls the divider line: separator thickness. | 2 | Show separator is on |
| Separator margin top | Controls the divider line: separator margin top. | 0 | Show separator is on |
| Separator margin bottom | Controls the divider line: separator margin bottom. | 0 | Show separator is on |
Color scheme
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Color scheme | Applies a color scheme from Theme settings → Colors. | scheme-1 | Always |
Blocks
| Block | Purpose | Limit |
|---|---|---|
| Header & CTA Content | Overline, heading, description, and button for the sticky image or product column. | 1 |
| Column Settings | Product columns, gaps, maximum products, and mobile swipe. | 1 |
Header & CTA Content settings
General
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Content style | Controls “Content style” on the storefront. Open the theme editor to preview live. | above_products | Always |
| Content placement | Controls “Content placement” on the storefront. Open the theme editor to preview live. | top-left | content style == 'inside image' |
| Text alignment | Controls “Text alignment” on the storefront. Open the theme editor to preview live. | left | Hide heading/subheading visually is off |
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | New arrivals | Always |
| Use global H2 heading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Heading is filled in |
| Heading font size (mobile) | Sets heading font size (mobile) in pixels for the matching screen size. | 26 | Heading is filled in and Use global heading styles is off |
| Heading font size (tablet) | Sets heading font size (tablet) in pixels for the matching screen size. | 29 | Heading is filled in and Use global heading styles is off |
| Heading font size (desktop) | Sets heading font size (desktop) in pixels for the matching screen size. | 33 | Heading is filled in and Use global heading styles is off |
| Heading font weight | Sets how bold heading text appears. | 500 | Heading is filled in and Use global heading styles is off |
| Heading color | Controls “Heading color” on the storefront. Open the theme editor to preview live. | #000000 | Heading is filled in |
| Description | Controls “Description” on the storefront. Open the theme editor to preview live. |
| Always |
| Use global text styles for description | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | description != blank |
| Description font size (mobile) | Sets description font size (mobile) in pixels for the matching screen size. | 16 | Use global subheading styles is off and description != blank |
| Description font size (tablet) | Sets description font size (tablet) in pixels for the matching screen size. | 18 | Use global subheading styles is off and description != blank |
| Description font size (desktop) | Sets description font size (desktop) in pixels for the matching screen size. | 19 | Use global subheading styles is off and description != blank |
| Description font weight | Sets how bold description text appears. | 400 | Use global subheading styles is off and description != blank |
| Text color | Controls “Text color” on the storefront. Open the theme editor to preview live. | #333333 | description != blank |
| Description max width | Controls “Description max width” on the storefront. Open the theme editor to preview live. | 640 | description != blank |
| Hide heading and description (for accessibility) | Controls “Hide heading and description (for accessibility)” on the storefront. Open the theme editor to preview live. | No | Always |
| Content alignment | Controls “Content alignment” on the storefront. Open the theme editor to preview live. | start | Hide heading/subheading visually is off and content style == 'above products' |
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | Shop collection | Always |
| Button link | Defaults to the selected collection URL when blank. | — | Button text is filled in |
| Button variant | Chooses the button look (primary, secondary, outline, or ghost). | primary | Button text is filled in |
| Button size | Chooses the button size from Theme settings → Button sizes. | medium | Button text is filled in |
| Use global button styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Button text is filled in |
| Button background | Controls “Button background” on the storefront. Open the theme editor to preview live. | #ffffff | Button text is filled in and Use global button styles is off |
| Button text color | Controls “Button text color” on the storefront. Open the theme editor to preview live. | #000000 | Button text is filled in and Use global button styles is off |
| Enable shimmer | Adds a moving highlight across the button or ribbon. | Yes | Button text is filled in |
Column Settings settings
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Grid gap (mobile) | Controls “Grid gap (mobile)” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Grid gap (tablet) | Controls “Grid gap (tablet)” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Grid gap (desktop) | Controls “Grid gap (desktop)” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Maximum products | Shopify limits collections to 50 products in Liquid. | 50 | Always |
Mobile (up to 639px)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Columns on mobile | Controls “Columns on mobile” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Enable horizontal scroll | Allow customers to swipe through products when mobile columns is set to 1. | Yes | columns mobile == '1' |
| Visible items (mobile) | Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. | 1.5 | columns mobile == '1' and Horizontal scroll (mobile) is on |
| Show swipe hint | Shows swipe helper text on mobile. | Yes | columns mobile == '1' and Horizontal scroll (mobile) is on |
Tablet (640px – 879px)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Columns on tablet | Controls “Columns on tablet” on the storefront. Open the theme editor to preview live. | 1 | Always |
Desktop (880px+)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Columns on desktop | Controls “Columns on desktop” on the storefront. Open the theme editor to preview live. | 1 | Always |
Setting details
Each control from the tables above, explained simply:
Mobile image
Recommended: 828 x 1242 px (portrait-friendly) Default: —.
Tablet image
Recommended: 1536 x 1024 px Default: —.
Desktop image
Recommended: 2560 x 1280 px Default: —.
Image alt text
Optional alt text. Falls back to the image alt from Shopify media, then the heading. Default: —.
Image aspect ratio
Controls the image setting “Image aspect ratio”. Upload clear photos for best results. Default: 3 / 4.
Image fit
Controls the image setting “Image fit”. Upload clear photos for best results. Default: cover.
Image position
Controls the image setting “Image position”. Upload clear photos for best results. Default: center.
Image link
Optional URL to navigate to when the image is clicked Default: —.
Show overlay
Turns “Show overlay” on or off on the storefront. Default: No.
Overlay color
Controls “Overlay color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Show overlay is on.
Overlay opacity
Controls “Overlay opacity” on the storefront. Open the theme editor to preview live. Default: 0.1. This control appears when: Show overlay is on.
Image load priority
Control loading and fetchpriority hints for the image. Default: automatic.
Image border radius
Rounds the corners. Higher values look more pill-shaped. Default: 0.
Image column width (tablet)
Controls the image setting “Image column width (tablet)”. Upload clear photos for best results. Default: 50.
Image column width (desktop)
Controls the image setting “Image column width (desktop)”. Upload clear photos for best results. Default: 50.
Sticky top offset
Distance from the top of the viewport when the image is sticky. Increase if a sticky header overlaps the image. Default: 32.
Collection
Controls “Collection” on the storefront. Open the theme editor to preview live. Default: —.
Grid gap (mobile)
Controls “Grid gap (mobile)” on the storefront. Open the theme editor to preview live. Default: 16.
Grid gap (tablet)
Controls “Grid gap (tablet)” on the storefront. Open the theme editor to preview live. Default: 16.
Grid gap (desktop)
Controls “Grid gap (desktop)” on the storefront. Open the theme editor to preview live. Default: 16.
Maximum products
Shopify limits collections to 50 products in Liquid. Default: 50.
Columns on mobile
Controls “Columns on mobile” on the storefront. Open the theme editor to preview live. Default: 1.
Enable horizontal scroll
Allow customers to swipe through products when mobile columns is set to 1. Default: Yes. This control appears when: columns mobile == '1'.
Visible items (mobile)
Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. Default: 1.5. This control appears when: columns mobile == '1' and Horizontal scroll (mobile) is on.
Show swipe hint
Shows swipe helper text on mobile. Default: Yes. This control appears when: columns mobile == '1' and Horizontal scroll (mobile) is on.
Columns on tablet
Controls “Columns on tablet” on the storefront. Open the theme editor to preview live. Default: 1.
Columns on desktop
Controls “Columns on desktop” on the storefront. Open the theme editor to preview live. Default: 1.
Column gap
Controls “Column gap” on the storefront. Open the theme editor to preview live. Default: 24.
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.
Show in country
Enter ISO country codes separated by commas, for example: IN, CA. Leave blank to show in all countries. Default: —.
Exclude from country
Enter ISO country codes separated by commas to hide this section in those markets. Leave blank to exclude no countries. Default: —.
Show separator line
Turns “Show separator line” on or off on the storefront. Default: No.
Use global separator color
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Show separator is on.
Separator color
Controls the divider line: separator color. Default: #E5E5E5. This control appears when: Show separator is on and Use global separator color is off.
Separator thickness
Controls the divider line: separator thickness. Default: 2. This control appears when: Show separator is on.
Separator margin top
Controls the divider line: separator margin top. Default: 0. This control appears when: Show separator is on.
Separator margin bottom
Controls the divider line: separator margin bottom. Default: 0. This control appears when: Show separator is on.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Content style
Controls “Content style” on the storefront. Open the theme editor to preview live. Default: above_products.
Content placement
Controls “Content placement” on the storefront. Open the theme editor to preview live. Default: top-left. This control appears when: content style == 'inside image'.
Text alignment
Controls “Text alignment” on the storefront. Open the theme editor to preview live. Default: left. This control appears when: Hide heading/subheading visually is off.
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: New arrivals.
Use global H2 heading styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Heading is filled in.
Heading font size (mobile)
Sets heading font size (mobile) in pixels for the matching screen size. Default: 26. This control appears when: Heading is filled in and Use global heading styles is off.
Heading font size (tablet)
Sets heading font size (tablet) in pixels for the matching screen size. Default: 29. This control appears when: Heading is filled in and Use global heading styles is off.
Heading font size (desktop)
Sets heading font size (desktop) in pixels for the matching screen size. Default: 33. This control appears when: Heading is filled in and Use global heading styles is off.
Heading font weight
Sets how bold heading text appears. Default: 500. This control appears when: Heading is filled in and Use global heading styles is off.
Heading color
Controls “Heading color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Heading is filled in.
Description
Controls “Description” on the storefront. Open the theme editor to preview live. Default:
.
Use global text styles for description
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: description != blank.
Description font size (mobile)
Sets description font size (mobile) in pixels for the matching screen size. Default: 16. This control appears when: Use global subheading styles is off and description != blank.
Description font size (tablet)
Sets description font size (tablet) in pixels for the matching screen size. Default: 18. This control appears when: Use global subheading styles is off and description != blank.
Description font size (desktop)
Sets description font size (desktop) in pixels for the matching screen size. Default: 19. This control appears when: Use global subheading styles is off and description != blank.
Description font weight
Sets how bold description text appears. Default: 400. This control appears when: Use global subheading styles is off and description != blank.
Text color
Controls “Text color” on the storefront. Open the theme editor to preview live. Default: #333333. This control appears when: description != blank.
Description max width
Controls “Description max width” on the storefront. Open the theme editor to preview live. Default: 640. This control appears when: description != blank.
Hide heading and description (for accessibility)
Controls “Hide heading and description (for accessibility)” on the storefront. Open the theme editor to preview live. Default: No.
Content alignment
Controls “Content alignment” on the storefront. Open the theme editor to preview live. Default: start. This control appears when: Hide heading/subheading visually is off and content style == 'above products'.
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: Shop collection.
Button link
Defaults to the selected collection URL when blank. Default: —. This control appears when: Button text is filled in.
Button variant
Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: Button text is filled in.
Button size
Chooses the button size from Theme settings → Button sizes. Default: medium. This control appears when: Button text is filled in.
Use global button styles
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Button text is filled in.
Button background
Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: Button text is filled in and Use global button styles is off.
Button text color
Controls “Button text color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Button text is filled in and Use global button styles is off.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button text is filled in.
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.