Slideshow Hero is a Shopify theme section in the Section Star library. Create amazing slideshows.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Slideshow Design
Set the settings for your slideshow
| Setting | Type | Default |
|---|---|---|
| Progress Background Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Progress Foreground Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Indicator Color | Color | #111 |
| Indicator Position | Select (Top, Bottom, Underneath) | bottom |
| Enable Autoplay? | Checkbox | Off |
| Show Arrows? | Checkbox | On |
| Autoplay Time | Select (Slowest (10s), Slower (7.5s), Normal (5s), Faster (3s), Fastest (2s)) | 5000 |
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… |
| Primary 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 |
Slideshow
Set settings for your slideshow
| Setting | Type | Default |
|---|---|---|
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, auto) | 16 / 9 |
| Mobile Image Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, auto) | 1 / 1 |
| Image Width (size requested from Shopify) | Number | 1100 |
| Mobile Image Width (size requested from Shopify) | Number | 800 |
Caption
Set the design of the caption
| Setting | Type | Default |
|---|---|---|
| Vertical Alignment | Select (Center, Top, Bottom, Stretch) | center |
| Horizontal Alignment | Select (Center, Left, Right) | start |
| Content Vertical Alignment (when stretched) | Select (Center, Top, Bottom) | center |
| Mobile Caption Display | Select (On Top of Image, Below Image) | bottom |
| Caption Background Color | Color or gradient | — |
| Mobile Caption Background Color | Color or gradient | — |
| Caption Padding | Number | 20 |
| Caption Margin | Number | 10 |
| Round Borders on Caption | Range | 5 |
| Show Glass Effect? | Checkbox | Off |
| Desktop Caption Width | Range | 50 |
| Mobile Caption Width | Range | 100 |
Headline (optional)
Set text for the headline (appears above the slideshow)
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | — |
| Text | Inline rich text | — |
| Spacing between Headline and Features | Number | 15 |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Mobile Image (optional) | Image | — |
| Show Caption | Checkbox | On |
| Text Alignment | Text alignment | left |
| Show Text Shadow? | Checkbox | On |
| Headline | Inline rich text | <b>Featured Product</b> |
| Show Stars | Checkbox | On |
| Star Color | Color | #111 |
| Star Text | Inline rich text | Rated 4.9/5 with 100+ Testimonials |
| # Stars | Select (5, 4.5) | 5 |
| Text Color | Color | #111 |
| Text | Rich text | <p>Use this text block to describe yo… |
| Button Link | URL | — |
| Button Text | Text | Learn more |
Video block settings
| Setting | Type | Default |
|---|---|---|
| Video | Video | — |
| Show Caption | Checkbox | On |
| Text Alignment | Text alignment | left |
| Show Text Shadow? | Checkbox | On |
| Headline | Inline rich text | <b>Featured Product</b> |
| Show Five Stars | Checkbox | On |
| Star Color | Color | #111 |
| Text | Rich text | <p>Use this text block to describe yo… |
| Button Link | URL | — |
| Button Text | Text | Learn more |
| 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 “Slideshow 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.