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

Shopify Sliding Grid Section

Learn how to create a Sliding Grid section with Sections Pro in Shopify

Description of the Section

The Sliding Grid section for Shopify is designed to provide a visually appealing and interactive slideshow for showcasing images and videos. This section is ideal for highlighting featured products, promotional content, or any visual media that grabs the attention of visitors. The grid auto-flows horizontally, providing a seamless sliding experience, with autoplay functionality for enhanced user engagement.

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 "Sliding Grid"
  4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

  1. Featured Products: Showcase your best-selling or new products on the homepage to entice visitors.
  2. Seasonal Promotions: Display the latest promotions, discounts, and seasonal products visually to drive sales.
  3. Customer Testimonials: Use video testimonials from satisfied customers to build trust and credibility.
  4. Brand Story: Share your brand's journey with images and videos to connect with customers on a personal level.
  5. Product Tutorials: Show how to use your products with step-by-step videos for better customer education and satisfaction.

Overview of the Configuration Settings

  1. Font Settings:

    • Override Theme Fonts: Option to override the default fonts set by the theme.
    • Headline Font: Choose a font for the headline text.
    • Text Font: Choose a font for the content text.

  2. Text Settings:

    • Text Size: Range from 10px to 50px for text size.
    • Text Line Height: Customizable line height options.
    • Text Color: Set a custom color for the text.
    • Headline Size: Range from 10px to 50px for headline size.
    • Headline Line Height: Customizable line height for the headline.
    • Headline Color: Set a custom color for the headline.

  3. Color Settings:

    • Background Color: Set a custom background color for the section.
    • Progress Background Color: Customize the progress background color for autoplay.
    • Progress Foreground Color: Customize the progress foreground color for autoplay.
    • Indicator Color: Set a custom color for the navigation indicators.

  4. Dimension Settings:

    • Max Width of Section: Specify the maximum width of the section.
    • Height of Media: Set the height of the media items.
    • Padding (Top, Bottom, Left, Right): Customize padding around the section.
    • Element Spacing: Define spacing between the elements.

  5. Text Content:

    • Headline: Add a headline for the slideshow section.
    • Headline Alignment: Align the headline (left, center, right).
    • Content: Add text content for the section.
    • Content Alignment: Align the content (left, center, right).

  6. Slideshow Settings:

    • Show Big Play Button on Videos: Option to display a large play button on videos.
    • Round Borders on Media: Set the radius for rounded borders on media items.
    • Subtle Shadow on Media: Enable a shadow effect on the media items.
    • Media Aspect Ratio: Choose the aspect ratio for media (images/videos).
    • Enable Autoplay: Option to enable autoplay for the slideshow.
    • Autoplay Time: Set the autoplay interval (2s, 3s, 5s, 7.5s, 10s).

  7. Block Types:

    • Image Block: Add images with optional captions.
    • Video Block: Add videos with optional captions and customize video playback settings (play inline, autoplay, loop, show controls, mute).