Lookbook
How to use the Lookbook section in the Meditative Folks Theme.
Lookbook
At a glance
Hotspot lookbook: place pins on an image. Shoppers tap a pin to open product details as a Dialog or Sheet. Choose the style per breakpoint (mobile ≤639px, tablet 640–879px, desktop ≥880px). Each pin shows the featured image, title, and link to the product page.
When all three breakpoints use the same style, the theme loads only that mode’s scripts. When styles differ, a small responsive script routes hotspot clicks to the correct shell and closes any open product UI if the viewport crosses a breakpoint.
Where to find it
- Theme editor path: Online Store → Customize → select the relevant page → Lookbook
- Add to a page: Add via Add section → category Upsell.
Settings
Content settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | Shop the look | 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. | Tap a hotspot to explore each product | 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 max width | Controls “Subheading max width” on the storefront. Open the theme editor to preview live. | 500 | 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. | No | Always |
| Content alignment | Controls “Content alignment” on the storefront. Open the theme editor to preview live. | center | Hide heading/subheading visually is off |
| 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 shimmer | Adds a moving highlight across the button or ribbon. | Yes | Button text is filled in |
Image
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Image | Controls the image setting “Image”. Upload clear photos for best results. | — | Always |
| Mobile image | Optional image for mobile screens. Uses the main image when blank. | — | Always |
| Image alt text | Optional alt text for the lookbook image. Falls back to the image alt from Shopify media, then the section heading. | — | Always |
| Aspect ratio (mobile) | Crop frame for the lookbook image on mobile. Natural ratio shows the image at its intrinsic height. Adapt to image uses the uploaded image proportions. | 3 / 4 | Always |
| Aspect ratio (tablet) | Same as mobile, for tablet widths (640–879px). Uses the main image (or mobile image fallback) for Adapt to image. | 3 / 4 | Always |
| Aspect ratio (desktop) | Same as mobile, for desktop (880px and up). | 3 / 4 | Always |
Product presentation
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Style (mobile) | Opens hotspot products as a dialog or sheet on mobile (up to 639px). | Dialog | Always |
| Style (tablet) | Same as mobile, for tablet widths (640–879px). | Dialog | Always |
| Style (desktop) | Same as mobile, for desktop (880px and up). | Dialog | Always |
| Sheet direction (mobile) | Edge the sheet slides in from on mobile. | From right | Style (mobile) is Sheet |
| Sheet direction (tablet) | Edge the sheet slides in from on tablet. | From right | Style (tablet) is Sheet |
| Sheet direction (desktop) | Edge the sheet slides in from on desktop. | From right | Style (desktop) is Sheet |
| Sheet size (mobile) | Width for left and right sheets. Height for top and bottom sheets. | 400 | Any breakpoint style is Sheet |
| Sheet size (tablet) | Width for left and right sheets. Height for top and bottom sheets. | 400 | Any breakpoint style is Sheet |
| Sheet size (desktop) | Width for left and right sheets. Height for top and bottom sheets. | 400 | Any breakpoint style is Sheet |
| Product panel color scheme | Color scheme for the product dialog and sheet. | scheme-1 | 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 |
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 |
|---|---|---|
| Card Design | Styles product image, title, alignment, and CTA in dialog and sheet | 1 |
| Hotspot | Add and configure in theme editor. | — |
Card Design
Applies to every hotspot product panel, whether the section opens as dialog or sheet on a given screen size.
| Setting area | What it controls |
|---|---|
| Product image | Aspect ratio, rounded corners (full circle or custom radius) |
| Product title | Global H3 styles from theme settings, or custom size/weight per breakpoint |
| Alignment | Left, center, or right for title and button |
| Button | Label (blank = “View product”), variant, size, global/custom colors, shimmer |
Hotspot settings
Pointer position
Pin placement uses the theme breakpoints: mobile (up to 639px), tablet (640–879px), and desktop (880px and up). Each tier has its own horizontal and vertical position (0–100% of the image).
| Group | Settings | Default |
|---|---|---|
| Mobile | Horizontal position, Vertical | 50% |
| Tablet | Horizontal position, Vertical | 50% |
| Desktop | Horizontal position, Vertical | 50% |
Existing hotspots that only had the older “default” position fields still work: those values apply as the fallback for tablet and desktop until you set the new per-tier sliders.
Product
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Product | Controls “Product” on the storefront. Open the theme editor to preview live. | — | Always |
Test mode (theme editor only)
| Setting | What it does | Default |
|---|---|---|
| Test mode | When on, selecting or clicking this hotspot in the theme editor opens the product dialog or sheet. Turn off while moving the pin with sliders. | Off |
Does not affect the live storefront.
Setting details
Each control from the tables above, explained simply:
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: Shop the look.
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: Tap a hotspot to explore each product.
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 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 shimmer
Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button text is filled in.
Image
Controls the image setting “Image”. Upload clear photos for best results. Default: —.
Mobile image
Optional image for mobile screens. Uses the main image when blank. Default: —.
Image alt text
Optional alt text for the lookbook image. Falls back to the image alt from Shopify media, then the section heading. Default: —.
Aspect ratio (mobile, tablet, desktop)
Each breakpoint has its own aspect ratio for the lookbook image frame. Options include fixed ratios (1:1, 3:4, and so on), Adapt to image (matches the image file at that breakpoint), and Natural ratio (no forced crop; the image keeps its natural height). Mobile Adapt to image uses the mobile image when set, otherwise the main image. Tablet and desktop Adapt to image use the main image. Defaults: 3 / 4 on all breakpoints.
Style (mobile, tablet, desktop)
Choose Dialog or Sheet for hotspot products on that screen size. Defaults: Dialog.
Sheet direction (mobile, tablet, desktop)
When that breakpoint uses a sheet, choose which edge it slides in from: From left, From right, From top, or From bottom. Defaults: From right. Each control appears only when that breakpoint’s style is Sheet.
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 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.
Horizontal position
Controls “Horizontal position” on the storefront. Open the theme editor to preview live. Default: 50.
Vertical position
Controls “Vertical position” on the storefront. Open the theme editor to preview live. Default: 50.
Horizontal position (mobile)
Controls “Horizontal position (mobile)” on the storefront. Open the theme editor to preview live. Default: 50.
Vertical position (mobile)
Controls “Vertical position (mobile)” on the storefront. Open the theme editor to preview live. Default: 50.
Product
Controls “Product” on the storefront. Open the theme editor to preview live. Default: —.
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.