The Collage on scroll section displays images and videos in a two-column collage with optional overlay text, links, and a parallax scrolling effect. It is different from the Collage section, which uses a customizable grid.
Demo usage
In the Concept 6.1.0 theme, Collage on scroll is enabled in the default product template and the Earphones, Speakers, and Sibling product templates. For example, see the Whisper Flow – Concept Demo product page, which uses the Earphones layout and the heading “Tailored Fit for Every Unique Ear.” The section also exists in the Accessories product template but is disabled there.
Steps:
Add the Collage on scroll section
- In Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
- Open the page or product template you want to edit.
- Click Add section and choose Collage on scroll.
- Move the section to your preferred position and click Save.
Add Image blocks
- Under Collage on scroll, click Add block > Image.
- Select an Image and choose its Image ratio: Adapt to image, Square, Portrait, Landscape, or Wide.
- Enter an optional Heading, Subheading, and Link.
- Use Invert subheading and heading to switch the text order.
- Adjust Desktop content position and Desktop content alignment.
- Under Mobile layout, optionally upload a Mobile image and choose its image ratio, content position, and alignment.
- Repeat to add more images, then click Save.
Add Video blocks
- Click Add block > Video.
- Choose a Shopify-hosted Video, or enter a YouTube/Vimeo URL.
- Optionally select a Cover image and enter Video alt text.
- Turn on Enable video autoplay and/or Enable video looping as needed.
- Set the Image ratio and desktop content position/alignment.
- Under Mobile layout, optionally select a Mobile video, mobile video URL, or Mobile cover image, and adjust the mobile ratio and text placement.
- Add an optional Heading, Subheading, and Link, then click Save.
Tip: Autoplay videos are muted by the theme. Browser autoplay restrictions may still apply.
Customize text overlays
- Open an Image or Video block.
- Set Heading and/or Subheading to display text over the media.
- Choose Highlighted text and, if applicable, Highlighted scribble.
- Under Colors, adjust Text, Highlight, Overlay, and Overlay opacity for readability.
- If you add a Link, visitors can click the heading; when the heading is empty, the block can act as a clickable media area.
- Click Save.
Configure the section heading and button
- Open the Collage on scroll section settings.
- Enter the optional Heading, Subheading, and Description.
- Set Heading size, Heading alignment, and Heading tag.
- Add a Button label and Button link if you want a section-level button.
- Optionally enable Open link in new tab and Show button icon.
- Customize the section heading with Highlighted text, Highlighted scribble, and Enable reveal effect when relevant.
- Click Save.
Adjust the layout, parallax, and colors
- Under Colors, adjust the section's text, background, highlight, and button colors.
- Under Section, set Top padding and Bottom padding.
- Optionally enable Show section divider, Make section full width, or Make section rounded.
- Use Enable parallax effect to turn the scrolling motion on or off.
- Preview the desktop and mobile layouts, then click Save.
Section behavior
- The section automatically distributes its Image and Video blocks across two columns on desktop; on smaller screens, the columns stack vertically.
- When Enable parallax effect is on, the two desktop columns move at different rates as the page scrolls.
- Each block has its own media ratio, desktop/mobile content positioning, overlay colors, and optional link.
- This section does not have Grid columns, Column span, or Row span settings.
Collage on scroll vs. Collage
| Section | Main difference |
|---|---|
Collage on scroll (collage.liquid) |
Automatic two-column collage with parallax scrolling. |
Collage (collage-grid.liquid) |
Customizable 10/12-column grid with per-block column and row spans. |
Troubleshooting
- No media appears: Ensure you have added Image or Video blocks and selected media in each block.
- The section is missing on a product: Verify that the section is enabled in the product's assigned template. The Accessories template in the exported demo has it disabled.
- Parallax is not visible: Confirm Enable parallax effect is enabled and preview the page on desktop while scrolling.
- Text is hard to read: Adjust the block's Overlay opacity and text color.
- Mobile media is cropped: Check the block's Mobile image/video and Mobile image ratio settings.
- A video does not autoplay: Check Enable video autoplay and browser playback restrictions.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
Difference Between the Default Blog Section and the Blog Posts Section
Flexible content section in Be Yours - Bento grid (blocks) Preset