The Scrolling Text section lets you display moving text and images across the page. It is useful for promotional messages, brand statements, product highlights, trust badges, or repeated visual elements.
You can add text blocks, image blocks, control the scrolling direction and speed, and style the section with custom colors, highlights, spacing, divider, and rounded corners.
How to Set Up the Scrolling Text Section in Concept
Steps:
Add the Scrolling Text section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
Open the template where you want to display the scrolling text.
-
Click Add section.
-
Select Scrolling text.
-
Drag the section to the position where you want it to appear.
-
Click Save.
After adding the section, you can add text or image blocks and adjust the scrolling behavior.
Configure the scrolling behavior
-
Open the Scrolling text section in the theme editor.
-
Use Direction to choose whether the content scrolls to the left or to the right.
-
Use Speed to adjust how fast the content moves.
-
Use Horizontal spacing to control the gap between each text or image item.
-
Enable Twin scrolling if you want to display two scrolling rows moving in opposite directions.
-
Enable Parallax if you want the scrolling movement to react with a parallax effect while customers scroll the page.
-
Click Save after adjusting the settings.
Add a Text block
-
Open the Scrolling text section.
-
Click Add block.
-
Select Text.
-
Enter the text you want to display.
-
Adjust Text size to control how large the scrolling text appears.
-
Choose the Text font style:
- Body
- Heading
- Subtitle
-
Use Highlighted text if you want to apply a highlight style to part or all of the text.
-
If you select Scribble, choose the scribble style you want to use.
-
Click Save.
Add an Image block
-
Open the Scrolling text section.
-
Click Add block.
-
Select Image.
-
Upload or select an image.
-
Adjust Image height to control the displayed image size.
-
Add a Link if you want the image to be clickable.
-
Add Accessibility text when a link is used, so the image link has a clear label for screen readers.
-
Enable Open this link in a new window if the link should open in a new browser tab.
-
Click Save.
Arrange text and image items
-
Add multiple Text and Image blocks to create the scrolling content.
-
Drag blocks up or down in the theme editor to change the order.
-
Mix text and image blocks if you want to create a more visual scrolling row.
-
Use the section Horizontal spacing setting to increase or reduce the space between items.
-
Click the eye icon beside a block if you want to temporarily hide it.
Customize colors and section style
-
Use Text color to change the color of the scrolling text.
-
Use Background color or Background gradient to style the section background.
-
Use Highlight color or Highlight gradient to control highlighted text styles.
-
Adjust Top padding and Bottom padding to control the vertical spacing around the section.
-
Enable Show section divider if you want a divider line around the section.
-
Enable Make section rounded if you want rounded section corners.
-
Click Save.
Notes
-
The section only displays when at least one block is added.
-
Text blocks and image blocks can be mixed in the same scrolling row.
-
If Twin scrolling is enabled, the same content is displayed in two rows with opposite directions.
-
If the first and last blocks are both text blocks, the theme adds a dot-style separator between the repeated text items.
-
The Image block can be used without a link, or it can be linked to another page.
-
The section is not available in the custom overlay group.
Troubleshooting
-
If the section does not appear, make sure at least one Text or Image block has been added.
-
If the scrolling movement is too fast or too slow, adjust the Speed setting.
-
If items are too close together, increase the Horizontal spacing setting.
-
If an image appears too large or too small, adjust the Image height setting inside the Image block.
-
If highlighted text does not appear as expected, make sure the text you want to highlight has been formatted with italic styling in the text editor.
-
If a linked image is not accessible, add clear text in the Accessibility text field.
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.
بانٹیں:
How to Set Up the Shop the Feed Section in Concept
How to Set Up the Shop the Look Section in Concept