Openspaces Labs
  • 🏠 Getting Started
    • Installing the Plain Jane Theme
    • Theme Versions + Features Table
  • 🧰 Theme Settings
    • Announcement Bar
    • Animations
    • Cart Drawer
    • Clock Settings
    • Collection Layout Settings
    • Cursor Settings
    • Footer Settings
    • Global Menu Settings
    • Music Player Settings
    • Logo Settings
    • Skip Home Screen
    • SEO Settings
    • Main Theme Color
    • Typography Settings
  • 🗂 Pages & Menus
    • Homepage + Menu
      • Center Menu
      • Side-Aligned Menu
      • Compact Menu Layout (Global Menu)
    • Collection Page
      • Classic Collection
      • Sidebar Collection
    • Collection List Page
    • Product Page
      • Product Section (Showcase)
      • Product Section (Thumbnail)
    • About Page
    • Contact Page
    • Lookbook Page
      • 🛠 How to Create a Lookbook Page
      • 🗂 Creating a Lookbook Archive
      • ⚙️ Lookbook Settings & Features
    • Password Page
      • How To Password Lock Store
      • How To Add and Set Timer
      • How To Collect Emails + SMS
      • Using The Store Unlock Animation
  • 🧩Sections and Features
    • Blog Feed Section
    • Collection Display Section
    • Collection List Section
    • Email Signup (Popup)
    • Email Signup (Embed)
    • FAQ Section
    • Hero Section
    • Image Selector Section
    • Image Stream Section
    • Marquee Section
    • Preloader Section
    • Product Carousel Section
    • Text Block Section
    • Video Spotlight Section
  • 🏷️Advanced
    • How to Add Size Charts to Each Product
    • Setting Up Color Swatches
    • Setting Up Model Info
    • Setting Up Pre-Orders
  • 👥Customer Accounts
    • How To Setup Customer Accounts
    • Login Page
    • Register Page
    • Account Dashboard Page
    • Address Management Page
  • 🌎Languages & SEO
    • Language Files (Locales)
    • Update Favicon
    • Meta Descriptions
  • ⭐️Plain Jane Interactive
    • How to Create an Interactive Space
    • Setting The Background
    • Adding Interactive Points
    • Using Transition Arrows
    • Best Practices for Mobile + Spacing
  • 💬 FAQ & Troubleshooting
Powered by GitBook
On this page
  • What You’ll Learn
  • 🧩 Section Overview
  • How to Add the Section
  • Adding Images
  • Section Settings
  • Layout & Display
  • Typography Settings
  • Spacing Settings
  • Section Structure Example
  • Need Help?
  1. 🧩Sections and Features

Image Stream Section

PreviousImage Selector SectionNextMarquee Section

Last updated 4 days ago

What You’ll Learn

  • How to create a horizontally scrolling image gallery

  • How to control scroll speed, direction, and spacing

  • How to add captions and links to images

  • How to adjust layout and typography for desktop and mobile

🧩 Section Overview

The Image Stream section is a horizontally scrolling row of images, great for displaying campaign shots, editorial looks, or brand highlights. It adds motion to your storefront and can be set to scroll automatically.

How to Add the Section

  1. In the Shopify Theme Editor, click Add section

  2. Select Image Stream

  3. Drag the section to your preferred location on the page

Adding Images

Each image is added using a block called Image.

To add an image:

  • Click Add Block, then select Image

  • Upload or choose your image

  • (Optional) Add a Caption – this appears below the image

💡 Tip: Keep captions short for a clean layout

Section Settings

Content & Links

  • Section Title: Add a heading for the section (optional)

  • View Link URL: Add a link to a product, collection, or page

  • View Link Text: This is the button text, like "SHOP"

Colors

  • Background Color: Set the background behind the stream

  • Section Title Color: Set the heading and view link color

Layout & Display

  • Images per row on desktop: Choose how many images show across (2 to 6)

  • Image aspect ratio: Controls image shape (e.g., Portrait, Square, Landscape)

  • Height Mode:

    • Responsive: Images scale based on aspect ratio

    • Full Height: Section fills the screen height (title and buttons are hidden)

Additional options:

  • Reverse Stream Direction: Enable to scroll right-to-left

  • Hide on mobile: Hides the entire section on phones

  • Auto-scroll speed: Controls how fast images move (measured in pixels per second)

⚠️ Slower scroll speeds look smoother and are easier to follow

Typography Settings

  • Section Header Size (Desktop): Default is 16px

  • Section Header Size (Mobile): Default is 14px

  • Bold Section Title: Toggle on/off

  • Bold View Link: Toggle on/off

Spacing Settings

You can adjust spacing for both desktop and mobile.

Desktop Spacing

  • Top: 20px

  • Bottom: 20px

Mobile Spacing

  • Top: 16px

  • Bottom: 16px

Gap Between Images

  • Choose from: None, Small, Medium, or Large

💡 Tip: Use "None" for a seamless look, or add spacing to let each image breathe

Section Structure Example

The section includes multiple image blocks, each with its own image and caption.

Example:

  • Image – Look 1

  • Image – Look 2

  • Image – Look 3

  • Image – Look 4

Need Help?

  • 📧 Email us at: support@openspaces.design

  • 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website

💬 Join our community on Discord:

https://discord.gg/hcc2GvgZc6