About Content Collage Section
The Content Collage section is a versatile tool for creating dynamic, multi-element layouts on your website. It enables you to combine different types of content blocks, ideal for:
Product showcases
Mixed media presentations
Brand storytelling
Campaign layouts
Custom landing pages
The section stands out for its ability to display various content types including video headings, text headings, image headings, products, and collections while maintaining full customization control for both desktop and mobile displays.
How to Access Content Collage Section
From any page in your Normcore Admin Dashboard, click the "Add section" button, search for "Content Collage" and select it.
After adding the Content Collage section, customize its appearance and functionality using the available settings.
Basic Components
Each Content Collage section includes five default components:
Video heading
Text heading
Image heading
Product
Collection
You can choose to add and arrange these components based on your layout needs by using the Content collage dropdown menu.
General
Within General settings, you can:
Change color scheme with Scheme 1 option
Enable fullwidth content
Show layout grid (Enables a grid system to help you set up the layout accurately. This only appears in the theme editor)
Control Layouts
In Normcore, configure two types of screen resolutions:
Desktop layout: Customize row height (up to 300 px)
Mobile layout: Adjust row height separately (up to 150 px) for optimal mobile viewing
How to Configure Content Collage Section's blocks
Video Heading Block
In the Video heading block, you can configure:
Text Settings
Customize heading text
Enable <h1> tag (Use <h1> tag for this heading. One per page recommended)
Select heading size (Small, Medium, Large)
Add description with rich text formatting options
Highlight your new collection or share content related to this video
Background Video
Choose video source (Shopify-hosted)
Add external video (Accepts YouTube or Vimeo links)
Select Shopify-hosted video
Overlay Settings
Adjust overlay opacity (up to 30%)
Customize mask overlay color
Set custom content overlay color
Text Heading Block
The Text heading block includes these customization options:
Text Settings
Add text heading
Enable <h1> tag (One per page recommended)
Choose heading size (Small, Medium, Large)
Add description for your collection, product, or other content
Image Heading Block
Configure the Image heading block with:
Text Settings
Set image heading text
Enable <h1> tag (One per page recommended)
Select heading size (Small options available)
Add description to highlight your new collection or share content related to this image
Image Settings
Upload background image or explore free images
Add mobile background image separately
Adjust overlay opacity (30%)
Customize mask overlay color
Set custom content overlay color
Product Block
The Product block offers these settings:
General Settings
Select product
Show/hide product title
Choose product title size (Small)
Toggle price display
Set custom color
Show variant swatches
Limit variant options (up to 5 variants)
Add custom background image (First product image is used if no custom background is selected)
Collection Block
For Collection blocks, configure:
General Settings
Select collection
Show/hide collection title
Choose collection title size (Small)
Show collection quantity
Select quantity style (Title supplement)
Add custom background image (Collection image is used if no custom background is selected)
Layout Settings for All Blocks
Each block type includes these layout controls:
Desktop Layout
Content position
Content alignment
Column selection
Row selection
Mobile Layout
Recommend using 2 columns for cards with long heading
Content position
Content alignment
Column selection
Row selection
Button Options For All Blocks
For each block, you can customize button options:
Add button label
Choose button style
Add link
Customize button colors
Common Cases and FAQs
1. How to improve SEO with Content Collage headings?
In Normcore theme, you can enhance SEO by using the <h1> tag option available in video, text, and image heading blocks. Remember that only one <h1> tag per page is recommended for optimal SEO performance. You can enable this feature in the block settings under the heading options.
2. What's the best way to layout content for mobile devices?
For optimal mobile display:
Use 2 columns for cards with long headings to ensure better readability
Set separate content positions and alignments for mobile layout
Adjust row height specifically for mobile viewing
Consider using the mobile background image option for image heading blocks
3. How can I customize the appearance of product variants?
When displaying products in your Content Collage:
Enable "Show variant swatches" to display product options
Use the variant limit option to control how many variants appear (up to 5)
When the limit is reached, excess variants will be shown as a number
Set to 0 to display all variants
4. How do I make the entire block clickable?
To make an entire block clickable:
Add a link in the Link field under Button settings
Leave the button label empty
The link will automatically apply to the whole block
5. How do I optimize video content in the Content Collage?
For the best video presentation:
Choose between Shopify-hosted videos or external sources (YouTube/Vimeo)
Adjust overlay opacity to ensure text readability (recommended 30%)
Position content strategically using the content position options
Customize overlay colors to match your brand and improve visibility
6. What's the best way to display collections?
To effectively showcase collections:
Enable collection title and adjust its size for visibility
Use the collection quantity display to show available products
Choose between "Title supplement" style for quantity display
Add a custom background image or use the default collection image
Position content using the desktop and mobile layout options