Blog Hero Slider
An engaging, auto-rotating spotlight for your blog articles. Features article headlines, reading times, and beautiful featured images.
Overview
The Blog Hero Slider transforms your blog landing page into a magazine-style experience. It automatically pulls articles and displays them in a dynamic, rotating carousel.
📰
Auto-Pull Articles
Latest posts from your blog
⏱️
Reading Time
Estimated read time display
🔄
Auto-Rotate
Configurable slide intervals
🔍
Built-in Search
Search articles from the hero
When to Use
- Blog landing page — Replace the default blog header with a dynamic hero
- Content marketing — Highlight your best or latest articles
- Magazine-style layouts — Create editorial appeal
Quick Setup
Add Blog Hero Slider in 3 Steps
- 1In the Theme Editor, navigate to your Blog template
- 2Add section → Blog hero slider
- 3Select your Blog and configure autoplay settings
Section Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | The Ramp Blog | Main title displayed at the top of the slider. |
| Blog | blog | Current blog | Select which blog to pull articles from. |
| Max articles | range | 6 | Maximum number of articles to show. Range: 2–10. |
Autoplay
| Setting | Type | Default | Description |
|---|---|---|---|
| Autoplay | checkbox | true | Automatically rotate through articles. |
| Interval | range | 10 seconds | Time between slide transitions. Range: 3–12 seconds. |
| Transition | select | Fade | Animation style: Fade or Slide. |
Background
| Setting | Type | Default | Description |
|---|---|---|---|
| Full-bleed auto | checkbox | true | Use article featured images as full-bleed backgrounds. |
| Opacity | range | 60% | Background image opacity when using full-bleed. Range: 40–100%. |
Colors
| Setting | Type | Default | Description |
|---|---|---|---|
| Custom colors | checkbox | false | Enable custom color overrides. |
| Card background | color | - | Background color for the card area. |
| Card text | color | - | Text color for the card content. |
| Section background | color | - | Overall section background color. |
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Height | range | 70% | Viewport height percentage. Range: 50–90%. |
Spacing
| Setting | Type | Default | Description |
|---|---|---|---|
| Remove top spacing | checkbox | false | Remove margin/padding at the top for edge-to-edge display. |
Features
Built-in Search
The slider includes an integrated blog search form that filters results to articles only. Customers can search for topics without leaving the blog.
Reading Time
Each slide automatically calculates and displays an estimated reading time based on article word count (200 words per minute). This helps readers gauge time investment.
Responsive Layout
- Desktop: Side-by-side layout with image on left, content on right
- Mobile: Stacked layout with optimized touch navigation
Best Practices
Content Strategy
- Use compelling featured images — They become the slide backgrounds
- Write engaging titles — These are the main headlines visitors see
- Keep articles fresh — The slider pulls your most recent posts
- Aim for 6+ articles — Provides variety in the rotation
Performance
- Optimize featured images — Large images load on every slide
- Consider autoplay speed — 8-10 seconds gives time to read
- Test on mobile — Ensure touch navigation works smoothly
Accessibility
- Slides include proper ARIA labels
- Pagination dots are keyboard accessible
- Autoplay respects reduced motion preferences
Troubleshooting
No articles showing
- Verify the selected Blog has published articles
- Check that articles have featured images (recommended for best appearance)
- Ensure Max articles is set to at least 2
Transitions look choppy
- Try switching between Fade and Slide transitions
- Reduce the number of maximum articles
- Check for heavy images that may slow loading
Search not working
- Search is limited to articles within Shopify's search
- Ensure articles have proper titles and content for indexing