This guide explains how to create a scrolling background text effect on collection pages in the Concept theme.
The feature uses a collection metafield named theme.marquee. After you add a value to this metafield, the text can appear as a large scrolling background text behind the collection title.
How to Create Scrolling Background Text on Collection Pages
STEPS:
Step 1: Create the Marquee collection metafield
First, create a collection metafield named Marquee. This metafield stores the scrolling text for each collection.
From your Shopify admin, go to Settings > Metafields and metaobjects.
Open Collections, then click Add definition.
Set up the metafield with the following values:
| Field | Value |
|---|---|
| Name | Marquee |
| Namespace and key | theme.marquee |
| Type | Single line text |
| Value type | One value |
After you enter the metafield name, Shopify may automatically recommend a Namespace and key.
Click the suggested Namespace and key value if you need to edit it manually, then change it to:
theme.marquee
For the metafield type, click Select type, choose Single line text, then select One value.
Click Save to create the metafield definition.
After saving, the Marquee metafield will be available for your collections.
You can also find it in the list of collection metafields.
Step 2: Add marquee text to a collection
After creating the metafield, add text to the Marquee metafield on the collection where you want the scrolling background text to appear.
In this example, we use the Wireless Headphones collection.
From your Shopify admin, go to Products > Collections.
Open the collection you want to edit.
Scroll down to the Metafields area, then click View all.
Open the Marquee metafield.
Enter the text you want to display.
Example:
Discover the perfect headphones for every occasion
Click Save to finish.
The entered text will be used as the scrolling background text for that collection page.
Step 3: Check the Collection banner setup
The marquee text is displayed in the Collection banner section, behind the collection title.
In the theme editor, open the collection template where you want to show this effect.
Go to Online Store > Themes, then click Customize on your Concept theme.
Open a collection template, such as Default collection.
Check the Collection banner section.
Make sure the section includes the Title block, because the marquee text is rendered together with the collection title.
Also make sure the banner is not showing a collection image or custom banner image. In Concept, the scrolling background text appears only when the banner title is displayed without a banner image.
Recommended setup:
| Setting | Recommended value |
|---|---|
| Section | Collection banner |
| Required block | Title |
| Collection metafield | theme.marquee |
| Banner image | Disabled or empty |
Step 4: Preview the scrolling background text
After completing the setup, open the collection page on your storefront.
The text entered in the Marquee metafield should display as scrolling background text around the collection title area.
Check the following:
- The collection has a value in the Marquee metafield.
- The metafield namespace and key is exactly
theme.marquee. - The collection template includes the Collection banner section.
- The Collection banner section includes the Title block.
- The collection banner is not displaying a banner image.
- The collection page has been refreshed after saving changes.
Notes and limitations
Please note the following behavior:
- This feature uses a collection metafield, so each collection can have different scrolling text.
- The required metafield namespace and key is
theme.marquee. - The metafield type should be Single line text with One value.
- The marquee text appears in the collection banner title area.
- The effect is not displayed if the collection banner has a desktop image/background image.
- The text should be short enough to remain readable when repeated as scrolling text.
- This feature does not require an additional section setting after the metafield is created and filled in.
Troubleshooting
If the scrolling background text does not appear, check the following:
- Make sure the collection metafield was created under Collections, not Products.
- Make sure the namespace and key is exactly
theme.marquee. - Make sure the metafield type is Single line text and One value.
- Make sure the collection has text entered in the Marquee metafield.
- Make sure the collection page uses a template that includes the Collection banner section.
- Make sure the Collection banner section includes the Title block.
- Make sure the collection banner is not displaying a collection image or custom banner image.
- Save the collection and refresh the storefront page.
- Clear your browser cache or test in an incognito/private window.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Organize and prioritize: Highlighting for your text
Troubleshooting: Video banner is not working on mobile