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

Shopify Marquee Hero Section

Learn how to create a Marquee Hero section with Sections Pro in Shopify

Description of the Section

The Marquee Hero section is an engaging, visually-rich component for your Shopify store, designed to showcase images and videos in a sliding marquee format. This section is ideal for highlighting key products, promotional content, or storytelling elements. With customizable fonts, colors, backgrounds, and animation speeds, the Marquee Hero section offers flexibility while ensuring a captivating user experience.

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

Sample Use Cases for a Shopify E-commerce Store

  1. Featured Product Showcase: Utilize the Marquee Hero to highlight best-selling or newly launched products. Display high-quality images and videos with engaging captions to attract customer attention.

  2. Brand Storytelling: Share your brand’s story through a mix of images and videos, creating a narrative that resonates with your audience. Use captions to add context and call-to-actions.

  3. Seasonal Promotions: Highlight seasonal promotions or sales events with visually appealing content. Customize the speed and appearance of the marquee to match the theme of your promotion.

  4. Customer Testimonials: Showcase customer testimonials through images and video snippets, adding credibility and social proof to your store.

  5. Cross-Selling Opportunities: Display related products or accessories alongside your main product features, encouraging customers to explore additional items.

Overview of the Configuration Settings

  1. Font Settings:

    • Override Theme Fonts: Enable or disable the custom font settings.
    • Headline Font: Select the font for headlines.
    • Text Font: Select the font for body text.

  2. Text Settings:

    • Text Size: Adjust the size of the text.
    • Text Line Height: Choose the line height for text.
    • Text Color: Set the color of the text.
    • Headline Size: Adjust the size of the headline.
    • Headline Line Height: Choose the line height for headlines.
    • Headline Color: Set the color of the headline.

  3. Section Design:

    • Background Color: Choose the background color for the section.
    • Padding Top/Bottom: Adjust the padding at the top and bottom of the section.
    • Padding Left/Right: Adjust the padding on the left and right sides of the section.

  4. Container Design:

    • Background Color: Set the background color for the container.
    • Max Width: Define the maximum width of the container.
    • Padding Top/Bottom: Adjust the padding at the top and bottom of the container.
    • Padding Left/Right: Adjust the padding on the left and right sides of the container.
    • Round Borders on Container: Set the border radius for the container.
    • Subtle Shadow on Container: Enable or disable shadow for the container.
    • Border Size on Container: Set the border size.
    • Border Color on Container: Choose the border color.

  5. Marquee Settings:

    • Speed: Select the animation speed of the marquee.
    • Media Aspect Ratio: Choose the aspect ratio for media.
    • Height of Media: Set the height for the media.
    • Gap Between Images: Define the gap between images in the marquee.
    • Round Borders on Media: Set the border radius for media items.
    • Subtle Shadow on Media: Enable or disable shadow for media items.
    • Spacing Between Media: Set the space between media items.

  6. Caption Settings:

    • Caption Headline Size: Adjust the size of the caption headlines.
    • Caption Text Size: Set the size for caption text.
    • Caption Text Color: Choose the color for caption text.
    • Caption Background: Set the background color for captions.
    • Show Glass Effect?: Enable or disable the glass effect on captions.

  7. Content Settings:

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

  8. Button Settings:

    • Show Buttons?: Enable or disable buttons.
    • Call to Action: Set the primary button text.
    • Call to Action Link: Define the primary button link.
    • Show Secondary Action?: Enable or disable the secondary button.
    • Secondary Call to Action: Set the secondary button text.
    • Secondary Call to Action Link: Define the secondary button link.
    • Primary Button Background Color: Choose the background color for the primary button.
    • Primary Button Text Color: Set the text color for the primary button.
    • Secondary Button Background Color: Choose the background color for the secondary button.
    • Secondary Button Text Color: Set the text color for the secondary button.
    • Button Text Size: Adjust the text size for buttons.
    • Padding Top/Bottom: Set the padding for the top and bottom of the button.
    • Padding Left/Right: Set the padding for the left and right of the button.
    • Border Radius: Define the border radius for buttons.
    • Border Size: Set the border size for buttons.
    • Border Color: Choose the border color for buttons.

By using the Marquee Hero section, you can create dynamic and visually appealing showcases that captivate your audience and enhance the visual storytelling of your Shopify store.