Appearance
Text marquee
This guide describes setting up the Text marquee section.
Use the section to provide messages for visitors by using text that moves across your store's pages. In the section's text, share information about your brand, describe products and collections, share announcements, or welcome customers to your store.
The previous video shows a Text marquee section on a store's homepage. The section is displayed below the Header, at the top of the page. In the section's settings, text is added to the Text box, and then displayed inside the section. A link is added to the store's Merch collection. When a store visitor selects the section, the Merch collection page opens. An animation effect scrolls the section's text from right to left. Each repeated occurrence of the text is separated by a 10 point star shape. An animation effect rotates the star shape.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks
Set up a text marquee section
To set up a Text marquee section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Text marquee section. For example, select the Home page template.
Note
The Text marquee section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Text marquee. Refer to Shopify help: Add a section
From the side menu, select Text marquee.
Select a section setting described in the following table.
| Section setting name | Description |
|---|---|
| Text | In the Text box, enter text to display inside the section. |
| Repeat text | Select the checkbox Repeat text to turn on/ off repeating text inside the section. With this setting enabled, the text repeatedly scrolls across the section. |
| Shape between repeated text | Use the dropdown Shape between repeated text to set up a shape inside the section. The shape is displayed between each instance of repeated text. The options are None, Circle, Diamond, Triangle, Star, 10 point star, and Flower. |
| Animate shape between text | Select the checkbox Animate shape between text to turn on/ off animation effects for shapes inside the section. The shapes are displayed between each instance of repeated text. |
| Link | In the Link box, enter a URL to use as a link, inside the section, or select an existing store page to link to. With this setting enabled, the section's text is hyperlinked. |
| Link > Connect dynamic source | To display a URL from a dynamic source, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields |
| Font | Select the Font radio buttons to set the section's text to use the same font as Heading or Body text. |
| Apply heading effects | Select the checkbox Apply heading effects to turn on/off effects for text inside the section. Refer to Heading effects. |
| Mobile text size | Use the dropdown Mobile text size to set a size for (body) text inside the section. The options are: S (small), M (medium), L (large), XL (extra large), 2XL (two times extra large), 3XL (three times extra large), and 4XL (four times extra large). This setting applies to mobile display devices. Refer to Typography. |
| Desktop text size | Use the dropdown Desktop text size to set a size for (body) text inside the section. The options are: 2XL (two times extra large), 3XL (three times extra large), 4XL (four times extra large), 5XL (etc.), 6XL, 7XL, 8XL, and 9XL. This setting applies to desktop display devices. Refer to Typography. |
| Speed | Adjust the Speed slider to set a scroll speed between 10sec and 400sec (seconds) for marquee text. |
| Direction | Select the Direction radio buttons to set the section's text to move from Right to left or Left to right. |
| Color > Color scheme | Use the Color scheme dropdown to set the section's color scheme to Primary, Secondary, Tertiary or Quaternary. Refer to Colors. |
| Color > Use gradient for background | Select the checkbox Use gradient for background to turn on/ off using a gradient as the section's background. |
| Remove section | Select Remove section to delete the section from the current page. |