The Collage section lets you combine images and videos in a customizable grid. Each media block can span multiple columns and rows, and you can add text overlays and links to guide customers to other pages.
Steps:
Add the Collage section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page template where you want to use the section.
- Click Add section and select Collage.
- Move the section to your preferred position and click Save.
Configure the grid layout
- Open the Collage section settings.
- Set Grid columns to 10 columns or 12 columns for the desktop layout.
- Adjust Desktop row height and Mobile row height to control the height of each grid row.
- Use the Column span and Row span settings in individual blocks to determine how much space they occupy.
- Click Save, then preview the result on desktop and mobile.
Tip: A block's column span cannot exceed the selected grid width. Adjust both the grid settings and individual block spans to create a balanced layout.
Add Image blocks
- Under Collage, click Add block > Image.
- Select the Image to display.
- Set Column span and Row span to resize the block within the grid.
- Add an optional Subheading, Heading, and Link.
- Use Invert subheading and heading if you want to change their order.
- Adjust Desktop content position and Desktop content alignment.
- Under Mobile layout, optionally add a Mobile image and set the mobile content position and alignment.
- Click Save.
Add Video blocks
- Under Collage, click Add block > Video.
- Adjust Column span and Row span.
- Choose a Shopify-hosted Video, or use URL to embed a YouTube or Vimeo video.
- Add a Cover image and Video alt text where appropriate.
- Enable Video autoplay or Video looping if needed.
- Under Mobile layout, optionally select a Mobile video, Mobile video URL, and Mobile cover image.
- Add optional Subheading, Heading, and Link, then adjust the desktop/mobile text position and alignment.
- Click Save.
Tip: When autoplay is enabled, the theme requests muted playback. Autoplay can still depend on browser settings.
Customize overlays and hover effects
- Open an Image or Video block.
- Under Highlighted text, choose a heading highlight style, such as Text color, Marker, Underline, or Hand-drawn scribble.
- Under Colors, adjust Text, Highlight, Overlay, and Overlay opacity for readable text over the media.
- For Image blocks, use Hover effect > Image to select an alternate image on hover.
- Optionally adjust the image block's hover text, highlight, overlay, and overlay opacity colors.
- Click Save.
Note: The image-hover settings apply to Image blocks, not Video blocks. Hover effects are most relevant on devices with a mouse or trackpad.
Customize the section heading and appearance
- In the Collage section settings, set the optional Heading, Subheading, and Description.
- Adjust Heading size, Heading alignment, and Heading tag.
- To display a button, enter a Button label and Button link.
- Use the section's Highlighted text and Colors settings to style the heading area.
- Under Section, adjust Top padding and Bottom padding.
- Optionally enable Show section divider, Make section full width, Make section rounded, or Enable parallax effect.
- Click Save.
Collage behavior
- The section supports Image and Video blocks in the same grid.
- Each block has independent Column span and Row span settings.
- Desktop and mobile row heights are configurable separately.
- Image and video blocks can contain overlay text and an optional destination link.
- Image blocks support alternate images and colors on hover.
- Video blocks support Shopify-hosted videos, YouTube/Vimeo URLs, optional mobile videos, autoplay, and looping.
Troubleshooting
- Grid items are not sized as expected: Check Grid columns, Desktop row height, and each block's Column span and Row span.
- An image shows a placeholder: Select an image in the relevant Image block.
- Text is difficult to read: Increase the block's Overlay opacity or change its Text color.
- Mobile content is cropped: Provide a dedicated Mobile image or Mobile cover image, and review the mobile layout preview.
- A video does not autoplay: Check Enable video autoplay and the browser's autoplay restrictions.
- An item does not link anywhere: Verify that the block's Link has been set.
- The image does not change on hover: Confirm that the Image block has a Hover effect > Image selected and test on a mouse-enabled device.
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.
بانٹیں:
How to Set Up the Logo List Section in Concept
How to Set Up the Image with Text Section in Concept