Add to your Store
Home Why us? Documentation Privacy Policy Refund Policy Get in Touch

Shopify Filmstrip Section

Learn how to create a Filmstrip section with Sections Pro in Shopify

Description of the 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.

Demo of the Section

Installation Instructions

  1. Download the Sections Pro app on the Shopify App Store
  2. Open the app and navigate to Premium Sections
  3. Search for "Filmstrip"
  4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

  1. 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.
  2. 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.
  3. Customer Testimonials: Showcase customer reviews in a visually engaging manner by adding testimonial quotes as text and images within the filmstrip.
  4. 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.
  5. 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.

Overview of the Configuration Settings

  1. Font Settings:

    • Override theme fonts: Checkbox to toggle custom fonts.
    • Headline Font: Choose a custom font for headlines.
    • Text Font: Choose a custom font for text.

  2. Text Settings:

    • Text Size: Adjust text size (10px to 50px).
    • Text Line Height: Select line height from a range of options.
    • Text Color: Choose a custom color for text.
    • Headline Size: Adjust headline size (10px to 50px).
    • Headline Line Height: Select line height for headlines from a range of options.
    • Headline Color: Choose a custom color for headlines.

  3. Color Settings:

    • Background: Set a custom background color or gradient.

  4. Dimensions:

    • Max Width of Section: Adjust the maximum width of the section.
    • Height of Images/Video: Set the height for media content.
    • Gap Between Images: Adjust the gap between images or videos.
    • Padding Top/Bottom/Left/Right: Set padding for the section.
    • Spacing Between Elements: Adjust spacing between different elements within the section.
    • Additional Spacing between Text and Marquee: Additional space between text content and the marquee.

  5. Marquee Settings:

    • Speed: Set the speed of the slideshow (options range from 2s to 250s).
    • Media Aspect Ratio: Choose aspect ratio for media content (options include 21:9, 16:9, 4:3, 1:1, and auto).
    • Round Borders on Media: Adjust border-radius on media elements (0px to 50px).
    • Subtle Shadow on Media: Checkbox to toggle media shadow.
    • Spacing between Media: Adjust spacing between media elements.

  6. Caption Settings:

    • Caption Headline Size: Adjust size of caption headlines (10px to 50px).
    • Caption Text Size: Adjust size of caption text (10px to 50px).
    • Caption Text Color: Choose a custom color for caption text.
    • Caption Background: Set a custom background color or gradient for captions.
    • Show Glass Effect: Checkbox to toggle glass effect on captions.

  7. Content Settings:

    • Headline: Set the main headline for the section.
    • Headline Alignment: Choose text alignment for the headline.
    • Content: Set the content text for the section.
    • Content Alignment: Choose text alignment for content.

  8. Button Settings:

    • Show buttons?: Checkbox to toggle visibility of buttons.
    • Call to Action (Primary/Secondary): Set text for the call-to-action buttons.
    • Call to Action Link (Primary/Secondary): Set URLs for the buttons.
    • Button Style: Customize button styles including background color, text color, text size, padding, border radius, and border size.