Filmstrip is a Shopify theme section in the Section Star library. A beautiful vertical scrolling marquee that pauses on hover for direct links.
About the Filmstrip section
The Filmstrip section is a dynamic and visually appealing addition to any Shopify e-commerce store. This section allows you to display a series of images or videos in a continuous horizontal scroll, drawing attention to your featured products or marketing messages. It is fully customizable, with settings for fonts, colors, dimensions, and animation speed to match your brand’s aesthetic.
Live demo
Use cases
- New Product Launches: Highlight newly launched products by showcasing them in the filmstrip. Visitors can easily view multiple new products without navigating away from the landing page.
- Seasonal Promotions: Utilize the filmstrip to promote seasonal sales or holiday collections. Each slide can feature a different product or offer, encouraging users to explore more.
- Customer Testimonials: Showcase customer reviews in a visually engaging manner by adding testimonial quotes as text and images within the filmstrip.
- Brand Storytelling: Use videos to tell your brand’s story or explain the unique features of your products. The filmstrip allows for an interactive and engaging way to communicate your message.
- Best Sellers: Promote your top-selling products by displaying them in the filmstrip, making it easy for customers to see what's popular and potentially make a purchase.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set the design for the feature grid
| Setting | Type | Default |
|---|---|---|
| Gap Between Images | Number | 25 |
| Additional Spacing between Text and Marquee | Number | 25 |
| Height of the Filmstrip | Number | 500 |
| Gap between columns | Number | 30 |
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) | 16 / 9 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Spacing between Media | Number | 10 |
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 |
|---|---|---|
| Text Alignment | Text alignment | left |
| Mobile Text Alignment | Text alignment | left |
| Headline | Inline rich text | <b>Sample headline</b> |
| Content | Rich text | <p>This is the placeholder text for t… |
| Spacing between Headline and Features | Number | 15 |
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 “Filmstrip”.
- 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.