Marquee Hero is a Shopify theme section in the Section Star library. A beautiful hero with a stunning marquee.
About the Marquee Hero section
The Marquee Hero section is an engaging, visually-rich component for your Shopify store, designed to showcase images and videos in a sliding marquee format. This section is ideal for highlighting key products, promotional content, or storytelling elements. With customizable fonts, colors, backgrounds, and animation speeds, the Marquee Hero section offers flexibility while ensuring a captivating user experience.
Live demo
Use cases
-
Featured Product Showcase: Utilize the Marquee Hero to highlight best-selling or newly launched products. Display high-quality images and videos with engaging captions to attract customer attention.
-
Brand Storytelling: Share your brand’s story through a mix of images and videos, creating a narrative that resonates with your audience. Use captions to add context and call-to-actions.
-
Seasonal Promotions: Highlight seasonal promotions or sales events with visually appealing content. Customize the speed and appearance of the marquee to match the theme of your promotion.
-
Customer Testimonials: Showcase customer testimonials through images and video snippets, adding credibility and social proof to your store.
-
Cross-Selling Opportunities: Display related products or accessories alongside your main product features, encouraging customers to explore additional items.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Font
Set the fonts for your section
| Setting | Type | Default |
|---|---|---|
| Override theme fonts | Checkbox | Off |
| Headline Font | Font | sans-serif |
| Text Font | Font | sans-serif |
Text
Set the text for your section
| Setting | Type | Default |
|---|---|---|
| Text Size | Range | 15 |
| Text Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | 1.5 |
| Text Color | Color | #111 |
| Headline Size | Range | 40 |
| Headline Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | inherit |
| Headline Color | Color | #111 |
Section Design
Set the design for the section
| Setting | Type | Default |
|---|---|---|
| Show Section | Select (All Devices, Mobile Only, Desktop Only) | all |
| Background Color | Color or gradient | linear-gradient(164deg, #FFF 0%, #FFF… |
| Padding Top/Bottom | Number | 25 |
| Padding Left/Right | Number | 25 |
Container Design
Set the design for your inner container
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | linear-gradient(164deg, #FFF 0%, #FFF… |
| Max Width | Number | 1000 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 10 |
| Round Borders on Container | Range | 0 |
| Subtle Shadow on Container | Checkbox | Off |
| Border Size on Container | Range | 0 |
| Border Color on Container | Color | #888 |
| Spacing between Elements | Number | 15 |
| Additional Spacing between Text and Marquee | Number | 25 |
Marquee
Set the display for the marquee
| Setting | Type | Default |
|---|---|---|
| Speed | Select (Fastest, Faster, Fast, Medium, Slow, Slower…) | 20s |
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, auto) | 1 / 1 |
Media Design
Set the design for the media
| Setting | Type | Default |
|---|---|---|
| Height of Media | Number | 300 |
| Gap Between Images | Number | 25 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Spacing between Media | Number | 5 |
Caption
Set the display of the caption
| Setting | Type | Default |
|---|---|---|
| Caption Headline Size | Range | 20 |
| Caption Text Size | Range | 15 |
| Caption Text Color | Color | #111 |
| Caption Background | Color or gradient | linear-gradient(164deg, rgba(255, 255… |
| Show Glass Effect? | Checkbox | On |
Content
Set the content for the section
| Setting | Type | Default |
|---|---|---|
| Headline | Inline rich text | <b>Sample headline</b> |
| Headline Alignment | Text alignment | center |
| Content | Rich text | <p>This is the placeholder text for t… |
| Content Alignment | Text alignment | center |
Button
Set content for the buttons.
| Setting | Type | Default |
|---|---|---|
| Show buttons? | Checkbox | On |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
Secondary Button
Set content for the secondary button
| Setting | Type | Default |
|---|---|---|
| Show Secondary Action? | Checkbox | Off |
| Call to Action | Inline rich text | Secondary Action |
| Call to Action Link | URL | — |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Primary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Secondary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Primary Button Text Color | Color | #fff |
| Secondary Button Text Color | Color | #fff |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
| Border Size | Number | 0 |
| Border Color | Color | #111 |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Text | Inline rich text | Sample Headline |
| Text | Inline rich text | Sample text to describe the product |
| Optional Link | URL | — |
| Show Arrow on Hover? | Checkbox | On |
Video block settings
| Setting | Type | Default |
|---|---|---|
| Video | Video | — |
| Text | Inline rich text | Sample Headline |
| Text | Inline rich text | Sample text to describe the product |
| Optional Link | URL | — |
| Show Arrow on Hover? | Checkbox | On |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | On |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Marquee Hero”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.