Scrolling text with icons

This guide describes how to set up the Scrolling text with icons section.

Use the section to display moving or scrolling icons with corresponding text on a store page.

The previous image shows an example store's home page. In the upper left, part of the Theme editor's Scrolling text with icons section menu is displayed. The menu's Icon style > Show border option is turned off. Use this option to show or hide border lines around the section's icons. For example, in the previous image, the section's icons are displayed without borders.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Configure the Scrolling text with icons section

To configure your Scrolling text with icons section:

1. In the Theme editor, at the top of the page, use the dropdown to select a page that contains a Scrolling text with icons section.

   Note

   The section can be added to any page, except Gift card and Customer pages. To add the section to the current page, select Add section > Scrolling text with icons. Refer to Shopify help: Add a section.

2. From the side menu, select Scrolling text with icons.

3. Select a setting described in the following table.

Setting name	Description
Repeat text	Use the Repeat text option to turn on or off repeating the section's scrolling text automatically. With this option enabled, repeating the section's scrolling text creates an infinity effect. Note that, if a user's device is set to reduce motion, the scrolling text will display as a static banner as a fallback.
Link	In the Link field, enter a URL or select a store page for the section's text to use as a link. The link opens when a visitor selects the section's text.
Font	Use the Font option to set the section's text to use the same font as Heading or Body text.
Gap between items	Use the Gap between items option to display a Small, Medium, or Large amount of empty space between the section's icons.
Speed	Adjust the Speed slider between 10 and 400 to specify a speed for scrolling text and icons in the section.
Direction	Use the Direction option to set scrolling text and icons in the section to move Right to left or Left to right.
Icon style > Thickness	Adjust the Thickness slider between 1 and 2 to specify a line thickness for the section's icons.
Icon style > Width	Use the Width option to set the width of the section's icons to Small, Medium, or Large.
Icon style > Background color	Use the Background color option to select Transparent, Accent 1, Accent 2, Card, or Text. Use this option to specify a background color for the section's icons. The color you select is applied from the section's current color scheme. Alternatively, to apply a transparent background to the section's icons, select Transparent.
Icon style > Show border	Use the Show border option to show or hide border lines around the section's icons.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Color > Use gradient for background	Use the Use gradient for background option to turn on or off using a gradient as the section's background.
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 displayed beside the setting in the 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.

Configure a block within a Scrolling text with icons section

To configure a block within your Scrolling text with icons section:

1. In the Theme editor, at the top of the page, use the dropdown to select a page that contains a Scrolling text with icons section.

2. From the side menu, expand the Scrolling text with icons section menu.

3. To configure an existing block, select the block from the side menu.

   To add a new block, select Add text, choose a block to add, and then select the block you added.

   Note

   Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.

4. Apply a block setting described in the following table.

Block name	Block description	Block setting(s)
Text	Displays text, side-by-side, with an icon inside the section.	In the Text field, enter text to display beside the block's icon. Use the Icon option to select a graphical icon to display in the block. There are more than 50 icons, including: Box, Check mark, Like, Map pin, and Star. For no icon, select None. Select Remove block to delete the block from the section.