The Scrolling banner and text section creates a scroll-driven storytelling layout using images or videos alongside headings, descriptions, and buttons. On desktop, the media area stays in place while the content changes as customers scroll through the blocks. On mobile, the blocks appear one after another in a vertical layout.
STEPS:
Add the Scrolling banner and text section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the template where you want to display the section.
- Click Add section and select Scrolling banner and text.
- Click Save.
Add image or video blocks
- Open the Scrolling banner and text section in the Theme Editor.
- Click Add block and choose Image or Video.
- For an Image block, select an image.
- For a Video block, select a Shopify-hosted video, or enter a YouTube/Vimeo URL. You can also select a Cover image.
- Add and arrange additional blocks in the order you want customers to see them.
- Click Save.
Each block represents one stage in the scrolling story, with its own media and content.
Configure text and buttons in each block
- Open an Image or Video block.
- Choose a built-in Icon or upload a Custom icon, then adjust its width if needed.
- Enter a Subheading, Heading, and Description.
- Adjust Heading size and Heading tag.
- To display a button, enter its Button label and Button link.
- Choose the Button style and optionally enable Open link in new tab or Show button icon.
- Click Save.
Leave Button label empty if you do not want a button in that block.
Customize the highlighted text
- Open the block you want to edit.
- In the heading or description editor, format the words you want to highlight in italics.
- Choose a Highlighted text style.
- If you select the hand-drawn scribble style, choose the Highlighted scribble design.
- Optionally enable Enable reveal effect for the heading.
- Click Save.
Configure the desktop and mobile layouts
- Open the Scrolling banner and text section settings.
- Adjust Desktop height and Desktop image width.
- Set Desktop image placement to Image first or Image second.
- Choose Desktop content alignment and Desktop content position.
- Under Mobile layout, adjust Mobile height and Mobile content alignment.
- Click Save.
On desktop, the media and text appear side by side with the scrolling transition. On mobile, the media and text for each block are stacked vertically instead of using the desktop sticky layout.
Customize colors and section spacing
- Open the Scrolling banner and text section settings.
- Under Colors, configure Text, Background, Background gradient, Secondary background, Secondary background gradient, Highlight, and the button colors as needed.
- Under Section, adjust Top padding and Bottom padding.
- Optionally enable Show section divider, Make section full width, or Make section rounded.
- Click Save.
Scrolling banner behavior
- Each Image or Video block has its own media and corresponding content.
- On desktop, scrolling transitions between the blocks while the media area remains sticky.
- On mobile, blocks are displayed in a regular vertical sequence.
- Video playback differs by device: desktop videos autoplay muted; mobile videos use a play button.
Troubleshooting
- Section is not visible: Confirm it has been added to the intended template and is not hidden in the Theme Editor.
- Images do not change when scrolling: Add multiple Image or Video blocks and test the storefront at desktop width.
- Mobile does not show the desktop animation: This is expected; mobile uses a stacked layout.
- Video does not appear: Check the Shopify video selection or YouTube/Vimeo URL and, if applicable, add a cover image.
- Highlighted text is not appearing: Apply italic formatting to the intended words and select a Highlighted text style.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please contact our support team through the Ticket System for assistance within 8 hours.
Share:
How to Set Up the Video with Text Section in Concept
How to Set Up the FAQ Section in Concept