Product
How to use the Product section in the Meditative Folks Theme.
Product
At a glance
The Product section powers your product page — media gallery, buy box blocks, floating add to cart, and layout controls.
Where to find it
- Theme editor path: Online Store → Customize → select the relevant page → Product
- Add to a page: Add via Add section → category Product.
Screenshot needed
Product in the theme editor
Screenshot of the Product section in the theme editor left sidebar. Show the settings panel and the live preview so merchants can match labels to what they see.
Settings
Image gallery
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Image aspect ratio | Controls the image setting “Image aspect ratio”. Upload clear photos for best results. | 3/4 | Always |
| Image border radius | Rounds the corners. Higher values look more pill-shaped. | 32 | Always |
| Enable image magnifier | Hover zoom on image slides (desktop only). | Yes | Always |
Gallery layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Gallery position | Desktop layout only. Gallery stacks first on mobile. | left | Always |
| Gallery column width | Share of the product row given to the image gallery on desktop. | 50 | Always |
| Sticky gallery | Desktop side-by-side layout only (880px+). Keeps the full gallery column (main image and thumbnails) visible while scrolling product details. | Yes | Always |
| Sticky top offset | Distance from the top of the viewport when the gallery is sticky. Increase if a sticky header overlaps the gallery. | 32 | Sticky gallery is on |
Thumbnails
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Thumbnail position (desktop and tablet) | Mobile always shows thumbnails below the product image. | below | Always |
| Enable thumbnail scroll | Allow thumbnails to overflow and scroll when there are many images. | Yes | Always |
| Thumbnail size | Width of gallery thumbnails, in pixels. | 80 | Always |
Section spacing
| 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 |
Separator settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show separator line | Display a separator line below the section. | 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 |
Floating add to cart
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Show floating add to cart | Shows a floating add-to-cart bar after the shopper scrolls past the buy box. | Yes | Always |
| Show after scrolling (mobile) | How far the shopper must scroll on phones before the floating bar appears (pixels). | 200 | Show floating add to cart is on |
| Show after scrolling (tablet) | How far the shopper must scroll on tablets before the floating bar appears (pixels). | 300 | Show floating add to cart is on |
| Show after scrolling (desktop) | How far the shopper must scroll on desktop before the floating bar appears (pixels). | 400 | Show floating add to cart 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
The Product section uses theme blocks for the buy box — title, price, variants, quantity, add to cart, buy now, wishlist, and more. Reorder them in the theme editor.
See Product blocks.
Setting details
Each control from the tables above, explained simply:
Image aspect ratio
Controls the image setting “Image aspect ratio”. Upload clear photos for best results. Default: 3/4.
Image border radius
Rounds the corners. Higher values look more pill-shaped. Default: 32.
Enable image magnifier
Hover zoom on image slides (desktop only). Default: Yes.
Gallery position
Desktop layout only. Gallery stacks first on mobile. Default: left.
Gallery column width
Share of the product row given to the image gallery on desktop. Default: 50.
Sticky gallery
Desktop side-by-side layout only (880px+). Keeps the full gallery column (main image and thumbnails) visible while scrolling product details. Default: Yes.
Sticky top offset
Distance from the top of the viewport when the gallery is sticky. Increase if a sticky header overlaps the gallery. Default: 32. This control appears when: Sticky gallery is on.
Thumbnail position (desktop and tablet)
Mobile always shows thumbnails below the product image. Default: below.
Enable thumbnail scroll
Allow thumbnails to overflow and scroll when there are many images. Default: Yes.
Thumbnail size
Width of gallery thumbnails, in pixels. Default: 80.
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
Display a separator line below the section. 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.
Show floating add to cart
Shows a floating add-to-cart bar after the shopper scrolls past the buy box. Default: Yes.
Show after scrolling (mobile)
Turns “Show after scrolling (mobile)” on or off on the storefront. Default: 200. This control appears when: Show floating add to cart is on.
Show after scrolling (tablet)
Turns “Show after scrolling (tablet)” on or off on the storefront. Default: 300. This control appears when: Show floating add to cart is on.
Show after scrolling (desktop)
Turns “Show after scrolling (desktop)” on or off on the storefront. Default: 400. This control appears when: Show floating add to cart is on.
Color scheme
Applies a color scheme from Theme settings → Colors. Default: scheme-1.
Tips
- Build the buy box with theme blocks (title, price, variants, add to cart) so you can reorder freely.
- Test the floating add to cart on mobile after enabling it.
- Pick a color scheme that keeps text readable over product photos.
- Campaign ribbons on the gallery follow Theme settings → Product Card.