The Portfolio on scroll section displays a collection of profile cards in a two-column, scrollable collage. Each card features an image and heading. Customers can click the + button to open a full-screen drawer with more information.
The section also supports a sticky heading area and an optional parallax effect as visitors scroll.
Steps:
Add the Portfolio on scroll section
- From your Shopify admin, open Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page template where you want to display the section.
- Click Add section and select Portfolio on scroll.
- Position the section where you want it, then click Save.
The default preset contains four Profile blocks. You can edit, remove, reorder, or add more blocks.
Add and configure Profile blocks
- Open the Portfolio on scroll section in the Theme Editor.
- Select a Profile block or click Add block > Profile.
- Upload an Image for desktop.
- Upload an optional Mobile image for smaller screens.
- Enter the Heading that appears on the profile card.
- Add Text to display inside the profile's full-screen drawer.
- Under the block's Colors, adjust Text and Background colors.
- Repeat for the other profiles, then click Save.
On the storefront, visitors can click the + button on a profile card to read its full description.
Configure the collage images and scroll effect
- Open the main Portfolio on scroll section settings.
- Select Image ratio for desktop cards.
- Select Mobile image ratio for mobile cards.
- Enable Enable parallax effect if you want the columns to move at different speeds as visitors scroll.
- Click Save.
On desktop, the profile cards are arranged in two columns. On smaller screens, they appear in a single column.
Configure the section heading and button
- In the Heading settings, enter a Heading, Subheading, and optional Description.
- Set Heading size, Heading alignment, and Heading tag as needed.
- Enter a Button label and choose a Button link if you want an additional link in the heading area.
- Optionally enable Open link in new tab or Show button icon.
- Under Highlighted text, choose a style and configure Highlighted scribble or Enable reveal effect when available.
- Click Save.
The heading area remains sticky while scrolling on larger screens. If you leave the heading content empty, the collage expands into the available content area.
Customize colors and section spacing
- Under Colors, adjust the section Text, Background, and optional Background gradient.
- Customize the Highlight and button colors if you use highlighted text or a button.
- Under Section, adjust Top padding and Bottom padding.
- Enable Show section divider, Make section full width, or Make section rounded, if needed.
- Click Save.
Preview the Portfolio on scroll section
- Open the storefront preview and scroll through the section.
- Check that the profile images and headings appear in the correct order.
- Click a profile's + button to verify that its text opens in the full-screen drawer.
- Close the drawer and test the other profiles.
- Preview the page on mobile to check the mobile images and layout.
- Check the parallax effect if it is enabled.
Portfolio on scroll vs. Portfolio
- Portfolio on scroll presents profile cards as a two-column scrolling collage, with an optional parallax effect and a sticky heading on desktop.
- Portfolio is a separate section with its own grid/carousel presentation settings.
- Both sections use Profile blocks that open detailed content in a drawer.
Troubleshooting
- The section does not appear: Confirm it is added to the correct page template and is not hidden.
- A profile is missing: Check that the Profile block is enabled and has its content configured.
- The mobile image does not appear: Upload an image to Mobile image; otherwise, the desktop image is used.
- The + button opens an empty drawer: Add content to the Profile block's Text field.
- The parallax effect is not visible: Check Enable parallax effect and preview the storefront while scrolling.
- The layout differs from the standard Portfolio section: Verify that you added Portfolio on scroll, not Portfolio.
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.
Share:
How to Set Up the Number Counter Section in Concept
How to Set Up the Timeline Section in Concept