Testimonials Slider

File: sections/testimonials-slider.liquid

Templates: index.json, product.gateway-voyage.json

Description

Testimonials Slider

Horizontal slider of testimonial cards from the Testimonials metaobject. Supports three data sources with priority-based fallback:

1. Manual picks — metaobject reference blocks (overrides all)
2. Product picker — explicit product whose testimonials to show
3. Auto-detect — reads from product or page metafield based on context

All card fields are conditionally rendered via the testimonial-card snippet.

Features:

• Three-source data priority (blocks > product picker > auto-detect)
• Configurable background, title, text, and star colors
• Native scroll with scroll-snap for touch/trackpad support
• Prev/next navigation arrows with auto-disable at boundaries
• Cards lift on hover with shadow transition
• Conditional rendering of all testimonial fields

Settings:

• background_color (color) — Section background, default “#F5F7F7”
• title_color (color) — Heading color, default “#00746D”
• text_color (color) — Body text color, default “#22434F”
• star_color (color) — Star rating color, default “#F5A623”
• title (text) — Section heading, default “Success Stories”
• subtitle (text) — Section subheading
• product_source (product) — Explicit product to pull testimonials from
• product_metafield (select) — Which product metafield: featured or all

Blocks:

• testimonial — Manual testimonial with inline fields (quote, name, etc.)

Snippets Used:

• testimonial-card: Renders a single testimonial card

Data Source Priority:

1. Manual blocks (testimonial_ref) — if any blocks exist, use those
2. Product picker (product_source) — pull from that product’s metafield
3. Auto-detect context:
   • Product template → product.metafields.custom.featured_testimonials
   • Page template → page.metafields.custom.testimonials

Dependencies:

• Tailwind CSS (application.css)
• snippets/testimonial-card.liquid
• Testimonials metaobject definition in Shopify admin
• Product metafields: custom.featured_testimonials, custom.all_testimonials
• Page metafield: custom.testimonials

Tailwind Status: Full All layout, typography, and responsive behavior use Tailwind utilities. Inline <style> only for scrollbar hiding and dynamic color values.

Accessibility:

• Navigation buttons have aria-labels
• Scroll container is keyboard-navigable
• Cards are semantic with blockquote for quotes

Settings

ID	Type	Label	Default	Info
“	header
background_color	color	Background Color	#F5F7F7
title_color	color	Title Color	#00746D
text_color	color	Text Color	#22434F
star_color	color	Star Color	#F5A623
“	header
title	text	Title	Success Stories
subtitle	text	Subtitle	Discover how Monroe has helped inspire transformation across the globe
“	header
“	paragraph
product_source	product	Pull from Product		Optional. Select a product to pull its testimonials. Useful on pages that aren’t product templates.
product_metafield	select	Product Testimonial Source	featured_testimonials	Which product metafield to use when pulling from a product.

Blocks

Testimonial (Manual)

• Type: testimonial

ID	Type	Label	Default
quote	textarea	Quote	This experience changed my life in ways I never expected.
author_name	text	Author Name	Sarah M.
author_location	text	Author Location
rating	range	Star Rating	0
author_image	image_picker	Author Photo
program_tag	text	Program Tag

Presets

• Testimonials Slider

Usage

This section can be added via the Shopify theme editor.

{% section 'testimonials-slider' %}