Appearance
Image with scrolling text
This guide describes the Image with scrolling text section.
Use the section to display an image overlaid with moving/scrolling text on a store page.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.
Configure the Image with scrolling text section
To configure your Image with scrolling text section:
In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains an Image with scrolling text section.
Note
The section can be added to any page, except Checkout, Gift card and Customer pages. To add the section to the current page, select Add section > Image with scrolling text. Refer to Shopify help: Add a section.
From the side menu, select Image with scrolling text.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Image | Use the Image picker to select an image to display inside the section. A landscape-oriented, .JPG format, image of at least 3600 × 1600 pixels is recommended. |
| Mobile image | Use the Mobile image picker to select an image to display inside the section on mobile display devices. A portrait-oriented, .JPG format, image of at least 1600 × 2400 pixels is recommended. |
| Desktop height | Use the Desktop height option to select Natural, Full screen, 3/4 screen, 2/3 screen, 1/2 screen, and more. This setting specifies the height of the section's image area on desktop display devices. |
| Mobile height | Use the Mobile height option to select Natural, Full screen, 3/4 screen, 2/3 screen, 1/2 screen, and more. This setting specifies the height of the section's image area on mobile display devices. |
| Content > Text | In the Text field, enter a single line of text to display as body text inside the section. Format the text and add links using the inline text editor. |
| Content > Link | In the Link field, enter an external URL or select a store page. The link is applied to the section's scrolling text. |
| Content > Mobile font size scale | Adjust the Mobile font size scale slider to set a font size for the section's text on mobile display devices. The minimum value is -2 and the maximum is 4. |
| Content > Desktop font size scale | Adjust the Desktop font size scale slider to set a font size for the section's text on desktop display devices. The minimum value is -2 and the maximum is 9. |
| Content > Font | Use the Font option to apply the Heading or Body font to the section's text. |
| Content > Position | Use the Position option to position the section's text in the Top, Center, or Bottom. |
| Scroll > Speed | Adjust the Speed slider between 20 and 400 to specify how quickly scrolling content moves inside the section. |
| Scroll > Direction | Use the Direction option to set the section's text to scroll from Right to left or Left to right. |
| Scroll > Repeat text | Set the Repeat text option to on or off. With this setting enabled, the section's text automatically repeats, creating an endless scrolling effect. |
| Repeat text separator > Spacing | Use the Spacing option to select S, M, L, or XL. This setting specifies the size of the spacing between each occurrence of repeated text. |
| Repeat text separator > Type | Use the Type option to select Gap, Character, or Button. This option specifies how the spacing between each occurrence of repeated text is displayed. The Gap option displays empty space between each occurrence. The Character option displays a specific text character between each occurrence. The Button option displays a button between each occurrence. |
| Repeat text separator > Character | Use the Character option to select ·, •, ↑, →, ↓, and more. This setting specifies the text character that is displayed between each occurrence of repeated text inside the section. To use this option, set the Type option to Character. |
| Repeat text separator > Repeat character | Adjust the Repeat character slider between 1x and 6x. This setting specifies the number of text characters that are displayed between each occurrence of repeated text inside the section. To use this option, set the Type option to Character. |
| Repeat text separator > Spacing between repeated characters | Use the Spacing between repeated characters option to select None, Hair, Thin, Punctuation, 4-per-em, and more. This setting changes the spacing used between the text characters that separate each occurrence of repeated text inside the section. To use this option, set the Type option to Character. |
| Repeat text separator > Button label | In the Button label field, enter a single line of text to use as a label for the button that separates each occurrence of repeated text inside the section. To use this option, set the Type option to Button. |
| Repeat text separator > Button style | Use the Button style option to apply a Primary or Secondary button style to the button that separates each occurrence of repeated text inside the section. To use this option, set the Type option to Button. |
| HTML tag > HTML tag | Use the HTML tag option to select None, H1, H2 or H3. This option allows you to set the appropriate heading tag when you're using scrolling text for a page heading. |
| Color > Color scheme | Use the Color scheme picker to select a color scheme for the section. Refer to Colors. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |
Note
To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon that's displayed beside the setting in Theme editor.
To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.