Collage

Featured links

1. Company XYZ documentation on the collage section
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on the banner block
4. Company XYZ documentation on the blog post block
5. Company XYZ documentation on the contact form block
6. Company XYZ documentation on the image block
7. Company XYZ documentation on the product block
8. Company XYZ documentation on the rich text block
9. Company XYZ documentation on the testimonial block
10. Company XYZ documentation on the video block
11. Company XYZ documentation on headers settings
12. Company XYZ documentation on section backgrounds settings
13. Company XYZ documentation on section padding settings
14. Company XYZ documentation on separators settings
15. Company XYZ documentation on visibility settings
16. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Collage to create a mixed-content two-column layout with a more editorial, bento-style feel. It is a strong choice for landing pages and storytelling layouts where you want to combine promotions, media, products, testimonials, and supporting text in one structured section. For the broader section model behind this kind of layout, see Shopify documentation on sections and blocks

The layout automatically features the first block as the large block. You can learn more about section behavior.

Core settings

The main layout controls shape how the collage flows across desktop and mobile. These settings matter most when you are mixing different block types and trying to create a clear visual hierarchy.

1. Collage style controls whether the large featured block appears first on the left or last on the right on desktop. On mobile, that same choice also determines whether the first block appears at the top or bottom.
2. Stack on mobile switches the section to a single-column mobile layout. Use this when side-by-side blocks feel too compressed or when you want a simpler reading flow.
3. Stretch content vertically makes blocks in the same row match the height of the tallest block. This usually creates a cleaner grid when you combine text, cards, and media with different natural heights.

The first block is always the large block. If a specific item needs to lead the layout, place that block first.

Note

Block width controls do not change column width in this section. Each block stretches to fill its column, so use block order, aspect ratio, and content length to shape the layout instead.

Color settings

This group lets you override the section’s text, subheading, and icon colors without changing your broader theme palette. It is most useful when you add a custom section background or want this section to feel visually distinct.

Check contrast carefully if you use an image, gradient, or video behind the content. A quick color override here is often enough to keep headings and supporting text readable.

Supported block types

1. Banner
2. Blog post
3. Contact form
4. Image
5. Product
6. Rich text
7. Testimonial
8. Video

Banner

Use Banner for promotions, campaign messaging, or a visually rich feature tile. It supports its own background media, foreground content, optional foreground image, and link behavior, making it one of the most flexible blocks in this section. Learn more about the Banner block.

1. Use Banner first when you want a hero-style lead block.
2. Keep copy concise if you want the block to hold a more controlled shape.
3. Full-block link styles work best when the banner has one clear destination.

Blog post

Use Blog post to feature editorial content inside the collage. It pulls in a selected article and lets you adjust the card presentation so it fits the rest of the layout. Learn more about the Blog post block.

1. Use compact text settings when the article is a supporting item rather than the main focus.
2. Banner-style cards give the featured image more visual weight.

Contact form

Use Contact form when you want a response-focused block inside the collage, such as inquiries, support prompts, or lead capture. It includes its own header, button, background, and color controls. Learn more about the Contact form block.

1. Keep the introductory copy short so the form stays easy to scan.
2. A custom block background can help the form stand apart from nearby content blocks.

Image

Use Image for photography, brand assets, supporting visuals, or linked visual tiles. It includes aspect ratio, caption, overlay, alignment, and color controls for flexible presentation. Learn more about the Image block.

1. Choose aspect ratios carefully when placing image blocks beside text-heavy content.
2. Use captions only when the image needs context or added meaning.

Product

Use Product to add curated merchandise into the collage without switching to a dedicated product section. It works well for story-driven merchandising, gift guides, and campaign pages. Learn more about the Product block.

1. Keep product card styles consistent across multiple product blocks for a cleaner layout.
2. Only enable variant selectors when that extra interaction clearly adds value.

Rich text

Use Rich text for supporting copy, storytelling, instructions, or small callouts between more visual blocks. It gives you a compact text-based tile with optional icon, heading, body copy, button, background, and color controls. Learn more about the Rich text block.

1. Shorter copy usually works better than long paragraphs in this layout.
2. Background and color settings can help the block feel like a designed card instead of plain text.

Testimonial

Use Testimonial to add social proof alongside products, media, or promotional content. You can include a quote, rating, source, related product, and optional imagery or video. Learn more about the Testimonial block.

1. Short quotes are easier to balance inside the grid.
2. Linking the testimonial to a product helps it support both trust and conversion.

Video

Use Video for embedded or hosted video content inside the collage. It supports aspect ratio, poster image, autoplay behavior, overlays, captions, and alignment options. Learn more about the Video block.

1. Add a poster image when you want a cleaner first impression before playback starts.
2. Review autoplay and overlay choices together so playback behavior feels intentional.

Tip

The most balanced collage usually combines one dominant visual block with simpler supporting blocks, such as a lead Banner paired with Product, Rich text, or Image blocks.

Standard section settings

Header settings

Use Header settings to add an optional caption, heading, supporting text, icon, and button above the collage. This helps frame the content and gives the section clearer structure on longer pages.

Keep the heading concise so it introduces the section without competing with the featured blocks. If you add a section button, treat it as the main section-level action.

Section background settings

Use Section background settings to add a color, gradient, image, or video behind the entire section. This is useful when you want the collage to stand apart from surrounding content.

Background media can make the section feel more dramatic, but it can also affect readability and perceived spacing. Use overlays when you need stronger contrast without losing the background treatment.

Padding settings

Use Padding settings to control the space above and below the collage. Small changes here can make the section feel either tighter and more utility-focused or more spacious and premium.

Larger padding often works best when the section has its own background. Tighter padding can help when this section sits in a dense page flow.

Separator settings

Use Separator settings to add a line at the top or bottom of the section. This gives the collage a clearer boundary without changing its spacing or background.

A subtle separator is usually enough. If the separator color is transparent, the section uses the default border color from your theme settings.

Visibility settings

Use Visibility settings to show or hide the section by device size. This is helpful when you want a different content arrangement on smaller screens.

Use device-specific visibility carefully so you do not create unnecessary duplicate content. If you build separate versions, keep the messaging and links aligned.

Width settings

Use Width settings to control both the content width and the outer section width. In Collage, width changes can strongly affect how open, dense, or editorial the layout feels.

Content width is the main layout constraint, while section width matters most when you use a background treatment. Preview width changes on the live storefront when possible, since the editor can make spacing feel more constrained than it will on the page.

Usage notes

1. Lead with intent. Put your most important or most visual block first, because it will always become the large feature block.
2. Plan the mobile order. If mobile flow matters, test both collage style options and decide whether stacking gives you a cleaner top-to-bottom story.
3. Balance heavy and light blocks. Mix text-heavy blocks with simpler visual blocks so one side of the layout does not feel overcrowded.
4. Use equal heights selectively. Vertical stretching helps create a neater grid, but review it if one block contains much more content than the others.
5. Check contrast after styling. Whenever you add custom backgrounds or color overrides, recheck readability across both desktop and mobile.
6. Review both breakpoints. Desktop and mobile controls can produce different layout, alignment, visibility, or media behavior, so confirm the section on both viewport sizes.
7. Treat forms and products as interactive. Contact and product blocks can change based on customer input, validation states, selected variants, quantity, and availability, so verify empty, success, and error states as well as commerce actions.
8. Use media overrides sparingly. Blank or default-style values usually preserve fallback styling, while explicit colors, gradients, or separate desktop and mobile media choices make the local area behave more independently and can affect cropping, loading, and readability.