Product spotlight
Overview:
The Product Spotlight section is designed to showcase featured products in an immersive slideshow-style layout with spotlight cards, scrolling marquee text, background imagery, and responsive product presentation. It supports multiple spotlight slides, product selection, desktop/mobile images, typography customization, marquee animations, slideshow autoplay, color schemes, and spacing controls. This section helps merchants highlight premium products, featured collections, or promotional campaigns in a visually engaging format.
Blocks Configuration
Spotlight Slide Block:
The Spotlight Slide block displays featured products inside an interactive spotlight card layout.
Product Settings:
| Setting | Description |
|---|---|
| Products | Selects up to 3 Shopify products displayed inside the spotlight slide. |
Background Settings:
| Setting | Description |
|---|---|
| Desktop Image | Uploads the main background image displayed on desktop devices. |
| Desktop Overlay | Adds a gradient or overlay effect over the desktop image. |
| Mobile Image | Uploads a separate image displayed on mobile devices for responsive optimization. |
| Mobile Overlay | Adds a gradient or overlay effect over the mobile image. |
Content:
| Setting | Description |
|---|---|
| Heading | Defines the main heading displayed inside the spotlight slide. Supports rich text formatting such as bold and italic styling. |
| Description | Displays supporting text below the heading. Used to introduce featured products or promotional messaging. |
Text Block
The Text block displays scrolling marquee text inside the Product Spotlight section.
Content:
| Setting | Description |
|---|---|
| Text | Defines scrolling marquee content. Supports rich text formatting such as bold and italic styling. |
Section Configuration
Heading Typography:
| Setting | Description |
|---|---|
| Heading Size | Controls section heading size such as H1–H6, Large, Medium, or Small. |
| Heading Weight | Adjusts font thickness ranging from Thin (100) to Black (900). |
| Heading Case | Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Heading Tag | Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family | Allows switching between Default and Body font family styles. |
| Heading Color Style | Applies predefined color styling to section headings. |
| Heading Link Style | Controls styling behavior of links used inside heading content. |
Description Typography:
| Setting | Description |
|---|---|
| Description Size | Controls text size such as Large, Medium, or Small. |
| Description Weight | Adjusts font thickness ranging from Thin (100) to Black (900). |
| Description Case | Changes text transformation style for description text. |
| Description Font Family | Allows switching between Default and Heading font family styles. |
| Description Color Style | Applies predefined color styling to description text. |
Product Card Settings
| Setting | Description |
|---|---|
| Desktop Card Height | Controls spotlight card height on desktop devices. |
| Mobile Card Height | Controls spotlight card height on mobile devices. |
Product Card Typography:
| Setting | Description |
|---|---|
| Product Heading Size | Controls the size of product headings such as H6, Large, Medium, or Small. |
| Product Heading Weight | Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Product Heading Case | Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Product Heading Tag | Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Product Heading Font Family | Allows switching between Default and Body font family styles. |
| Product Heading Color Style | Applies predefined color styling to product headings. |
Caption & Overlay Settings:
| Setting | Description |
|---|---|
| Caption Background | Controls the overlay background displayed behind spotlight captions. |
| Caption Text Color | Controls text color displayed over spotlight captions. |
| Hide Caption Image | Hides product caption images when enabled. |
Product Pricing:
| Setting | Description |
|---|---|
| Show Unit Pricing | Displays product unit pricing when available. |
Marquee Settings:
| Setting | Description |
|---|---|
| Marquee Text Size | Controls scrolling text size such as Large, Medium, or Small. |
| Marquee Text Weight | Adjusts font thickness of marquee text. |
| Marquee Text Case | Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Marquee Text Font Family | Allows switching between Default and Heading font family styles. |
| Marquee Text Color Style | Applies predefined styling to marquee text. |
| Desktop Grid Spacing | Adds spacing between marquee items on desktop devices. |
| Mobile Grid Spacing | Adds spacing between marquee items on mobile devices. |
| Marquee Direction | Controls scrolling direction such as Right to Left or Left to Right. |
| Marquee Speed | Controls scrolling animation speed. |
| Pause on Hover | Pauses marquee animation when users hover over scrolling text. |
| Marquee Color Scheme | Applies a predefined color palette to the marquee area. |
Slideshow Settings:
| Setting | Description |
|---|---|
| Enable Auto Play | Automatically rotates spotlight slides. |
| Slideshow Interval | Controls autoplay delay timing between slide transitions. |
Layout:
| Setting | Description |
|---|---|
| Container Layout | Determines whether the section uses Contained, Contained Content, or Full Width layout. |
| Container Width | Controls the maximum width of the section container on desktop devices. |
| Desktop Height | Controls spotlight section height on desktop devices such as Small, Medium, Large, or Full Height. |
| Mobile Height | Controls spotlight section height on mobile devices. |
| Text Alignment (Desktop) | Sets content alignment on desktop devices (Left, Center, or Right). |
| Text Alignment (Mobile) | Sets content alignment on mobile devices. |
Color Scheme:
| Setting | Description |
|---|---|
| Section Color Scheme | Applies a predefined color palette to the Product Spotlight section background and content. |