Product recommendations
How to use the Product recommendations section in the Meditative Folks Theme.
Product recommendations
At a glance
Recommended products related to the current product.
Where to find it
- Theme editor path: Online Store → Customize → select the relevant page → Product recommendations
- Add to a page: Add via Add section → category Products.
Settings
Recommendations
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| API seed product | Used only when no product or cart context is available. Does not show products when Shopify returns no recommendations. | — | Always |
| Fallback collection | Shown when Shopify returns no recommendations. On product pages, recommendations are still requested for the current product first. | — | Always |
| Recommendation intent | Controls “Recommendation intent” on the storefront. Open the theme editor to preview live. | related | Always |
| Maximum products | Controls “Maximum products” on the storefront. Open the theme editor to preview live. | 4 | Always |
Layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Padding top | Adds empty space (padding top) around the section content. | 16 | Always |
| Padding bottom | Adds empty space (padding bottom) around the section content. | 16 | 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 | Add and configure in theme editor. | 1 |
| Column settings | Add and configure in theme editor. | 1 |
Header & CTA Content settings
Header
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Overline | Controls “Overline” on the storefront. Open the theme editor to preview live. | — | Always |
| Use global overline styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Overline is filled in |
| Overline font size (mobile) | Sets overline font size (mobile) in pixels for the matching screen size. | 12 | Overline is filled in and Use global overline styles is off |
| Overline font size (tablet) | Sets overline font size (tablet) in pixels for the matching screen size. | 13 | Overline is filled in and Use global overline styles is off |
| Overline font size (desktop) | Sets overline font size (desktop) in pixels for the matching screen size. | 14 | Overline is filled in and Use global overline styles is off |
| Overline font weight | Sets how bold overline text appears. | 500 | Overline is filled in and Use global overline styles is off |
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | You may also like | 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 |
| Subheading | Controls “Subheading” on the storefront. Open the theme editor to preview live. | Recommended for you | Always |
| Use global subheading styles | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | subHeading is filled in |
| Subheading font size (mobile) | Sets subheading font size (mobile) in pixels for the matching screen size. | 16 | Subheading is filled in and Use global subheading styles is off |
| Subheading font size (tablet) | Sets subheading font size (tablet) in pixels for the matching screen size. | 18 | Subheading is filled in and Use global subheading styles is off |
| Subheading font size (desktop) | Sets subheading font size (desktop) in pixels for the matching screen size. | 19 | Subheading is filled in and Use global subheading styles is off |
| Subheading font weight | Sets how bold subheading text appears. | 400 | Subheading is filled in and Use global subheading styles is off |
| Subheading max width | Controls “Subheading max width” on the storefront. Open the theme editor to preview live. | 500 | subHeading is filled in |
Alignment
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Hide heading and subheading (for accessibility) | Controls “Hide heading and subheading (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. | center | Hide heading/subheading visually is off |
CTA
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Button text | Controls “Button text” on the storefront. Open the theme editor to preview live. | — | Always |
| Button link | Controls “Button link” on the storefront. Open the theme editor to preview live. | — | 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 full width on mobile | Turns “Enable full width on mobile” on or off on the storefront. | No | Button text is filled in |
| 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. | 10 | Always |
| Grid gap (tablet) | Controls “Grid gap (tablet)” on the storefront. Open the theme editor to preview live. | 10 | Always |
| Grid gap (desktop) | Controls “Grid gap (desktop)” on the storefront. Open the theme editor to preview live. | 10 | Always |
Mobile (up to 639px)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Enable horizontal scroll | Swipe through images. Adjust visible items to show a peek of the next image. | No | Always |
| Visible items (mobile) | Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. | 1.7 | Horizontal scroll (mobile) is on |
| How many items? | Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. | none | Horizontal scroll (mobile) is on |
| Show swipe hint | Shows swipe helper text on mobile. | Yes | Horizontal scroll (mobile) is on |
| Slides per view (mobile) | Controls “Slides per view (mobile)” on the storefront. Open the theme editor to preview live. | 1 | Horizontal scroll (mobile) is off |
| How many rows? | Extra videos stay in the section but are hidden on the storefront until you add more rows or choose All videos. | show_all | Horizontal scroll (mobile) is off |
| Rows on mobile | Controls “Rows on mobile” on the storefront. Open the theme editor to preview live. | 1 | Horizontal scroll (mobile) is off and rows are capped |
Tablet (640px – 879px)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Enable horizontal scroll | Swipe through images. Adjust visible items to show a peek of the next image. | No | Always |
| Visible items (tablet) | Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. | 2.2 | Horizontal scroll (tablet) is on |
| How many items? | Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. | none | Horizontal scroll (tablet) is on |
| Show swipe hint | Shows swipe helper text on mobile. | Yes | Horizontal scroll (tablet) is on |
| Slides per view (tablet) | Controls “Slides per view (tablet)” on the storefront. Open the theme editor to preview live. | 2 | Horizontal scroll (tablet) is off |
| How many rows? | Extra videos stay in the section but are hidden on the storefront until you add more rows or choose All videos. | show_all | Horizontal scroll (tablet) is off |
| Rows on tablet | Controls “Rows on tablet” on the storefront. Open the theme editor to preview live. | 1 | Horizontal scroll (tablet) is off and rows are capped |
Desktop (880px+)
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Enable horizontal scroll | Swipe through images. Adjust visible items to show a peek of the next image. | No | Always |
| Visible items (desktop) | Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. | 3.2 | Horizontal scroll (desktop) is on |
| How many items? | Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. | none | Horizontal scroll (desktop) is on |
| Show swipe hint | Shows swipe helper text on mobile. | Yes | Horizontal scroll (desktop) is on |
| Slides per view (desktop) | Controls “Slides per view (desktop)” on the storefront. Open the theme editor to preview live. | 4 | Horizontal scroll (desktop) is off |
| How many rows? | Extra videos stay in the section but are hidden on the storefront until you add more rows or choose All videos. | show_all | Horizontal scroll (desktop) is off |
| Rows on desktop | Controls “Rows on desktop” on the storefront. Open the theme editor to preview live. | 1 | Horizontal scroll (desktop) is off and rows are capped |
Setting details
Each control from the tables above, explained simply:
API seed product
Used only when no product or cart context is available. Does not show products when Shopify returns no recommendations. Default: —.
Fallback collection
Shown when Shopify returns no recommendations. On product pages, recommendations are still requested for the current product first. Default: —.
Recommendation intent
Controls “Recommendation intent” on the storefront. Open the theme editor to preview live. Default: related.
Maximum products
Controls “Maximum products” on the storefront. Open the theme editor to preview live. Default: 4.
Padding top
Adds empty space (padding top) around the section content. Default: 16.
Padding bottom
Adds empty space (padding bottom) around the section content. Default: 16.
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.
Overline
Controls “Overline” on the storefront. Open the theme editor to preview live. Default: —.
Use global overline 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: Overline is filled in.
Overline font size (mobile)
Sets overline font size (mobile) in pixels for the matching screen size. Default: 12. This control appears when: Overline is filled in and Use global overline styles is off.
Overline font size (tablet)
Sets overline font size (tablet) in pixels for the matching screen size. Default: 13. This control appears when: Overline is filled in and Use global overline styles is off.
Overline font size (desktop)
Sets overline font size (desktop) in pixels for the matching screen size. Default: 14. This control appears when: Overline is filled in and Use global overline styles is off.
Overline font weight
Sets how bold overline text appears. Default: 500. This control appears when: Overline is filled in and Use global overline styles is off.
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: You may also like.
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.
Subheading
Controls “Subheading” on the storefront. Open the theme editor to preview live. Default: Recommended for you.
Use global subheading 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: subHeading is filled in.
Subheading font size (mobile)
Sets subheading font size (mobile) in pixels for the matching screen size. Default: 16. This control appears when: Subheading is filled in and Use global subheading styles is off.
Subheading font size (tablet)
Sets subheading font size (tablet) in pixels for the matching screen size. Default: 18. This control appears when: Subheading is filled in and Use global subheading styles is off.
Subheading font size (desktop)
Sets subheading font size (desktop) in pixels for the matching screen size. Default: 19. This control appears when: Subheading is filled in and Use global subheading styles is off.
Subheading font weight
Sets how bold subheading text appears. Default: 400. This control appears when: Subheading is filled in and Use global subheading styles is off.
Subheading max width
Controls “Subheading max width” on the storefront. Open the theme editor to preview live. Default: 500. This control appears when: subHeading is filled in.
Hide heading and subheading (for accessibility)
Controls “Hide heading and subheading (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: center. This control appears when: Hide heading/subheading visually is off.
Button text
Controls “Button text” on the storefront. Open the theme editor to preview live. Default: —.
Button link
Controls “Button link” on the storefront. Open the theme editor to preview live. 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 full width on mobile
Turns “Enable full width on mobile” on or off on the storefront. Default: No. This control appears when: Button text is filled in.
Enable shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button text is filled in.
Grid gap (mobile)
Controls “Grid gap (mobile)” on the storefront. Open the theme editor to preview live. Default: 10.
Grid gap (tablet)
Controls “Grid gap (tablet)” on the storefront. Open the theme editor to preview live. Default: 10.
Grid gap (desktop)
Controls “Grid gap (desktop)” on the storefront. Open the theme editor to preview live. Default: 10.
Enable horizontal scroll
Swipe through images. Adjust visible items to show a peek of the next image. Default: No.
Visible items (mobile)
Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. Default: 1.7. This control appears when: Horizontal scroll (mobile) is on.
How many items?
Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. Default: none. This control appears when: Horizontal scroll (mobile) is on.
Show swipe hint
Shows swipe helper text on mobile. Default: Yes. This control appears when: Horizontal scroll (mobile) is on.
Slides per view (mobile)
Controls “Slides per view (mobile)” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: Horizontal scroll (mobile) is off.
How many rows?
Extra videos stay in the section but are hidden on the storefront until you add more rows or choose All videos. Default: show_all. This control appears when: Horizontal scroll (mobile) is off.
Rows on mobile
Controls “Rows on mobile” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: Horizontal scroll (mobile) is off and rows mode mobile == 'cap'.
Enable horizontal scroll
Swipe through images. Adjust visible items to show a peek of the next image. Default: No.
Visible items (tablet)
Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. Default: 2.2. This control appears when: Horizontal scroll (tablet) is on.
How many items?
Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. Default: none. This control appears when: Horizontal scroll (tablet) is on.
Show swipe hint
Shows swipe helper text on mobile. Default: Yes. This control appears when: Horizontal scroll (tablet) is on.
Slides per view (tablet)
Controls “Slides per view (tablet)” on the storefront. Open the theme editor to preview live. Default: 2. This control appears when: Horizontal scroll (tablet) is off.
How many rows?
Extra videos stay in the section but are hidden on the storefront until you add more rows or choose All videos. Default: show_all. This control appears when: Horizontal scroll (tablet) is off.
Rows on tablet
Controls “Rows on tablet” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: Horizontal scroll (tablet) is off and rows mode tablet == 'cap'.
Enable horizontal scroll
Swipe through images. Adjust visible items to show a peek of the next image. Default: No.
Visible items (desktop)
Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. Default: 3.2. This control appears when: Horizontal scroll (desktop) is on.
How many items?
Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. Default: none. This control appears when: Horizontal scroll (desktop) is on.
Show swipe hint
Shows swipe helper text on mobile. Default: Yes. This control appears when: Horizontal scroll (desktop) is on.
Slides per view (desktop)
Controls “Slides per view (desktop)” on the storefront. Open the theme editor to preview live. Default: 4. This control appears when: Horizontal scroll (desktop) is off.
How many rows?
Extra videos stay in the section but are hidden on the storefront until you add more rows or choose All videos. Default: show_all. This control appears when: Horizontal scroll (desktop) is off.
Rows on desktop
Controls “Rows on desktop” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: Horizontal scroll (desktop) is off and rows mode desktop == 'cap'.
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.