Scrollable Features

This section allows you to create a visually engaging "step-by-step" scrollable feature layout. Each step can include an image on one side, paired with descriptive text and a call-to-action button on the other. The layout alternates sides for each feature, and includes a vertical progress bar that visually connects the steps. This section is ideal for showcasing a process, timeline, or product features in a structured and stylish way.

When visitors scroll down, the section presents features in a sequential manner, alternating the layout to keep visual interest. The vertical progress bar runs alongside, highlighting each step number. The section is responsive and automatically adapts its design for desktop and mobile devices.

Configurable Settings

• Main Title: A text heading that appears at the top of the section. Example: “Professional-grade photography in minutes, not days”.
• First Feature Image Position: Choose whether the first feature’s image appears on the left or right. Following features alternate automatically.

Colors

• Section Background Color: Sets the background color of the whole section.
• Body Text Color: Defines the color for paragraph text.
• Button Background Color: Defines the background color for call-to-action buttons.
• Progress Bar Start Color: Color at the top of the vertical progress bar gradient.
• Progress Bar End Color: Color at the bottom of the vertical progress bar gradient.
• Link Hover Color: The color links change to when hovered over.
• General White Color: A white tone applied to various section elements.
• Heading Text Color: Color for all headings (H1, H2, H3, etc.).
• Button Text Color: Color of the text inside buttons.
• Progress Number Color: Color for the step numbers shown in the center squares.

Typography

• Title Font Size Desktop: Size of the main section title on desktop (8–60px).
• Title Font Size Mobile: Size of the main section title on mobile (8–60px).
• Subtitle Font Size Desktop: Size of feature subtitles on desktop (8–60px).
• Subtitle Font Size Mobile: Size of feature subtitles on mobile (8–60px).
• Paragraph Font Size Desktop: Size of paragraph text on desktop (8–60px).
• Paragraph Font Size Mobile: Size of paragraph text on mobile (8–60px).
• Button Font Size Desktop: Size of button text on desktop (8–60px).
• Button Font Size Mobile: Size of button text on mobile (8–60px).

Feature Blocks (Steps)

Each step in the scrollable features section is created using a block. Each block allows you to configure the following:

• Feature Title: The heading/title for the step.
• Feature Subtitle: A descriptive subtitle or supporting text.
• Feature Image: An image shown.
• Mobile Background Image: An optional image specifically for mobile devices.
• Image Width Desktop: Adjusts the display width of the image on desktop devices.
• Image Width Mobile: Adjusts the display width of the image on mobile devices.
• CTA Text: Text shown on the call-to-action button (e.g., “Learn More”).
• CTA Link: The URL the button links to. If left blank, the button appears disabled.
  
  

🛠️ How It Works:

• Install by following the instructions inside the Sections Jungle app
  
  
• Lightweight code that runs natively in your theme, you can remove the app after the installation
  
  
• Fully customizable from the Shopify theme editor
  
  

• Works with free themes like Dawn

• One-time install with no recurring fees
  
  

📚 Step-by-step tutorial included:
👉 Read the full guide here