Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • Set up section
  • Section styles
  • Content blocks
  • Text block
  • Add text link
  • Add highlighted text
  • Image block
  • Icon block
  • Scrolling behavior
  • Gap between blocks

Was this helpful?

  1. Sections

Scrolling content

Last updated 2 months ago

Was this helpful?

Scrolling content was added in v1.2.0 — Learn how to to access new features.

The Scrolling content section displays a banner with moving text, images, and icons. Use this section for eye-catching promotions and store updates.

  • Add scrolling text, images, and icons with optional links

  • Add highlighted text

  • Control the duration and direction of scrolling

Set up section


In the editor side panel, click (+) Add section and select Scrolling content. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles


Click the section to edit general section styles for colors and spacing, available in all sections:

Content blocks


Add Text, Image, and Icon blocks to show as the scrolling content. You can add multiple blocks of the same type.

  • Under the Scrolling content section, click (+) Add block.

  • Use the drag-and-drop handles ⋮⋮ to rearrange the blocks.

  • Click a block to edit content and settings.

Text block


Add scrolling text with an optional link. Click (+) Add block to create more text blocks. Click the block to:

  • Enter text for a scrolling message

  • Make the text block a clickable link

  • Highlight part of the text with an accent color

In the section settings, you can change the font, text size, and colors of text blocks.

Add text link


In the Text link field, add a link to apply to the entire text block.

If you've added a Text link, do not apply linked text to the content. Using the rich formatting buttons to remove any linked text.

Add highlighted text


Highlight a word or words within the text block. With Enable highlighting toggled, enter pipe characters (|) on either side of the words you want to highlight. For example: |text|

Highlighted text uses the Accent color of the section's selected color scheme.

Click text block for settings

Setting
Description

Text

Enter text to show in the scrolling content.

Text link

Add a link to redirect visitors when they click the text block. If enabled, do not apply linked text to the content using the rich formatting buttons.

Enable highlighting

When enabled, wrap text with pipe characters (| text |) to apply the accent color.

Click section for settings

Setting
Description
Options

Text style

Choose the font for the text blocks, based on your theme settings.

Heading Default Body

Text size

For desktop screens, change the font size for all text blocks.

1 - 8

Mobile text size

For mobile screens, change the font size for all text blocks.

1 - 8

Image block


Add a scrolling image with optional link. Click (+) Add block to create more image blocks. Click the block to:

  • Upload a custom image

  • Change the image size

  • Make the image a clickable link.

Click image block for settings

Setting
Description
Options

Image

Select or upload an image.

We recommend a .png image with a transparent background and minimum dimensions of 50px by 50px.

Image size

Adjust the width of the image for desktop screens. Make sure the image size does not exceed the width of your uploaded image.

20 - 500 px

Mobile image size

Adjust the width of the image for mobile screens.

20 - 350 px

Image link

Add a link to redirect visitors when they click the image.

Icon block


Add a scrolling icon with an optional link. Click (+) Add block to create more icon blocks. Click the block to:

  • Select from 30+ icons or upload a custom icon image

  • Change the icon size and color

  • Make the icon a clickable link.

Click icon block for settings

Setting
Description
Options

Icon

Select from 30+ icons to show in the scrolling content.

Custom icon image

Upload your own icon to show in the scrolling content.

We recommend a .png image with a transparent background and minimum dimensions of 50px by 50px.

Icon width

Increase or decrease the width of the icon for desktop screens. Make sure the icon width does not exceed the width of your custom image.

1 - 75 px

Mobile icon width

Increase or decrease the width of the icon for mobile screens.

1 - 75 px

Icon color

Choose an icon color based on the section's color scheme.

Accent Default Text

Icon link

Add a link to redirect visitors when they click the icon.

Scrolling behavior


In the section settings, change the duration (speed) and direction of scrolling.

  • Use the Scroll duration slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.

  • Choose to scroll content towards the Left or Right.

Click section for settings

Setting
Description
Options

Scroll duration

Change the number of seconds it takes for the content to scroll from beginning to end.

5 - 45 secs

Scroll direction

Choose the direction of scrolling.

Left Default Right

Gap between blocks


After adding the blocks, you can increase or decrease the space between content blocks.

Click section for settings

Setting
Description
Options

Gap

For desktop screens, adjust the space between content blocks.

0 - 100 px

Mobile gap

For mobile screens, adjust the space between content blocks.

0 - 100 px

Editing templates will change all pages that use the same template. for different page layouts, or in the same template.

Create new templates
show dynamic page content

Section colors

Section width

Section padding

update your theme