Scrolling collection links

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

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

The previous image shows a Scrolling collection links section on a store's home page. In the upper left, part of the Theme editor's section menu is displayed. The menu's Media display option is set to Inline. This option specifies how collection media are displayed in the section. The Inline option displays media beside each collection title in the section.

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

Set up a Scrolling collection links section

To set up a Scrolling collection 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 collection 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 collection links. Refer to Shopify help: Add a section.

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

3. Select a setting described in the following table.

Setting name	Description
Collections	Use the Collections picker to choose collections to display in the section.
Media display	Use the Media display options to specify how media are displayed in the section. To hide media, select None. The Hover option displays media when a customer hovers over an item in the section. The Inline option displays media beside each item's title in the section.
Show collection products count as superscript	Use the Show collection products count as superscript option to show or hide a number beside the collection in the section. The number is displayed as superscript and indicates the number of products in the collection.
Links > Mobile font size scale	Adjust the Mobile font size scale slider to set a font size for the section's collection links list text 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 collection links list text 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.