Scrolling product links

This guide describes how to set up the Scrolling product links section.

Use this section to display scrolling links to selected products on a page.

The previous image shows a Scrolling product links section below the header on a store's home page. In the upper left, part of the Theme editor's section menu is displayed. The menu's Direction option is set to Right to left. This option sets the section's scrolling text to move from right to left.

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

Set up a Scrolling product links section

To set up a Scrolling product links section:

1. In the Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Scrolling product links section.

   Note

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

2. From the side menu, select Scrolling product links.

3. Select a setting described in the following table.

Setting name	Description
Products	Use the Products picker to select products to display as links in the section. Refer to Shopify help: Adding and updating products.
Product limit	Adjust the Product limit slider to specify the maximum number of products to display in the section. The minimum is 2 products and the maximum is 10 products.
Product media display	Use the Product media display options to specify how product media are displayed in the section. To hide media, select None. The Hover option displays media when the cursor hovers over an item in the section. The Inline option displays media beside each item's title in the section.
Links > Mobile font size scale	Adjust the Mobile font size scale slider to set a font size for the section's product links list on mobile display devices. The minimum value is -2 and the maximum is 4.
Links > Desktop font size scale	Adjust the Desktop font size scale slider to set a font size for the section's product links list on desktop display devices. The minimum value is -2 and the maximum is 9.
Links > Font	Use the Font options to set the section's link text to use the same font as Heading or Body text.
Scroll > Speed	Adjust the Speed slider between 20 and 400 to specify how quickly scrolling text moves in the section. If a user has reduced motion enabled, the scrolling text does not animate and instead displays as a static banner.
Scroll > Direction	Use the Direction options to set the section's text to scroll from Right to left or Left to right.
Scroll > Spacing	Use the Spacing options to select S (small), M (medium), L (large), or XL (extra large). This option specifies the size of the spacing between each occurrence of scrolling text.
Scroll > Type	Use the Type options to select Gap or Character. This option specifies how the spacing between each occurrence of scrolling text is displayed. The Gap option displays empty space between each occurrence. The Character option displays a specific text character between each occurrence.
Scroll > Character	Use the Character option to select ·, •, ↑, →, ↓, and more. This option specifies the text character displayed between each occurrence of scrolling text in the section. To use this option, set the Type option to Character.
Scroll > Repeat character	Adjust the Repeat character slider between 1x and 6x. This option specifies the number of text characters that are displayed between each occurrence of scrolling text in the section. To use this option, set the Type option to Character.
Scroll > Spacing between repeated characters	Use the Spacing between repeated characters options to select None, Hair, Thin, Punctuation, 4-per-em, and more. This option changes the spacing between text characters that separate each occurrence of scrolling text in the section. To use this option, set the Type option to Character.
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 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.